draggable-rails 0.1.0 → 0.1.1

data/vendor/assets/javascripts/events/snappable-event.js

@@ -0,0 +1,15 @@
+import AbstractEvent from './abstract-event';
+
+export class SnapEvent extends AbstractEvent {
+  get dragEvent() {
+    return this.data.dragEvent;
+  }
+}
+
+export class SnapInEvent extends SnapEvent {
+  static type = 'snap:in';
+}
+
+export class SnapOutEvent extends SnapEvent {
+  static type = 'snap:out';
+}

data/vendor/assets/javascripts/events/sortable-event.js

@@ -0,0 +1,35 @@
+import AbstractEvent from './abstract-event';
+
+export class SortableEvent extends AbstractEvent {
+  get dragEvent() {
+    return this.data.dragEvent;
+  }
+}
+
+export class SortableStartEvent extends SortableEvent {
+  static type = 'sortable:start';
+
+  get startIndex() {
+    return this.data.startIndex;
+  }
+}
+
+export class SortableSortedEvent extends SortableEvent {
+  static type = 'sortable:sorted';
+
+  get moves() {
+    return this.data.moves;
+  }
+}
+
+export class SortableStopEvent extends SortableEvent {
+  static type = 'sortable:stop';
+
+  get oldIndex() {
+    return this.data.oldIndex;
+  }
+
+  get newIndex() {
+    return this.data.newIndex;
+  }
+}

data/vendor/assets/javascripts/events/swappable-event.js

@@ -0,0 +1,23 @@
+import AbstractEvent from './abstract-event';
+
+export class SwappableEvent extends AbstractEvent {
+  get dragEvent() {
+    return this.data.dragEvent;
+  }
+}
+
+export class SwappableStartEvent extends SwappableEvent {
+  static type = 'swappable:start';
+}
+
+export class SwappableSwappedEvent extends SwappableEvent {
+  static type = 'swappable:swapped';
+
+  get swappedElement() {
+    return this.data.swappedElement;
+  }
+}
+
+export class SwappableStopEvent extends SwappableEvent {
+  static type = 'swappable:stop';
+}

data/vendor/assets/javascripts/index.js

@@ -0,0 +1,18 @@
+import Draggable from './draggable';
+import Sortable from './sortable';
+import Swappable from './swappable';
+import Droppable from './droppable';
+import AbstractEvent from './events/abstract-event';
+
+export {Draggable};
+export {Sortable};
+export {Swappable};
+export {Droppable};
+export {AbstractEvent};
+
+export function createEventClass(options) {
+  function EventConstructor() { return null; }
+  EventConstructor.prototype = AbstractEvent.prototype;
+  createEventClass.type = options.type;
+  return createEventClass;
+}

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

