From 3a0d1418503c237445f71aeba4acdee4efd3f111 Mon Sep 17 00:00:00 2001
From: Brian McBride <brian.mcbride@zeppidy.com>
Date: Sat, 11 Mar 2017 19:14:12 -0800
Subject: [PATCH 1/2] iron-swipeable-pages 2.0

Thanks for the component!  I'm working on a 2.0 project and thought I'd convert this over.
No logic changed, just formatting for 2.0, converting <container> to <slot> and the listener changes.
---
 iron-swipeable-pages.html | 464 +++++++++++++++++++++++++++++++++++---
 1 file changed, 437 insertions(+), 27 deletions(-)

diff --git a/iron-swipeable-pages.html b/iron-swipeable-pages.html
index f96ddcf..f860011 100644
--- a/iron-swipeable-pages.html
+++ b/iron-swipeable-pages.html
@@ -1,4 +1,4 @@
-<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../polymer/polymer-element.html">
 
 <link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html">
 <link rel="import" href="../iron-selector/iron-selectable.html">
@@ -474,23 +474,436 @@
 
         _selectPage: function(page) {
           var index = this.indexOf(page);
+<dom-module id="iron-swipeable-pages">
+    <template>
+        <style>
+            :host {
+                position: relative;
+                display: block;
+                overflow-x: hidden;
+            }
+
+            :host ::slotted(*) {
+                position: absolute;
+                width: 100%;
+                height: 100%;
+                overflow-y: auto;
+                will-change: left, transform;
+            }
+
+            :host ::slotted(:not(.iron-selected):not(.iron-swiping)) {
+                left: -100% !important;
+            }
+
+        </style>
+
+        <slot></slot>
+    </template>
+
+    <script>
+      class IronSwipeablePages extends Polymer.mixinBehaviors(
+        [Polymer.IronResizableBehavior, Polymer.IronSelectableBehavior], Polymer.Element) {
+
+        static get is() {
+          return 'iron-swipeable-pages';
+        }
+
+        static get properties() {
+          return {
+            /**
+             * as the selected page is the only one visible, activateEvent
+             * is both non-sensical and problematic; e.g. in cases where a user
+             * handler attempts to change the page and the activateEvent
+             * handler immediately changes it back
+             */
+            activateEvent: {
+              type: String,
+              readOnly: true,
+              value: null
+            },
+            /**
+             * Add extra padding to the offsetWidth while swiping
+             * Useful if the element is nested within other elements that enforce a padding
+             */
+            padding: {
+              type: Number,
+              value: 0
+            },
+            /**
+             * The value used to decide if a transition is effective and therefore
+             * if the page get swiped.
+             */
+            threshold: {
+              type: Number,
+              value: 0.3
+            },
+            /**
+             * Prevent cycling between first and last pages by swiping.
+             */
+            noCycle: {
+              type: Boolean,
+              value: false
+            },
+            /**
+             * animate wrap-around between first and last as a direct transition
+             * like a carousel. this animation is only used when iron-select is
+             * fired from something OTHER a swipe. e.g. a call to selectNext()
+             * like you might make from a button or an a11y arrow-key binding.
+             * if false the wrap around flips backwards across all the pages.
+             */
+            carousel: {
+              type: Boolean,
+              value: false
+            },
+            /**
+             * The CSS transition duration applied swiping to next/previous page
+             */
+            transitionDuration: {
+              type: Number,
+              value: 250
+            },
+            /**
+             * The maximum global CSS transition duration applied if swiping involves more than one
+             * page transition using selection instead of manual swiping.
+             */
+            maximumTransitionDuration: {
+              type: Number,
+              value: 0
+            },
+            /**
+             * The CSS transition timing function applied.
+             */
+            transitionTimingFunction: {
+              type: String,
+              value: 'cubic-bezier(0.4, 0.0, 0.2, 1)'
+            },
+            /**
+             * This option could be used for example to check in `on-selected-changed` that
+             * the selection was initiated by gesture or via data-binding or programmatically
+             */
+            isGesture: {
+              type: Boolean,
+              value: false
+            },
+            /**
+             * How many pixels on the side of the screen are not sensitive to edge swipes.
+             */
+            edgeSwipeSensitivity: {
+              type: Number,
+              value: 0
+            },
+            /**
+             * This option could be used to disable swiping.
+             */
+            disabled: {
+              type: Boolean,
+              value: false
+            }
+          };
+        }
+
+        ready() {
+          super.ready();
+          this.setScrollDirection('y');
+          this._animatedPages = [];
+        }
+
+        connectedCallback() {
+          super.connectedCallback();
+          this.addEventListener('iron-items-changed', e => this._onItemsChanged(e));
+          this.addEventListener('iron-deselect', e => this._onIronDeselectItem(e));
+          this.addEventListener('iron-select', e => this._onIronSelectItem(e));
+          this.addEventListener('dom-change', e => this._onDomChange(e));
+          Polymer.Gestures.addListener(this, 'track', e => this._onTrack(e));
+          this.addEventListener('iron-resize', e => this._onResize(e));
+        }
+
+        disconnectedCallback() {
+          super.disconnetedCallback();
+
+        }
+
+        _onItemsChanged(event) {
+          let mutations = event.detail;
+          for (let i = 0; i < mutations.addedNodes.length; i++) {
+            this._addPage(mutations.addedNodes[i]);
+          }
+          for (let i = 0; i < mutations.removedNodes.length; i++) {
+            this._removePage(mutations.removedNodes[i]);
+          }
+        }
+
+        _addPage(page) {
+          if (!page || page.nodeType !== Node.ELEMENT_NODE)
+            return;
+          page.setAttribute('aria-hidden', !page.classList.contains('iron-selected'));
+          this.listen(page, 'webkitTransitionEnd', '_onTransitionEnd');
+          this.listen(page, 'transitionend', '_onTransitionEnd');
+        }
+
+        _removePage(page) {
+          if (!page || page.nodeType !== Node.ELEMENT_NODE)
+            return;
+          this.unlisten(page, 'webkitTransitionEnd', '_onTransitionEnd');
+          this.unlisten(page, 'transitionend', '_onTransitionEnd');
+        }
+
+        _onDomChange(event) {
+          if (this.selectedItem && this.selectedItem.offsetWidth == 0) {
+            this.selected = this.fallbackSelection;
+          }
+        }
+
+        // Element tracking
+        _onTrack(event) {
+          let track = event.detail;
+          if (this.disabled || (this.noCycle && !this._canCycle(track))) {
+            return;
+          }
+          if ((track.x - track.dx) < this.edgeSwipeSensitivity || (track.x - track.dx) > this.offsetWidth - this.edgeSwipeSensitivity) {
+            return;
+          }
+          if (track.state === 'start' && Math.abs(track.dy) < Math.abs(track.dx)) {
+            // if we don't have at least 2 items, no need to swipe...
+            if (this.items.length < 2) {
+              return;
+            }
+            this._trackStart(track);
+            this._swipeStarted = true;
+          } else if (track.state === 'track' && this._swipeStarted) {
+            this._trackMove(track);
+          } else if (track.state === 'end' && this._swipeStarted) {
+            this._trackEnd(track);
+          }
+        }
+
+        _trackStart(trackData) {
+          if (this._transitionRunning) {
+            // reset pages state
+            this._resetPages();
+          }
+          this._setUpSwipePages();
+          this._animatePages(trackData.dx);
+          this._switchPageIfNecessary(trackData.dx);
+          // Prevent regular touchmove event (disables vertical scroll)
+          window.addEventListener('touchmove', this._preventTouchMove);
+        }
+
+        _trackMove(trackData) {
+          this._animatePages(trackData.dx);
+          this._switchPageIfNecessary(trackData.dx);
+        }
+
+        _trackEnd(trackData) {
+          if (!this._swipeStarted) {
+            return;
+          }
+          // Activate transition
+          for (var i = 0; i < this._animatedPages.length; i++) {
+            this._animatedPages[i].style.webkitTransition = this._computeTransition(1);
+            this._animatedPages[i].style.transition = this._computeTransition(1);
+          }
+          this._transitionRunning = true;
+          // The element is swiped away if the swiping get passed the treshold.
+          this._completeSwipe = Math.abs(trackData.dx) > this._getOffsetWidth() * this.threshold;
+          if (this._completeSwipe) {
+            this.isGesture = true;
+            var direction = trackData.dx > 0;
+            // we are swipping, therefore update selected
+            direction ? this._selectPage(this._leftCandidate) : this._selectPage(this._rightCandidate);
+            // trigger the animation in the proper direction
+            this._animatePages(direction ? this._getOffsetWidth() : -this._getOffsetWidth());
+          } else {
+            this._animatePages(0);
+          }
+          // Enable regular touchmove event (enables vertical scroll again)
+          window.removeEventListener('touchmove', this._preventTouchMove);
+        }
+
+        _preventTouchMove(e) {
+          return e && e.preventDefault();
+        }
+
+        _onIronDeselectItem(event) {
+          // Prevent bubbling of same event on child elements
+          if (event.target !== this) {
+            return;
+          }
+          this._lastIndex = this.indexOf(event.detail.item);
+        }
+
+        _onIronSelectItem(event) {
+          // Prevent bubbling of same event on child elements
+          if (event.target !== this) {
+            return;
+          }
+          // might happen at init of the component when first selected value is set and ready not called....
+          // or when a "selected" page disappear from the dom because of a "dom-if" with restamp option active
+          if (this._lastIndex === undefined || this._lastIndex === -1) {
+            return;
+          }
+          let index = this.indexOf(event.detail.item);
+          if (this._completeSwipe) {
+            // we just need to reset the flag, the transformation happened already by swiping
+            this._completeSwipe = false;
+          } else {
+            // check if a transition is currently running
+            if (this._transitionRunning) {
+              // reset pages state and we don't trigger any new animation because lastIndex is not valid anymore
+              this._resetPages();
+            } else {
+              // reset the animated page list
+              this._animatedPages = [];
+              // skipped is used to filter the hidden element since they have a width == 0
+              // we use a negative value if we translate to the right
+              let skipped = 0;
+              // in this case, selected has been modify w/o swiping, we need to apply the transformation
+              // This stuff supports carousel style wrap-around animation
+              let translateRight;
+              let virtualLastIndex = this._lastIndex;
+              let virtualIndex = index;
+              let len = this.items.length;
+              if (index == 0 && this._lastIndex == len - 1) {
+                // wrap-around
+                translateRight = true;
+                if (this.carousel) {
+                  translateRight = false;
+                  virtualIndex = len;
+                }
+              }
+              else if (index == len - 1 && this._lastIndex == 0) {
+                // wrap-around
+                translateRight = false;
+                if (this.carousel) {
+                  translateRight = true;
+                  virtualLastIndex = len;
+                }
+              }
+              else {
+                translateRight = (index <= this._lastIndex)
+              }
+              if (translateRight) {
+                // we translate to the right
+                for (let i = virtualLastIndex; i >= virtualIndex; i--) {
+                  let item = this.items[i % len];
+                  this._initPage(
+                    item,
+                    this._computeTransition(virtualLastIndex - virtualIndex),
+                    this._getOffsetWidth() * (i - skipped - virtualLastIndex));
+                  // Need for dom.flush()?
+                  if (item.offsetWidth == 0) {
+                    this._resetPage(item);
+                    skipped--;
+                  }
+                }
+              } else {
+                skipped = 0;
+                // we translate to the left
+                for (let i = virtualLastIndex; i <= virtualIndex; i++) {
+                  let item = this.items[i % len];
+                  this._initPage(
+                    item,
+                    this._computeTransition(virtualIndex - virtualLastIndex),
+                    this._getOffsetWidth() * (i - skipped - virtualLastIndex));
+                  // Need for dom.flush()?
+                  if (item.offsetWidth == 0) {
+                    this._resetPage(item);
+                    skipped++;
+                  }
+                }
+              }
+              this._transitionRunning = true;
+              // before animating, we need to be sure style are updated correctly
+              this.async(function () {
+                this._animatePages((virtualLastIndex - virtualIndex + skipped) * this._getOffsetWidth());
+              });
+            }
+          }
+        }
+
+        _setUpSwipePages() {
+          // reset the animated page list
+          this._animatedPages = [];
+          // selected page
+          this._initPage(this.selectedItem, 'none', 0);
+          // left candidate
+          let skipped = 0;
+          let found = false;
+          while (!found) {
+            let leftIndex = (Number(this.indexOf(this.selectedItem)) - 1 - skipped + this.items.length) % this.items.length;
+            this._leftCandidate = this.items[leftIndex];
+            this._initPage(this._leftCandidate, 'none', -this._getOffsetWidth());
+            // Need for dom.flush()?
+            if (this._leftCandidate.offsetWidth > 0) {
+              found = true;
+            } else {
+              this._resetPage(this._leftCandidate);
+              skipped++;
+            }
+          }
+          // right candidate
+          skipped = 0;
+          found = false;
+          while (!found) {
+            let rightIndex = (Number(this.indexOf(this.selectedItem)) + 1 + skipped) % this.items.length;
+            this._rightCandidate = this.items[rightIndex];
+            this._initPage(this._rightCandidate, 'none', this._getOffsetWidth());
+            // Need for dom.flush()?
+            if (this._rightCandidate.offsetWidth > 0) {
+              found = true;
+            } else {
+              this._resetPage(this._rightCandidate);
+              skipped++;
+            }
+          }
+        }
+
+        _initPage(page, transition, left) {
+          if (!page) {
+            return;
+          }
+          page.style.left = left + "px";
+          page.style.webkitTransition = transition;
+          page.style.transition = transition;
+          this.toggleClass('iron-swiping', true, page);
+          this._animatedPages.push(page);
+        }
+
+        _animatePages(x) {
+          for (let i = 0; i < this._animatedPages.length; i++) {
+            this.translate3d(x + 'px', '0px', '0px', this._animatedPages[i]);
+          }
+        }
+
+          /*
+           * this function is useful if only 2 pages are available and we need to switch the next/previous page
+           * on the left/right side depending on the direction of the swipe given with `dx`
+           */
+        _switchPageIfNecessary(dx) {
+          if (this._leftCandidate && this._rightCandidate && this._leftCandidate === this._rightCandidate) {
+            let direction = dx > 0 ? -1 : 1;
+            this._rightCandidate.style.left = (direction * this._getOffsetWidth()) + "px";
+          }
+        }
+
+        _selectPage(page) {
+          let index = this.indexOf(page);
           // TODO: should be replaced with this.selectIndex when merged in master:
           // https://github.com/PolymerElements/iron-selector/issues/87
           this.selected = this._indexToValue(index);
-        },
+        }
 
-        _resetPage: function(page) {
+        _resetPage(page) {
           page.style.left = "0px";
           page.style.webkitTransition = 'none';
           page.style.transition = 'none';
           this.toggleClass('iron-swiping', false, page);
-
           this._animatedPages.pop();
-        },
+        }
 
         // remove the iron-swiping class and transition
-        _resetPages: function() {
-          for (var i = 0; i < this._animatedPages.length; i++) {
+        _resetPages() {
+          for (let i = 0; i < this._animatedPages.length; i++) {
             this._animatedPages[i].style.left = '0px';
             this._animatedPages[i].style.webkitTransition = 'none';
             this._animatedPages[i].style.transition = 'none';
@@ -501,43 +914,40 @@
           this._transitionRunning = false;
           this._swipeStarted = false;
           this.isGesture = false;
-        },
+        }
 
-        _onTransitionEnd: function(event) {
+        _onTransitionEnd(event) {
           // reset pages state
           this._resetPages();
-        },
+        }
 
         // Element utility functions
-        _canCycle: function(trackData) {
-          var index = this._valueToIndex(this.selected);
-
+        _canCycle(trackData) {
+          let index = this._valueToIndex(this.selected);
           if (index === 0 && trackData.dx > 0) {
             return false;
           }
-          if (index === this.items.length - 1 && trackData.dx < 0) {
-            return false;
-          }
-          return true;
-        },
+          return (index === this.items.length - 1 && trackData.dx < 0);
+        }
 
-        _getOffsetWidth: function () {
+        _getOffsetWidth() {
           this._offsetWidth || this.offsetWidth + (2 * this.padding);
           return this._offsetWidth;
-        },
+        }
 
-        _onResize: function() {
+        _onResize() {
           this._offsetWidth = this.offsetWidth + (2 * this.padding);
-        },
+        }
 
-        _computeTransition: function(factor) {
-          var duration = factor * this.transitionDuration;
+        _computeTransition(factor) {
+          let duration = factor * this.transitionDuration;
           if (this.maximumTransitionDuration) {
             duration = Math.min(this.maximumTransitionDuration, duration);
           }
           return 'transform ' + duration + 'ms ' + this.transitionTimingFunction;
         }
-      });
-    }());
-  </script>
+
+      }
+      window.customElements.define(IronSwipeablePages.is, IronSwipeablePages);
+    </script>
 </dom-module>

From 3dd5d04f0273daf2a4fbffb8de2d39d81c6726a7 Mon Sep 17 00:00:00 2001
From: Brian McBride <brian.mcbride@zeppidy.com>
Date: Sat, 11 Mar 2017 19:33:11 -0800
Subject: [PATCH 2/2] Fixing canCycle

Broke it simplifying if statement.. whoops
---
 iron-swipeable-pages.html | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/iron-swipeable-pages.html b/iron-swipeable-pages.html
index f860011..47e23bb 100644
--- a/iron-swipeable-pages.html
+++ b/iron-swipeable-pages.html
@@ -927,7 +927,10 @@
           if (index === 0 && trackData.dx > 0) {
             return false;
           }
-          return (index === this.items.length - 1 && trackData.dx < 0);
+          if (index === this.items.length - 1 && trackData.dx < 0) {
+            return false;
+          }
+          return true;
         }
 
         _getOffsetWidth() {