draggable-rails 0.1.0 → 0.1.1

data/vendor/assets/javascripts/sensors/sensor.js

@@ -0,0 +1,23 @@
+export default class Sensor {
+  constructor(containers = [], options = {}) {
+    this.containers = containers;
+    this.options = options;
+  }
+
+  attach() {
+    return this;
+  }
+
+  detach() {
+    return this;
+  }
+
+  trigger(element, sensorEvent) {
+    const event = document.createEvent('Event');
+    event.detail = sensorEvent;
+    event.initEvent(sensorEvent.type, true, true);
+    element.dispatchEvent(event);
+    this.lastEvent = sensorEvent;
+    return sensorEvent;
+  }
+}

data/vendor/assets/javascripts/sensors/touch-sensor.js

@@ -0,0 +1,145 @@
+import Sensor from './sensor';
+import {closest} from './../utils';
+
+import {
+  DragStartSensorEvent,
+  DragMoveSensorEvent,
+  DragStopSensorEvent,
+} from './../events/sensor-event';
+
+export default class TouchSensor extends Sensor {
+  constructor(containers = [], options = {}) {
+    super(containers, options);
+
+    this.dragging = false;
+    this.currentContainer = null;
+    this.currentScrollableParent = null;
+
+    this._onTouchStart = this._onTouchStart.bind(this);
+    this._onTouchHold = this._onTouchHold.bind(this);
+    this._onTouchEnd = this._onTouchEnd.bind(this);
+    this._onTouchMove = this._onTouchMove.bind(this);
+    this._onScroll = this._onScroll.bind(this);
+  }
+
+  attach() {
+    for (const container of this.containers) {
+      container.addEventListener('touchstart', this._onTouchStart, false);
+    }
+
+    document.addEventListener('touchend', this._onTouchEnd, false);
+    document.addEventListener('touchcancel', this._onTouchEnd, false);
+    document.addEventListener('touchmove', this._onTouchMove, false);
+  }
+
+  detach() {
+    for (const container of this.containers) {
+      container.removeEventListener('touchstart', this._onTouchStart, false);
+    }
+
+    document.removeEventListener('touchend', this._onTouchEnd, false);
+    document.removeEventListener('touchcancel', this._onTouchEnd, false);
+    document.removeEventListener('touchmove', this._onTouchMove, false);
+  }
+
+  _onScroll() {
+    // Cancel potential drag and allow scroll on iOS or other touch devices
+    clearTimeout(this.tapTimeout);
+  }
+
+  _onTouchStart(event) {
+    event.preventDefault();
+    const container = event.currentTarget;
+
+    // detect if body is scrolling on iOS
+    document.addEventListener('scroll', this._onScroll);
+    container.addEventListener('contextmenu', _onContextMenu);
+
+    this.currentScrollableParent = closest(container, (element) => element.offsetHeight < element.scrollHeight);
+
+    if (this.currentScrollableParent) {
+      this.currentScrollableParent.addEventListener('scroll', this._onScroll);
+    }
+
+    this.tapTimeout = setTimeout(this._onTouchHold(event, container), this.options.delay);
+  }
+
+  _onTouchHold(event, container) {
+    return () => {
+      const touch = event.touches[0] || event.changedTouches[0];
+      const target = event.target;
+
+      const dragStartEvent = new DragStartSensorEvent({
+        clientX: touch.pageX,
+        clientY: touch.pageY,
+        target,
+        container,
+        originalEvent: event,
+      });
+
+      this.trigger(container, dragStartEvent);
+
+      this.currentContainer = container;
+      this.dragging = !dragStartEvent.canceled();
+    };
+  }
+
+  _onTouchMove(event) {
+    if (!this.dragging) {
+      return;
+    }
+
+    event.stopPropagation();
+
+    const touch = event.touches[0] || event.changedTouches[0];
+    const target = document.elementFromPoint(touch.pageX - window.scrollX, touch.pageY - window.scrollY);
+
+    const dragMoveEvent = new DragMoveSensorEvent({
+      clientX: touch.pageX,
+      clientY: touch.pageY,
+      target,
+      container: this.currentContainer,
+      originalEvent: event,
+    });
+
+    this.trigger(this.currentContainer, dragMoveEvent);
+  }
+
+  _onTouchEnd(event) {
+    const container = event.currentTarget;
+
+    document.removeEventListener('scroll', this._onScroll);
+    container.removeEventListener('contextmenu', _onContextMenu);
+
+    if (this.currentScrollableParent) {
+      this.currentScrollableParent.removeEventListener('scroll', this._onScroll);
+    }
+
+    clearTimeout(this.tapTimeout);
+
+    if (!this.dragging) {
+      return;
+    }
+
+    const touch = event.touches[0] || event.changedTouches[0];
+
+    event.preventDefault();
+
+    const dragStopEvent = new DragStopSensorEvent({
+      clientX: touch.pageX,
+      clientY: touch.pageY,
+      target: null,
+      container: this.currentContainer,
+      originalEvent: event,
+    });
+
+    this.trigger(this.currentContainer, dragStopEvent);
+
+    this.currentContainer = null;
+    this.dragging = false;
+  }
+}
+
+function _onContextMenu(event) {
+  event.preventDefault();
+}

