From 0299c1797e5f40d497ffadc397cbf588caed1d21 Mon Sep 17 00:00:00 2001
From: Kevin Weiss <kev_asher@hotmail.com>
Date: Sat, 17 Jun 2017 20:34:43 -0300
Subject: [PATCH 1/6] Add scrolling support and other meaningful changes

---
 demo/index.html    |  26 +++++-
 sortable-list.html | 195 +++++++++++++++++++++++++++++++++++++++++----
 2 files changed, 203 insertions(+), 18 deletions(-)

diff --git a/demo/index.html b/demo/index.html
index c30b1bd..1014131 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -17,7 +17,6 @@
       .item {
         background: #ddd;
         display: inline-block;
-        float: left;
         height: 100px;
         margin: 10px 10px 0 0;
         text-align: center;
@@ -35,7 +34,7 @@
 
     <h1>Drag the items</h1>
 
-    <sortable-list sortable=".item">
+    <sortable-list sortable=".item" scroll>
       <dom-repeat id="domRepeat">
         <template>
           <div class="item">
@@ -60,7 +59,28 @@ <h1>Drag the items</h1>
         "https://cdn2.iconfinder.com/data/icons/cutecritters/t9froggy_trans.png",
         "https://cdn2.iconfinder.com/data/icons/cutecritters/t9ducky_trans.png",
         "https://cdn2.iconfinder.com/data/icons/cutecritters/t9batty_trans.png",
-        "https://cdn2.iconfinder.com/data/icons/cutecritters/t9penguino_trans.png" 
+        "https://cdn2.iconfinder.com/data/icons/cutecritters/t9penguino_trans.png",
+        "https://cdn2.iconfinder.com/data/icons/cutecritters/t9dog2_trans.png",
+        "https://cdn2.iconfinder.com/data/icons/cutecritters/t9tuqui_trans.png",
+        "https://cdn2.iconfinder.com/data/icons/cutecritters/t9panda_trans.png",
+        "https://cdn2.iconfinder.com/data/icons/cutecritters/t9elephant_trans.png",
+        "https://cdn2.iconfinder.com/data/icons/cutecritters/t9lion_trans.png",
+        "https://cdn2.iconfinder.com/data/icons/cutecritters/t9foxy_trans.png",
+        "https://cdn2.iconfinder.com/data/icons/cutecritters/t9kitty_trans.png",
+        "https://cdn2.iconfinder.com/data/icons/cutecritters/t9ratty_trans.png",
+        "https://cdn2.iconfinder.com/data/icons/cutecritters/t9froggy_trans.png",
+        "https://cdn2.iconfinder.com/data/icons/cutecritters/t9ducky_trans.png",
+        "https://cdn2.iconfinder.com/data/icons/cutecritters/t9batty_trans.png",
+        "https://cdn2.iconfinder.com/data/icons/cutecritters/t9penguino_trans.png",
+        "https://cdn2.iconfinder.com/data/icons/cutecritters/t9elephant_trans.png",
+        "https://cdn2.iconfinder.com/data/icons/cutecritters/t9lion_trans.png",
+        "https://cdn2.iconfinder.com/data/icons/cutecritters/t9foxy_trans.png",
+        "https://cdn2.iconfinder.com/data/icons/cutecritters/t9kitty_trans.png",
+        "https://cdn2.iconfinder.com/data/icons/cutecritters/t9ratty_trans.png",
+        "https://cdn2.iconfinder.com/data/icons/cutecritters/t9froggy_trans.png",
+        "https://cdn2.iconfinder.com/data/icons/cutecritters/t9ducky_trans.png",
+        "https://cdn2.iconfinder.com/data/icons/cutecritters/t9batty_trans.png",
+        "https://cdn2.iconfinder.com/data/icons/cutecritters/t9penguino_trans.png"
       ];
     </script>
 
