Adds option sliderTagName to allow for specifiying HTML element of the slide wrapper

README.md

@@ -138,6 +138,9 @@ var flky = new Flickity( '.gallery', {
   // sets the height of gallery
   // disable if gallery already has height set with CSS
 
+  sliderTagName: 'div',
+  // sets the HTML element tagname of the slider wrapper
+
   watchCSS: false,
   // watches the content of :after of the element
   // activates if #element:after { content: 'flickity' }

dist/flickity.pkgd.js

@@ -531,7 +531,7 @@ return getSize;
 }));
 
 /**
- * Fizzy UI utils v2.0.5
+ * Fizzy UI utils v2.0.7
  * MIT license
  */
 
@@ -586,23 +586,27 @@ utils.modulo = function( num, div ) {
 
 // ----- makeArray ----- //
 
+var arraySlice = Array.prototype.slice;
+
 // turn element or nodeList into an array
 utils.makeArray = function( obj ) {
-  var ary = [];
   if ( Array.isArray( obj ) ) {
     // use object if already an array
-    ary = obj;
-  } else if ( obj && typeof obj == 'object' &&
-    typeof obj.length == 'number' ) {
+    return obj;
+  }
+  // return empty array if undefined or null. #6
+  if ( obj === null || obj === undefined ) {
+    return [];
+  }
+
+  var isArrayLike = typeof obj == 'object' && typeof obj.length == 'number';
+  if ( isArrayLike ) {
     // convert nodeList to array
-    for ( var i=0; i < obj.length; i++ ) {
-      ary.push( obj[i] );
-    }
-  } else {
-    // array of single index
-    ary.push( obj );
+    return arraySlice.call( obj );
   }
-  return ary;
+
+  // array of single index
+  return [ obj ];
 };
 
 // ----- removeFrom ----- //
@@ -681,22 +685,21 @@ utils.filterFindElements = function( elems, selector ) {
 // ----- debounceMethod ----- //
 
 utils.debounceMethod = function( _class, methodName, threshold ) {
+  threshold = threshold || 100;
   // original method
   var method = _class.prototype[ methodName ];
   var timeoutName = methodName + 'Timeout';
 
   _class.prototype[ methodName ] = function() {
     var timeout = this[ timeoutName ];
-    if ( timeout ) {
-      clearTimeout( timeout );
-    }
-    var args = arguments;
+    clearTimeout( timeout );
 
+    var args = arguments;
     var _this = this;
     this[ timeoutName ] = setTimeout( function() {
       method.apply( _this, args );
       delete _this[ timeoutName ];
-    }, threshold || 100 );
+    }, threshold );
   };
 };
 
