draggable-rails 0.1.1 → 1.0.0.pre.beta

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

@@ -1,23 +0,0 @@
-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

@@ -1,145 +0,0 @@
-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

@@ -1,161 +0,0 @@
-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

@@ -1,104 +0,0 @@
-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

@@ -1,52 +0,0 @@
-/** @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);
-}