sortable-list.html

<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`


@demo demo/index.html
-->

<dom-module id="sortable-list">
  <template>
    <style>
      :host {
        display: block;
        position: relative;
      }

      ::slotted(*) {
        user-drag: none;
        user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        -webkit-user-drag: none;
        -webkit-user-select: none;
        -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
      }

      ::slotted(.item--transform) {
        left: 0;
        margin: 0 !important;
        position: absolute !important;
        top: 0;
        transition: transform 0.2s cubic-bezier(0.333, 0, 0, 1);
        will-change: transform;
        z-index: 1;
      }

      ::slotted(.item--pressed) {
        transition: none !important;
      }

      ::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);
        z-index: 2;
      }

      #items {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: center;
        @apply --sortable-list-container;

        /* needs to be positioned */        
        position: relative;
      }
    </style>
    
    <div id="items">
      <slot id="slot"></slot>
    </div>

  </template>

  <script>

    class SortableList extends Polymer.GestureEventListeners(Polymer.Element) {

      static get is() {return 'sortable-list';}

      static get properties() {
        return {

          /**
           * This is a CSS selector string. If this is set, only items that 
           * match the CSS selector are sortable.
           */
          sortable: String,

          /**
           * The list of sortable items.
           */
          items: {
            type: Array,
            notify: true,
            readOnly: true
          },

          /**
          * Returns true when an item is being drag.
          */
          dragging: {
            type: Boolean,
            notify: true,
            readOnly: true,
            reflectToAttribute: true,
            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,
            value: 6
          },

          /**
           * Disables the draggable if set to true.
           */
          disabled: {
            type: Boolean,
            reflectToAttribute: true,
            value: false
          }

        };
      }

      constructor() {
        super();
        this._observer = null;
        this._target = null;
        this._targetRect = null;
        this._rects = null;
        this._onTrack = this._onTrack.bind(this);
        this._onDragStart = this._onDragStart.bind(this);
        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() {
        super.connectedCallback();
        Polymer.Async.idlePeriod.run(_ => {
          this._observeItems();
          this._updateItems();
          this._toggleListeners({enable: true});
        });
      } 

      disconnectedCallback() {
        super.disconnectedCallback();
        this._unobserveItems();
        this._toggleListeners({enable: false});
      }

      _toggleListeners({enable}) {
        const m = enable ? 'addEventListener' : 'removeEventListener';
        this.$.items[m]('dragstart', this._onDragStart);
        this.$.items[m]('transitionend', this._onTransitionEnd);
        this.$.items[m]('contextmenu', this._onContextMenu);
        this.$.items[m]('touchmove', this._onTouchMove);
        if (enable) {
          Polymer.Gestures.addListener(this, 'track', this._onTrack);
        } else {
          Polymer.Gestures.removeListener(this, 'track', this._onTrack);
        }
      }

      _onTrack(event) {
        switch(event.detail.state) {
          case 'start': this._trackStart(event); break;
          case 'track': this._track(event); break;
          case 'end': this._trackEnd(event); break;
        }
      }

      _trackStart(event) {
        if (this.disabled || this._animatingElementsToNaturalPosition) {
          return;
        }
        this._target = this._itemFromEvent(event);
        if (!this._target) {
          return;
        }
        event.stopPropagation();
        this._computedStyle = window.getComputedStyle(this);
        this._rects = this._getItemsRects();
        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._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;
        this.items.forEach((item, idx) => {
          const rect = this._rects[idx];
          item.classList.add('item--transform');
          item.style.transition = 'none';
          item.__originalWidth = item.style.width;
          item.__originalHeight = item.style.height;
          item.style.width = rect.width + 'px';
          item.style.height = rect.height + 'px';
          this._translate3d(rect.left, rect.top, 1, item);
          setTimeout(_ => {
            item.style.transition = null;
          }, 20);
        });
        this._setDragging(true);
      }

      _track(event) {
        if (!this.dragging) {
          return;
        }

        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 - this._containerPaddingAndMarginTop) - 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 - this._containerPaddingAndMarginTop - containerRect.top,
            bottom: targetRect.bottom - this._containerPaddingAndMarginBottom - 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);
          this._moveItemArray(this.items, targetIndex, overItemIndex);
          for(let i = 0; i < this.items.length; i++) {
            if (this.items[i] !== this._target) {
              const rect = this._rects[i];
              requestAnimationFrame(_ => {
                this._translate3d(rect.left, rect.top, 1, this.items[i]);
              });
            }
          }
        }
      }

      _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 - 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);
        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) {
          return;
        }
        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() {
        if (this.dragging || !this._target) {
          return;
        }
        const fragment = document.createDocumentFragment();
        this.items.forEach(item => {
          item.style.transform = '';
          item.style.width = item.__originalWidth;
          item.style.height = item.__originalHeight;
          item.classList.remove('item--transform');
          fragment.appendChild(item);
        });
        if (this.children[0]) {
          this.insertBefore(fragment, this.children[0]);
        } else {
          this.appendChild(fragment);
        }
        this.style.height = '';
        this._target.classList.remove('item--dragged');
        this._rects = null;
        this._targetRect = null;
        this._updateItems();
        this.dispatchEvent(new CustomEvent('sort-finish', {
          composed: true,
          detail: {
            target: this._target
          }
        }));
        this._target = null;
        this._animatingElementsToNaturalPosition = false;
      }

      _onDragStart(event) {
        event.preventDefault();
      }

      _onContextMenu(event) {
        if (this.dragging) {
          event.preventDefault();
          this._trackEnd();
        }
      }

      _onTouchMove(event) {
        event.preventDefault();
      }

      _updateItems() {
        if (this.dragging) {
          return;
        }
        const items = this.$.slot.assignedNodes().filter(node => {
          if ((node.nodeType === Node.ELEMENT_NODE) &&
              (!this.sortable || node.matches(this.sortable))) {
            return true;
          }
        });
        this._setItems(items);
      }

      _itemFromCoords(c, x, y) {
        if (!this._rects) {return;}
        let match = null;
        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++) {
          if (this.items.indexOf(path[i]) > -1) {
            return path[i];
          }
        }
      }

      _getItemsRects() {
        return this.items.map(item => {
          // 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
          };
        })
      }

      _observeItems() {
        if (!this._observer) {
          this._observer = new MutationObserver(_ => {
            this._updateItems();
          });
          this._observer.observe(this, {childList: true});
        }
      }

      _unobserveItems() {
        if (this._observer) {
          this._observer.disconnect();
          this._observer = null;
        }
      }

      /**
       * Move an array item from one position to another.     
       * Source: http://stackoverflow.com/questions/5306680/move-an-array-element-from-one-array-position-to-another
       */
      _moveItemArray(array, oldIndex, newIndex) {
        if (newIndex >= array.length) {
          var k = newIndex - array.length;
          while ((k--) + 1) {
          array.push(undefined);
          }
        }
        array.splice(newIndex, 0, array.splice(oldIndex, 1)[0]);
        return array;
      }

      _translate3d(x, y, z, el) {
        el.style.transform = `translate3d(${x}px, ${y}px, ${z}px)`;
      }

    }

    customElements.define(SortableList.is, SortableList);

  </script>
</dom-module>