@@ -0,0 +1,158 @@
+import Sensor from './sensor';
+import {closest} from './../utils';
+
+import {
+  DragStartSensorEvent,
+  DragMoveSensorEvent,
+  DragStopSensorEvent,
+} from './../events/sensor-event';
+
+export default class DragSensor extends Sensor {
+  constructor(containers = [], options = {}) {
+    super(containers, options);
+
+    this.dragging = false;
+    this.currentContainer = null;
+
+    this._onMouseDown = this._onMouseDown.bind(this);
+    this._onMouseUp = this._onMouseUp.bind(this);
+    this._onDragStart = this._onDragStart.bind(this);
+    this._onDragOver = this._onDragOver.bind(this);
+    this._onDragEnd = this._onDragEnd.bind(this);
+    this._onDragDrop = this._onDragDrop.bind(this);
+  }
+
+  attach() {
+    for (const container of this.containers) {
+      container.addEventListener('mousedown', this._onMouseDown, true);
+      container.addEventListener('dragstart', this._onDragStart, false);
+      container.addEventListener('dragover', this._onDragOver, false);
+      container.addEventListener('dragend', this._onDragEnd, false);
+      container.addEventListener('drop', this._onDragDrop, false);
+    }
+
+    document.addEventListener('mouseup', this._onMouseUp, true);
+  }
+
+  detach() {
+    for (const container of this.containers) {
+      container.removeEventListener('mousedown', this._onMouseDown, true);
+      container.removeEventListener('dragstart', this._onDragStart, false);
+      container.removeEventListener('dragover', this._onDragOver, false);
+      container.removeEventListener('dragend', this._onDragEnd, false);
+      container.removeEventListener('drop', this._onDragDrop, false);
+    }
+
+    document.removeEventListener('mouseup', this._onMouseUp, true);
+  }
+
+  // private
+
+  _onDragStart(event) {
+    // Need for firefox. "text" key is needed for IE
+    event.dataTransfer.setData('text', '');
+    event.dataTransfer.effectAllowed = this.options.type;
+
+    const target = document.elementFromPoint(event.clientX, event.clientY);
+    this.currentContainer = event.currentTarget;
+
+    const dragStartEvent = new DragStartSensorEvent({
+      clientX: event.clientX,
+      clientY: event.clientY,
+      target,
+      container: this.currentContainer,
+      originalEvent: event,
+    });
+
+    this.trigger(this.currentContainer, dragStartEvent);
+
+    if (dragStartEvent.canceled()) {
+      this.dragging = false;
+      // prevent drag event if fired event has been prevented
+      event.preventDefault();
+    } else {
+      this.dragging = true;
+    }
+  }
+
+  _onDragOver(event) {
+    if (!this.dragging) {
+      return;
+    }
+
+    const target = document.elementFromPoint(event.clientX, event.clientY);
+    const container = event.currentTarget;
+
+    const dragMoveEvent = new DragMoveSensorEvent({
+      clientX: event.clientX,
+      clientY: event.clientY,
+      target,
+      container: this.currentContainer,
+      overContainer: container,
+      originalEvent: event,
+    });
+
+    this.trigger(container, dragMoveEvent);
+
+    // event.preventDefault();
+    // event.dataTransfer.dropEffect = 'copy';
+
+    if (!dragMoveEvent.canceled()) {
+      event.preventDefault();
+      // event.dataTransfer.dropEffect = this.options.type;
+    }
+  }
+
+  _onDragEnd(event) {
+    if (!this.dragging) {
+      return;
+    }
+
+    // prevent click on drop if draggable contains a clickable element
+    event.preventDefault();
+
+    const container = event.currentTarget;
+
+    const dragStopEvent = new DragStopSensorEvent({
+      clientX: event.clientX,
+      clientY: event.clientY,
+      originalEvent: event,
+      container,
+    });
+
+    this.trigger(container, dragStopEvent);
+
+    this.dragging = false;
+  }
+
+  _onDragDrop(event) { // eslint-disable-line class-methods-use-this
+    event.preventDefault();
+  }
+
+  _onMouseDown(event) {
+    // Firefox bug for inputs within draggables https://bugzilla.mozilla.org/show_bug.cgi?id=739071
+    if ((event.target && (event.target.form || event.target.contenteditable))) {
+      return;
+    }
+
+    const target = closest(event.target, this.options.draggable);
+
+    if (target) {
+      clearTimeout(this.mouseDownTimeout);
+
+      this.mouseDownTimeout = setTimeout(() => {
+        target.draggable = true;
+      }, this.options.delay);
+    }
+  }
+
+  _onMouseUp(event) {
+    clearTimeout(this.mouseDownTimeout);
+
+    const target = closest(event.target, this.options.draggable);
+
+    if (target) {
+      target.draggable = false;
+    }
+  }
+}

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