diff --git a/sortable-list.html b/sortable-list.html
index c0905c9..2ddfa65 100644
--- a/sortable-list.html
+++ b/sortable-list.html
@@ -26,10 +26,10 @@
       }
 
       ::slotted(.item--transform) {
-        left: 0;
+        /*left: 0;*/
         margin: 0 !important;
-        position: fixed !important;
-        top: 0;
+        position: absolute !important;
+        /*top: 0;*/
         transition: transform 0.2s cubic-bezier(0.333, 0, 0, 1);
         will-change: transform;
         z-index: 1;
@@ -45,6 +45,12 @@
         filter: brightness(1.1);
         z-index: 2;
       }
+
+      #items {
+        /* needs to be positioned */
+        position: relative;
+
+      }
     </style>
     
     <div id="items">
@@ -88,6 +94,24 @@
             value: false
           },
 
+          /**
+          * Scroll vertically if necessary
+          */
+          scroll: {
+            type: Boolean,
+            reflectToAttribute: true,
+            value: false
+          },
+
+          /**
+          * Scrolling speed. Its the quantity of pixels the page is scrolled per frame (requestAnimationFrame). 
+          */
+          scrollingSpeed: {
+            type: Number,
+            reflectToAttribute: true,
+            value: 6
+          },
+
           /**
            * Disables the draggable if set to true.
            */
@@ -111,6 +135,9 @@
         this._onTransitionEnd = this._onTransitionEnd.bind(this);
         this._onContextMenu = this._onContextMenu.bind(this);
         this._onTouchMove = this._onTouchMove.bind(this);
