update Unidragger 1.1.5; build v1.1.1

track scrolling in pointerDown(); Fixes #123
dismiss pointerDown on range; Fixes #216

Fixes #189, fixes #201, 
Possibly resolves #122

README.md

@@ -20,15 +20,15 @@ See [flickity.metafizzy.co](http://flickity.metafizzy.co) for complete docs and
 Link directly to [Flickity files on cdnjs](https://cdnjs.com/libraries/flickity).
 
 ``` html
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flickity/1.1.0/flickity.css">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flickity/1.1.1/flickity.css">
 <!-- or -->
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flickity/1.1.0/flickity.min.css">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flickity/1.1.1/flickity.min.css">
 ```
 
 ``` html
-<script src="https://cdnjs.cloudflare.com/ajax/libs/flickity/1.1.0/flickity.pkgd.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/flickity/1.1.1/flickity.pkgd.js"></script>
 <!-- or -->
-<script src="https://cdnjs.cloudflare.com/ajax/libs/flickity/1.1.0/flickity.pkgd.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/flickity/1.1.1/flickity.pkgd.min.js"></script>
 ```
 
 ### Package managers

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "flickity",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "Touch, responsive, flickable galleries",
   "main": [
     "js/index.js",
@@ -14,7 +14,7 @@
     "get-style-property": "~1.0.4",
     "doc-ready": "~1.0.4",
     "classie": "~1.0.1",
-    "unidragger": "~1.1.2",
+    "unidragger": "~1.1.5",
     "fizzy-ui-utils": "~1.0.0",
     "tap-listener": "~1.1.1"
   },

changelog.md

@@ -3,7 +3,10 @@
 ### v1.1.1
 
 + Fixed freeScroll bug flicking past ends. Fixed [#181](https://github.com/metafizzy/flickity/issues/181)
-+ Fix regression with prepend animation. Fixed [#201](https://github.com/metafizzy/flickity/issues/201)
++ Fixed prepend animation regression. Fixed [#201](https://github.com/metafizzy/flickity/issues/201)
++ Allow range input sliding. Fixed [#216](https://github.com/metafizzy/flickity/issues/216)
++ Disable emulated click event triggering on iOS. Fixed bug with asNavFor on iOS [#189](https://github.com/metafizzy/flickity/issues/189)
++ Fixed staticClick triggering after scroll on touch devices. Fixed [#123](https://github.com/metafizzy/flickity/issues/123)
 
 ## v1.1.0
 

css/flickity.css

@@ -1,4 +1,4 @@
-/*! Flickity v1.1.0
+/*! Flickity v1.1.1
 http://flickity.metafizzy.co
 ---------------------------------------------- */
 

dist/flickity.css

@@ -1,4 +1,4 @@
-/*! Flickity v1.1.0
+/*! Flickity v1.1.1
 http://flickity.metafizzy.co
 ---------------------------------------------- */
 

dist/flickity.pkgd.js

@@ -1,5 +1,5 @@
 /*!
- * Flickity PACKAGED v1.1.0
+ * Flickity PACKAGED v1.1.1
  * Touch, responsive, flickable galleries
  *
  * Licensed GPLv3 for open source use
@@ -1910,7 +1910,7 @@ return proto;
 }));
 
 /*!
- * Flickity v1.1.0
+ * Flickity v1.1.1
  * Touch, responsive, flickable galleries
  *
  * Licensed GPLv3 for open source use
@@ -2978,7 +2978,7 @@ return Unipointer;
 }));
 
 /*!
- * Unidragger v1.1.3
+ * Unidragger v1.1.5
  * Draggable base class
  * MIT license
  */
@@ -3118,6 +3118,14 @@ var disableImgOndragstart = !isIE8 ? noop : function( handle ) {
  * @param {Event or Touch} pointer
  */
 Unidragger.prototype.pointerDown = function( event, pointer ) {
+  // dismiss range sliders
+  if ( event.target.nodeName == 'INPUT' && event.target.type == 'range' ) {
+    // reset pointerDown logic
+    this.isPointerDown = false;
+    delete this.pointerIdentifier;
+    return;
+  }
+
   this._dragPointerDown( event, pointer );
   // kludge to blur focused inputs in dragger
   var focused = document.activeElement;
@@ -3126,6 +3134,10 @@ Unidragger.prototype.pointerDown = function( event, pointer ) {
   }
   // bind move and end events
   this._bindPostStartEvents( event );
+  // track scrolling
+  this.pointerDownScroll = Unidragger.getScrollPosition();
+  eventie.bind( window, 'scroll', this );
+
   this.emitEvent( 'pointerDown', [ event, pointer ] );
 };
 
@@ -3196,6 +3208,10 @@ Unidragger.prototype._dragPointerUp = function( event, pointer ) {
   }
 };
 
+Unipointer.prototype.pointerDone = function() {
+  eventie.unbind( window, 'scroll', this );
+};
+
 // -------------------------- drag -------------------------- //
 
 // dragStart
@@ -3244,6 +3260,11 @@ Unidragger.prototype.dragEnd = function( event, pointer ) {
   this.emitEvent( 'dragEnd', [ event, pointer ] );
 };
 
+Unidragger.prototype.pointerDone = function() {
+  eventie.unbind( window, 'scroll', this );
+  delete this.pointerDownScroll;
+};
+
 // ----- onclick ----- //
 
 // handle all clicks and prevent clicks when dragging
@@ -3257,19 +3278,46 @@ Unidragger.prototype.onclick = function( event ) {
 
 // triggered after pointer down & up with no/tiny movement
 Unidragger.prototype._staticClick = function( event, pointer ) {
+  // ignore emulated mouse up clicks
+  if ( this.isIgnoringMouseUp && event.type == 'mouseup' ) {
+    return;
+  }
+
   // allow click in <input>s and <textarea>s
   var nodeName = event.target.nodeName;
   if ( nodeName == 'INPUT' || nodeName == 'TEXTAREA' ) {
     event.target.focus();
   }
   this.staticClick( event, pointer );
+
+  // set flag for emulated clicks 300ms after touchend
+  if ( event.type != 'mouseup' ) {
+    this.isIgnoringMouseUp = true;
+    var _this = this;
+    // reset flag after 300ms
+    setTimeout( function() {
+      delete _this.isIgnoringMouseUp;
+    }, 400 );
+  }
 };
 
 Unidragger.prototype.staticClick = function( event, pointer ) {
   this.emitEvent( 'staticClick', [ event, pointer ] );
 };
 
-// -----  ----- //
+// ----- scroll ----- //
+
+Unidragger.prototype.onscroll = function() {
+  var scroll = Unidragger.getScrollPosition();
+  var scrollMoveX = this.pointerDownScroll.x - scroll.x;
+  var scrollMoveY = this.pointerDownScroll.y - scroll.y;
+  // cancel click/tap if scroll is too much
+  if ( Math.abs( scrollMoveX ) > 3 || Math.abs( scrollMoveY ) > 3 ) {
+    this._pointerDone();
+  }
+};
+
+// ----- utils ----- //
 
 Unidragger.getPointerPoint = function( pointer ) {
   return {
@@ -3278,6 +3326,16 @@ Unidragger.getPointerPoint = function( pointer ) {
   };
 };
 
+var isPageOffset = window.pageYOffset !== undefined;
+
+// get scroll in { x, y }
+Unidragger.getScrollPosition = function() {
+  return {
+    x: isPageOffset ? window.pageXOffset : document.body.scrollLeft,
+    y: isPageOffset ? window.pageYOffset : document.body.scrollTop
+  };
+};
+
 // -----  ----- //
 
 Unidragger.getPointerPoint = Unipointer.getPointerPoint;
@@ -3391,6 +3449,14 @@ Flickity.prototype._childUIPointerDownDrag = function( event ) {
 // -------------------------- pointer events -------------------------- //
 
 Flickity.prototype.pointerDown = function( event, pointer ) {
+  // dismiss range sliders
+  if ( event.target.nodeName == 'INPUT' && event.target.type == 'range' ) {
+    // reset pointerDown logic
+    this.isPointerDown = false;
+    delete this.pointerIdentifier;
+    return;
+  }
+
   this._dragPointerDown( event, pointer );
 
   // kludge to blur focused inputs in dragger
@@ -3406,6 +3472,10 @@ Flickity.prototype.pointerDown = function( event, pointer ) {
   classie.add( this.viewport, 'is-pointer-down' );
   // bind move and end events
   this._bindPostStartEvents( event );
+  // track scrolling
+  this.pointerDownScroll = Unidragger.getScrollPosition();
+  eventie.bind( window, 'scroll', this );
+
   this.dispatchEvent( 'pointerDown', event, [ pointer ] );
 };
 
@@ -3525,7 +3595,7 @@ Flickity.prototype.dragEnd = function( event, pointer ) {
     // if free-scroll & not wrap around
     // do not free-scroll if going outside of bounding cells
     // so bounding cells can attract slider, and keep it in bounds
-    var restingX = this.getRestingDragPosition();
+    var restingX = this.getRestingPosition();
     this.isFreeScrolling = -restingX > this.cells[0].target &&
       -restingX < this.getLastCell().target;
   } else if ( !this.options.freeScroll && index == this.selectedIndex ) {
@@ -3540,7 +3610,7 @@ Flickity.prototype.dragEnd = function( event, pointer ) {
 };
 
 Flickity.prototype.dragEndRestingSelect = function() {
-  var restingX = this.getRestingDragPosition();
+  var restingX = this.getRestingPosition();
   // how far away from selected cell
   var distance = Math.abs( this.getCellDistance( -restingX, this.selectedIndex ) );
   // get closet resting going up and going down
@@ -3552,11 +3622,6 @@ Flickity.prototype.dragEndRestingSelect = function() {
   return index;
 };
 
-Flickity.prototype.getRestingDragPosition = function() {
-  var dragVelocity = this.dragX - this.x;
-  return this.x + dragVelocity / ( 1 - this.getFrictionFactor() );
-};
-
 /**
  * given resting X and distance to selected cell
  * get the distance and index of the closest cell
@@ -4526,7 +4591,7 @@ Flickity.prototype._cellAddedRemoved = function( changedCellIndex, selectedIndex
   this.selectedIndex = Math.max( 0, Math.min( this.cells.length - 1, this.selectedIndex ) );
 
   this.emitEvent( 'cellAddedRemoved', [ changedCellIndex, selectedIndexDelta ] );
-  this.cellChange( changedCellIndex );
+  this.cellChange( changedCellIndex, true );
 };
 
 /**
@@ -4548,14 +4613,22 @@ Flickity.prototype.cellSizeChange = function( elem ) {
  * logic any time a cell is changed: added, removed, or size changed
  * @param {Integer} changedCellIndex - index of the changed cell, optional
  */
-Flickity.prototype.cellChange = function( changedCellIndex ) {
+Flickity.prototype.cellChange = function( changedCellIndex, isPositioningSlider ) {
+  var prevSlideableWidth = this.slideableWidth;
   this._positionCells( changedCellIndex );
   this._getWrapShiftCells();
   this.setGallerySize();
   // position slider
   if ( this.options.freeScroll ) {
+    // shift x by change in slideableWidth
+    // TODO fix position shifts when prepending w/ freeScroll
+    this.x += prevSlideableWidth - this.slideableWidth;
     this.positionSlider();
   } else {
+    // do not position slider after lazy load
+    if ( isPositioningSlider ) {
+      this.positionSliderAtSelected();
+    }
     this.select( this.selectedIndex );
   }
 };
@@ -4732,7 +4805,7 @@ return Flickity;
 });
 
 /*!
- * Flickity asNavFor v1.0.1
+ * Flickity asNavFor v1.0.2
  * enable asNavFor for Flickity
  */
 
@@ -5207,7 +5280,7 @@ function makeArray( obj ) {
 });
 
 /*!
- * Flickity imagesLoaded v1.0.0
+ * Flickity imagesLoaded v1.0.1
  * enables imagesLoaded option for Flickity
  */
 
@@ -5259,6 +5332,9 @@ Flickity.prototype.imagesLoaded = function() {
   function onImagesLoadedProgress( instance, image ) {
     var cell = _this.getParentCell( image.img );
     _this.cellSizeChange( cell && cell.element );
+    if ( !_this.options.freeScroll ) {
+      _this.positionSliderAtSelected();
+    }
   }
   imagesLoaded( this.slider ).on( 'progress', onImagesLoadedProgress );
 };

js/add-remove-cell.js

@@ -151,7 +151,6 @@ Flickity.prototype.cellSizeChange = function( elem ) {
  */
 Flickity.prototype.cellChange = function( changedCellIndex, isPositioningSlider ) {
   var prevSlideableWidth = this.slideableWidth;
-  var prevX = this.x;
   this._positionCells( changedCellIndex );
   this._getWrapShiftCells();
   this.setGallerySize();

js/drag.js

@@ -103,6 +103,14 @@ Flickity.prototype._childUIPointerDownDrag = function( event ) {
 // -------------------------- pointer events -------------------------- //
 
 Flickity.prototype.pointerDown = function( event, pointer ) {
+  // dismiss range sliders
+  if ( event.target.nodeName == 'INPUT' && event.target.type == 'range' ) {
+    // reset pointerDown logic
+    this.isPointerDown = false;
+    delete this.pointerIdentifier;
+    return;
+  }
+
   this._dragPointerDown( event, pointer );
 
   // kludge to blur focused inputs in dragger
@@ -118,6 +126,10 @@ Flickity.prototype.pointerDown = function( event, pointer ) {
   classie.add( this.viewport, 'is-pointer-down' );
   // bind move and end events
   this._bindPostStartEvents( event );
+  // track scrolling
+  this.pointerDownScroll = Unidragger.getScrollPosition();
+  eventie.bind( window, 'scroll', this );
+
   this.dispatchEvent( 'pointerDown', event, [ pointer ] );
 };
 

js/flickity.js

@@ -1,5 +1,5 @@
 /*!
- * Flickity v1.1.0
+ * Flickity v1.1.1
  * Touch, responsive, flickable galleries
  *
  * Licensed GPLv3 for open source use

package.json

@@ -1,6 +1,6 @@
 {
   "name": "flickity",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "Touch, responsive, flickable galleries",
   "main": "js/index.js",
   "style": "css/flickity.css",
@@ -12,7 +12,7 @@
     "get-size": "~1.2.2",
     "desandro-get-style-property": "~1.0.4",
     "wolfy87-eventemitter": "~4.2.11",
-    "unidragger": "~1.1.2",
+    "unidragger": "~1.1.5",
     "fizzy-ui-utils": "~1.0.0",
     "tap-listener": "~1.1.1"
   },

sandbox/basic.html

@@ -81,6 +81,7 @@ <h1>basic1</h1>
         <input type="checkbox" />
         <input type="radio" name="foo" />
         <input type="radio" name="foo" />
+        <input type="range" />
       </p>
     </div>
     <div class="cell"></div>