@@ -1224,6 +1227,7 @@ var GUID = 0;
 var instances = {};
 
 function Flickity( element, options ) {
+
   var queryElement = utils.getQueryElement( element );
   if ( !queryElement ) {
     if ( console ) {
@@ -1257,6 +1261,7 @@ Flickity.defaults = {
   cellAlign: 'center',
   // cellSelector: undefined,
   // contain: false,
+  sliderTagName: 'div',
   freeScrollFriction: 0.075, // friction when free-scrolling
   friction: 0.28, // friction when selecting
   namespaceJQueryEvents: true,
@@ -1364,7 +1369,7 @@ proto.activate = function() {
 // slider positions the cells
 proto._createSlider = function() {
   // slider element does all the positioning
-  var slider = document.createElement('div');
+  var slider = document.createElement(this.options.sliderTagName);
   slider.className = 'flickity-slider';
   slider.style[ this.originSide ] = 0;
   this.slider = slider;
@@ -2014,7 +2019,7 @@ return Flickity;
 }));
 
 /*!
- * Unipointer v2.2.0
+ * Unipointer v2.2.1
  * base class for doing one thing with pointer event
  * MIT license
  */
@@ -2126,8 +2131,9 @@ proto.onpointerdown = function( event ) {
  * @param {Event or Touch} pointer
  */
 proto._pointerDown = function( event, pointer ) {
-  // dismiss other pointers
-  if ( this.isPointerDown ) {
+  // dismiss right click and other pointers
+  // button = 0 is okay, 1-4 not
+  if ( event.button || this.isPointerDown ) {
     return;
   }
 
@@ -4194,7 +4200,7 @@ return Flickity;
 }));
 
 /*!
- * imagesLoaded v4.1.3
+ * imagesLoaded v4.1.4
  * JavaScript is all like "You images are done yet or what?"
  * MIT License
  */
@@ -4246,22 +4252,23 @@ function extend( a, b ) {
   return a;
 }
 
+var arraySlice = Array.prototype.slice;
+
 // turn element or nodeList into an array
 function makeArray( obj ) {
-  var ary = [];
   if ( Array.isArray( obj ) ) {
     // use object if already an array
-    ary = obj;
-  } else if ( typeof obj.length == 'number' ) {
+    return obj;
+  }
+
+  var isArrayLike = typeof obj == 'object' && typeof obj.length == 'number';
+  if ( isArrayLike ) {
     // convert nodeList to array
-    for ( var i=0; i < obj.length; i++ ) {
-      ary.push( obj[i] );
-    }
-  } else {
-    // array of single index
-    ary.push( obj );
+    return arraySlice.call( obj );
   }
-  return ary;
+
+  // array of single index
+  return [ obj ];
 }
 
 // -------------------------- imagesLoaded -------------------------- //
@@ -4277,13 +4284,19 @@ function ImagesLoaded( elem, options, onAlways ) {
     return new ImagesLoaded( elem, options, onAlways );
   }
   // use elem as selector string
+  var queryElem = elem;
   if ( typeof elem == 'string' ) {
-    elem = document.querySelectorAll( elem );
+    queryElem = document.querySelectorAll( elem );
+  }
+  // bail if bad element
+  if ( !queryElem ) {
+    console.error( 'Bad element for imagesLoaded ' + ( queryElem || elem ) );
+    return;
   }
 
-  this.elements = makeArray( elem );
+  this.elements = makeArray( queryElem );
   this.options = extend( {}, this.options );
-
+  // shift arguments if no options set
   if ( typeof options == 'function' ) {
     onAlways = options;
   } else {
@@ -4302,9 +4315,7 @@ function ImagesLoaded( elem, options, onAlways ) {
   }
 
   // HACK check async to allow time to bind listeners
-  setTimeout( function() {
-    this.check();
-  }.bind( this ));
+  setTimeout( this.check.bind( this ) );
 }
 
 ImagesLoaded.prototype = Object.create( EvEmitter.prototype );
@@ -4472,7 +4483,9 @@ LoadingImage.prototype.check = function() {
 };
 
 LoadingImage.prototype.getIsImageComplete = function() {
-  return this.img.complete && this.img.naturalWidth !== undefined;
+  // check for non-zero, non-undefined naturalWidth
+  // fixes Safari+InfiniteScroll+Masonry bug infinite-scroll#671
+  return this.img.complete && this.img.naturalWidth;
 };
 
 LoadingImage.prototype.confirm = function( isLoaded, message ) {

js/flickity.js

@@ -65,6 +65,7 @@ var GUID = 0;
 var instances = {};
 
 function Flickity( element, options ) {
+
   var queryElement = utils.getQueryElement( element );
   if ( !queryElement ) {
     if ( console ) {
@@ -98,6 +99,7 @@ Flickity.defaults = {
   cellAlign: 'center',
   // cellSelector: undefined,
   // contain: false,
+  sliderTagName: 'div',
   freeScrollFriction: 0.075, // friction when free-scrolling
   friction: 0.28, // friction when selecting
   namespaceJQueryEvents: true,
@@ -205,7 +207,7 @@ proto.activate = function() {
 // slider positions the cells
 proto._createSlider = function() {
   // slider element does all the positioning
-  var slider = document.createElement('div');
+  var slider = document.createElement(this.options.sliderTagName);
   slider.className = 'flickity-slider';
   slider.style[ this.originSide ] = 0;
   this.slider = slider;

sandbox/slider-tag-name.html

@@ -0,0 +1,121 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width" />
+
+  <title>viewportTagName</title>
+
+  <link rel="stylesheet" href="../css/flickity.css" />
+  <style>
+
+  * {
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+  }
+
+  body { font-family: sans-serif; }
+
+  figure, ul {
+    margin: 0;
+  }
+
+  ul {
+    list-style: none;
+  }
+
+  .gallery {
+    background: #FAFAFA;
+    margin-bottom: 40px;
+  }
+
+  .gallery-cell {
+    width: 180px;
+    height: 200px;
+    margin-right: 10px;
+    background: #8C8;
+    counter-increment: gallery-cell;
+  }
+
+  .gallery-cell.is-selected {
+    background: #F90;
+  }
+
+  /* cell number */
+  .gallery-cell:before {
+    display: block;
+    text-align: center;
+    content: counter(gallery-cell);
+    line-height: 200px;
+    font-size: 80px;
+    color: white;
+  }
+
+
+  </style>
+
+</head>
+<body>
+
+  <h1>sliderTagName</h1>
+
+<div class="gallery js-flickity" data-flickity-options='{ "sliderTagName": "ul", "contain": "true" }'>
+  <li class="gallery-cell"></li>
+  <li class="gallery-cell"></li>
+  <li class="gallery-cell"></li>
+  <li class="gallery-cell"></li>
+  <li class="gallery-cell"></li>
+  <li class="gallery-cell"></li>
+  <li class="gallery-cell"></li>
+  <li class="gallery-cell"></li>
+  <li class="gallery-cell"></li>
+</div>
+
+<div class="gallery js-flickity"
+  data-flickity-options='{ "sliderTagName": "figure", "contain": "true" }'>
+  <div class="gallery-cell"></div>
+  <div class="gallery-cell"></div>
+  <div class="gallery-cell"></div>
+  <div class="gallery-cell"></div>
+  <div class="gallery-cell"></div>
+  <div class="gallery-cell"></div>
+  <div class="gallery-cell"></div>
+  <div class="gallery-cell"></div>
+  <div class="gallery-cell"></div>
+  <div class="gallery-cell"></div>
+</div>
+
+<div class="gallery js-flickity" data-flickity-options='{ "contain": "true" }'>
+  <div class="gallery-cell"></div>
+  <div class="gallery-cell"></div>
+  <div class="gallery-cell"></div>
+  <div class="gallery-cell"></div>
+  <div class="gallery-cell"></div>
+  <div class="gallery-cell"></div>
+  <div class="gallery-cell"></div>
+  <div class="gallery-cell"></div>
+  <div class="gallery-cell"></div>
+  <div class="gallery-cell"></div>
+</div>
+
+<script src="../bower_components/get-size/get-size.js"></script>
+<script src="../bower_components/desandro-matches-selector/matches-selector.js"></script>
+<script src="../bower_components/ev-emitter/ev-emitter.js"></script>
+<script src="../bower_components/unipointer/unipointer.js"></script>
+<script src="../bower_components/unidragger/unidragger.js"></script>
+<script src="../bower_components/tap-listener/tap-listener.js"></script>
+<script src="../bower_components/fizzy-ui-utils/utils.js"></script>
+
+<script src="../js/cell.js"></script>
+<script src="../js/slide.js"></script>
+<script src="../js/animate.js"></script>
+<script src="../js/flickity.js"></script>
+<script src="../js/drag.js"></script>
+<script src="../js/prev-next-button.js"></script>
+<script src="../js/page-dots.js"></script>
+<script src="../js/player.js"></script>
+<script src="../js/add-remove-cell.js"></script>
+<script src="../js/lazyload.js"></script>
+
+</body>
+</html>