data/vendor/assets/javascripts/sortable.js

@@ -0,0 +1,161 @@
+import Draggable from './draggable';
+
+import {
+  SortableStartEvent,
+  SortableSortedEvent,
+  SortableStopEvent,
+} from './events/sortable-event';
+
+export default class Sortable {
+  constructor(containers = [], options = {}) {
+    this.draggable = new Draggable(containers, options);
+
+    this._onDragStart = this._onDragStart.bind(this);
+    this._onDragOverContainer = this._onDragOverContainer.bind(this);
+    this._onDragOver = this._onDragOver.bind(this);
+    this._onDragStop = this._onDragStop.bind(this);
+
+    this.draggable
+      .on('drag:start', this._onDragStart)
+      .on('drag:over:container', this._onDragOverContainer)
+      .on('drag:over', this._onDragOver)
+      .on('drag:stop', this._onDragStop);
+  }
+
+  destroy() {
+    this.draggable
+      .off('drag:start', this._onDragStart)
+      .off('drag:over:container', this._onDragOverContainer)
+      .off('drag:over', this._onDragOver)
+      .off('drag:stop', this._onDragStop)
+      .destroy();
+  }
+
+  on(type, callback) {
+    this.draggable.on(type, callback);
+    return this;
+  }
+
+  off(type, callback) {
+    this.draggable.off(type, callback);
+    return this;
+  }
+
+  _onDragStart(event) {
+    this.startIndex = index(event.source);
+
+    const sortableStartEvent = new SortableStartEvent({
+      dragEvent: event,
+      startIndex: this.startIndex,
+    });
+
+    this.draggable.trigger(sortableStartEvent);
+
+    if (sortableStartEvent.canceled()) {
+      event.cancel();
+    }
+  }
+
+  _onDragOverContainer(event) {
+    if (event.canceled()) {
+      return;
+    }
+
+    const moves = move(event.source, event.over, event.overContainer);
+
+    if (!moves) {
+      return;
+    }
+
+    const sortableSortedEvent = new SortableSortedEvent({
+      dragEvent: event,
+      moves,
+    });
+
+    this.draggable.triggerEvent(sortableSortedEvent);
+  }
+
+  _onDragOver(event) {
+    if (event.over === event.source) {
+      return;
+    }
+
+    const moves = move(event.source, event.over, event.overContainer);
+
+    if (!moves) {
+      return;
+    }
+
+    const sortableSortedEvent = new SortableSortedEvent({
+      dragEvent: event,
+      moves,
+    });
+
+    this.draggable.triggerEvent(sortableSortedEvent);
+  }
+
+  _onDragStop(event) {
+    const sortableStopEvent = new SortableStopEvent({
+      dragEvent: event,
+      oldIndex: this.startIndex,
+      newIndex: index(event.source),
+    });
+
+    this.draggable.triggerEvent(sortableStopEvent);
+
+    this.startIndex = null;
+    this.offset = null;
+  }
+}
+
+function index(element) {
+  return Array.prototype.indexOf.call(element.parentNode.children, element);
+}
+
+function move(source, over, overContainer) {
+  const emptyOverContainer = !overContainer.children.length;
+  const differentContainer = over && (source.parentNode !== over.parentNode);
+  const sameContainer = over && (source.parentNode === over.parentNode);
+
+  if (emptyOverContainer) {
+    return moveInsideEmptyContainer(source, overContainer);
+  } else if (sameContainer) {
+    return moveWithinContainer(source, over);
+  } else if (differentContainer) {
+    return moveOutsideContainer(source, over);
+  } else {
+    return null;
+  }
+}
+
+function moveInsideEmptyContainer(source, overContainer) {
+  const oldContainer = source.parentNode;
+  const oldIndex = index(source);
+
+  overContainer.appendChild(source);
+
+  return {oldIndex, newIndex: index(source), oldContainer, newContainer: overContainer};
+}
+
+function moveWithinContainer(source, over) {
+  const oldIndex = index(source);
+  const newIndex = index(over);
+
+  if (oldIndex < newIndex) {
+    source.parentNode.insertBefore(source, over.nextElementSibling);
+  } else {
+    source.parentNode.insertBefore(source, over);
+  }
+
+  return {oldIndex, newIndex, oldContainer: source.parentNode, newContainer: source.parentNode};
+}
+
+function moveOutsideContainer(source, over) {
+  const oldContainer = source.parentNode;
+  const oldIndex = index(source);
+  const newIndex = index(over);
+
+  over.parentNode.insertBefore(source, over);
+
+  return {oldIndex, newIndex, oldContainer, newContainer: source.parentNode};
+}

