draggable-rails 0.1.1 → 1.0.0.pre.beta

data/vendor/assets/javascripts/droppable.js

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

@@ -1,45 +0,0 @@
-/**
- * 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

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

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

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

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

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

@@ -1,47 +0,0 @@
-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';
-}