@@ -0,0 +1,166 @@
+import Sensor from './sensor';
+
+import {
+  DragStartSensorEvent,
+  DragMoveSensorEvent,
+  DragStopSensorEvent,
+  DragPressureSensorEvent,
+} from './../events/sensor-event';
+
+export default class ForceTouchSensor extends Sensor {
+  constructor(containers = [], options = {}) {
+    super(containers, options);
+
+    this.dragging = false;
+    this.mightDrag = false;
+    this.currentContainer = null;
+
+    this._onMouseForceWillBegin = this._onMouseForceWillBegin.bind(this);
+    this._onMouseForceDown = this._onMouseForceDown.bind(this);
+    this._onMouseDown = this._onMouseDown.bind(this);
+    this._onMouseForceChange = this._onMouseForceChange.bind(this);
+    this._onMouseMove = this._onMouseMove.bind(this);
+    this._onMouseUp = this._onMouseUp.bind(this);
+  }
+
+  attach() {
+    for (const container of this.containers) {
+      container.addEventListener('webkitmouseforcewillbegin', this._onMouseForceWillBegin, false);
+      container.addEventListener('webkitmouseforcedown', this._onMouseForceDown, false);
+      container.addEventListener('mousedown', this._onMouseDown, true);
+      container.addEventListener('webkitmouseforcechanged', this._onMouseForceChange, false);
+    }
+
+    document.addEventListener('mousemove', this._onMouseMove);
+    document.addEventListener('mouseup', this._onMouseUp);
+  }
+
+  detach() {
+    for (const container of this.containers) {
+      container.removeEventListener('webkitmouseforcewillbegin', this._onMouseForceWillBegin, false);
+      container.removeEventListener('webkitmouseforcedown', this._onMouseForceDown, false);
+      container.removeEventListener('mousedown', this._onMouseDown, true);
+      container.removeEventListener('webkitmouseforcechanged', this._onMouseForceChange, false);
+    }
+
+    document.removeEventListener('mousemove', this._onMouseMove);
+    document.removeEventListener('mouseup', this._onMouseUp);
+  }
+
+  _onMouseForceWillBegin(event) {
+    event.preventDefault();
+    this.mightDrag = true;
+  }
+
+  _onMouseForceDown(event) {
+    if (this.dragging) {
+      return;
+    }
+
+    const target = document.elementFromPoint(event.clientX, event.clientY);
+    const container = event.currentTarget;
+
+    const dragStartEvent = new DragStartSensorEvent({
+      clientX: event.clientX,
+      clientY: event.clientY,
+      target,
+      container,
+      originalEvent: event,
+    });
+
+    this.trigger(container, dragStartEvent);
+
+    this.currentContainer = container;
+    this.dragging = !dragStartEvent.canceled();
+    this.mightDrag = false;
+  }
+
+  _onMouseUp(event) {
+    if (!this.dragging) {
+      return;
+    }
+
+    const dragStopEvent = new DragStopSensorEvent({
+      clientX: event.clientX,
+      clientY: event.clientY,
+      target: null,
+      container: this.currentContainer,
+      originalEvent: event,
+    });
+
+    this.trigger(this.currentContainer, dragStopEvent);
+
+    this.currentContainer = null;
+    this.dragging = false;
+    this.mightDrag = false;
+  }
+
+  _onMouseDown(event) {
+    if (!this.mightDrag) {
+      return;
+    }
+
+    // Need workaround for real click
+    // Cancel potential drag events
+    event.stopPropagation();
+    event.stopImmediatePropagation();
+    event.preventDefault();
+  }
+
+  _onMouseMove(event) {
+    if (!this.dragging) {
+      return;
+    }
+
+    const target = document.elementFromPoint(event.clientX, event.clientY);
+
+    const dragMoveEvent = new DragMoveSensorEvent({
+      clientX: event.clientX,
+      clientY: event.clientY,
+      target,
+      container: this.currentContainer,
+      originalEvent: event,
+    });
+
+    this.trigger(this.currentContainer, dragMoveEvent);
+  }
+
+  _onMouseForceChange(event) {
+    if (this.dragging) {
+      return;
+    }
+
+    const target = event.target;
+    const container = event.currentTarget;
+
+    const dragPressureEvent = new DragPressureSensorEvent({
+      pressure: event.webkitForce,
+      clientX: event.clientX,
+      clientY: event.clientY,
+      target,
+      container,
+      originalEvent: event,
+    });
+
+    this.trigger(container, dragPressureEvent);
+  }
+
+  _onMouseForceGlobalChange(event) {
+    if (!this.dragging) {
+      return;
+    }
+
+    const target = event.target;
+
+    const dragPressureEvent = new DragPressureSensorEvent({
+      pressure: event.webkitForce,
+      clientX: event.clientX,
+      clientY: event.clientY,
+      target,
+      container: this.currentContainer,
+      originalEvent: event,
+    });
+
+    this.trigger(this.currentContainer, dragPressureEvent);
+  }
+}

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

