draggable-rails 0.1.0 → 0.1.1

data/vendor/assets/javascripts/droppable.js

@@ -0,0 +1,168 @@
+import Draggable from './draggable';
+import {closest} from './utils';
+
+import {
+  DroppableOverEvent,
+  DroppableOutEvent,
+} from './events/droppable-event';
+
+const classes = {
+  'droppable:active': 'draggable-droppable--active',
+  'droppable:occupied': 'draggable-droppable--occupied',
+};
+
+export default class Droppable {
+  constructor(containers = [], options = {}) {
+    this.draggable = new Draggable(containers, options);
+    this.options = {...options};
+
+    this._onDragStart = this._onDragStart.bind(this);
+    this._onDragMove = this._onDragMove.bind(this);
+    this._onDragStop = this._onDragStop.bind(this);
+
+    this.draggable
+      .on('drag:start', this._onDragStart)
+      .on('drag:move', this._onDragMove)
+      .on('drag:stop', this._onDragStop);
+  }
+
+  destroy() {
+    this.draggable
+      .off('drag:start', this._onDragStart)
+      .off('drag:move', this._onDragMove)
+      .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;
+  }
+
+  getClassNameFor(name) {
+    return this.options.classes[name] || classes[name];
+  }
+
+  _onDragStart(event) {
+    if (event.canceled()) {
+      return;
+    }
+
+    this.droppables = this._getDroppables();
+    const droppable = event.sensorEvent.target.closest(this.options.droppable);
+
+    if (!droppable) {
+      event.cancel();
+      return;
+    }
+
+    this.initialDroppable = droppable;
+
+    for (const droppableElement of this.droppables) {
+      if (droppableElement.classList.contains(this.getClassNameFor('droppable:occupied'))) {
+        continue;
+      }
+
+      droppableElement.classList.add(this.getClassNameFor('droppable:active'));
+    }
+  }
+
+  _onDragMove(event) {
+    if (event.canceled()) {
+      return;
+    }
+
+    const droppable = this._closestDroppable(event.sensorEvent.target);
+    const overEmptyDroppable = droppable && !droppable.classList.contains(this.getClassNameFor('droppable:occupied'));
+
+    if (overEmptyDroppable && this._drop(event, droppable)) {
+      this.lastDroppable = droppable;
+    } else if ((!droppable || droppable === this.initialDroppable) && this.lastDroppable) {
+      this._release(event);
+      this.lastDroppable = null;
+    }
+  }
+
+  _onDragStop() {
+    const occupiedClass = this.getClassNameFor('droppable:occupied');
+
+    for (const droppable of this.droppables) {
+      droppable.classList.remove(this.getClassNameFor('droppable:active'));
+    }
+
+    if (this.lastDroppable && this.lastDroppable !== this.initialDroppable) {
+      this.initialDroppable.classList.remove(occupiedClass);
+    }
+
+    this.droppables = null;
+    this.lastDroppable = null;
+    this.initialDroppable = null;
+  }
+
+  _drop(event, droppable) {
+    const droppableOverEvent = new DroppableOverEvent({
+      dragEvent: event,
+      droppable,
+    });
+
+    this.draggable.triggerEvent(droppableOverEvent);
+
+    if (droppableOverEvent.canceled()) {
+      return false;
+    }
+
+    const occupiedClass = this.getClassNameFor('droppable:occupied');
+
+    if (this.lastDroppable) {
+      this.lastDroppable.classList.remove(occupiedClass);
+    }
+
+    droppable.appendChild(event.source);
+    droppable.classList.add(occupiedClass);
+
+    return true;
+  }
+
+  _release(event) {
+    const droppableOutEvent = new DroppableOutEvent({
+      dragEvent: event,
+      droppable: this.lastDroppable,
+    });
+
+    this.draggable.triggerEvent(droppableOutEvent);
+
+    if (droppableOutEvent.canceled()) {
+      return;
+    }
+
+    this.initialDroppable.appendChild(event.source);
+    this.lastDroppable.classList.remove(this.getClassNameFor('droppable:occupied'));
+  }
+
+  _closestDroppable(target) {
+    if (!this.droppables) {
+      return null;
+    }
+
+    return closest(target, (element) => Array.from(this.droppables).includes(element));
+  }
+
+  _getDroppables() {
+    const droppables = this.options.droppable;
+
+    if (typeof droppables === 'string') {
+      return document.querySelectorAll(droppables);
+    } else if (droppables instanceof NodeList || droppables instanceof Array) {
+      return droppables;
+    } else if (typeof droppables === 'function') {
+      return droppables();
+    } else {
+      return [];
+    }
+  }
+}

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

@@ -0,0 +1,45 @@
+/**
+ * All events fired by draggable inherit this class. You can call `cancel()` to
+ * cancel a specific event or you can check if an event has been canceled by
+ * calling `canceled()`.
+ * @abstract
+ * @class
+ */
+export default class AbstractEvent {
+  static type = 'event';
+  static cancelable = false;
+
+  constructor(data) {
+    this._canceled = false;
+    this.data = data;
+  }
+
+  get type() {
+    return this.constructor.type;
+  }
+
+  get cancelable() {
+    return this.constructor.cancelable;
+  }
+
+  /**
+   * Cancels a specific event
+   * @abstract
+   */
+  cancel() {
+    // We should be declaring if events are cancelable
+    // if (!this.cancelable) {
+    //   throw new Error('This event is not cancelable');
+    // }
+    this._canceled = true;
+  }
+
+  /**
+   * Check if event has been canceled
+   * @abstract
+   * @return {Boolean}
+   */
+  canceled() {
+    return Boolean(this._canceled);
+  }
+}

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