+        this._scroll = this._scroll.bind(this);
+
+        this._directionBuffer = [];
       }
 
       connectedCallback() {
@@ -150,7 +177,7 @@
       }
 
       _trackStart(event) {
-        if (this.disabled) {
+        if (this.disabled || this._animatingElementsToNaturalPosition) {
           return;
         }
         this._target = this._itemFromEvent(event);
@@ -187,10 +214,66 @@
         if (!this.dragging) {
           return;
         }
-        const left = this._targetRect.left + event.detail.dx;
-        const top = this._targetRect.top + event.detail.dy;
-        this._translate3d(left, top, 1, this._target);
-        const overItem = this._itemFromCoords(event.detail);
+
+        const containerRect = this.getBoundingClientRect();
+        const targetRect = this._target.getBoundingClientRect();
+
+        // updates the target's position to the users finger position while dragging and possibly scrolling
+        const targetNewYPosition = targetRect.top - containerRect.top + event.detail.ddy;
+
+        const containerHeight = this.offsetHeight;
+        const viewportHeight = window.innerHeight;
+                       
+
+        // Dragging and scrolling is a very tricky too control, since the dragging could move horizontally and vetically and scroll (all at the same time!)
+        // we need to share a variable to control the X position of the transform of the dragging target.
+        this.__targetNewXPosition =  this._targetRect.left + event.detail.dx + event.detail.ddx; 
+
+        if (this.scroll) {
+
+          const targetRectRelativeToContainer = {
+            top: targetRect.top - containerRect.top,
+            bottom: targetRect.bottom - containerRect.top
+          };
+
+          const UPWARDS = -1;
+          const DOWNWARDS = 1;
+
+          if (event.detail.ddy < 0) {
+            this._directionBuffer.push(UPWARDS);
+
+            if (this._currentScrollDirection === DOWNWARDS && this._dragDirectionPurposelyChanged(UPWARDS)) { // if we were just scrolling downwards, than interrupt the scroll
+              this._cancelRunningScroll();
+            }
+           
+            // if the top of the container is still not reached and there isn't a running scroll animation, we can still scroll up
+            if (containerRect.top < 0 && targetRect.top <= 0 && !this._rafID) {
+              this._scroll(-Math.abs(targetRectRelativeToContainer.top)); // ensure a negative value as argument
+            }
+            
+          } else if (event.detail.ddy > 0) { // sometimes ddy===0 while dragging, thats why there is an else if
+            this._directionBuffer.push(DOWNWARDS);
+
+            if (this._currentScrollDirection === UPWARDS && this._dragDirectionPurposelyChanged(DOWNWARDS)) { // if we were just scrolling upwards, than interrupt the scroll
+                this._cancelRunningScroll();
+            }
+
+            // if the bottom of the container is still not reached and there isn't a running scroll animation, we can still scroll down
+            if (containerRect.bottom > viewportHeight && targetRect.bottom >= viewportHeight && !this._rafID) {
+              this._scroll(Math.abs(containerHeight - targetRectRelativeToContainer.bottom)); // ensure a positive value as argument
+            }
+
+          }
+        }
+
+
+
+        if (!this._rafID) {
+          this._translate3d(this.__targetNewXPosition, targetNewYPosition, 1, this._target);
+        }
+
+
+        const overItem = this._itemFromCoords(event.detail, this.__targetNewXPosition, targetNewYPosition);
         if (overItem && overItem !== this._target) {
           const overItemIndex = this.items.indexOf(overItem);
           const targetIndex = this.items.indexOf(this._target);
@@ -206,6 +289,59 @@
         }
       }
 
+      _scroll(y) {
+        let num;
+        let pixelsLeftToScroll = Math.abs(y);
+        let pixelsToScrollNow = this.scrollingSpeed;
+
+        if (y < 0) {
+          num = -pixelsToScrollNow;
+          this._currentScrollDirection = -1; // up
+        } else if (y > 0) {
+          num = pixelsToScrollNow;
+          this._currentScrollDirection = 1; // down
+        }
+        
+        const containerRect = this.getBoundingClientRect();
+        const targetRect = this._target.getBoundingClientRect();
+
+        // updates the target's position to the screens top or bottom limit while scrolling
+        const targetNewYPosition = targetRect.top - containerRect.top + num;
+
+        this._translate3d(this.__targetNewXPosition, targetNewYPosition, 1, this._target);
+        window.scrollBy(0, num);
+        pixelsLeftToScroll -= pixelsToScrollNow;
+        
+        if (pixelsLeftToScroll > 0) {
+          this._rafID = requestAnimationFrame(() => {
+            this._scroll(this._currentScrollDirection * pixelsLeftToScroll);
+          });
+        } else {
+          this._rafID = 0;
+        }
+      }
+
+      _cancelRunningScroll() {
+        if (this._rafID) {
+          cancelAnimationFrame(this._rafID);
+          this._rafID = 0;
+        }
+      }
+
+      _dragDirectionPurposelyChanged(newDirection) {
+        // if the last X elements in the direction buffer are the same, than yes, direction has changed.
+        const lastElementsQty = 10; // since the track events are highly sensetive, after some testing this number looks good
+        const lastElements = this._directionBuffer.slice(-lastElementsQty);
+
+        for(let i=0; i<lastElementsQty; i++) {
+          if (lastElements[i] !== newDirection) {
+            return false;
+          }
+        }
+        this._directionBuffer = []; // reset it, we dont need the old values if the direction has changed
+        return true;
+      }
+
       // The track really ends
       _trackEnd(event) {
         if (!this.dragging) {
@@ -214,7 +350,9 @@
         const rect = this._rects[this.items.indexOf(this._target)];
         this._target.classList.remove('item--pressed');
         this._setDragging(false);
+        this._cancelRunningScroll();
         this._translate3d(rect.left, rect.top, 1, this._target);
+        this._animatingElementsToNaturalPosition = true;
       }
 
       _onTransitionEnd() {
@@ -246,6 +384,7 @@
           }
         }));
         this._target = null;
+        this._animatingElementsToNaturalPosition = false;
       }
 
       _onDragStart(event) {
@@ -276,20 +415,38 @@
         this._setItems(items);
       }
 