@@ -0,0 +1,110 @@
+import Sensor from './sensor';
+
+import {
+  DragStartSensorEvent,
+  DragMoveSensorEvent,
+  DragStopSensorEvent,
+} from './../events/sensor-event';
+
+export default class MouseSensor extends Sensor {
+  constructor(containers = [], options = {}) {
+    super(containers, options);
+
+    this.dragging = false;
+    this.mouseDown = false;
+    this.currentContainer = null;
+
+    this._onMouseDown = this._onMouseDown.bind(this);
+    this._onMouseMove = this._onMouseMove.bind(this);
+    this._onMouseUp = this._onMouseUp.bind(this);
+  }
+
+  attach() {
+    for (const container of this.containers) {
+      container.addEventListener('mousedown', this._onMouseDown, true);
+    }
+
+    document.addEventListener('mousemove', this._onMouseMove);
+    document.addEventListener('mouseup', this._onMouseUp);
+  }
+
+  detach() {
+    for (const container of this.containers) {
+      container.removeEventListener('mousedown', this._onMouseDown, true);
+    }
+
+    document.removeEventListener('mousemove', this._onMouseMove);
+    document.removeEventListener('mouseup', this._onMouseUp);
+  }
+
+  _onMouseDown(event) {
+    if (event.button === 2) {
+      return;
+    }
+
+    this.mouseDown = true;
+    const target = document.elementFromPoint(event.clientX, event.clientY);
+    const container = event.currentTarget;
+
+    clearTimeout(this.mouseDownTimeout);
+    this.mouseDownTimeout = setTimeout(() => {
+      if (!this.mouseDown) {
+        return;
+      }
+
+      const dragStartEvent = new DragStartSensorEvent({
+        clientX: event.clientX,
+        clientY: event.clientY,
+        target,
+        container,
+        originalEvent: event,
+      });
+
+      this.trigger(container, dragStartEvent);
+
+      this.currentContainer = container;
+      this.dragging = !dragStartEvent.canceled();
+    }, this.options.delay);
+  }
+
+  _onMouseMove(event) {
+    if (!this.dragging) {
+      return;
+    }
+
+    const target = document.elementFromPoint(event.clientX, event.clientY);
+
+    const dragMoveEvent = new DragMoveSensorEvent({
+      clientX: event.clientX,
+      clientY: event.clientY,
+      target,
+      container: this.currentContainer,
+      originalEvent: event,
+    });
+
+    this.trigger(this.currentContainer, dragMoveEvent);
+  }
+
+  _onMouseUp(event) {
+    this.mouseDown = false;
+
+    if (!this.dragging) {
+      return;
+    }
+
+    const target = document.elementFromPoint(event.clientX, event.clientY);
+
+    const dragStopEvent = new DragStopSensorEvent({
+      clientX: event.clientX,
+      clientY: event.clientY,
+      target,
+      container: this.currentContainer,
+      originalEvent: event,
+    });
+
+    this.trigger(this.currentContainer, dragStopEvent);
+
+    this.currentContainer = null;
+    this.dragging = false;
+  }
+}