@@ -0,0 +1,25 @@
+import AbstractEvent from './abstract-event';
+
+export class CollidableEvent extends AbstractEvent {
+  static type = 'collidable';
+
+  get dragEvent() {
+    return this.data.dragEvent;
+  }
+}
+
+export class CollidableInEvent extends CollidableEvent {
+  static type = 'collidable:in';
+
+  get collidingElement() {
+    return this.data.collidingElement;
+  }
+}
+
+export class CollidableOutEvent extends CollidableEvent {
+  static type = 'collidable:out';
+
+  get collidingElement() {
+    return this.data.collidingElement;
+  }
+}

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

@@ -0,0 +1,91 @@
+import AbstractEvent from './abstract-event';
+
+export class DragEvent extends AbstractEvent {
+  get source() {
+    return this.data.source;
+  }
+
+  get mirror() {
+    return this.data.mirror;
+  }
+
+  get sourceContainer() {
+    return this.data.sourceContainer;
+  }
+
+  get sensorEvent() {
+    return this.data.sensorEvent;
+  }
+
+  get originalEvent() {
+    if (this.sensorEvent) {
+      return this.sensorEvent.originalEvent;
+    }
+
+    return null;
+  }
+
+  hasMirror() {
+    return Boolean(this.mirror);
+  }
+}
+
+export class DragStartEvent extends DragEvent {
+  static type = 'drag:start';
+}
+
+export class DragMoveEvent extends DragEvent {
+  static type = 'drag:move';
+}
+
+export class DragOutContainerEvent extends DragEvent {
+  static type = 'drag:out:container';
+
+  get overContainer() {
+    return this.data.overContainer;
+  }
+}
+
+export class DragOutEvent extends DragEvent {
+  static type = 'drag:out';
+
+  get overContainer() {
+    return this.data.overContainer;
+  }
+
+  get over() {
+    return this.data.over;
+  }
+}
+
+export class DragOverContainerEvent extends DragEvent {
+  static type = 'drag:over:container';
+
+  get overContainer() {
+    return this.data.overContainer;
+  }
+}
+
+export class DragOverEvent extends DragEvent {
+  static type = 'drag:over';
+
+  get overContainer() {
+    return this.data.overContainer;
+  }
+
+  get over() {
+    return this.data.over;
+  }
+}
+
+export class DragPressureEvent extends DragEvent {
+  static type = 'drag:pressure';
+
+  get pressure() {
+    return this.data.pressure;
+  }
+}
+
+export class DragStopEvent extends DragEvent {
+  static type = 'drag:stop';
+}

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

@@ -0,0 +1,17 @@
+import AbstractEvent from './abstract-event';
+
+export class DraggableEvent extends AbstractEvent {
+  static type = 'draggable';
+
+  get draggable() {
+    return this.data.draggable;
+  }
+}
+
+export class DraggableInitializedEvent extends DraggableEvent {
+  static type = 'draggable:initialize';
+}
+
+export class DraggableDestroyEvent extends DraggableEvent {
+  static type = 'draggable:destroy';
+}

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

@@ -0,0 +1,21 @@
+import AbstractEvent from './abstract-event';
+
+export class DroppableEvent extends AbstractEvent {
+  static type = 'droppable';
+
+  get dragEvent() {
+    return this.data.dragEvent;
+  }
+
+  get droppable() {
+    return this.data.droppable;
+  }
+}
+
+export class DroppableOverEvent extends DroppableEvent {
+  static type = 'droppable:over';
+}
+
+export class DroppableOutEvent extends DroppableEvent {
+  static type = 'droppable:out';
+}

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

@@ -0,0 +1,43 @@
+import AbstractEvent from './abstract-event';
+
+export class MirrorEvent extends AbstractEvent {
+  get source() {
+    return this.data.source;
+  }
+
+  get mirror() {
+    return this.data.mirror;
+  }
+
+  get sourceContainer() {
+    return this.data.sourceContainer;
+  }
+
+  get sensorEvent() {
+    return this.data.sensorEvent;
+  }
+
+  get originalEvent() {
+    if (this.sensorEvent) {
+      return this.sensorEvent.originalEvent;
+    }
+
+    return null;
+  }
+}
+
+export class MirrorCreatedEvent extends MirrorEvent {
+  static type = 'mirror:created';
+}
+
+export class MirrorAttachedEvent extends MirrorEvent {
+  static type = 'mirror:attached';
+}
+
+export class MirrorMoveEvent extends MirrorEvent {
+  static type = 'mirror:move';
+}
+
+export class MirrorDestroyEvent extends MirrorEvent {
+  static type = 'mirror:destroy';
+}

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

@@ -0,0 +1,47 @@
+import AbstractEvent from './abstract-event';
+
+export class SensorEvent extends AbstractEvent {
+  get originalEvent() {
+    return this.data.originalEvent;
+  }
+
+  get clientX() {
+    return this.data.clientX;
+  }
+
+  get clientY() {
+    return this.data.clientY;
+  }
+
+  get target() {
+    return this.data.target;
+  }
+
+  get container() {
+    return this.data.container;
+  }
+
+  get overContainer() {
+    return this.data.overContainer;
+  }
+
+  get pressure() {
+    return this.data.pressure;
+  }
+}
+
+export class DragStartSensorEvent extends SensorEvent {
+  static type = 'drag:start';
+}
+
+export class DragMoveSensorEvent extends SensorEvent {
+  static type = 'drag:move';
+}
+
+export class DragStopSensorEvent extends SensorEvent {
+  static type = 'drag:stop';
+}
+
+export class DragPressureSensorEvent extends SensorEvent {
+  static type = 'drag:pressure';
+}