data/vendor/assets/javascripts/swappable.js

@@ -0,0 +1,104 @@
+import Draggable from './draggable';
+
+import {
+  SwappableStartEvent,
+  SwappableSwappedEvent,
+  SwappableStopEvent,
+} from './events/swappable-event';
+
+export default class Swappable {
+  constructor(containers = [], options = {}) {
+    this.draggable = new Draggable(containers, options);
+
+    this._onDragStart = this._onDragStart.bind(this);
+    this._onDragOver = this._onDragOver.bind(this);
+    this._onDragStop = this._onDragStop.bind(this);
+
+    this.draggable
+      .on('drag:start', this._onDragStart)
+      .on('drag:over', this._onDragOver)
+      .on('drag:stop', this._onDragStop);
+  }
+
+  destroy() {
+    this.draggable
+      .off('drag:start', this._onDragStart)
+      .off('drag:over', this._onDragOver)
+      .off('drag:stop', this._onDragStop)
+      .destroy();
+  }
+
+  on(type, callback) {
+    this.draggable.on(type, callback);
+    return this;
+  }
+
+  off(type, callback) {
+    this.draggable.off(type, callback);
+    return this;
+  }
+
+  _onDragStart(event) {
+    const swappableStartEvent = new SwappableStartEvent({
+      dragEvent: event,
+    });
+
+    this.draggable.triggerEvent(swappableStartEvent);
+
+    if (swappableStartEvent.canceled()) {
+      event.cancel();
+    }
+  }
+
+  _onDragOver(event) {
+    if (event.over === event.source) {
+      return;
+    }
+
+    if (event.canceled()) {
+      return;
+    }
+
+    if (this.lastOver && this.lastOver !== event.over) {
+      swap(this.lastOver, event.source);
+    }
+
+    this.lastOver = event.over;
+
+    swap(event.source, event.over);
+
+    // Let this cancel the actual swap
+    const swappableSwappedEvent = new SwappableSwappedEvent({
+      dragEvent: event,
+      swappedElement: event.over,
+    });
+
+    this.draggable.triggerEvent(swappableSwappedEvent);
+  }
+
+  _onDragStop(event) {
+    const swappableStopEvent = new SwappableStopEvent({
+      dragEvent: event,
+    });
+
+    this.draggable.triggerEvent(swappableStopEvent);
+    this.lastOver = null;
+  }
+}
+
+function withTempElement(callback) {
+  const tmpElement = document.createElement('div');
+  callback(tmpElement);
+  tmpElement.parentNode.removeChild(tmpElement);
+}
+
+function swap(source, over) {
+  const overParent = over.parentNode;
+  const sourceParent = source.parentNode;
+
+  withTempElement((tmpElement) => {
+    sourceParent.insertBefore(tmpElement, source);
+    overParent.insertBefore(source, over);
+    sourceParent.insertBefore(over, tmpElement);
+  });
+}

data/vendor/assets/javascripts/utils.js

@@ -0,0 +1,52 @@
+/** @module utils */
+
+export function closest(element, selector) {
+  if (!element) {
+    return null;
+  }
+
+  function conditionFn(currentElement) {
+    if (!currentElement) {
+      return currentElement;
+    } else if (typeof selector === 'string') {
+      const matchFunction = Element.prototype.matches ||
+                            Element.prototype.webkitMatchesSelector ||
+                            Element.prototype.mozMatchesSelector ||
+                            Element.prototype.msMatchesSelector;
+      return matchFunction.call(currentElement, selector);
+    } else {
+      return selector(currentElement);
+    }
+  }
+
+  let current = element;
+
+  do {
+    current = current.correspondingUseElement || current.correspondingElement || current;
+    if (conditionFn(current)) {
+      return current;
+    }
+    current = current.parentNode;
+  } while (current !== document.body && current !== document);
+
+  return null;
+}
+
+let scrollAnimationFrame;
+
+export function scroll(element, {clientX, clientY, speed, sensitivity}) {
+  if (scrollAnimationFrame) {
+    cancelAnimationFrame(scrollAnimationFrame);
+  }
+
+  function scrollFn() {
+    const rect = element.getBoundingClientRect();
+    const offsetY = (Math.abs(rect.bottom - clientY) <= sensitivity) - (Math.abs(rect.top - clientY) <= sensitivity);
+    const offsetX = (Math.abs(rect.right - clientX) <= sensitivity) - (Math.abs(rect.left - clientX) <= sensitivity);
+    element.scrollTop += offsetY * speed;
+    element.scrollLeft += offsetX * speed;
+    scrollAnimationFrame = requestAnimationFrame(scrollFn);
+  }
+
+  scrollAnimationFrame = requestAnimationFrame(scrollFn);
+}