-      _itemFromCoords({x, y}) {
+      _itemFromCoords(c, x, y) {
         if (!this._rects) {return;}
         let match = null;
-        this._rects.forEach((rect, i) => {
-          if ((x >= rect.left) &&
-              (x <= rect.left + rect.width) &&
-              (y >= rect.top) &&
-              (y <= rect.top + rect.height)) {
+        const updatedTargetRect = Object.assign({}, this._targetRect, {top: y, left: x});
+
+        // The dragging target has to hover/overlap a certain percentage of its area over a sibling in order to be considered a match.
+        // This removes a flickering behavior while dragging the elements and gives a better prediction on what sibling the target is 
+        // actually moving into.
+        const areaPercentage = 0.5; 
+        
+        this._rects.forEach((rect, i) =>  {
+          if (this.items[i] !== this._targetRect && this._elementBeingOverlaped(rect, updatedTargetRect, areaPercentage)) {
             match = this.items[i];
           }
+
         });
         return match;
       }
 
+      _elementBeingOverlaped(beneathElRect, topElRect, minPercentageAreaOfTopEl) {
+        const diffLeft = Math.abs(beneathElRect.left - topElRect.left);
+        const diffTop = Math.abs(beneathElRect.top - topElRect.top);
+
+        if (diffLeft > beneathElRect.width || diffTop > beneathElRect.height) {
+          return false;
+        }
+
+        const unionBoxArea = (beneathElRect.width - diffLeft) * (beneathElRect.height - diffTop);
+
+        return unionBoxArea >= minPercentageAreaOfTopEl * topElRect.width * topElRect.height;
+      }
+
       _itemFromEvent(event) {
         const path = event.composedPath();
         for (var i = 0; i < path.length; i++) {
@@ -301,7 +458,15 @@
 
       _getItemsRects() {
         return this.items.map(item => {
-          return item.getBoundingClientRect();
+          // its pratically HTMLElement.getBoundingClientRect(), but instead of the viewport, its properties are relative to the positioned container.
+          return { 
+            left: item.offsetLeft, 
+            top: item.offsetTop,
+            right: item.offsetLeft + item.offsetWidth,
+            bottom: item.offsetTop + item.offsetHeight,
+            width: item.offsetWidth,
+            height: item.offsetHeight
+          };
         })
       }
 

From d11810f2786c758474ab2d08b32c43c6b79e0968 Mon Sep 17 00:00:00 2001
From: Kevin Weiss <kev_asher@hotmail.com>
Date: Sat, 24 Jun 2017 18:14:23 -0300
Subject: [PATCH 2/6] Fix for when there's padding or border on the
 sortable-list

---
 demo/index.html    |  9 +++++++--
 sortable-list.html | 13 +++++++++----
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/demo/index.html b/demo/index.html
index 1014131..9bb4a83 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -13,15 +13,20 @@
       body {
         font-family: sans-serif;
       }
+
+      sortable-list {
+        border: 2px solid black;
+        padding: 2px;
+      }
   
       .item {
         background: #ddd;
         display: inline-block;
         height: 100px;
-        margin: 10px 10px 0 0;
+        /*margin: 10px 10px 0 0;*/
         text-align: center;
         vertical-align: top;
-        width: 150px;
+        width: 130px;
       }
 
       .item img {
diff --git a/sortable-list.html b/sortable-list.html
index 2ddfa65..1c32039 100644
--- a/sortable-list.html
+++ b/sortable-list.html
@@ -185,15 +185,18 @@
           return;
         }
         event.stopPropagation();
+        this._computedStyle = window.getComputedStyle(this);
         this._rects = this._getItemsRects();
+        console.log(this._rects);
         this._targetRect = this._rects[this.items.indexOf(this._target)];
         this._target.classList.add('item--dragged', 'item--pressed');
         if ('vibrate' in navigator) {
           navigator.vibrate(30);
         }
         const rect = this.getBoundingClientRect();
-        this.style.height = rect.height + 'px';
-        this.style.width = rect.width + 'px';
+
+        this.style.height = this._computedStyle.height;
+        this.style.width = this._computedStyle.width;
         this.items.forEach((item, idx) => {
           const rect = this._rects[idx];
           item.classList.add('item--transform');
@@ -219,7 +222,8 @@
         const targetRect = this._target.getBoundingClientRect();
 
         // updates the target's position to the users finger position while dragging and possibly scrolling
-        const targetNewYPosition = targetRect.top - containerRect.top + event.detail.ddy;
+        // const targetNewYPosition = (targetRect.top - parseFloat(this._computedStyle.borderTopWidth) - parseFloat(this._computedStyle.paddingTop)) - containerRect.top + event.detail.ddy;
+        const targetNewYPosition = (targetRect.top - parseFloat(this._computedStyle.borderTopWidth) - parseFloat(this._computedStyle.paddingTop)) - containerRect.top + event.detail.ddy;
 
         const containerHeight = this.offsetHeight;
         const viewportHeight = window.innerHeight;
@@ -306,7 +310,8 @@
         const targetRect = this._target.getBoundingClientRect();
 
         // updates the target's position to the screens top or bottom limit while scrolling
-        const targetNewYPosition = targetRect.top - containerRect.top + num;
+        // const targetNewYPosition = (targetRect.top - parseFloat(this._computedStyle.borderTopWidth) - parseFloat(this._computedStyle.paddingTop)) - containerRect.top + num;
+        const targetNewYPosition = (targetRect.top - parseFloat(this._computedStyle.borderTopWidth) - parseFloat(this._computedStyle.paddingTop)) - containerRect.top + num;
 
         this._translate3d(this.__targetNewXPosition, targetNewYPosition, 1, this._target);
         window.scrollBy(0, num);

From 9ae357efc6055e376e0c50c4ff094aeecbccde00 Mon Sep 17 00:00:00 2001
From: Kevin Weiss <kev_asher@hotmail.com>
Date: Sat, 24 Jun 2017 18:33:21 -0300
Subject: [PATCH 3/6] complementary fixed

---
 demo/index.html    |  2 +-
 sortable-list.html | 12 +++++-------
 2 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/demo/index.html b/demo/index.html
index 9bb4a83..595fecd 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -23,7 +23,7 @@
         background: #ddd;
         display: inline-block;
         height: 100px;
-        /*margin: 10px 10px 0 0;*/
+        margin: 10px 10px 0 0;
         text-align: center;
         vertical-align: top;
         width: 130px;
diff --git a/sortable-list.html b/sortable-list.html
index 1c32039..cb33b58 100644
--- a/sortable-list.html
+++ b/sortable-list.html
@@ -49,7 +49,6 @@
       #items {
         /* needs to be positioned */
         position: relative;
-
       }
     </style>
     
@@ -108,7 +107,6 @@
           */
           scrollingSpeed: {
             type: Number,
-            reflectToAttribute: true,
             value: 6
           },
 
@@ -187,7 +185,6 @@
         event.stopPropagation();
         this._computedStyle = window.getComputedStyle(this);
         this._rects = this._getItemsRects();
-        console.log(this._rects);
         this._targetRect = this._rects[this.items.indexOf(this._target)];
         this._target.classList.add('item--dragged', 'item--pressed');
         if ('vibrate' in navigator) {
@@ -220,10 +217,11 @@
 
         const containerRect = this.getBoundingClientRect();
         const targetRect = this._target.getBoundingClientRect();
+        const containerPaddingAndMarginTop = parseFloat(this._computedStyle.borderTopWidth) + parseFloat(this._computedStyle.paddingTop);
+        const containerPaddingAndMarginBottom = parseFloat(this._computedStyle.borderBottomWidth) + parseFloat(this._computedStyle.paddingBottom);
 
         // updates the target's position to the users finger position while dragging and possibly scrolling
-        // const targetNewYPosition = (targetRect.top - parseFloat(this._computedStyle.borderTopWidth) - parseFloat(this._computedStyle.paddingTop)) - containerRect.top + event.detail.ddy;
-        const targetNewYPosition = (targetRect.top - parseFloat(this._computedStyle.borderTopWidth) - parseFloat(this._computedStyle.paddingTop)) - containerRect.top + event.detail.ddy;
+        const targetNewYPosition = (targetRect.top - containerPaddingAndMarginTop) - containerRect.top + event.detail.ddy;
 
         const containerHeight = this.offsetHeight;
         const viewportHeight = window.innerHeight;
@@ -236,8 +234,8 @@
         if (this.scroll) {
 
           const targetRectRelativeToContainer = {
-            top: targetRect.top - containerRect.top,
-            bottom: targetRect.bottom - containerRect.top
+            top: targetRect.top - containerPaddingAndMarginTop - containerRect.top,
+            bottom: targetRect.bottom - containerPaddingAndMarginBottom - containerRect.top
           };
 
           const UPWARDS = -1;

From f93d42a85980646efa121f93a3a6c3cdcead8a2f Mon Sep 17 00:00:00 2001
From: Kevin Weiss <kev_asher@hotmail.com>
Date: Sat, 24 Jun 2017 19:14:03 -0300
Subject: [PATCH 4/6] Added css mixin and some minor adjusments

---
 bower.json         |  3 ++-
 demo/index.html    |  4 ++--
 sortable-list.html | 27 ++++++++++++++++++---------
 3 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/bower.json b/bower.json
index 4e8134c..06e73e9 100644
--- a/bower.json
+++ b/bower.json
@@ -5,7 +5,8 @@
   ],
   "main": "sortable-list.html",
   "dependencies": {
-    "polymer": "Polymer/polymer#^2.0.0"
+    "polymer": "Polymer/polymer#^2.0.0",
+    "shadycss": "webcomponents/shadycss#^1.0.1"
   },
   "devDependencies": {
     "web-component-tester": "v6.0.0"
diff --git a/demo/index.html b/demo/index.html
index 595fecd..6f364e9 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -17,16 +17,16 @@
       sortable-list {
         border: 2px solid black;
         padding: 2px;
+       
       }
   
       .item {
         background: #ddd;
-        display: inline-block;
         height: 100px;
         margin: 10px 10px 0 0;
         text-align: center;
         vertical-align: top;
-        width: 130px;
+        width: 140px;
       }
 
       .item img {
diff --git a/sortable-list.html b/sortable-list.html
index cb33b58..d7ef3dc 100644
--- a/sortable-list.html
+++ b/sortable-list.html
@@ -1,5 +1,6 @@
 <link rel="import" href="../polymer/polymer-element.html">
 <link rel="import" href="../polymer/lib/mixins/gesture-event-listeners.html">
+<link rel="import" href="../shadycss/apply-shim.html">
 
 <!--
 `sortable-list`
@@ -12,7 +13,8 @@
   <template>
     <style>
       :host {
-        display: inline-block;
+        display: block;
+        position: relative;
       }
 
       ::slotted(*) {
@@ -26,10 +28,10 @@
       }
 
       ::slotted(.item--transform) {
-        /*left: 0;*/
+        left: 0;
         margin: 0 !important;
         position: absolute !important;
-        /*top: 0;*/
+        top: 0;
         transition: transform 0.2s cubic-bezier(0.333, 0, 0, 1);
         will-change: transform;
         z-index: 1;
@@ -47,7 +49,13 @@
       }
 
       #items {
-        /* needs to be positioned */
+        display: flex;
+        flex-wrap: wrap;
+        flex-direction: row;
+        justify-content: center;
+        @apply --sortable-list-container;
+
+        /* needs to be positioned */        
         position: relative;
       }
     </style>
@@ -191,6 +199,8 @@
           navigator.vibrate(30);
         }
         const rect = this.getBoundingClientRect();
+        this._containerPaddingAndMarginTop = parseFloat(this._computedStyle.borderTopWidth) + parseFloat(this._computedStyle.paddingTop);
+        this._containerPaddingAndMarginBottom = parseFloat(this._computedStyle.borderBottomWidth) + parseFloat(this._computedStyle.paddingBottom);
 
         this.style.height = this._computedStyle.height;
         this.style.width = this._computedStyle.width;
@@ -217,11 +227,10 @@
 
         const containerRect = this.getBoundingClientRect();
         const targetRect = this._target.getBoundingClientRect();
-        const containerPaddingAndMarginTop = parseFloat(this._computedStyle.borderTopWidth) + parseFloat(this._computedStyle.paddingTop);
-        const containerPaddingAndMarginBottom = parseFloat(this._computedStyle.borderBottomWidth) + parseFloat(this._computedStyle.paddingBottom);
+        
 
         // updates the target's position to the users finger position while dragging and possibly scrolling
-        const targetNewYPosition = (targetRect.top - containerPaddingAndMarginTop) - containerRect.top + event.detail.ddy;
+        const targetNewYPosition = (targetRect.top - this._containerPaddingAndMarginTop) - containerRect.top + event.detail.ddy;
 
         const containerHeight = this.offsetHeight;
         const viewportHeight = window.innerHeight;
@@ -234,8 +243,8 @@
         if (this.scroll) {
 
           const targetRectRelativeToContainer = {
-            top: targetRect.top - containerPaddingAndMarginTop - containerRect.top,
-            bottom: targetRect.bottom - containerPaddingAndMarginBottom - containerRect.top
+            top: targetRect.top - this._containerPaddingAndMarginTop - containerRect.top,
+            bottom: targetRect.bottom - this._containerPaddingAndMarginBottom - containerRect.top
           };
 
           const UPWARDS = -1;

From 12b47f9d0b337ffddb3ba10b2fd7dac13a1506c4 Mon Sep 17 00:00:00 2001
From: Sam Prinssen <samprinssen@gmail.com>
Date: Wed, 1 Nov 2017 11:27:14 +0100
Subject: [PATCH 5/6] add selector left of ::slotted

Shadydom seems to require a selector to the left of ::slotted
https://github.com/webcomponents/shadycss#selector-scoping
---
 sortable-list.html | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/sortable-list.html b/sortable-list.html
index c0905c9..bdf459d 100644
--- a/sortable-list.html
+++ b/sortable-list.html
@@ -15,7 +15,7 @@
         display: inline-block;
       }
 
-      ::slotted(*) {
+      #items ::slotted(*) {
         user-drag: none;
         user-select: none;
         -moz-user-select: none;
@@ -25,7 +25,7 @@
         -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
       }
 
-      ::slotted(.item--transform) {
+      #items ::slotted(.item--transform) {
         left: 0;
         margin: 0 !important;
         position: fixed !important;
@@ -35,11 +35,11 @@
         z-index: 1;
       }
 
-      ::slotted(.item--pressed) {
+      #items ::slotted(.item--pressed) {
         transition: none !important;
       }
 
-      ::slotted(.item--dragged) {
+      #items ::slotted(.item--dragged) {
         -webkit-box-shadow: 0 2px 10px rgba(0,0,0,.2);
         box-shadow: 0 2px 10px rgba(0,0,0,.2);
         filter: brightness(1.1);

From 84cbcabd65b5b3b757e4d2eebe44c50e136b8cc6 Mon Sep 17 00:00:00 2001
From: Wouter Vroege <wouter@woutervroege.nl>
Date: Thu, 2 Nov 2017 22:54:25 +0100
Subject: [PATCH 6/6] swapping MutationObserver for
 Polymer.FlattenedNodesObserver to properly observe item changes when shadydom
 is enabled

---
 sortable-list.html | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/sortable-list.html b/sortable-list.html
index bdf459d..072c59d 100644
--- a/sortable-list.html
+++ b/sortable-list.html
@@ -267,7 +267,7 @@
         if (this.dragging) {
           return;
         }
-        const items = this.$.slot.assignedNodes().filter(node => {
+        const items = this.shadowRoot.querySelector('slot').assignedNodes().filter(node => {
           if ((node.nodeType === Node.ELEMENT_NODE) &&
               (!this.sortable || node.matches(this.sortable))) {
             return true;
@@ -307,10 +307,10 @@
 
       _observeItems() {
         if (!this._observer) {
-          this._observer = new MutationObserver(_ => {
+          this._observer = new Polymer.FlattenedNodesObserver(this.shadowRoot.querySelector('slot'), (function(evt) {
+            let effectiveChildren = Polymer.FlattenedNodesObserver.getFlattenedNodes(evt.target).filter(n => n.nodeType === Node.ELEMENT_NODE)
             this._updateItems();
-          });
-          this._observer.observe(this, {childList: true});
+          }).bind(this));
         }
       }