From 542a3b88f1c192becb310a6d45e8c5b2d8827f44 Mon Sep 17 00:00:00 2001 From: Max Hoffmann Date: Fri, 6 Oct 2017 09:56:28 -0400 Subject: [PATCH 01/34] Add nvmrc file with node v8.6.0 --- .nvmrc | 1 + 1 file changed, 1 insertion(+) create mode 100644 .nvmrc diff --git a/.nvmrc b/.nvmrc new file mode 100644 index 00000000..2dc0523a --- /dev/null +++ b/.nvmrc @@ -0,0 +1 @@ +v8.6.0 From 2d3ab5eb851a6dd733d079aecbb7549d4ac93dcb Mon Sep 17 00:00:00 2001 From: Max Hoffmann Date: Fri, 6 Oct 2017 10:05:57 -0400 Subject: [PATCH 02/34] Restructure of Draggable --- config.json | 5 +- src/{draggable.js => Draggable/Draggable.js} | 24 ++--- src/Draggable/README.md | 95 +++++++++++++++++++ src/Draggable/index.js | 3 + .../Draggable/tests/Draggable.test.js | 0 src/droppable.js | 2 +- src/index.js | 2 +- src/sortable.js | 2 +- src/swappable.js | 2 +- 9 files changed, 118 insertions(+), 17 deletions(-) rename src/{draggable.js => Draggable/Draggable.js} (96%) create mode 100644 src/Draggable/README.md create mode 100644 src/Draggable/index.js rename test/src/draggable.test.js => src/Draggable/tests/Draggable.test.js (100%) diff --git a/config.json b/config.json index 328f66ad..41322af1 100644 --- a/config.json +++ b/config.json @@ -1,5 +1,8 @@ { - "testMatch": ["/test/src/**/*.js"], + "testMatch": [ + "/test/src/**/*.test.js", + "/src/**/*.test.js" + ], "setupFiles": ["/test/setup.js"], "transform": {".*": "/node_modules/babel-jest"}, "moduleFileExtensions": ["js"], diff --git a/src/draggable.js b/src/Draggable/Draggable.js similarity index 96% rename from src/draggable.js rename to src/Draggable/Draggable.js index 13a67dad..381aefad 100644 --- a/src/draggable.js +++ b/src/Draggable/Draggable.js @@ -1,20 +1,20 @@ -import {closest} from './utils'; +import {closest} from './../utils'; -import Accessibility from './core/accessibility'; -import Mirror from './core/mirror'; +import Accessibility from './../core/accessibility'; +import Mirror from './../core/mirror'; -import Collidable from './behaviour/collidable'; -import Snappable from './behaviour/snappable'; +import Collidable from './../behaviour/collidable'; +import Snappable from './../behaviour/snappable'; -import DragSensor from './sensors/drag-sensor'; -import MouseSensor from './sensors/mouse-sensor'; -import TouchSensor from './sensors/touch-sensor'; -import ForceTouchSensor from './sensors/force-touch-sensor'; +import DragSensor from './../sensors/drag-sensor'; +import MouseSensor from './../sensors/mouse-sensor'; +import TouchSensor from './../sensors/touch-sensor'; +import ForceTouchSensor from './../sensors/force-touch-sensor'; import { DraggableInitializedEvent, DraggableDestroyEvent, -} from './events/draggable-event'; +} from './../events/draggable-event'; import { DragStartEvent, @@ -25,14 +25,14 @@ import { DragOverEvent, DragStopEvent, DragPressureEvent, -} from './events/drag-event'; +} from './../events/drag-event'; import { MirrorCreatedEvent, MirrorAttachedEvent, MirrorMoveEvent, MirrorDestroyEvent, -} from './events/mirror-event'; +} from './../events/mirror-event'; const defaults = { draggable: '.draggable-source', diff --git a/src/Draggable/README.md b/src/Draggable/README.md new file mode 100644 index 00000000..9bc6b7a6 --- /dev/null +++ b/src/Draggable/README.md @@ -0,0 +1,95 @@ +## Draggable + +### API + +**`new Draggable(containers: Array[HTMLElement]|NodeList, options: Object): Draggable`** +To create a draggable instance you need to specify the containers that hold draggable items, e.g. +`[document.body]` would work too. The second argument is an options object, which is described +below. + +**`draggable.on(eventName: String, listener: Function): Draggable`** +Draggable is an event emitter, so you can register callbacks for events. Draggable +also supports method chaining. + +**`draggable.off(eventName: String, listener: Function): Draggable`** +You can unregister listeners by using `.off()`, make sure to provide the same callback. + +**`draggable.trigger(eventName: String, event: AbstractEvent): Draggable`** +You can trigger events through draggable. This is used to fire events internally or by +extensions of Draggable. + +**`draggable.destroy(): void`** +Detaches all sensors and listeners, and cleans up after itself. + +### Options + +**`draggable {String}`** +A css selector for draggable elements within the `containers` specified. By default it will +look for an element with `.draggable-source` class. Default: `.draggable-source` + +**`handle {String}`** +Specify a css selector for a handle element if you don't want to allow drag action +on the entire element. Default: `null` + +**`delay {Number}`** +If you want to delay a drag start you can specify delay in milliseconds. This can be useful +for draggable elements within scrollable containers. Default: `0` + +**`native {Boolean}`** +If enabled Draggable will use the browsers native drag events to detect drag behaviour. By default +it will use mouse events to detect drag behaviour. You can only customize the mirror element when +using mouse events, otherwise mirror will be `null` in events. Default: `false` + +**`plugins {Array[Plugin]}`** +Plugins add behaviour to Draggable by hooking into its life cycle, e.g. one of the default +plugins controls the mirror movement. Default: `[Mirror, Accessibility]` + +**`appendTo {String|HTMLElement|Function}`** +Draggable allows you to specify where the mirror should be appended to. You can specify a css +selector, a HTMLElement or a function that returns a HTMLElement + +**`classes {Object}`** +Draggable adds classes to elements to indicate state. These classes can be used to add styling +on elements in certain states. + +### Events + +| Name | Description | Cancelable | Cancelable action | +| --------------------- | ---------------------------------------------------------- | ----------- | -------------------- | +| `drag:start` | Gets fired when drag action begins | true | Prevents drag start | +| `drag:move` | Gets fired when moving a draggable around | false | - | +| `drag:over` | Gets fired when dragging over other draggable | false | - | +| `drag:over:container` | Gets fired when dragging over other draggable container | false | - | +| `drag:out` | Gets fired when dragging out of other draggable | false | - | +| `drag:out:container` | Gets fired when dragging out of other draggable container | false | - | +| `drag:stop` | Gets fired when draggable has been released | false | - | +| `drag:pressure` | Gets fired when using force touch on draggable element | false | - | +| `mirror:created` | Gets fired when draggable mirror gets created | false | - | +| `mirror:attached` | Gets fired when draggable mirror gets attached to DOM | false | - | +| `mirror:move` | Gets fired when draggable mirror moves | true | Stop mirror movement | + +### Classes + +| Name | Description | Default | +| -------------------- | -------------------------------------------------------------------- | ---------------------------------- | +| `body:dragging` | Class added on the document body while dragging | `draggable--is-dragging` | +| `container:dragging` | Class added on the container where the draggable was picked up from | `draggable-container--is-dragging` | +| `source:dragging` | Class added on the draggable element that has been picked up | `draggable-source--is-dragging` | +| `source:placed` | Class added on the draggable element on `drag:stop` | `draggable-source--placed` | +| `container:placed` | Class added on the draggable container element on `drag:stop` | `draggable-container--placed` | +| `draggable:over` | Class added on draggable element you are dragging over | `draggable--over` | +| `container:over` | Class added on draggable container element you are dragging over | `draggable-container--over` | +| `mirror` | Class added on the mirror element | `draggable-mirror` | + +### Example + +This sample code will make list items draggable: + +```js +import {Draggable} from '@shopify/draggable'; + +new Draggable(document.querySelectorAll('ul')) + .on('drag:start', () => console.log('drag:start')) + .on('drag:move', () => console.log('drag:move')) + .on('drag:stop', () => console.log('drag:stop')); +``` diff --git a/src/Draggable/index.js b/src/Draggable/index.js new file mode 100644 index 00000000..d71596bf --- /dev/null +++ b/src/Draggable/index.js @@ -0,0 +1,3 @@ +import Draggable from './Draggable'; + +export default Draggable; diff --git a/test/src/draggable.test.js b/src/Draggable/tests/Draggable.test.js similarity index 100% rename from test/src/draggable.test.js rename to src/Draggable/tests/Draggable.test.js diff --git a/src/droppable.js b/src/droppable.js index 7ceb65f0..454217b1 100644 --- a/src/droppable.js +++ b/src/droppable.js @@ -1,4 +1,4 @@ -import Draggable from './draggable'; +import Draggable from './Draggable'; import {closest} from './utils'; import { diff --git a/src/index.js b/src/index.js index 29ef6cb9..43944a53 100644 --- a/src/index.js +++ b/src/index.js @@ -1,4 +1,4 @@ -import Draggable from './draggable'; +import Draggable from './Draggable'; import Sortable from './sortable'; import Swappable from './swappable'; import Droppable from './droppable'; diff --git a/src/sortable.js b/src/sortable.js index 3b6446b7..fd47a8aa 100644 --- a/src/sortable.js +++ b/src/sortable.js @@ -1,4 +1,4 @@ -import Draggable from './draggable'; +import Draggable from './Draggable'; import { SortableStartEvent, diff --git a/src/swappable.js b/src/swappable.js index cbbc5457..49c4f113 100644 --- a/src/swappable.js +++ b/src/swappable.js @@ -1,4 +1,4 @@ -import Draggable from './draggable'; +import Draggable from './Draggable'; import { SwappableStartEvent, From 370227d00d84050127a59612ce541ddf07479f73 Mon Sep 17 00:00:00 2001 From: Max Hoffmann Date: Fri, 6 Oct 2017 10:29:17 -0400 Subject: [PATCH 03/34] Restructure of Droppable --- src/{droppable.js => Droppable/Droppable.js} | 6 +- src/Droppable/README.md | 61 ++++++++++++++++++++ src/Droppable/index.js | 3 + src/index.js | 2 +- 4 files changed, 68 insertions(+), 4 deletions(-) rename src/{droppable.js => Droppable/Droppable.js} (97%) create mode 100644 src/Droppable/README.md create mode 100644 src/Droppable/index.js diff --git a/src/droppable.js b/src/Droppable/Droppable.js similarity index 97% rename from src/droppable.js rename to src/Droppable/Droppable.js index 454217b1..009580fa 100644 --- a/src/droppable.js +++ b/src/Droppable/Droppable.js @@ -1,10 +1,10 @@ -import Draggable from './Draggable'; -import {closest} from './utils'; +import Draggable from './../Draggable'; +import {closest} from './../utils'; import { DroppableOverEvent, DroppableOutEvent, -} from './events/droppable-event'; +} from './../events/droppable-event'; const classes = { 'droppable:active': 'draggable-droppable--active', diff --git a/src/Droppable/README.md b/src/Droppable/README.md new file mode 100644 index 00000000..2d282387 --- /dev/null +++ b/src/Droppable/README.md @@ -0,0 +1,61 @@ +## Droppable + +Droppable allows you to declare draggable and droppable elements via options. +Droppable fires two events on top of the draggable events: `droppable:over` and `droppable:out`. + +### API + +**`new Droppable(containers: Array[HTMLElement]|NodeList, options: Object): Droppable`** +To create a droppable instance you need to specify the containers that hold draggable items, e.g. +`[document.body]` would work too. The second argument is an options object, which is described +below. + +**`droppable.on(eventName: String, listener: Function): Droppable`** +Droppable uses Draggables event emitter, so you can register callbacks for events. Droppable +also supports method chaining. + +**`droppable.off(eventName: String, listener: Function): Droppable`** +You can unregister listeners by using `.off()`, make sure to provide the same callback. + +**`droppable.trigger(eventName: String, event: AbstractEvent): Droppable`** +You can trigger events through droppable. This is used to fire events internally or by +extensions of Draggable. + +**`droppable.destroy(): void`** +Detaches all sensors and listeners, and cleans up after itself. + +### Options + +**`droppable {String|Array[HTMLElement]|NodeList|Function}`** +A css selector string, an array of elements, a NodeList or a function returning elements for droppable +elements within the `containers` specified. + +### Events + +| Name | Description | Cancelable | Cancelable action | +| --------------------- | ---------------------------------------------------------- | ----------- | -------------------- | +| `droppable:over` | Gets fired when dragging over droppable element | true | Prevents drop | +| `droppable:out` | Gets fired when dragging out of a droppable element | true | Prevents release | + +### Classes + +| Name | Description | Default | +| -------------------- | -------------------------------------------------------------------- | ---------------------------------- | +| `droppable:active` | Class added on droppables when drag starts | `draggable-droppable--active` | +| `droppable:occupied` | Class added on droppable element, when it contains a draggable | `draggable-droppable--occupied` | + +### Example + +This sample code will make list items draggable and allows to drop them inside another element: + +```js +import {Droppable} from '@shopify/draggable'; + +const droppable = new Droppable(document.querySelectorAll('ul'), { + draggable: 'li', + droppable: '#dropzone', +}); + +droppable.on('droppable:over', () => console.log('droppable:over')) +droppable.on('droppable:out', () => console.log('droppable:out')); +``` diff --git a/src/Droppable/index.js b/src/Droppable/index.js new file mode 100644 index 00000000..007027bc --- /dev/null +++ b/src/Droppable/index.js @@ -0,0 +1,3 @@ +import Droppable from './Droppable'; + +export default Droppable; diff --git a/src/index.js b/src/index.js index 43944a53..cce913c7 100644 --- a/src/index.js +++ b/src/index.js @@ -1,7 +1,7 @@ import Draggable from './Draggable'; +import Droppable from './Droppable'; import Sortable from './sortable'; import Swappable from './swappable'; -import Droppable from './droppable'; import AbstractEvent from './events/abstract-event'; import Snappable from './behaviour/snappable'; import Collidable from './behaviour/collidable'; From e62a64edc0ba82ecef285bf8f0ae7883f68d5c55 Mon Sep 17 00:00:00 2001 From: Max Hoffmann Date: Fri, 6 Oct 2017 10:39:24 -0400 Subject: [PATCH 04/34] Restructure of Swappable --- src/Swappable/README.md | 57 +++++++++++++++++++ src/{swappable.js => Swappable/Swappable.js} | 4 +- src/Swappable/index.js | 3 + .../Swappable/tests/Swappable.test.js | 0 src/index.js | 2 +- 5 files changed, 63 insertions(+), 3 deletions(-) create mode 100644 src/Swappable/README.md rename src/{swappable.js => Swappable/Swappable.js} (96%) create mode 100644 src/Swappable/index.js rename test/src/swappable.test.js => src/Swappable/tests/Swappable.test.js (100%) diff --git a/src/Swappable/README.md b/src/Swappable/README.md new file mode 100644 index 00000000..9173f895 --- /dev/null +++ b/src/Swappable/README.md @@ -0,0 +1,57 @@ +## Swappable + +Swappable allows you to swap elements by dragging over them. No order will be maintained (unlike Sortable), +so any draggable element that gets dragged over will be swapped with the source element. + +### API + +**`new Swappable(containers: Array[HTMLElement]|NodeList, options: Object): Swappable`** +To create a swappable instance you need to specify the containers that hold draggable items, e.g. +`[document.body]` would work too. The second argument is an options object, which is described +below. + +**`swappable.on(eventName: String, listener: Function): Swappable`** +Swappable uses Draggables event emitter, so you can register callbacks for events. Swappable +also supports method chaining. + +**`swappable.off(eventName: String, listener: Function): Swappable`** +You can unregister listeners by using `.off()`, make sure to provide the same callback. + +**`swappable.trigger(eventName: String, event: AbstractEvent): Swappable`** +You can trigger events through swappable. This is used to fire events internally or by +extensions of Draggable. + +**`droppable.destroy(): void`** +Detaches all sensors and listeners, and cleans up after itself. + +### Options + +__Same as Draggable__ + +### Events + +| Name | Description | Cancelable | Cancelable action | +| --------------------- | ---------------------------------------------------------- | ----------- | -------------------- | +| `swappable:start` | Gets fired when starting to drag | true | Prevents drag | +| `swappable:swapped` | Gets fired before the source gets swapped | true | Prevents swap | +| `swappable:stop` | Gets fired when dragging out of a droppable element | false | - | + +### Classes + +__Same as Draggable__ + +### Example + +This sample code will make list items draggable and allows to drop them inside another element: + +```js +import {Swappable} from '@shopify/draggable'; + +const swappable = new Swappable(document.querySelectorAll('ul'), { + draggable: 'li', +}); + +swappable.on('swappable:start', () => console.log('swappable:start')) +swappable.on('swappable:swapped', () => console.log('swappable:swapped')); +swappable.on('swappable:stop', () => console.log('swappable:stop')); +``` diff --git a/src/swappable.js b/src/Swappable/Swappable.js similarity index 96% rename from src/swappable.js rename to src/Swappable/Swappable.js index 49c4f113..36fb4784 100644 --- a/src/swappable.js +++ b/src/Swappable/Swappable.js @@ -1,10 +1,10 @@ -import Draggable from './Draggable'; +import Draggable from './../Draggable'; import { SwappableStartEvent, SwappableSwappedEvent, SwappableStopEvent, -} from './events/swappable-event'; +} from './../events/swappable-event'; export default class Swappable { constructor(containers = [], options = {}) { diff --git a/src/Swappable/index.js b/src/Swappable/index.js new file mode 100644 index 00000000..d87ab0fd --- /dev/null +++ b/src/Swappable/index.js @@ -0,0 +1,3 @@ +import Swappable from './Swappable'; + +export default Swappable; diff --git a/test/src/swappable.test.js b/src/Swappable/tests/Swappable.test.js similarity index 100% rename from test/src/swappable.test.js rename to src/Swappable/tests/Swappable.test.js diff --git a/src/index.js b/src/index.js index cce913c7..c1351a3c 100644 --- a/src/index.js +++ b/src/index.js @@ -1,7 +1,7 @@ import Draggable from './Draggable'; import Droppable from './Droppable'; +import Swappable from './Swappable'; import Sortable from './sortable'; -import Swappable from './swappable'; import AbstractEvent from './events/abstract-event'; import Snappable from './behaviour/snappable'; import Collidable from './behaviour/collidable'; From 5946237c1342e8d69a482a1ae6355fa6938997ef Mon Sep 17 00:00:00 2001 From: Max Hoffmann Date: Fri, 6 Oct 2017 10:41:30 -0400 Subject: [PATCH 05/34] Restructure of Sortable --- src/Sortable/README.md | 54 ++++++++++++++++++++++++++++++++++ src/Sortable/index.js | 3 ++ src/{ => Sortable}/sortable.js | 4 +-- src/index.js | 3 +- 4 files changed, 61 insertions(+), 3 deletions(-) create mode 100644 src/Sortable/README.md create mode 100644 src/Sortable/index.js rename src/{ => Sortable}/sortable.js (98%) diff --git a/src/Sortable/README.md b/src/Sortable/README.md new file mode 100644 index 00000000..d8a90406 --- /dev/null +++ b/src/Sortable/README.md @@ -0,0 +1,54 @@ +## Sortable + +Sortable allows you to reorder elements. It maintains the order internally and fires +three events on top of the draggable events: `sortable:start`, `sortable:sorted` and `sortable:stop`. + +### API + +**`new Sortable(containers: Array[HTMLElement]|NodeList, options: Object): Sortable`** +To create a sortable instance you need to specify the containers that hold draggable items, e.g. +`[document.body]` would work too. The second argument is an options object, which is described +below. + +**`sortable.on(eventName: String, listener: Function): Sortable`** +Sortable uses Draggables event emitter, so you can register callbacks for events. Sortable +also supports method chaining. + +**`sortable.off(eventName: String, listener: Function): Sortable`** +You can unregister listeners by using `.off()`, make sure to provide the same callback. + +**`sortable.trigger(eventName: String, event: AbstractEvent): Sortable`** +You can trigger events through sortable. This is used to fire events internally or by +extensions of Draggable. + +**`sortable.destroy(): void`** +Detaches all sensors and listeners, and cleans up after itself. + +### Options + +__Same as Draggable__ + +### Events + +| Name | Description | Cancelable | Cancelable action | +| --------------------- | ---------------------------------------------------------- | ----------- | -------------------- | +| `sortable:start` | Gets fired when drag action begins | true | Prevents drag start | +| `sortable:sorted` | Gets fired when the source gets sorted in the DOM | false | - | +| `sortable:stop` | Gets fired when dragging over other draggable | false | - | + +### Classes + +__Same as Draggable__ + +### Example + +This sample code will make list items draggable: + +```js +import {Sortable} from '@shopify/draggable'; + +new Sortable(document.querySelectorAll('ul')) + .on('sortable:start', () => console.log('sortable:start')) + .on('sortable:sorted', () => console.log('sortable:sorted')) + .on('sortable:stop', () => console.log('sortable:stop')); +``` diff --git a/src/Sortable/index.js b/src/Sortable/index.js new file mode 100644 index 00000000..8f711ebc --- /dev/null +++ b/src/Sortable/index.js @@ -0,0 +1,3 @@ +import Sortable from './Sortable'; + +export default Sortable; diff --git a/src/sortable.js b/src/Sortable/sortable.js similarity index 98% rename from src/sortable.js rename to src/Sortable/sortable.js index fd47a8aa..ee6aeb30 100644 --- a/src/sortable.js +++ b/src/Sortable/sortable.js @@ -1,10 +1,10 @@ -import Draggable from './Draggable'; +import Draggable from './../Draggable'; import { SortableStartEvent, SortableSortedEvent, SortableStopEvent, -} from './events/sortable-event'; +} from './../events/sortable-event'; export default class Sortable { constructor(containers = [], options = {}) { diff --git a/src/index.js b/src/index.js index c1351a3c..5d4be73b 100644 --- a/src/index.js +++ b/src/index.js @@ -1,7 +1,8 @@ import Draggable from './Draggable'; import Droppable from './Droppable'; import Swappable from './Swappable'; -import Sortable from './sortable'; +import Sortable from './Sortable'; + import AbstractEvent from './events/abstract-event'; import Snappable from './behaviour/snappable'; import Collidable from './behaviour/collidable'; From ca8cd69d262346850d1b169e7ffacb39d4426f0e Mon Sep 17 00:00:00 2001 From: Max Hoffmann Date: Fri, 6 Oct 2017 10:55:00 -0400 Subject: [PATCH 06/34] Restructure of Sensors --- src/Draggable/Draggable.js | 10 ++++++---- .../DragSensor/DragSensor.js} | 6 +++--- src/Sensors/DragSensor/README.md | 1 + src/Sensors/DragSensor/index.js | 3 +++ .../ForceTouchSensor/ForceTouchSensor.js} | 4 ++-- src/Sensors/ForceTouchSensor/README.md | 1 + src/Sensors/ForceTouchSensor/index.js | 3 +++ .../MouseSensor/MouseSensor.js} | 4 ++-- src/Sensors/MouseSensor/README.md | 1 + src/Sensors/MouseSensor/index.js | 3 +++ src/Sensors/README.md | 1 + src/Sensors/Sensor/README.md | 1 + src/{sensors/sensor.js => Sensors/Sensor/Sensor.js} | 0 src/Sensors/Sensor/index.js | 3 +++ src/Sensors/TouchSensor/README.md | 1 + .../TouchSensor/TouchSensor.js} | 6 +++--- src/Sensors/TouchSensor/index.js | 3 +++ src/Sensors/index.js | 13 +++++++++++++ 18 files changed, 50 insertions(+), 14 deletions(-) rename src/{sensors/drag-sensor.js => Sensors/DragSensor/DragSensor.js} (97%) create mode 100644 src/Sensors/DragSensor/README.md create mode 100644 src/Sensors/DragSensor/index.js rename src/{sensors/force-touch-sensor.js => Sensors/ForceTouchSensor/ForceTouchSensor.js} (98%) create mode 100644 src/Sensors/ForceTouchSensor/README.md create mode 100644 src/Sensors/ForceTouchSensor/index.js rename src/{sensors/mouse-sensor.js => Sensors/MouseSensor/MouseSensor.js} (97%) create mode 100644 src/Sensors/MouseSensor/README.md create mode 100644 src/Sensors/MouseSensor/index.js create mode 100644 src/Sensors/README.md create mode 100644 src/Sensors/Sensor/README.md rename src/{sensors/sensor.js => Sensors/Sensor/Sensor.js} (100%) create mode 100644 src/Sensors/Sensor/index.js create mode 100644 src/Sensors/TouchSensor/README.md rename src/{sensors/touch-sensor.js => Sensors/TouchSensor/TouchSensor.js} (97%) create mode 100644 src/Sensors/TouchSensor/index.js create mode 100644 src/Sensors/index.js diff --git a/src/Draggable/Draggable.js b/src/Draggable/Draggable.js index 381aefad..ba96c019 100644 --- a/src/Draggable/Draggable.js +++ b/src/Draggable/Draggable.js @@ -6,10 +6,12 @@ import Mirror from './../core/mirror'; import Collidable from './../behaviour/collidable'; import Snappable from './../behaviour/snappable'; -import DragSensor from './../sensors/drag-sensor'; -import MouseSensor from './../sensors/mouse-sensor'; -import TouchSensor from './../sensors/touch-sensor'; -import ForceTouchSensor from './../sensors/force-touch-sensor'; +import { + DragSensor, + MouseSensor, + TouchSensor, + ForceTouchSensor, +} from './../Sensors'; import { DraggableInitializedEvent, diff --git a/src/sensors/drag-sensor.js b/src/Sensors/DragSensor/DragSensor.js similarity index 97% rename from src/sensors/drag-sensor.js rename to src/Sensors/DragSensor/DragSensor.js index 47365dca..4a0bdd35 100644 --- a/src/sensors/drag-sensor.js +++ b/src/Sensors/DragSensor/DragSensor.js @@ -1,11 +1,11 @@ -import Sensor from './sensor'; -import {closest} from './../utils'; +import Sensor from './../Sensor'; +import {closest} from './../../utils'; import { DragStartSensorEvent, DragMoveSensorEvent, DragStopSensorEvent, -} from './../events/sensor-event'; +} from './../../events/sensor-event'; export default class DragSensor extends Sensor { constructor(containers = [], options = {}) { diff --git a/src/Sensors/DragSensor/README.md b/src/Sensors/DragSensor/README.md new file mode 100644 index 00000000..9ba5650e --- /dev/null +++ b/src/Sensors/DragSensor/README.md @@ -0,0 +1 @@ +## Drag Sensor diff --git a/src/Sensors/DragSensor/index.js b/src/Sensors/DragSensor/index.js new file mode 100644 index 00000000..f864a995 --- /dev/null +++ b/src/Sensors/DragSensor/index.js @@ -0,0 +1,3 @@ +import DragSensor from './DragSensor'; + +export default DragSensor; diff --git a/src/sensors/force-touch-sensor.js b/src/Sensors/ForceTouchSensor/ForceTouchSensor.js similarity index 98% rename from src/sensors/force-touch-sensor.js rename to src/Sensors/ForceTouchSensor/ForceTouchSensor.js index 4f85c571..75a56491 100644 --- a/src/sensors/force-touch-sensor.js +++ b/src/Sensors/ForceTouchSensor/ForceTouchSensor.js @@ -1,11 +1,11 @@ -import Sensor from './sensor'; +import Sensor from './../Sensor'; import { DragStartSensorEvent, DragMoveSensorEvent, DragStopSensorEvent, DragPressureSensorEvent, -} from './../events/sensor-event'; +} from './../../events/sensor-event'; export default class ForceTouchSensor extends Sensor { constructor(containers = [], options = {}) { diff --git a/src/Sensors/ForceTouchSensor/README.md b/src/Sensors/ForceTouchSensor/README.md new file mode 100644 index 00000000..372b4358 --- /dev/null +++ b/src/Sensors/ForceTouchSensor/README.md @@ -0,0 +1 @@ +## Force Touch Sensor diff --git a/src/Sensors/ForceTouchSensor/index.js b/src/Sensors/ForceTouchSensor/index.js new file mode 100644 index 00000000..eae1cce1 --- /dev/null +++ b/src/Sensors/ForceTouchSensor/index.js @@ -0,0 +1,3 @@ +import ForceTouchSensor from './ForceTouchSensor'; + +export default ForceTouchSensor; diff --git a/src/sensors/mouse-sensor.js b/src/Sensors/MouseSensor/MouseSensor.js similarity index 97% rename from src/sensors/mouse-sensor.js rename to src/Sensors/MouseSensor/MouseSensor.js index 1274e4ca..1137d2ef 100644 --- a/src/sensors/mouse-sensor.js +++ b/src/Sensors/MouseSensor/MouseSensor.js @@ -1,10 +1,10 @@ -import Sensor from './sensor'; +import Sensor from './../Sensor'; import { DragStartSensorEvent, DragMoveSensorEvent, DragStopSensorEvent, -} from './../events/sensor-event'; +} from './../../events/sensor-event'; export default class MouseSensor extends Sensor { constructor(containers = [], options = {}) { diff --git a/src/Sensors/MouseSensor/README.md b/src/Sensors/MouseSensor/README.md new file mode 100644 index 00000000..a2127402 --- /dev/null +++ b/src/Sensors/MouseSensor/README.md @@ -0,0 +1 @@ +## MouseSensor diff --git a/src/Sensors/MouseSensor/index.js b/src/Sensors/MouseSensor/index.js new file mode 100644 index 00000000..4adec74a --- /dev/null +++ b/src/Sensors/MouseSensor/index.js @@ -0,0 +1,3 @@ +import MouseSensor from './MouseSensor'; + +export default MouseSensor; diff --git a/src/Sensors/README.md b/src/Sensors/README.md new file mode 100644 index 00000000..760a8e54 --- /dev/null +++ b/src/Sensors/README.md @@ -0,0 +1 @@ +## Sensors diff --git a/src/Sensors/Sensor/README.md b/src/Sensors/Sensor/README.md new file mode 100644 index 00000000..21b1e5f7 --- /dev/null +++ b/src/Sensors/Sensor/README.md @@ -0,0 +1 @@ +## Sensor diff --git a/src/sensors/sensor.js b/src/Sensors/Sensor/Sensor.js similarity index 100% rename from src/sensors/sensor.js rename to src/Sensors/Sensor/Sensor.js diff --git a/src/Sensors/Sensor/index.js b/src/Sensors/Sensor/index.js new file mode 100644 index 00000000..06b5e8d2 --- /dev/null +++ b/src/Sensors/Sensor/index.js @@ -0,0 +1,3 @@ +import Sensor from './Sensor'; + +export default Sensor; diff --git a/src/Sensors/TouchSensor/README.md b/src/Sensors/TouchSensor/README.md new file mode 100644 index 00000000..e467b1a1 --- /dev/null +++ b/src/Sensors/TouchSensor/README.md @@ -0,0 +1 @@ +## Touch Sensor diff --git a/src/sensors/touch-sensor.js b/src/Sensors/TouchSensor/TouchSensor.js similarity index 97% rename from src/sensors/touch-sensor.js rename to src/Sensors/TouchSensor/TouchSensor.js index 47c0932c..827dde86 100644 --- a/src/sensors/touch-sensor.js +++ b/src/Sensors/TouchSensor/TouchSensor.js @@ -1,11 +1,11 @@ -import Sensor from './sensor'; -import {closest} from './../utils'; +import Sensor from './../Sensor'; +import {closest} from './../../utils'; import { DragStartSensorEvent, DragMoveSensorEvent, DragStopSensorEvent, -} from './../events/sensor-event'; +} from './../../events/sensor-event'; export default class TouchSensor extends Sensor { constructor(containers = [], options = {}) { diff --git a/src/Sensors/TouchSensor/index.js b/src/Sensors/TouchSensor/index.js new file mode 100644 index 00000000..c0c1ed06 --- /dev/null +++ b/src/Sensors/TouchSensor/index.js @@ -0,0 +1,3 @@ +import TouchSensor from './TouchSensor'; + +export default TouchSensor; diff --git a/src/Sensors/index.js b/src/Sensors/index.js new file mode 100644 index 00000000..9c9bc9af --- /dev/null +++ b/src/Sensors/index.js @@ -0,0 +1,13 @@ +import Sensor from './Sensor'; +import MouseSensor from './MouseSensor'; +import TouchSensor from './TouchSensor'; +import DragSensor from './DragSensor'; +import ForceTouchSensor from './ForceTouchSensor'; + +export { + Sensor, + MouseSensor, + TouchSensor, + DragSensor, + ForceTouchSensor, +}; From 85b231bc423340d5232f33b49d87dbeec3adbb96 Mon Sep 17 00:00:00 2001 From: Max Hoffmann Date: Fri, 6 Oct 2017 11:14:39 -0400 Subject: [PATCH 07/34] Restructure tests --- .eslintrc.js | 12 +++++++++++- config.json | 9 +++------ {test => scripts/test}/helper.js | 0 {test => scripts/test}/setup.js | 0 src/Draggable/tests/Draggable.test.js | 6 +++--- .../Sensors/MouseSensor/tests/MouseSensor.test.js | 4 ++-- src/Swappable/tests/Swappable.test.js | 3 ++- test/.eslintrc.js | 12 ------------ 8 files changed, 21 insertions(+), 25 deletions(-) rename {test => scripts/test}/helper.js (100%) rename {test => scripts/test}/setup.js (100%) rename test/src/sensors/mouse-sensor.test.js => src/Sensors/MouseSensor/tests/MouseSensor.test.js (98%) delete mode 100644 test/.eslintrc.js diff --git a/.eslintrc.js b/.eslintrc.js index 80abbfa3..8c6775bb 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -9,5 +9,15 @@ module.exports = { rules: { 'import/no-unresolved': 'off', 'import/no-extraneous-dependencies': 'off', - } + }, + globals: { + jest: false, + afterAll: false, + afterEach: false, + beforeAll: false, + beforeEach: false, + describe: false, + test: false, + expect: false, + }, }; diff --git a/config.json b/config.json index 41322af1..d8ab2c19 100644 --- a/config.json +++ b/config.json @@ -1,13 +1,10 @@ { - "testMatch": [ - "/test/src/**/*.test.js", - "/src/**/*.test.js" - ], - "setupFiles": ["/test/setup.js"], + "testMatch": ["/src/**/*.test.js"], + "setupFiles": ["/scripts/test/setup.js"], "transform": {".*": "/node_modules/babel-jest"}, "moduleFileExtensions": ["js"], "collectCoverageFrom": [ "src/**/*.js" ], - "moduleDirectories": ["node_modules", "src", "test"] + "moduleDirectories": ["node_modules", "src", "scripts/test"] } diff --git a/test/helper.js b/scripts/test/helper.js similarity index 100% rename from test/helper.js rename to scripts/test/helper.js diff --git a/test/setup.js b/scripts/test/setup.js similarity index 100% rename from test/setup.js rename to scripts/test/setup.js diff --git a/src/Draggable/tests/Draggable.test.js b/src/Draggable/tests/Draggable.test.js index 5d8115b8..a5e1a53b 100644 --- a/src/Draggable/tests/Draggable.test.js +++ b/src/Draggable/tests/Draggable.test.js @@ -1,11 +1,11 @@ -import Draggable from 'draggable'; -import {DragStartEvent} from 'events/drag-event'; - import { createSandbox, triggerEvent, } from 'helper'; +import Draggable from './..'; +import {DragStartEvent} from './../../events/drag-event'; + const sampleMarkup = `
  • First item
    • diff --git a/test/src/sensors/mouse-sensor.test.js b/src/Sensors/MouseSensor/tests/MouseSensor.test.js similarity index 98% rename from test/src/sensors/mouse-sensor.test.js rename to src/Sensors/MouseSensor/tests/MouseSensor.test.js index b000604c..03a03ff4 100644 --- a/test/src/sensors/mouse-sensor.test.js +++ b/src/Sensors/MouseSensor/tests/MouseSensor.test.js @@ -1,5 +1,3 @@ -import MouseSensor from 'sensors/mouse-sensor'; - import { createSandbox, triggerEvent, @@ -9,6 +7,8 @@ import { getLastSensorEventByType, } from 'helper'; +import MouseSensor from './..'; + const sampleMarkup = `
    • First item
      • diff --git a/src/Swappable/tests/Swappable.test.js b/src/Swappable/tests/Swappable.test.js index 0112f478..30faf68f 100644 --- a/src/Swappable/tests/Swappable.test.js +++ b/src/Swappable/tests/Swappable.test.js @@ -1,6 +1,7 @@ -import Swappable from 'swappable'; import {createSandbox, triggerEvent} from 'helper'; +import Swappable from './..'; + const sampleMarkup = `
      • First item
        • diff --git a/test/.eslintrc.js b/test/.eslintrc.js deleted file mode 100644 index 84ad3b27..00000000 --- a/test/.eslintrc.js +++ /dev/null @@ -1,12 +0,0 @@ -module.exports = { - globals: { - jest: false, - afterAll: false, - afterEach: false, - beforeAll: false, - beforeEach: false, - describe: false, - test: false, - expect: false, - }, -}; From ba996cdff1f8ba603a153111aa314fb86fa18a89 Mon Sep 17 00:00:00 2001 From: Max Hoffmann Date: Fri, 6 Oct 2017 11:27:26 -0400 Subject: [PATCH 08/34] Restructure utils --- src/Draggable/Draggable.js | 2 +- src/Droppable/Droppable.js | 2 +- src/Sensors/DragSensor/DragSensor.js | 2 +- src/Sensors/TouchSensor/TouchSensor.js | 2 +- src/Utils/closest/README.md | 1 + src/Utils/closest/closest.js | 32 ++++++++++++++++ src/Utils/closest/index.js | 3 ++ src/Utils/index.js | 7 ++++ src/Utils/scroll/README.md | 1 + src/Utils/scroll/index.js | 3 ++ src/Utils/scroll/scroll.js | 18 +++++++++ src/behaviour/collidable.js | 2 +- src/utils.js | 52 -------------------------- 13 files changed, 70 insertions(+), 57 deletions(-) create mode 100644 src/Utils/closest/README.md create mode 100644 src/Utils/closest/closest.js create mode 100644 src/Utils/closest/index.js create mode 100644 src/Utils/index.js create mode 100644 src/Utils/scroll/README.md create mode 100644 src/Utils/scroll/index.js create mode 100644 src/Utils/scroll/scroll.js delete mode 100644 src/utils.js diff --git a/src/Draggable/Draggable.js b/src/Draggable/Draggable.js index ba96c019..d004c2af 100644 --- a/src/Draggable/Draggable.js +++ b/src/Draggable/Draggable.js @@ -1,4 +1,4 @@ -import {closest} from './../utils'; +import {closest} from './../Utils'; import Accessibility from './../core/accessibility'; import Mirror from './../core/mirror'; diff --git a/src/Droppable/Droppable.js b/src/Droppable/Droppable.js index 009580fa..4ee72d9a 100644 --- a/src/Droppable/Droppable.js +++ b/src/Droppable/Droppable.js @@ -1,5 +1,5 @@ import Draggable from './../Draggable'; -import {closest} from './../utils'; +import {closest} from './../Utils'; import { DroppableOverEvent, diff --git a/src/Sensors/DragSensor/DragSensor.js b/src/Sensors/DragSensor/DragSensor.js index 4a0bdd35..c7851910 100644 --- a/src/Sensors/DragSensor/DragSensor.js +++ b/src/Sensors/DragSensor/DragSensor.js @@ -1,5 +1,5 @@ import Sensor from './../Sensor'; -import {closest} from './../../utils'; +import {closest} from './../../Utils'; import { DragStartSensorEvent, diff --git a/src/Sensors/TouchSensor/TouchSensor.js b/src/Sensors/TouchSensor/TouchSensor.js index 827dde86..2c4b32e3 100644 --- a/src/Sensors/TouchSensor/TouchSensor.js +++ b/src/Sensors/TouchSensor/TouchSensor.js @@ -1,5 +1,5 @@ import Sensor from './../Sensor'; -import {closest} from './../../utils'; +import {closest} from './../../Utils'; import { DragStartSensorEvent, diff --git a/src/Utils/closest/README.md b/src/Utils/closest/README.md new file mode 100644 index 00000000..52ec82b2 --- /dev/null +++ b/src/Utils/closest/README.md @@ -0,0 +1 @@ +## closest diff --git a/src/Utils/closest/closest.js b/src/Utils/closest/closest.js new file mode 100644 index 00000000..72a86bba --- /dev/null +++ b/src/Utils/closest/closest.js @@ -0,0 +1,32 @@ +const matchFunction = Element.prototype.matches || + Element.prototype.webkitMatchesSelector || + Element.prototype.mozMatchesSelector || + Element.prototype.msMatchesSelector; + +export default function closest(element, selector) { + if (!element) { + return null; + } + + function conditionFn(currentElement) { + if (!currentElement) { + return currentElement; + } else if (typeof selector === 'string') { + 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; +} diff --git a/src/Utils/closest/index.js b/src/Utils/closest/index.js new file mode 100644 index 00000000..bb4baf97 --- /dev/null +++ b/src/Utils/closest/index.js @@ -0,0 +1,3 @@ +import closest from './closest'; + +export default closest; diff --git a/src/Utils/index.js b/src/Utils/index.js new file mode 100644 index 00000000..b92ac169 --- /dev/null +++ b/src/Utils/index.js @@ -0,0 +1,7 @@ +import closest from './closest'; +import scroll from './scroll'; + +export { + closest, + scroll, +}; diff --git a/src/Utils/scroll/README.md b/src/Utils/scroll/README.md new file mode 100644 index 00000000..d9435846 --- /dev/null +++ b/src/Utils/scroll/README.md @@ -0,0 +1 @@ +## scroll diff --git a/src/Utils/scroll/index.js b/src/Utils/scroll/index.js new file mode 100644 index 00000000..69ca63b9 --- /dev/null +++ b/src/Utils/scroll/index.js @@ -0,0 +1,3 @@ +import scroll from './scroll'; + +export default scroll; diff --git a/src/Utils/scroll/scroll.js b/src/Utils/scroll/scroll.js new file mode 100644 index 00000000..acca23bc --- /dev/null +++ b/src/Utils/scroll/scroll.js @@ -0,0 +1,18 @@ +let scrollAnimationFrame; + +export default 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); +} diff --git a/src/behaviour/collidable.js b/src/behaviour/collidable.js index 6e830ef8..9a3c5e93 100644 --- a/src/behaviour/collidable.js +++ b/src/behaviour/collidable.js @@ -1,4 +1,4 @@ -import {closest} from './../utils'; +import {closest} from './../Utils'; import { CollidableInEvent, diff --git a/src/utils.js b/src/utils.js deleted file mode 100644 index 6ee18e14..00000000 --- a/src/utils.js +++ /dev/null @@ -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); -} From 277f7ab2f516e93e955e6b8fece7a9366ac78c56 Mon Sep 17 00:00:00 2001 From: Max Hoffmann Date: Fri, 6 Oct 2017 11:29:08 -0400 Subject: [PATCH 09/34] Export AbstractEvent as BaseEvent --- src/index.js | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/src/index.js b/src/index.js index 5d4be73b..9d6d552b 100644 --- a/src/index.js +++ b/src/index.js @@ -14,12 +14,5 @@ export { Droppable, Snappable, Collidable, - AbstractEvent, + AbstractEvent as BaseEvent, }; - -export function createEventClass(options) { - function EventConstructor() { return null; } - EventConstructor.prototype = AbstractEvent.prototype; - createEventClass.type = options.type; - return createEventClass; -} From 0e5f036f251f7a74bb3a3ae4e6b8254c45aea35b Mon Sep 17 00:00:00 2001 From: Max Hoffmann Date: Fri, 6 Oct 2017 11:43:55 -0400 Subject: [PATCH 10/34] Restructure draggable core plugins --- src/Draggable/Draggable.js | 3 +-- .../Plugins/Accessibility/Accessibility.js} | 0 src/Draggable/Plugins/Accessibility/README.md | 1 + src/Draggable/Plugins/Accessibility/index.js | 3 +++ src/{core/mirror.js => Draggable/Plugins/Mirror/Mirror.js} | 0 src/Draggable/Plugins/Mirror/README.md | 1 + src/Draggable/Plugins/Mirror/index.js | 3 +++ src/Draggable/Plugins/README.md | 1 + src/Draggable/Plugins/index.js | 7 +++++++ src/Draggable/index.js | 2 ++ 10 files changed, 19 insertions(+), 2 deletions(-) rename src/{core/accessibility.js => Draggable/Plugins/Accessibility/Accessibility.js} (100%) create mode 100644 src/Draggable/Plugins/Accessibility/README.md create mode 100644 src/Draggable/Plugins/Accessibility/index.js rename src/{core/mirror.js => Draggable/Plugins/Mirror/Mirror.js} (100%) create mode 100644 src/Draggable/Plugins/Mirror/README.md create mode 100644 src/Draggable/Plugins/Mirror/index.js create mode 100644 src/Draggable/Plugins/README.md create mode 100644 src/Draggable/Plugins/index.js diff --git a/src/Draggable/Draggable.js b/src/Draggable/Draggable.js index d004c2af..8d833050 100644 --- a/src/Draggable/Draggable.js +++ b/src/Draggable/Draggable.js @@ -1,7 +1,6 @@ import {closest} from './../Utils'; -import Accessibility from './../core/accessibility'; -import Mirror from './../core/mirror'; +import {Accessibility, Mirror} from './Plugins'; import Collidable from './../behaviour/collidable'; import Snappable from './../behaviour/snappable'; diff --git a/src/core/accessibility.js b/src/Draggable/Plugins/Accessibility/Accessibility.js similarity index 100% rename from src/core/accessibility.js rename to src/Draggable/Plugins/Accessibility/Accessibility.js diff --git a/src/Draggable/Plugins/Accessibility/README.md b/src/Draggable/Plugins/Accessibility/README.md new file mode 100644 index 00000000..f6593a1e --- /dev/null +++ b/src/Draggable/Plugins/Accessibility/README.md @@ -0,0 +1 @@ +## Accessibility diff --git a/src/Draggable/Plugins/Accessibility/index.js b/src/Draggable/Plugins/Accessibility/index.js new file mode 100644 index 00000000..9baa4f76 --- /dev/null +++ b/src/Draggable/Plugins/Accessibility/index.js @@ -0,0 +1,3 @@ +import Accessibility from './Accessibility'; + +export default Accessibility; diff --git a/src/core/mirror.js b/src/Draggable/Plugins/Mirror/Mirror.js similarity index 100% rename from src/core/mirror.js rename to src/Draggable/Plugins/Mirror/Mirror.js diff --git a/src/Draggable/Plugins/Mirror/README.md b/src/Draggable/Plugins/Mirror/README.md new file mode 100644 index 00000000..b98c8fec --- /dev/null +++ b/src/Draggable/Plugins/Mirror/README.md @@ -0,0 +1 @@ +## Mirror diff --git a/src/Draggable/Plugins/Mirror/index.js b/src/Draggable/Plugins/Mirror/index.js new file mode 100644 index 00000000..e746562f --- /dev/null +++ b/src/Draggable/Plugins/Mirror/index.js @@ -0,0 +1,3 @@ +import Mirror from './Mirror'; + +export default Mirror; diff --git a/src/Draggable/Plugins/README.md b/src/Draggable/Plugins/README.md new file mode 100644 index 00000000..852b9b8f --- /dev/null +++ b/src/Draggable/Plugins/README.md @@ -0,0 +1 @@ +## Draggable plugins diff --git a/src/Draggable/Plugins/index.js b/src/Draggable/Plugins/index.js new file mode 100644 index 00000000..ea03b0f4 --- /dev/null +++ b/src/Draggable/Plugins/index.js @@ -0,0 +1,7 @@ +import Mirror from './Mirror'; +import Accessibility from './Accessibility'; + +export { + Mirror, + Accessibility, +}; diff --git a/src/Draggable/index.js b/src/Draggable/index.js index d71596bf..4b8f0c7b 100644 --- a/src/Draggable/index.js +++ b/src/Draggable/index.js @@ -1,3 +1,5 @@ import Draggable from './Draggable'; +import {Accessibility, Mirror} from './Plugins'; +export {Accessibility, Mirror}; export default Draggable; From cdebacb45787be5ce5f1150fc504be982205c309 Mon Sep 17 00:00:00 2001 From: Max Hoffmann Date: Fri, 6 Oct 2017 12:44:38 -0400 Subject: [PATCH 11/34] Restructure Plugins --- src/Draggable/Draggable.js | 4 +--- .../collidable.js => Plugins/Collidable/Collidable.js} | 4 ++-- src/Plugins/Collidable/README.md | 1 + src/Plugins/Collidable/index.js | 3 +++ src/Plugins/README.md | 1 + src/Plugins/Snappable/README.md | 1 + .../snappable.js => Plugins/Snappable/Snappable.js} | 2 +- src/Plugins/Snappable/index.js | 3 +++ src/Plugins/index.js | 7 +++++++ src/index.js | 4 ++-- 10 files changed, 22 insertions(+), 8 deletions(-) rename src/{behaviour/collidable.js => Plugins/Collidable/Collidable.js} (97%) create mode 100644 src/Plugins/Collidable/README.md create mode 100644 src/Plugins/Collidable/index.js create mode 100644 src/Plugins/README.md create mode 100644 src/Plugins/Snappable/README.md rename src/{behaviour/snappable.js => Plugins/Snappable/Snappable.js} (98%) create mode 100644 src/Plugins/Snappable/index.js create mode 100644 src/Plugins/index.js diff --git a/src/Draggable/Draggable.js b/src/Draggable/Draggable.js index 8d833050..fdb3d06f 100644 --- a/src/Draggable/Draggable.js +++ b/src/Draggable/Draggable.js @@ -1,9 +1,7 @@ import {closest} from './../Utils'; import {Accessibility, Mirror} from './Plugins'; - -import Collidable from './../behaviour/collidable'; -import Snappable from './../behaviour/snappable'; +import {Collidable, Snappable} from './../Plugins'; import { DragSensor, diff --git a/src/behaviour/collidable.js b/src/Plugins/Collidable/Collidable.js similarity index 97% rename from src/behaviour/collidable.js rename to src/Plugins/Collidable/Collidable.js index 9a3c5e93..bf265217 100644 --- a/src/behaviour/collidable.js +++ b/src/Plugins/Collidable/Collidable.js @@ -1,9 +1,9 @@ -import {closest} from './../Utils'; +import {closest} from './../../Utils'; import { CollidableInEvent, CollidableOutEvent, -} from './../events/collidable-event'; +} from './../../events/collidable-event'; export default class Collidable { constructor(draggable) { diff --git a/src/Plugins/Collidable/README.md b/src/Plugins/Collidable/README.md new file mode 100644 index 00000000..daea804e --- /dev/null +++ b/src/Plugins/Collidable/README.md @@ -0,0 +1 @@ +## Collidable diff --git a/src/Plugins/Collidable/index.js b/src/Plugins/Collidable/index.js new file mode 100644 index 00000000..db732e28 --- /dev/null +++ b/src/Plugins/Collidable/index.js @@ -0,0 +1,3 @@ +import Collidable from './Collidable'; + +export default Collidable; diff --git a/src/Plugins/README.md b/src/Plugins/README.md new file mode 100644 index 00000000..bf4be4f1 --- /dev/null +++ b/src/Plugins/README.md @@ -0,0 +1 @@ +## Plugins diff --git a/src/Plugins/Snappable/README.md b/src/Plugins/Snappable/README.md new file mode 100644 index 00000000..a19b58f7 --- /dev/null +++ b/src/Plugins/Snappable/README.md @@ -0,0 +1 @@ +## Snappable diff --git a/src/behaviour/snappable.js b/src/Plugins/Snappable/Snappable.js similarity index 98% rename from src/behaviour/snappable.js rename to src/Plugins/Snappable/Snappable.js index 2d1cc799..635a4086 100644 --- a/src/behaviour/snappable.js +++ b/src/Plugins/Snappable/Snappable.js @@ -1,7 +1,7 @@ import { SnapInEvent, SnapOutEvent, -} from './../events/snappable-event'; +} from './../../events/snappable-event'; export default class Snappable { constructor(draggable) { diff --git a/src/Plugins/Snappable/index.js b/src/Plugins/Snappable/index.js new file mode 100644 index 00000000..86c2e2b1 --- /dev/null +++ b/src/Plugins/Snappable/index.js @@ -0,0 +1,3 @@ +import Snappable from './Snappable'; + +export default Snappable; diff --git a/src/Plugins/index.js b/src/Plugins/index.js new file mode 100644 index 00000000..48e1c4ed --- /dev/null +++ b/src/Plugins/index.js @@ -0,0 +1,7 @@ +import Collidable from './Collidable'; +import Snappable from './Snappable'; + +export { + Collidable, + Snappable, +}; diff --git a/src/index.js b/src/index.js index 9d6d552b..31bbb208 100644 --- a/src/index.js +++ b/src/index.js @@ -3,9 +3,9 @@ import Droppable from './Droppable'; import Swappable from './Swappable'; import Sortable from './Sortable'; +import {Snappable, Collidable} from './Plugins'; + import AbstractEvent from './events/abstract-event'; -import Snappable from './behaviour/snappable'; -import Collidable from './behaviour/collidable'; export { Draggable, From e8732f9c27b75c3d68bc19a2d14408f8f92005ee Mon Sep 17 00:00:00 2001 From: Max Hoffmann Date: Fri, 6 Oct 2017 13:27:55 -0400 Subject: [PATCH 12/34] Restructure events --- .../drag-event.js => Draggable/DragEvent/DragEvent.js} | 2 +- src/Draggable/DragEvent/README.md | 1 + src/Draggable/DragEvent/index.js | 10 ++++++++++ src/Draggable/Draggable.js | 6 +++--- .../DraggableEvent/DraggableEvent.js} | 2 +- src/Draggable/DraggableEvent/README.md | 1 + src/Draggable/DraggableEvent/index.js | 4 ++++ .../MirrorEvent/MirrorEvent.js} | 2 +- src/Draggable/MirrorEvent/README.md | 1 + src/Draggable/MirrorEvent/index.js | 6 ++++++ src/Droppable/Droppable.js | 2 +- .../DroppableEvent/DroppableEvent.js} | 2 +- src/Droppable/DroppableEvent/README.md | 1 + src/Droppable/DroppableEvent/index.js | 4 ++++ src/Plugins/Collidable/Collidable.js | 2 +- .../Collidable/CollidableEvent/CollidableEvent.js} | 2 +- src/Plugins/Collidable/CollidableEvent/README.md | 1 + src/Plugins/Collidable/CollidableEvent/index.js | 4 ++++ src/Plugins/Snappable/Snappable.js | 2 +- src/Plugins/Snappable/SnappableEvent/README.md | 0 .../Snappable/SnappableEvent/SnappableEvent.js} | 2 +- src/Plugins/Snappable/SnappableEvent/index.js | 4 ++++ src/Sensors/DragSensor/DragSensor.js | 2 +- src/Sensors/ForceTouchSensor/ForceTouchSensor.js | 2 +- src/Sensors/MouseSensor/MouseSensor.js | 2 +- src/Sensors/SensorEvent/README.md | 1 + .../SensorEvent/SensorEvent.js} | 2 +- src/Sensors/SensorEvent/index.js | 7 +++++++ src/Sensors/TouchSensor/TouchSensor.js | 2 +- src/Sortable/SortableEvent/README.md | 1 + .../SortableEvent/SortableEvent.js} | 2 +- src/Sortable/SortableEvent/index.js | 5 +++++ src/Sortable/sortable.js | 2 +- src/Swappable/Swappable.js | 2 +- src/Swappable/SwappableEvent/README.md | 1 + .../SwappableEvent/SwappableEvent.js} | 2 +- src/Swappable/SwappableEvent/index.js | 5 +++++ src/index.js | 4 ++-- .../AbstractEvent/AbstractEvent.js} | 0 src/shared/AbstractEvent/README.md | 1 + src/shared/AbstractEvent/index.js | 3 +++ webpack.config.js | 6 ++++++ 42 files changed, 90 insertions(+), 23 deletions(-) rename src/{events/drag-event.js => Draggable/DragEvent/DragEvent.js} (96%) create mode 100644 src/Draggable/DragEvent/README.md create mode 100644 src/Draggable/DragEvent/index.js rename src/{events/draggable-event.js => Draggable/DraggableEvent/DraggableEvent.js} (87%) create mode 100644 src/Draggable/DraggableEvent/README.md create mode 100644 src/Draggable/DraggableEvent/index.js rename src/{events/mirror-event.js => Draggable/MirrorEvent/MirrorEvent.js} (94%) create mode 100644 src/Draggable/MirrorEvent/README.md create mode 100644 src/Draggable/MirrorEvent/index.js rename src/{events/droppable-event.js => Droppable/DroppableEvent/DroppableEvent.js} (88%) create mode 100644 src/Droppable/DroppableEvent/README.md create mode 100644 src/Droppable/DroppableEvent/index.js rename src/{events/collidable-event.js => Plugins/Collidable/CollidableEvent/CollidableEvent.js} (90%) create mode 100644 src/Plugins/Collidable/CollidableEvent/README.md create mode 100644 src/Plugins/Collidable/CollidableEvent/index.js create mode 100644 src/Plugins/Snappable/SnappableEvent/README.md rename src/{events/snappable-event.js => Plugins/Snappable/SnappableEvent/SnappableEvent.js} (83%) create mode 100644 src/Plugins/Snappable/SnappableEvent/index.js create mode 100644 src/Sensors/SensorEvent/README.md rename src/{events/sensor-event.js => Sensors/SensorEvent/SensorEvent.js} (94%) create mode 100644 src/Sensors/SensorEvent/index.js create mode 100644 src/Sortable/SortableEvent/README.md rename src/{events/sortable-event.js => Sortable/SortableEvent/SortableEvent.js} (92%) create mode 100644 src/Sortable/SortableEvent/index.js create mode 100644 src/Swappable/SwappableEvent/README.md rename src/{events/swappable-event.js => Swappable/SwappableEvent/SwappableEvent.js} (90%) create mode 100644 src/Swappable/SwappableEvent/index.js rename src/{events/abstract-event.js => shared/AbstractEvent/AbstractEvent.js} (100%) create mode 100644 src/shared/AbstractEvent/README.md create mode 100644 src/shared/AbstractEvent/index.js diff --git a/src/events/drag-event.js b/src/Draggable/DragEvent/DragEvent.js similarity index 96% rename from src/events/drag-event.js rename to src/Draggable/DragEvent/DragEvent.js index 24c2887f..4548234a 100644 --- a/src/events/drag-event.js +++ b/src/Draggable/DragEvent/DragEvent.js @@ -1,4 +1,4 @@ -import AbstractEvent from './abstract-event'; +import AbstractEvent from 'shared/AbstractEvent'; export class DragEvent extends AbstractEvent { get source() { diff --git a/src/Draggable/DragEvent/README.md b/src/Draggable/DragEvent/README.md new file mode 100644 index 00000000..a08c76a2 --- /dev/null +++ b/src/Draggable/DragEvent/README.md @@ -0,0 +1 @@ +## Drag event diff --git a/src/Draggable/DragEvent/index.js b/src/Draggable/DragEvent/index.js new file mode 100644 index 00000000..ba5afda0 --- /dev/null +++ b/src/Draggable/DragEvent/index.js @@ -0,0 +1,10 @@ +export { + DragStartEvent, + DragMoveEvent, + DragOutContainerEvent, + DragOutEvent, + DragOverContainerEvent, + DragOverEvent, + DragStopEvent, + DragPressureEvent, +} from './DragEvent'; diff --git a/src/Draggable/Draggable.js b/src/Draggable/Draggable.js index fdb3d06f..ec997fd5 100644 --- a/src/Draggable/Draggable.js +++ b/src/Draggable/Draggable.js @@ -13,7 +13,7 @@ import { import { DraggableInitializedEvent, DraggableDestroyEvent, -} from './../events/draggable-event'; +} from './DraggableEvent'; import { DragStartEvent, @@ -24,14 +24,14 @@ import { DragOverEvent, DragStopEvent, DragPressureEvent, -} from './../events/drag-event'; +} from './DragEvent'; import { MirrorCreatedEvent, MirrorAttachedEvent, MirrorMoveEvent, MirrorDestroyEvent, -} from './../events/mirror-event'; +} from './MirrorEvent'; const defaults = { draggable: '.draggable-source', diff --git a/src/events/draggable-event.js b/src/Draggable/DraggableEvent/DraggableEvent.js similarity index 87% rename from src/events/draggable-event.js rename to src/Draggable/DraggableEvent/DraggableEvent.js index ceb1222f..3b9a8b43 100644 --- a/src/events/draggable-event.js +++ b/src/Draggable/DraggableEvent/DraggableEvent.js @@ -1,4 +1,4 @@ -import AbstractEvent from './abstract-event'; +import AbstractEvent from 'shared/AbstractEvent'; export class DraggableEvent extends AbstractEvent { static type = 'draggable'; diff --git a/src/Draggable/DraggableEvent/README.md b/src/Draggable/DraggableEvent/README.md new file mode 100644 index 00000000..03b50760 --- /dev/null +++ b/src/Draggable/DraggableEvent/README.md @@ -0,0 +1 @@ +## Draggable event diff --git a/src/Draggable/DraggableEvent/index.js b/src/Draggable/DraggableEvent/index.js new file mode 100644 index 00000000..cdb91c10 --- /dev/null +++ b/src/Draggable/DraggableEvent/index.js @@ -0,0 +1,4 @@ +export { + DraggableInitializedEvent, + DraggableDestroyEvent, +} from './DraggableEvent'; diff --git a/src/events/mirror-event.js b/src/Draggable/MirrorEvent/MirrorEvent.js similarity index 94% rename from src/events/mirror-event.js rename to src/Draggable/MirrorEvent/MirrorEvent.js index 76e315d5..858e98c0 100644 --- a/src/events/mirror-event.js +++ b/src/Draggable/MirrorEvent/MirrorEvent.js @@ -1,4 +1,4 @@ -import AbstractEvent from './abstract-event'; +import AbstractEvent from 'shared/AbstractEvent'; export class MirrorEvent extends AbstractEvent { get source() { diff --git a/src/Draggable/MirrorEvent/README.md b/src/Draggable/MirrorEvent/README.md new file mode 100644 index 00000000..791133c4 --- /dev/null +++ b/src/Draggable/MirrorEvent/README.md @@ -0,0 +1 @@ +## Mirror event diff --git a/src/Draggable/MirrorEvent/index.js b/src/Draggable/MirrorEvent/index.js new file mode 100644 index 00000000..5bf7b842 --- /dev/null +++ b/src/Draggable/MirrorEvent/index.js @@ -0,0 +1,6 @@ +export { + MirrorCreatedEvent, + MirrorAttachedEvent, + MirrorMoveEvent, + MirrorDestroyEvent, +} from './MirrorEvent'; diff --git a/src/Droppable/Droppable.js b/src/Droppable/Droppable.js index 4ee72d9a..530b8d83 100644 --- a/src/Droppable/Droppable.js +++ b/src/Droppable/Droppable.js @@ -4,7 +4,7 @@ import {closest} from './../Utils'; import { DroppableOverEvent, DroppableOutEvent, -} from './../events/droppable-event'; +} from './DroppableEvent'; const classes = { 'droppable:active': 'draggable-droppable--active', diff --git a/src/events/droppable-event.js b/src/Droppable/DroppableEvent/DroppableEvent.js similarity index 88% rename from src/events/droppable-event.js rename to src/Droppable/DroppableEvent/DroppableEvent.js index b7bed379..792f2a34 100644 --- a/src/events/droppable-event.js +++ b/src/Droppable/DroppableEvent/DroppableEvent.js @@ -1,4 +1,4 @@ -import AbstractEvent from './abstract-event'; +import AbstractEvent from 'shared/AbstractEvent'; export class DroppableEvent extends AbstractEvent { static type = 'droppable'; diff --git a/src/Droppable/DroppableEvent/README.md b/src/Droppable/DroppableEvent/README.md new file mode 100644 index 00000000..5967303a --- /dev/null +++ b/src/Droppable/DroppableEvent/README.md @@ -0,0 +1 @@ +## Droppable event diff --git a/src/Droppable/DroppableEvent/index.js b/src/Droppable/DroppableEvent/index.js new file mode 100644 index 00000000..99c0e23a --- /dev/null +++ b/src/Droppable/DroppableEvent/index.js @@ -0,0 +1,4 @@ +export { + DroppableOverEvent, + DroppableOutEvent, +} from './DroppableEvent'; diff --git a/src/Plugins/Collidable/Collidable.js b/src/Plugins/Collidable/Collidable.js index bf265217..a6121c07 100644 --- a/src/Plugins/Collidable/Collidable.js +++ b/src/Plugins/Collidable/Collidable.js @@ -3,7 +3,7 @@ import {closest} from './../../Utils'; import { CollidableInEvent, CollidableOutEvent, -} from './../../events/collidable-event'; +} from './CollidableEvent'; export default class Collidable { constructor(draggable) { diff --git a/src/events/collidable-event.js b/src/Plugins/Collidable/CollidableEvent/CollidableEvent.js similarity index 90% rename from src/events/collidable-event.js rename to src/Plugins/Collidable/CollidableEvent/CollidableEvent.js index e73510b4..da915e81 100644 --- a/src/events/collidable-event.js +++ b/src/Plugins/Collidable/CollidableEvent/CollidableEvent.js @@ -1,4 +1,4 @@ -import AbstractEvent from './abstract-event'; +import AbstractEvent from 'shared/AbstractEvent'; export class CollidableEvent extends AbstractEvent { static type = 'collidable'; diff --git a/src/Plugins/Collidable/CollidableEvent/README.md b/src/Plugins/Collidable/CollidableEvent/README.md new file mode 100644 index 00000000..b4f18b69 --- /dev/null +++ b/src/Plugins/Collidable/CollidableEvent/README.md @@ -0,0 +1 @@ +## Collidable event diff --git a/src/Plugins/Collidable/CollidableEvent/index.js b/src/Plugins/Collidable/CollidableEvent/index.js new file mode 100644 index 00000000..cade28f2 --- /dev/null +++ b/src/Plugins/Collidable/CollidableEvent/index.js @@ -0,0 +1,4 @@ +export { + CollidableInEvent, + CollidableOutEvent, +} from './CollidableEvent'; diff --git a/src/Plugins/Snappable/Snappable.js b/src/Plugins/Snappable/Snappable.js index 635a4086..49ef34c7 100644 --- a/src/Plugins/Snappable/Snappable.js +++ b/src/Plugins/Snappable/Snappable.js @@ -1,7 +1,7 @@ import { SnapInEvent, SnapOutEvent, -} from './../../events/snappable-event'; +} from './SnappableEvent'; export default class Snappable { constructor(draggable) { diff --git a/src/Plugins/Snappable/SnappableEvent/README.md b/src/Plugins/Snappable/SnappableEvent/README.md new file mode 100644 index 00000000..e69de29b diff --git a/src/events/snappable-event.js b/src/Plugins/Snappable/SnappableEvent/SnappableEvent.js similarity index 83% rename from src/events/snappable-event.js rename to src/Plugins/Snappable/SnappableEvent/SnappableEvent.js index f442045d..a7bd135e 100644 --- a/src/events/snappable-event.js +++ b/src/Plugins/Snappable/SnappableEvent/SnappableEvent.js @@ -1,4 +1,4 @@ -import AbstractEvent from './abstract-event'; +import AbstractEvent from 'shared/AbstractEvent'; export class SnapEvent extends AbstractEvent { get dragEvent() { diff --git a/src/Plugins/Snappable/SnappableEvent/index.js b/src/Plugins/Snappable/SnappableEvent/index.js new file mode 100644 index 00000000..4a4d2a7e --- /dev/null +++ b/src/Plugins/Snappable/SnappableEvent/index.js @@ -0,0 +1,4 @@ +export { + SnapInEvent, + SnapOutEvent, +} from './SnappableEvent'; diff --git a/src/Sensors/DragSensor/DragSensor.js b/src/Sensors/DragSensor/DragSensor.js index c7851910..c43d41e1 100644 --- a/src/Sensors/DragSensor/DragSensor.js +++ b/src/Sensors/DragSensor/DragSensor.js @@ -5,7 +5,7 @@ import { DragStartSensorEvent, DragMoveSensorEvent, DragStopSensorEvent, -} from './../../events/sensor-event'; +} from './../SensorEvent'; export default class DragSensor extends Sensor { constructor(containers = [], options = {}) { diff --git a/src/Sensors/ForceTouchSensor/ForceTouchSensor.js b/src/Sensors/ForceTouchSensor/ForceTouchSensor.js index 75a56491..af11e0dc 100644 --- a/src/Sensors/ForceTouchSensor/ForceTouchSensor.js +++ b/src/Sensors/ForceTouchSensor/ForceTouchSensor.js @@ -5,7 +5,7 @@ import { DragMoveSensorEvent, DragStopSensorEvent, DragPressureSensorEvent, -} from './../../events/sensor-event'; +} from './../SensorEvent'; export default class ForceTouchSensor extends Sensor { constructor(containers = [], options = {}) { diff --git a/src/Sensors/MouseSensor/MouseSensor.js b/src/Sensors/MouseSensor/MouseSensor.js index 1137d2ef..6cb457fa 100644 --- a/src/Sensors/MouseSensor/MouseSensor.js +++ b/src/Sensors/MouseSensor/MouseSensor.js @@ -4,7 +4,7 @@ import { DragStartSensorEvent, DragMoveSensorEvent, DragStopSensorEvent, -} from './../../events/sensor-event'; +} from './../SensorEvent'; export default class MouseSensor extends Sensor { constructor(containers = [], options = {}) { diff --git a/src/Sensors/SensorEvent/README.md b/src/Sensors/SensorEvent/README.md new file mode 100644 index 00000000..dff9a432 --- /dev/null +++ b/src/Sensors/SensorEvent/README.md @@ -0,0 +1 @@ +## Sensor event diff --git a/src/events/sensor-event.js b/src/Sensors/SensorEvent/SensorEvent.js similarity index 94% rename from src/events/sensor-event.js rename to src/Sensors/SensorEvent/SensorEvent.js index 692b646f..47da5158 100644 --- a/src/events/sensor-event.js +++ b/src/Sensors/SensorEvent/SensorEvent.js @@ -1,4 +1,4 @@ -import AbstractEvent from './abstract-event'; +import AbstractEvent from 'shared/AbstractEvent'; export class SensorEvent extends AbstractEvent { get originalEvent() { diff --git a/src/Sensors/SensorEvent/index.js b/src/Sensors/SensorEvent/index.js new file mode 100644 index 00000000..6f2e9572 --- /dev/null +++ b/src/Sensors/SensorEvent/index.js @@ -0,0 +1,7 @@ +export { + SensorEvent, + DragStartSensorEvent, + DragMoveSensorEvent, + DragStopSensorEvent, + DragPressureSensorEvent, +} from './SensorEvent'; diff --git a/src/Sensors/TouchSensor/TouchSensor.js b/src/Sensors/TouchSensor/TouchSensor.js index 2c4b32e3..75235803 100644 --- a/src/Sensors/TouchSensor/TouchSensor.js +++ b/src/Sensors/TouchSensor/TouchSensor.js @@ -5,7 +5,7 @@ import { DragStartSensorEvent, DragMoveSensorEvent, DragStopSensorEvent, -} from './../../events/sensor-event'; +} from './../SensorEvent'; export default class TouchSensor extends Sensor { constructor(containers = [], options = {}) { diff --git a/src/Sortable/SortableEvent/README.md b/src/Sortable/SortableEvent/README.md new file mode 100644 index 00000000..92b6116f --- /dev/null +++ b/src/Sortable/SortableEvent/README.md @@ -0,0 +1 @@ +## Sortable event diff --git a/src/events/sortable-event.js b/src/Sortable/SortableEvent/SortableEvent.js similarity index 92% rename from src/events/sortable-event.js rename to src/Sortable/SortableEvent/SortableEvent.js index 663251f3..4f63b677 100644 --- a/src/events/sortable-event.js +++ b/src/Sortable/SortableEvent/SortableEvent.js @@ -1,4 +1,4 @@ -import AbstractEvent from './abstract-event'; +import AbstractEvent from 'shared/AbstractEvent'; export class SortableEvent extends AbstractEvent { get dragEvent() { diff --git a/src/Sortable/SortableEvent/index.js b/src/Sortable/SortableEvent/index.js new file mode 100644 index 00000000..d96f84bd --- /dev/null +++ b/src/Sortable/SortableEvent/index.js @@ -0,0 +1,5 @@ +export { + SortableStartEvent, + SortableSortedEvent, + SortableStopEvent, +} from './SortableEvent'; diff --git a/src/Sortable/sortable.js b/src/Sortable/sortable.js index ee6aeb30..587a2a7e 100644 --- a/src/Sortable/sortable.js +++ b/src/Sortable/sortable.js @@ -4,7 +4,7 @@ import { SortableStartEvent, SortableSortedEvent, SortableStopEvent, -} from './../events/sortable-event'; +} from './SortableEvent'; export default class Sortable { constructor(containers = [], options = {}) { diff --git a/src/Swappable/Swappable.js b/src/Swappable/Swappable.js index 36fb4784..052ef1e8 100644 --- a/src/Swappable/Swappable.js +++ b/src/Swappable/Swappable.js @@ -4,7 +4,7 @@ import { SwappableStartEvent, SwappableSwappedEvent, SwappableStopEvent, -} from './../events/swappable-event'; +} from './SwappableEvent'; export default class Swappable { constructor(containers = [], options = {}) { diff --git a/src/Swappable/SwappableEvent/README.md b/src/Swappable/SwappableEvent/README.md new file mode 100644 index 00000000..86f58f53 --- /dev/null +++ b/src/Swappable/SwappableEvent/README.md @@ -0,0 +1 @@ +## Swappable event diff --git a/src/events/swappable-event.js b/src/Swappable/SwappableEvent/SwappableEvent.js similarity index 90% rename from src/events/swappable-event.js rename to src/Swappable/SwappableEvent/SwappableEvent.js index dc4d64d5..87265b37 100644 --- a/src/events/swappable-event.js +++ b/src/Swappable/SwappableEvent/SwappableEvent.js @@ -1,4 +1,4 @@ -import AbstractEvent from './abstract-event'; +import AbstractEvent from 'shared/AbstractEvent'; export class SwappableEvent extends AbstractEvent { get dragEvent() { diff --git a/src/Swappable/SwappableEvent/index.js b/src/Swappable/SwappableEvent/index.js new file mode 100644 index 00000000..dcd9d84d --- /dev/null +++ b/src/Swappable/SwappableEvent/index.js @@ -0,0 +1,5 @@ +export { + SwappableStartEvent, + SwappableSwappedEvent, + SwappableStopEvent, +} from './SwappableEvent'; diff --git a/src/index.js b/src/index.js index 31bbb208..305e00b0 100644 --- a/src/index.js +++ b/src/index.js @@ -1,3 +1,5 @@ +import AbstractEvent from 'shared/AbstractEvent'; + import Draggable from './Draggable'; import Droppable from './Droppable'; import Swappable from './Swappable'; @@ -5,8 +7,6 @@ import Sortable from './Sortable'; import {Snappable, Collidable} from './Plugins'; -import AbstractEvent from './events/abstract-event'; - export { Draggable, Sortable, diff --git a/src/events/abstract-event.js b/src/shared/AbstractEvent/AbstractEvent.js similarity index 100% rename from src/events/abstract-event.js rename to src/shared/AbstractEvent/AbstractEvent.js diff --git a/src/shared/AbstractEvent/README.md b/src/shared/AbstractEvent/README.md new file mode 100644 index 00000000..9787ff50 --- /dev/null +++ b/src/shared/AbstractEvent/README.md @@ -0,0 +1 @@ +## Abstract Event diff --git a/src/shared/AbstractEvent/index.js b/src/shared/AbstractEvent/index.js new file mode 100644 index 00000000..61457705 --- /dev/null +++ b/src/shared/AbstractEvent/index.js @@ -0,0 +1,3 @@ +import AbstractEvent from './AbstractEvent'; + +export default AbstractEvent; diff --git a/webpack.config.js b/webpack.config.js index 37ef31bc..865fc7ca 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -13,6 +13,12 @@ function createConfig({name, filename = name, source, path = ''}) { libraryTarget: 'umd', umdNamedDefine: true }, + resolve: { + modules: [ + 'node_modules', + 'src/', + ], + }, module: { loaders: [ { From da60cbd117ef2cb069a2dcdf8e0c0f2982f6325a Mon Sep 17 00:00:00 2001 From: Max Hoffmann Date: Fri, 6 Oct 2017 14:09:36 -0400 Subject: [PATCH 13/34] Move utils into shared folder --- src/Draggable/Draggable.js | 2 +- src/Droppable/Droppable.js | 2 +- src/Plugins/Collidable/Collidable.js | 2 +- src/Sensors/DragSensor/DragSensor.js | 3 ++- src/Sensors/TouchSensor/TouchSensor.js | 2 +- src/shared/README.md | 1 + src/shared/Utils/README.md | 1 + src/{ => shared}/Utils/closest/README.md | 0 src/{ => shared}/Utils/closest/closest.js | 0 src/{ => shared}/Utils/closest/index.js | 0 src/{ => shared}/Utils/index.js | 0 src/{ => shared}/Utils/scroll/README.md | 0 src/{ => shared}/Utils/scroll/index.js | 0 src/{ => shared}/Utils/scroll/scroll.js | 0 14 files changed, 8 insertions(+), 5 deletions(-) create mode 100644 src/shared/README.md create mode 100644 src/shared/Utils/README.md rename src/{ => shared}/Utils/closest/README.md (100%) rename src/{ => shared}/Utils/closest/closest.js (100%) rename src/{ => shared}/Utils/closest/index.js (100%) rename src/{ => shared}/Utils/index.js (100%) rename src/{ => shared}/Utils/scroll/README.md (100%) rename src/{ => shared}/Utils/scroll/index.js (100%) rename src/{ => shared}/Utils/scroll/scroll.js (100%) diff --git a/src/Draggable/Draggable.js b/src/Draggable/Draggable.js index ec997fd5..3e0f9778 100644 --- a/src/Draggable/Draggable.js +++ b/src/Draggable/Draggable.js @@ -1,4 +1,4 @@ -import {closest} from './../Utils'; +import {closest} from 'shared/Utils'; import {Accessibility, Mirror} from './Plugins'; import {Collidable, Snappable} from './../Plugins'; diff --git a/src/Droppable/Droppable.js b/src/Droppable/Droppable.js index 530b8d83..6c325631 100644 --- a/src/Droppable/Droppable.js +++ b/src/Droppable/Droppable.js @@ -1,5 +1,5 @@ +import {closest} from 'shared/Utils'; import Draggable from './../Draggable'; -import {closest} from './../Utils'; import { DroppableOverEvent, diff --git a/src/Plugins/Collidable/Collidable.js b/src/Plugins/Collidable/Collidable.js index a6121c07..18c8a1eb 100644 --- a/src/Plugins/Collidable/Collidable.js +++ b/src/Plugins/Collidable/Collidable.js @@ -1,4 +1,4 @@ -import {closest} from './../../Utils'; +import {closest} from 'shared/Utils'; import { CollidableInEvent, diff --git a/src/Sensors/DragSensor/DragSensor.js b/src/Sensors/DragSensor/DragSensor.js index c43d41e1..fba26bf6 100644 --- a/src/Sensors/DragSensor/DragSensor.js +++ b/src/Sensors/DragSensor/DragSensor.js @@ -1,5 +1,6 @@ +import {closest} from 'shared/Utils'; + import Sensor from './../Sensor'; -import {closest} from './../../Utils'; import { DragStartSensorEvent, diff --git a/src/Sensors/TouchSensor/TouchSensor.js b/src/Sensors/TouchSensor/TouchSensor.js index 75235803..c03d4318 100644 --- a/src/Sensors/TouchSensor/TouchSensor.js +++ b/src/Sensors/TouchSensor/TouchSensor.js @@ -1,5 +1,5 @@ +import {closest} from 'shared/Utils'; import Sensor from './../Sensor'; -import {closest} from './../../Utils'; import { DragStartSensorEvent, diff --git a/src/shared/README.md b/src/shared/README.md new file mode 100644 index 00000000..166a4942 --- /dev/null +++ b/src/shared/README.md @@ -0,0 +1 @@ +## Shared diff --git a/src/shared/Utils/README.md b/src/shared/Utils/README.md new file mode 100644 index 00000000..d4c6d743 --- /dev/null +++ b/src/shared/Utils/README.md @@ -0,0 +1 @@ +## Utils diff --git a/src/Utils/closest/README.md b/src/shared/Utils/closest/README.md similarity index 100% rename from src/Utils/closest/README.md rename to src/shared/Utils/closest/README.md diff --git a/src/Utils/closest/closest.js b/src/shared/Utils/closest/closest.js similarity index 100% rename from src/Utils/closest/closest.js rename to src/shared/Utils/closest/closest.js diff --git a/src/Utils/closest/index.js b/src/shared/Utils/closest/index.js similarity index 100% rename from src/Utils/closest/index.js rename to src/shared/Utils/closest/index.js diff --git a/src/Utils/index.js b/src/shared/Utils/index.js similarity index 100% rename from src/Utils/index.js rename to src/shared/Utils/index.js diff --git a/src/Utils/scroll/README.md b/src/shared/Utils/scroll/README.md similarity index 100% rename from src/Utils/scroll/README.md rename to src/shared/Utils/scroll/README.md diff --git a/src/Utils/scroll/index.js b/src/shared/Utils/scroll/index.js similarity index 100% rename from src/Utils/scroll/index.js rename to src/shared/Utils/scroll/index.js diff --git a/src/Utils/scroll/scroll.js b/src/shared/Utils/scroll/scroll.js similarity index 100% rename from src/Utils/scroll/scroll.js rename to src/shared/Utils/scroll/scroll.js From 77778238a39f4515ec8a0c4205874b3d5016054a Mon Sep 17 00:00:00 2001 From: Max Hoffmann Date: Fri, 6 Oct 2017 14:11:20 -0400 Subject: [PATCH 14/34] Move sensors to Draggable --- src/Draggable/Draggable.js | 7 +------ src/{ => Draggable}/Sensors/DragSensor/DragSensor.js | 0 src/{ => Draggable}/Sensors/DragSensor/README.md | 0 src/{ => Draggable}/Sensors/DragSensor/index.js | 0 .../Sensors/ForceTouchSensor/ForceTouchSensor.js | 0 src/{ => Draggable}/Sensors/ForceTouchSensor/README.md | 0 src/{ => Draggable}/Sensors/ForceTouchSensor/index.js | 0 src/{ => Draggable}/Sensors/MouseSensor/MouseSensor.js | 0 src/{ => Draggable}/Sensors/MouseSensor/README.md | 0 src/{ => Draggable}/Sensors/MouseSensor/index.js | 0 .../Sensors/MouseSensor/tests/MouseSensor.test.js | 0 src/{ => Draggable}/Sensors/README.md | 0 src/{ => Draggable}/Sensors/Sensor/README.md | 0 src/{ => Draggable}/Sensors/Sensor/Sensor.js | 0 src/{ => Draggable}/Sensors/Sensor/index.js | 0 src/{ => Draggable}/Sensors/SensorEvent/README.md | 0 src/{ => Draggable}/Sensors/SensorEvent/SensorEvent.js | 0 src/{ => Draggable}/Sensors/SensorEvent/index.js | 0 src/{ => Draggable}/Sensors/TouchSensor/README.md | 0 src/{ => Draggable}/Sensors/TouchSensor/TouchSensor.js | 0 src/{ => Draggable}/Sensors/TouchSensor/index.js | 0 src/{ => Draggable}/Sensors/index.js | 0 22 files changed, 1 insertion(+), 6 deletions(-) rename src/{ => Draggable}/Sensors/DragSensor/DragSensor.js (100%) rename src/{ => Draggable}/Sensors/DragSensor/README.md (100%) rename src/{ => Draggable}/Sensors/DragSensor/index.js (100%) rename src/{ => Draggable}/Sensors/ForceTouchSensor/ForceTouchSensor.js (100%) rename src/{ => Draggable}/Sensors/ForceTouchSensor/README.md (100%) rename src/{ => Draggable}/Sensors/ForceTouchSensor/index.js (100%) rename src/{ => Draggable}/Sensors/MouseSensor/MouseSensor.js (100%) rename src/{ => Draggable}/Sensors/MouseSensor/README.md (100%) rename src/{ => Draggable}/Sensors/MouseSensor/index.js (100%) rename src/{ => Draggable}/Sensors/MouseSensor/tests/MouseSensor.test.js (100%) rename src/{ => Draggable}/Sensors/README.md (100%) rename src/{ => Draggable}/Sensors/Sensor/README.md (100%) rename src/{ => Draggable}/Sensors/Sensor/Sensor.js (100%) rename src/{ => Draggable}/Sensors/Sensor/index.js (100%) rename src/{ => Draggable}/Sensors/SensorEvent/README.md (100%) rename src/{ => Draggable}/Sensors/SensorEvent/SensorEvent.js (100%) rename src/{ => Draggable}/Sensors/SensorEvent/index.js (100%) rename src/{ => Draggable}/Sensors/TouchSensor/README.md (100%) rename src/{ => Draggable}/Sensors/TouchSensor/TouchSensor.js (100%) rename src/{ => Draggable}/Sensors/TouchSensor/index.js (100%) rename src/{ => Draggable}/Sensors/index.js (100%) diff --git a/src/Draggable/Draggable.js b/src/Draggable/Draggable.js index 3e0f9778..8ba9b372 100644 --- a/src/Draggable/Draggable.js +++ b/src/Draggable/Draggable.js @@ -1,14 +1,13 @@ import {closest} from 'shared/Utils'; import {Accessibility, Mirror} from './Plugins'; -import {Collidable, Snappable} from './../Plugins'; import { DragSensor, MouseSensor, TouchSensor, ForceTouchSensor, -} from './../Sensors'; +} from './Sensors'; import { DraggableInitializedEvent, @@ -61,10 +60,6 @@ export default class Draggable { return {Accessibility, Mirror}; } - static get Behaviour() { - return {Collidable, Snappable}; - } - /** * Draggable constructor. * @constructs Draggable diff --git a/src/Sensors/DragSensor/DragSensor.js b/src/Draggable/Sensors/DragSensor/DragSensor.js similarity index 100% rename from src/Sensors/DragSensor/DragSensor.js rename to src/Draggable/Sensors/DragSensor/DragSensor.js diff --git a/src/Sensors/DragSensor/README.md b/src/Draggable/Sensors/DragSensor/README.md similarity index 100% rename from src/Sensors/DragSensor/README.md rename to src/Draggable/Sensors/DragSensor/README.md diff --git a/src/Sensors/DragSensor/index.js b/src/Draggable/Sensors/DragSensor/index.js similarity index 100% rename from src/Sensors/DragSensor/index.js rename to src/Draggable/Sensors/DragSensor/index.js diff --git a/src/Sensors/ForceTouchSensor/ForceTouchSensor.js b/src/Draggable/Sensors/ForceTouchSensor/ForceTouchSensor.js similarity index 100% rename from src/Sensors/ForceTouchSensor/ForceTouchSensor.js rename to src/Draggable/Sensors/ForceTouchSensor/ForceTouchSensor.js diff --git a/src/Sensors/ForceTouchSensor/README.md b/src/Draggable/Sensors/ForceTouchSensor/README.md similarity index 100% rename from src/Sensors/ForceTouchSensor/README.md rename to src/Draggable/Sensors/ForceTouchSensor/README.md diff --git a/src/Sensors/ForceTouchSensor/index.js b/src/Draggable/Sensors/ForceTouchSensor/index.js similarity index 100% rename from src/Sensors/ForceTouchSensor/index.js rename to src/Draggable/Sensors/ForceTouchSensor/index.js diff --git a/src/Sensors/MouseSensor/MouseSensor.js b/src/Draggable/Sensors/MouseSensor/MouseSensor.js similarity index 100% rename from src/Sensors/MouseSensor/MouseSensor.js rename to src/Draggable/Sensors/MouseSensor/MouseSensor.js diff --git a/src/Sensors/MouseSensor/README.md b/src/Draggable/Sensors/MouseSensor/README.md similarity index 100% rename from src/Sensors/MouseSensor/README.md rename to src/Draggable/Sensors/MouseSensor/README.md diff --git a/src/Sensors/MouseSensor/index.js b/src/Draggable/Sensors/MouseSensor/index.js similarity index 100% rename from src/Sensors/MouseSensor/index.js rename to src/Draggable/Sensors/MouseSensor/index.js diff --git a/src/Sensors/MouseSensor/tests/MouseSensor.test.js b/src/Draggable/Sensors/MouseSensor/tests/MouseSensor.test.js similarity index 100% rename from src/Sensors/MouseSensor/tests/MouseSensor.test.js rename to src/Draggable/Sensors/MouseSensor/tests/MouseSensor.test.js diff --git a/src/Sensors/README.md b/src/Draggable/Sensors/README.md similarity index 100% rename from src/Sensors/README.md rename to src/Draggable/Sensors/README.md diff --git a/src/Sensors/Sensor/README.md b/src/Draggable/Sensors/Sensor/README.md similarity index 100% rename from src/Sensors/Sensor/README.md rename to src/Draggable/Sensors/Sensor/README.md diff --git a/src/Sensors/Sensor/Sensor.js b/src/Draggable/Sensors/Sensor/Sensor.js similarity index 100% rename from src/Sensors/Sensor/Sensor.js rename to src/Draggable/Sensors/Sensor/Sensor.js diff --git a/src/Sensors/Sensor/index.js b/src/Draggable/Sensors/Sensor/index.js similarity index 100% rename from src/Sensors/Sensor/index.js rename to src/Draggable/Sensors/Sensor/index.js diff --git a/src/Sensors/SensorEvent/README.md b/src/Draggable/Sensors/SensorEvent/README.md similarity index 100% rename from src/Sensors/SensorEvent/README.md rename to src/Draggable/Sensors/SensorEvent/README.md diff --git a/src/Sensors/SensorEvent/SensorEvent.js b/src/Draggable/Sensors/SensorEvent/SensorEvent.js similarity index 100% rename from src/Sensors/SensorEvent/SensorEvent.js rename to src/Draggable/Sensors/SensorEvent/SensorEvent.js diff --git a/src/Sensors/SensorEvent/index.js b/src/Draggable/Sensors/SensorEvent/index.js similarity index 100% rename from src/Sensors/SensorEvent/index.js rename to src/Draggable/Sensors/SensorEvent/index.js diff --git a/src/Sensors/TouchSensor/README.md b/src/Draggable/Sensors/TouchSensor/README.md similarity index 100% rename from src/Sensors/TouchSensor/README.md rename to src/Draggable/Sensors/TouchSensor/README.md diff --git a/src/Sensors/TouchSensor/TouchSensor.js b/src/Draggable/Sensors/TouchSensor/TouchSensor.js similarity index 100% rename from src/Sensors/TouchSensor/TouchSensor.js rename to src/Draggable/Sensors/TouchSensor/TouchSensor.js diff --git a/src/Sensors/TouchSensor/index.js b/src/Draggable/Sensors/TouchSensor/index.js similarity index 100% rename from src/Sensors/TouchSensor/index.js rename to src/Draggable/Sensors/TouchSensor/index.js diff --git a/src/Sensors/index.js b/src/Draggable/Sensors/index.js similarity index 100% rename from src/Sensors/index.js rename to src/Draggable/Sensors/index.js From 26a30295aef7e35e80c4df8bd752d3d923549d0d Mon Sep 17 00:00:00 2001 From: Max Hoffmann Date: Fri, 6 Oct 2017 14:13:19 -0400 Subject: [PATCH 15/34] Fix draggable tests --- src/Draggable/tests/Draggable.test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Draggable/tests/Draggable.test.js b/src/Draggable/tests/Draggable.test.js index a5e1a53b..59dd42f7 100644 --- a/src/Draggable/tests/Draggable.test.js +++ b/src/Draggable/tests/Draggable.test.js @@ -4,7 +4,7 @@ import { } from 'helper'; import Draggable from './..'; -import {DragStartEvent} from './../../events/drag-event'; +import {DragStartEvent} from './../DragEvent'; const sampleMarkup = `
          From be8cb9a6869e152453976f2ad76cb6540eaa7cb8 Mon Sep 17 00:00:00 2001 From: Max Hoffmann Date: Fri, 6 Oct 2017 14:18:58 -0400 Subject: [PATCH 16/34] Update node version for circleci --- .circleci/config.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index c3333668..d8332f68 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -2,7 +2,7 @@ version: 2 jobs: build: docker: - - image: circleci/node:8.2.1 + - image: circleci/node:8.6.0 working_directory: ~/repo From f376c5ad46dd7a65934e30af8af47669acf69b93 Mon Sep 17 00:00:00 2001 From: Max Hoffmann Date: Fri, 6 Oct 2017 14:34:54 -0400 Subject: [PATCH 17/34] Rename sortable --- src/Sortable/{sortable.js => Sortable.js} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename src/Sortable/{sortable.js => Sortable.js} (100%) diff --git a/src/Sortable/sortable.js b/src/Sortable/Sortable.js similarity index 100% rename from src/Sortable/sortable.js rename to src/Sortable/Sortable.js From a8d9bd6c985ebc9c9dd59df1c6533c380baaa6df Mon Sep 17 00:00:00 2001 From: Max Hoffmann Date: Fri, 6 Oct 2017 15:51:55 -0400 Subject: [PATCH 18/34] Rename utils folder --- src/Draggable/Draggable.js | 2 +- src/Draggable/Sensors/DragSensor/DragSensor.js | 2 +- src/Draggable/Sensors/TouchSensor/TouchSensor.js | 2 +- src/Droppable/Droppable.js | 2 +- src/Plugins/Collidable/Collidable.js | 2 +- src/shared/{Utils => utils}/README.md | 0 src/shared/{Utils => utils}/closest/README.md | 0 src/shared/{Utils => utils}/closest/closest.js | 0 src/shared/{Utils => utils}/closest/index.js | 0 src/shared/{Utils => utils}/index.js | 0 src/shared/{Utils => utils}/scroll/README.md | 0 src/shared/{Utils => utils}/scroll/index.js | 0 src/shared/{Utils => utils}/scroll/scroll.js | 0 13 files changed, 5 insertions(+), 5 deletions(-) rename src/shared/{Utils => utils}/README.md (100%) rename src/shared/{Utils => utils}/closest/README.md (100%) rename src/shared/{Utils => utils}/closest/closest.js (100%) rename src/shared/{Utils => utils}/closest/index.js (100%) rename src/shared/{Utils => utils}/index.js (100%) rename src/shared/{Utils => utils}/scroll/README.md (100%) rename src/shared/{Utils => utils}/scroll/index.js (100%) rename src/shared/{Utils => utils}/scroll/scroll.js (100%) diff --git a/src/Draggable/Draggable.js b/src/Draggable/Draggable.js index 8ba9b372..7c850bf3 100644 --- a/src/Draggable/Draggable.js +++ b/src/Draggable/Draggable.js @@ -1,4 +1,4 @@ -import {closest} from 'shared/Utils'; +import {closest} from 'shared/utils'; import {Accessibility, Mirror} from './Plugins'; diff --git a/src/Draggable/Sensors/DragSensor/DragSensor.js b/src/Draggable/Sensors/DragSensor/DragSensor.js index fba26bf6..10fe298e 100644 --- a/src/Draggable/Sensors/DragSensor/DragSensor.js +++ b/src/Draggable/Sensors/DragSensor/DragSensor.js @@ -1,4 +1,4 @@ -import {closest} from 'shared/Utils'; +import {closest} from 'shared/utils'; import Sensor from './../Sensor'; diff --git a/src/Draggable/Sensors/TouchSensor/TouchSensor.js b/src/Draggable/Sensors/TouchSensor/TouchSensor.js index c03d4318..9e48183c 100644 --- a/src/Draggable/Sensors/TouchSensor/TouchSensor.js +++ b/src/Draggable/Sensors/TouchSensor/TouchSensor.js @@ -1,4 +1,4 @@ -import {closest} from 'shared/Utils'; +import {closest} from 'shared/utils'; import Sensor from './../Sensor'; import { diff --git a/src/Droppable/Droppable.js b/src/Droppable/Droppable.js index 6c325631..1f8cb68c 100644 --- a/src/Droppable/Droppable.js +++ b/src/Droppable/Droppable.js @@ -1,4 +1,4 @@ -import {closest} from 'shared/Utils'; +import {closest} from 'shared/utils'; import Draggable from './../Draggable'; import { diff --git a/src/Plugins/Collidable/Collidable.js b/src/Plugins/Collidable/Collidable.js index 18c8a1eb..9ce32ede 100644 --- a/src/Plugins/Collidable/Collidable.js +++ b/src/Plugins/Collidable/Collidable.js @@ -1,4 +1,4 @@ -import {closest} from 'shared/Utils'; +import {closest} from 'shared/utils'; import { CollidableInEvent, diff --git a/src/shared/Utils/README.md b/src/shared/utils/README.md similarity index 100% rename from src/shared/Utils/README.md rename to src/shared/utils/README.md diff --git a/src/shared/Utils/closest/README.md b/src/shared/utils/closest/README.md similarity index 100% rename from src/shared/Utils/closest/README.md rename to src/shared/utils/closest/README.md diff --git a/src/shared/Utils/closest/closest.js b/src/shared/utils/closest/closest.js similarity index 100% rename from src/shared/Utils/closest/closest.js rename to src/shared/utils/closest/closest.js diff --git a/src/shared/Utils/closest/index.js b/src/shared/utils/closest/index.js similarity index 100% rename from src/shared/Utils/closest/index.js rename to src/shared/utils/closest/index.js diff --git a/src/shared/Utils/index.js b/src/shared/utils/index.js similarity index 100% rename from src/shared/Utils/index.js rename to src/shared/utils/index.js diff --git a/src/shared/Utils/scroll/README.md b/src/shared/utils/scroll/README.md similarity index 100% rename from src/shared/Utils/scroll/README.md rename to src/shared/utils/scroll/README.md diff --git a/src/shared/Utils/scroll/index.js b/src/shared/utils/scroll/index.js similarity index 100% rename from src/shared/Utils/scroll/index.js rename to src/shared/utils/scroll/index.js diff --git a/src/shared/Utils/scroll/scroll.js b/src/shared/utils/scroll/scroll.js similarity index 100% rename from src/shared/Utils/scroll/scroll.js rename to src/shared/utils/scroll/scroll.js From fa8caca185c59565fdd7d4a8331191aa526e97a0 Mon Sep 17 00:00:00 2001 From: Max Hoffmann Date: Sat, 7 Oct 2017 19:32:08 -0400 Subject: [PATCH 19/34] Clone callbacks array before event triggering --- src/Draggable/Draggable.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/Draggable/Draggable.js b/src/Draggable/Draggable.js index 7c850bf3..9f965d69 100644 --- a/src/Draggable/Draggable.js +++ b/src/Draggable/Draggable.js @@ -162,8 +162,9 @@ export default class Draggable { trigger(type, ...args) { if (!this.callbacks[type]) { return; } - for (let i = this.callbacks[type].length - 1; i >= 0; i--) { - const callback = this.callbacks[type][i]; + const callbacks = Array.from(this.callbacks[type]); + for (let i = callbacks.length - 1; i >= 0; i--) { + const callback = callbacks[i]; callback(...args); } } From 8eae84c07c01153e5f6552391aaae3e4c354f5df Mon Sep 17 00:00:00 2001 From: Max Hoffmann Date: Sat, 7 Oct 2017 19:50:21 -0400 Subject: [PATCH 20/34] Always add mirror and accessibility plugin for now --- README.md | 2 +- src/Draggable/Draggable.js | 7 ++----- src/Draggable/README.md | 2 +- 3 files changed, 4 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index 4b50a3bc..72535932 100644 --- a/README.md +++ b/README.md @@ -121,7 +121,7 @@ using mouse events, otherwise mirror will be `null` in events. Default: `false` **`plugins {Array[Plugin]}`** Plugins add behaviour to Draggable by hooking into its life cycle, e.g. one of the default -plugins controls the mirror movement. Default: `[Mirror, Accessibility]` +plugins controls the mirror movement. Default: `[]` **`appendTo {String|HTMLElement|Function}`** Draggable allows you to specify where the mirror should be appended to. You can specify a css diff --git a/src/Draggable/Draggable.js b/src/Draggable/Draggable.js index 9f965d69..9bd7f67d 100644 --- a/src/Draggable/Draggable.js +++ b/src/Draggable/Draggable.js @@ -38,7 +38,7 @@ const defaults = { delay: 0, placedTimeout: 800, native: false, - plugins: [Mirror, Accessibility], + plugins: [], classes: { 'container:dragging': 'draggable-container--is-dragging', 'source:dragging': 'draggable-source--is-dragging', @@ -56,9 +56,6 @@ const defaults = { * @module Draggable */ export default class Draggable { - static get Plugins() { - return {Accessibility, Mirror}; - } /** * Draggable constructor. @@ -86,7 +83,7 @@ export default class Draggable { container.addEventListener('drag:pressure', this.dragPressure, true); } - for (const Plugin of this.options.plugins) { + for (const Plugin of [Mirror, Accessibility, ...this.options.plugins]) { const plugin = new Plugin(this); plugin.attach(); this.activePlugins.push(plugin); diff --git a/src/Draggable/README.md b/src/Draggable/README.md index 9bc6b7a6..b5e07981 100644 --- a/src/Draggable/README.md +++ b/src/Draggable/README.md @@ -42,7 +42,7 @@ using mouse events, otherwise mirror will be `null` in events. Default: `false` **`plugins {Array[Plugin]}`** Plugins add behaviour to Draggable by hooking into its life cycle, e.g. one of the default -plugins controls the mirror movement. Default: `[Mirror, Accessibility]` +plugins controls the mirror movement. Default: `[]` **`appendTo {String|HTMLElement|Function}`** Draggable allows you to specify where the mirror should be appended to. You can specify a css From aca0fbedd1a52cdc39f4fe23f0ea1d592ca1f0a1 Mon Sep 17 00:00:00 2001 From: Max Hoffmann Date: Sat, 7 Oct 2017 19:55:14 -0400 Subject: [PATCH 21/34] Don't hide source element if drag action is too fast --- src/Draggable/Draggable.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/Draggable/Draggable.js b/src/Draggable/Draggable.js index 9bd7f67d..3895963f 100644 --- a/src/Draggable/Draggable.js +++ b/src/Draggable/Draggable.js @@ -228,6 +228,7 @@ export default class Draggable { const source = this.source; setTimeout(() => { + if (!this.dragging) { return; } source.style.display = 'none'; }, 0); From a7fc70f0f420e9a8f86c1dbd616d2eb00203fe5a Mon Sep 17 00:00:00 2001 From: Max Hoffmann Date: Sun, 8 Oct 2017 15:29:26 -0400 Subject: [PATCH 22/34] Resolving some more issues around movable source --- src/Draggable/Draggable.js | 13 ++++++------- src/Draggable/Plugins/Mirror/Mirror.js | 18 +++++++++--------- src/Plugins/Snappable/Snappable.js | 4 ++-- src/Sortable/Sortable.js | 2 +- src/Swappable/Swappable.js | 2 +- 5 files changed, 19 insertions(+), 20 deletions(-) diff --git a/src/Draggable/Draggable.js b/src/Draggable/Draggable.js index 3895963f..4da18082 100644 --- a/src/Draggable/Draggable.js +++ b/src/Draggable/Draggable.js @@ -206,6 +206,7 @@ export default class Draggable { const mirrorCreatedEvent = new MirrorCreatedEvent({ source: this.source, + movableSource: this.movableSource, mirror: this.mirror, sourceContainer: container, sensorEvent, @@ -213,6 +214,7 @@ export default class Draggable { const mirrorAttachedEvent = new MirrorAttachedEvent({ source: this.source, + movableSource: this.movableSource, mirror: this.mirror, sourceContainer: container, sensorEvent, @@ -225,14 +227,9 @@ export default class Draggable { this.source.parentNode.insertBefore(this.movableSource, this.source); - const source = this.source; - - setTimeout(() => { - if (!this.dragging) { return; } - source.style.display = 'none'; - }, 0); - + this.source.style.display = 'none'; this.source.classList.add(this.getClassNameFor('source:dragging')); + this.movableSource.classList.add(this.getClassNameFor('source:dragging')); this.sourceContainer.classList.add(this.getClassNameFor('container:dragging')); document.body.classList.add(this.getClassNameFor('body:dragging')); @@ -270,6 +267,7 @@ export default class Draggable { } this.source.classList.remove(this.getClassNameFor('source:dragging')); + this.movableSource.classList.remove(this.getClassNameFor('source:dragging')); this.sourceContainer.classList.remove(this.getClassNameFor('container:dragging')); document.body.classList.remove(this.getClassNameFor('body:dragging')); } @@ -403,6 +401,7 @@ export default class Draggable { this.source.style.display = ''; this.source.classList.remove(this.getClassNameFor('source:dragging')); + this.movableSource.classList.remove(this.getClassNameFor('source:dragging')); this.source.classList.add(this.getClassNameFor('source:placed')); this.sourceContainer.classList.add(this.getClassNameFor('container:placed')); this.sourceContainer.classList.remove(this.getClassNameFor('container:dragging')); diff --git a/src/Draggable/Plugins/Mirror/Mirror.js b/src/Draggable/Plugins/Mirror/Mirror.js index 33c44ab4..14f2c325 100644 --- a/src/Draggable/Plugins/Mirror/Mirror.js +++ b/src/Draggable/Plugins/Mirror/Mirror.js @@ -20,7 +20,7 @@ export default class Mirror { .off('mirror:move', this._onMirrorMove); } - _onMirrorCreated({mirror, source, sensorEvent}) { + _onMirrorCreated({mirror, movableSource, sensorEvent}) { const mirrorClass = this.draggable.getClassNameFor('mirror'); const setState = (data) => { @@ -28,7 +28,7 @@ export default class Mirror { return data; }; - Promise.resolve({mirror, source, sensorEvent, mirrorClass}) + Promise.resolve({mirror, movableSource, sensorEvent, mirrorClass}) .then(computeMirrorDimensions) .then(calculateMirrorOffset) .then(addMirrorClasses) @@ -45,22 +45,22 @@ export default class Mirror { } } -function onMirrorCreated({mirror, source}) { - Promise.resolve({mirror, source}) +function onMirrorCreated({mirror, movableSource}) { + Promise.resolve({mirror, movableSource}) .then(resetMirror) .catch(); } function resetMirror(data) { return withPromise((resolve) => { - const {mirror, source} = data; + const {mirror, movableSource} = data; mirror.style.position = 'fixed'; mirror.style.pointerEvents = 'none'; mirror.style.top = 0; mirror.style.left = 0; - mirror.style.width = `${source.offsetWidth}px`; - mirror.style.height = `${source.offsetHeight}px`; + mirror.style.width = `${movableSource.offsetWidth}px`; + mirror.style.height = `${movableSource.offsetHeight}px`; resolve(data); }); @@ -68,8 +68,8 @@ function resetMirror(data) { function computeMirrorDimensions(data) { return withPromise((resolve) => { - const {source} = data; - const sourceRect = source.getBoundingClientRect(); + const {movableSource} = data; + const sourceRect = movableSource.getBoundingClientRect(); resolve({...data, sourceRect}); }); } diff --git a/src/Plugins/Snappable/Snappable.js b/src/Plugins/Snappable/Snappable.js index 49ef34c7..64f69039 100644 --- a/src/Plugins/Snappable/Snappable.js +++ b/src/Plugins/Snappable/Snappable.js @@ -50,7 +50,7 @@ export default class Snappable { return; } - const source = event.movableSource || event.dragEvent.source; + const source = event.movableSource || event.dragEvent.movableSource; const mirror = event.mirror || event.dragEvent.mirror; if (source === this.firstSource) { @@ -86,7 +86,7 @@ export default class Snappable { } const mirror = event.mirror || event.dragEvent.mirror; - const source = event.movableSource || event.dragEvent.source; + const source = event.movableSource || event.dragEvent.movableSource; const snapOutEvent = new SnapOutEvent({ dragEvent: event, diff --git a/src/Sortable/Sortable.js b/src/Sortable/Sortable.js index 587a2a7e..6fe70258 100644 --- a/src/Sortable/Sortable.js +++ b/src/Sortable/Sortable.js @@ -76,7 +76,7 @@ export default class Sortable { } _onDragOver(event) { - if (event.over === event.movableSource) { + if (event.over === event.movableSource || event.over === event.source) { return; } diff --git a/src/Swappable/Swappable.js b/src/Swappable/Swappable.js index 052ef1e8..07c1f303 100644 --- a/src/Swappable/Swappable.js +++ b/src/Swappable/Swappable.js @@ -51,7 +51,7 @@ export default class Swappable { } _onDragOver(event) { - if (event.over === event.movableSource || event.canceled()) { + if (event.over === event.movableSource || event.over === event.source || event.canceled()) { return; } From 07e98f301bd0d8741d5cee6dbfe54ebf5db6c04f Mon Sep 17 00:00:00 2001 From: Max Hoffmann Date: Sun, 8 Oct 2017 20:08:47 -0400 Subject: [PATCH 23/34] Rename source to originalSource --- src/Draggable/DragEvent/DragEvent.js | 4 +- src/Draggable/Draggable.js | 49 +++++++++++------------- src/Draggable/MirrorEvent/MirrorEvent.js | 4 +- src/Draggable/Plugins/Mirror/Mirror.js | 18 ++++----- src/Droppable/Droppable.js | 4 +- src/Plugins/Snappable/Snappable.js | 6 +-- src/Sortable/Sortable.js | 6 +-- src/Swappable/Swappable.js | 6 +-- 8 files changed, 47 insertions(+), 50 deletions(-) diff --git a/src/Draggable/DragEvent/DragEvent.js b/src/Draggable/DragEvent/DragEvent.js index 4548234a..a7e7366e 100644 --- a/src/Draggable/DragEvent/DragEvent.js +++ b/src/Draggable/DragEvent/DragEvent.js @@ -5,8 +5,8 @@ export class DragEvent extends AbstractEvent { return this.data.source; } - get movableSource() { - return this.data.movableSource; + get originalSource() { + return this.data.originalSource; } get mirror() { diff --git a/src/Draggable/Draggable.js b/src/Draggable/Draggable.js index 4da18082..848417c0 100644 --- a/src/Draggable/Draggable.js +++ b/src/Draggable/Draggable.js @@ -188,25 +188,25 @@ export default class Draggable { } // Find draggable source element - this.source = closest(target, this.options.draggable); + this.originalSource = closest(target, this.options.draggable); this.sourceContainer = container; - if (!this.source) { + if (!this.originalSource) { sensorEvent.cancel(); return; } this.dragging = true; - this.movableSource = this.source.cloneNode(true); + this.source = this.originalSource.cloneNode(true); if (!isDragEvent(originalEvent)) { - const appendableContainer = this.getAppendableContainer({source: this.source}); + const appendableContainer = this.getAppendableContainer({source: this.originalSource}); this.mirror = this.source.cloneNode(true); const mirrorCreatedEvent = new MirrorCreatedEvent({ source: this.source, - movableSource: this.movableSource, + originalSource: this.originalSource, mirror: this.mirror, sourceContainer: container, sensorEvent, @@ -214,7 +214,7 @@ export default class Draggable { const mirrorAttachedEvent = new MirrorAttachedEvent({ source: this.source, - movableSource: this.movableSource, + originalSource: this.originalSource, mirror: this.mirror, sourceContainer: container, sensorEvent, @@ -225,11 +225,10 @@ export default class Draggable { this.triggerEvent(mirrorAttachedEvent); } - this.source.parentNode.insertBefore(this.movableSource, this.source); + this.originalSource.parentNode.insertBefore(this.source, this.originalSource); - this.source.style.display = 'none'; + this.originalSource.style.display = 'none'; this.source.classList.add(this.getClassNameFor('source:dragging')); - this.movableSource.classList.add(this.getClassNameFor('source:dragging')); this.sourceContainer.classList.add(this.getClassNameFor('container:dragging')); document.body.classList.add(this.getClassNameFor('body:dragging')); @@ -237,7 +236,7 @@ export default class Draggable { const mirrorMoveEvent = new MirrorMoveEvent({ source: this.source, mirror: this.mirror, - movableSource: this.movableSource, + originalSource: this.originalSource, sourceContainer: container, sensorEvent, }); @@ -251,7 +250,7 @@ export default class Draggable { const dragEvent = new DragStartEvent({ source: this.source, mirror: this.mirror, - movableSource: this.movableSource, + originalSource: this.originalSource, sourceContainer: container, sensorEvent, }); @@ -267,7 +266,6 @@ export default class Draggable { } this.source.classList.remove(this.getClassNameFor('source:dragging')); - this.movableSource.classList.remove(this.getClassNameFor('source:dragging')); this.sourceContainer.classList.remove(this.getClassNameFor('container:dragging')); document.body.classList.remove(this.getClassNameFor('body:dragging')); } @@ -284,7 +282,7 @@ export default class Draggable { const dragMoveEvent = new DragMoveEvent({ source: this.source, mirror: this.mirror, - movableSource: this.movableSource, + originalSource: this.originalSource, sourceContainer: container, sensorEvent, }); @@ -299,7 +297,7 @@ export default class Draggable { const mirrorMoveEvent = new MirrorMoveEvent({ source: this.source, mirror: this.mirror, - movableSource: this.movableSource, + originalSource: this.originalSource, sourceContainer: container, sensorEvent, }); @@ -318,7 +316,7 @@ export default class Draggable { const dragOutEvent = new DragOutEvent({ source: this.source, mirror: this.mirror, - movableSource: this.movableSource, + originalSource: this.originalSource, sourceContainer: container, sensorEvent, over: this.currentOver, @@ -334,7 +332,7 @@ export default class Draggable { const dragOutContainerEvent = new DragOutContainerEvent({ source: this.source, mirror: this.mirror, - movableSource: this.movableSource, + originalSource: this.originalSource, sourceContainer: container, sensorEvent, overContainer: this.overContainer, @@ -352,7 +350,7 @@ export default class Draggable { const dragOverContainerEvent = new DragOverContainerEvent({ source: this.source, mirror: this.mirror, - movableSource: this.movableSource, + originalSource: this.originalSource, sourceContainer: container, sensorEvent, overContainer, @@ -369,7 +367,7 @@ export default class Draggable { const dragOverEvent = new DragOverEvent({ source: this.source, mirror: this.mirror, - movableSource: this.movableSource, + originalSource: this.originalSource, sourceContainer: container, sensorEvent, overContainer, @@ -389,20 +387,19 @@ export default class Draggable { const dragStopEvent = new DragStopEvent({ source: this.source, mirror: this.mirror, - movableSource: this.movableSource, + originalSource: this.originalSource, sensorEvent: event.sensorEvent, sourceContainer: this.sourceContainer, }); this.triggerEvent(dragStopEvent); - this.movableSource.parentNode.insertBefore(this.source, this.movableSource); - this.movableSource.parentNode.removeChild(this.movableSource); - this.source.style.display = ''; + this.source.parentNode.insertBefore(this.originalSource, this.source); + this.source.parentNode.removeChild(this.source); + this.originalSource.style.display = ''; this.source.classList.remove(this.getClassNameFor('source:dragging')); - this.movableSource.classList.remove(this.getClassNameFor('source:dragging')); - this.source.classList.add(this.getClassNameFor('source:placed')); + this.originalSource.classList.add(this.getClassNameFor('source:placed')); this.sourceContainer.classList.add(this.getClassNameFor('container:placed')); this.sourceContainer.classList.remove(this.getClassNameFor('container:dragging')); document.body.classList.remove(this.getClassNameFor('body:dragging')); @@ -430,7 +427,7 @@ export default class Draggable { } } - const lastSource = this.source; + const lastSource = this.originalSource; const lastSourceContainer = this.sourceContainer; setTimeout(() => { @@ -445,7 +442,7 @@ export default class Draggable { this.source = null; this.mirror = null; - this.movableSource = null; + this.originalSource = null; this.currentOverContainer = null; this.currentOver = null; this.sourceContainer = null; diff --git a/src/Draggable/MirrorEvent/MirrorEvent.js b/src/Draggable/MirrorEvent/MirrorEvent.js index 858e98c0..7d168a67 100644 --- a/src/Draggable/MirrorEvent/MirrorEvent.js +++ b/src/Draggable/MirrorEvent/MirrorEvent.js @@ -5,8 +5,8 @@ export class MirrorEvent extends AbstractEvent { return this.data.source; } - get movableSource() { - return this.data.movableSource; + get originalSource() { + return this.data.originalSource; } get mirror() { diff --git a/src/Draggable/Plugins/Mirror/Mirror.js b/src/Draggable/Plugins/Mirror/Mirror.js index 14f2c325..33c44ab4 100644 --- a/src/Draggable/Plugins/Mirror/Mirror.js +++ b/src/Draggable/Plugins/Mirror/Mirror.js @@ -20,7 +20,7 @@ export default class Mirror { .off('mirror:move', this._onMirrorMove); } - _onMirrorCreated({mirror, movableSource, sensorEvent}) { + _onMirrorCreated({mirror, source, sensorEvent}) { const mirrorClass = this.draggable.getClassNameFor('mirror'); const setState = (data) => { @@ -28,7 +28,7 @@ export default class Mirror { return data; }; - Promise.resolve({mirror, movableSource, sensorEvent, mirrorClass}) + Promise.resolve({mirror, source, sensorEvent, mirrorClass}) .then(computeMirrorDimensions) .then(calculateMirrorOffset) .then(addMirrorClasses) @@ -45,22 +45,22 @@ export default class Mirror { } } -function onMirrorCreated({mirror, movableSource}) { - Promise.resolve({mirror, movableSource}) +function onMirrorCreated({mirror, source}) { + Promise.resolve({mirror, source}) .then(resetMirror) .catch(); } function resetMirror(data) { return withPromise((resolve) => { - const {mirror, movableSource} = data; + const {mirror, source} = data; mirror.style.position = 'fixed'; mirror.style.pointerEvents = 'none'; mirror.style.top = 0; mirror.style.left = 0; - mirror.style.width = `${movableSource.offsetWidth}px`; - mirror.style.height = `${movableSource.offsetHeight}px`; + mirror.style.width = `${source.offsetWidth}px`; + mirror.style.height = `${source.offsetHeight}px`; resolve(data); }); @@ -68,8 +68,8 @@ function resetMirror(data) { function computeMirrorDimensions(data) { return withPromise((resolve) => { - const {movableSource} = data; - const sourceRect = movableSource.getBoundingClientRect(); + const {source} = data; + const sourceRect = source.getBoundingClientRect(); resolve({...data, sourceRect}); }); } diff --git a/src/Droppable/Droppable.js b/src/Droppable/Droppable.js index 1f8cb68c..f5b8a752 100644 --- a/src/Droppable/Droppable.js +++ b/src/Droppable/Droppable.js @@ -122,7 +122,7 @@ export default class Droppable { this.lastDroppable.classList.remove(occupiedClass); } - droppable.appendChild(event.movableSource); + droppable.appendChild(event.source); droppable.classList.add(occupiedClass); return true; @@ -140,7 +140,7 @@ export default class Droppable { return; } - this.initialDroppable.appendChild(event.movableSource); + this.initialDroppable.appendChild(event.source); this.lastDroppable.classList.remove(this.getClassNameFor('droppable:occupied')); } diff --git a/src/Plugins/Snappable/Snappable.js b/src/Plugins/Snappable/Snappable.js index 64f69039..96af8552 100644 --- a/src/Plugins/Snappable/Snappable.js +++ b/src/Plugins/Snappable/Snappable.js @@ -38,7 +38,7 @@ export default class Snappable { return; } - this.firstSource = event.movableSource; + this.firstSource = event.source; } _onDragStop() { @@ -50,7 +50,7 @@ export default class Snappable { return; } - const source = event.movableSource || event.dragEvent.movableSource; + const source = event.source || event.dragEvent.source; const mirror = event.mirror || event.dragEvent.mirror; if (source === this.firstSource) { @@ -86,7 +86,7 @@ export default class Snappable { } const mirror = event.mirror || event.dragEvent.mirror; - const source = event.movableSource || event.dragEvent.movableSource; + const source = event.source || event.dragEvent.source; const snapOutEvent = new SnapOutEvent({ dragEvent: event, diff --git a/src/Sortable/Sortable.js b/src/Sortable/Sortable.js index 6fe70258..6ff1b3dd 100644 --- a/src/Sortable/Sortable.js +++ b/src/Sortable/Sortable.js @@ -61,7 +61,7 @@ export default class Sortable { return; } - const moves = move(event.movableSource, event.over, event.overContainer); + const moves = move(event.source, event.over, event.overContainer); if (!moves) { return; @@ -76,11 +76,11 @@ export default class Sortable { } _onDragOver(event) { - if (event.over === event.movableSource || event.over === event.source) { + if (event.over === event.originalSource || event.over === event.source) { return; } - const moves = move(event.movableSource, event.over, event.overContainer); + const moves = move(event.source, event.over, event.overContainer); if (!moves) { return; diff --git a/src/Swappable/Swappable.js b/src/Swappable/Swappable.js index 07c1f303..c9899083 100644 --- a/src/Swappable/Swappable.js +++ b/src/Swappable/Swappable.js @@ -51,13 +51,13 @@ export default class Swappable { } _onDragOver(event) { - if (event.over === event.movableSource || event.over === event.source || event.canceled()) { + if (event.over === event.originalSource || event.over === event.source || event.canceled()) { return; } // swap originally swapped element back if (this.lastOver && this.lastOver !== event.over) { - swap(this.lastOver, event.movableSource); + swap(this.lastOver, event.source); } if (this.lastOver === event.over) { @@ -66,7 +66,7 @@ export default class Swappable { this.lastOver = event.over; } - swap(event.movableSource, event.over); + swap(event.source, event.over); // Let this cancel the actual swap const swappableSwappedEvent = new SwappableSwappedEvent({ From 2433eea9fb8ca5dc8eebc281b2995599d249f485 Mon Sep 17 00:00:00 2001 From: Max Hoffmann Date: Sun, 8 Oct 2017 20:44:54 -0400 Subject: [PATCH 24/34] Mouse sensor prevents contextmenu while dragging --- .../Sensors/MouseSensor/MouseSensor.js | 21 +++++++++++++++++-- .../MouseSensor/tests/MouseSensor.test.js | 12 +++++------ src/Draggable/tests/Draggable.test.js | 2 +- src/Swappable/tests/Swappable.test.js | 2 +- 4 files changed, 27 insertions(+), 10 deletions(-) diff --git a/src/Draggable/Sensors/MouseSensor/MouseSensor.js b/src/Draggable/Sensors/MouseSensor/MouseSensor.js index 6cb457fa..736c8341 100644 --- a/src/Draggable/Sensors/MouseSensor/MouseSensor.js +++ b/src/Draggable/Sensors/MouseSensor/MouseSensor.js @@ -14,6 +14,7 @@ export default class MouseSensor extends Sensor { this.mouseDown = false; this.currentContainer = null; + this._onContextMenuWhileDragging = this._onContextMenuWhileDragging.bind(this); this._onMouseDown = this._onMouseDown.bind(this); this._onMouseMove = this._onMouseMove.bind(this); this._onMouseUp = this._onMouseUp.bind(this); @@ -38,7 +39,7 @@ export default class MouseSensor extends Sensor { } _onMouseDown(event) { - if (event.button === 2) { + if (event.button !== 0) { return; } @@ -64,6 +65,10 @@ export default class MouseSensor extends Sensor { this.currentContainer = container; this.dragging = !dragStartEvent.canceled(); + + if (this.dragging) { + document.addEventListener('contextmenu', this._onContextMenuWhileDragging); + } }, this.options.delay); } @@ -86,7 +91,12 @@ export default class MouseSensor extends Sensor { } _onMouseUp(event) { - this.mouseDown = false; + this.mouseDown = Boolean(this.openedContextMenu); + + if (this.openedContextMenu) { + this.openedContextMenu = false; + return; + } if (!this.dragging) { return; @@ -104,7 +114,14 @@ export default class MouseSensor extends Sensor { this.trigger(this.currentContainer, dragStopEvent); + document.removeEventListener('contextmenu', this._onContextMenuWhileDragging); + this.currentContainer = null; this.dragging = false; } + + _onContextMenuWhileDragging(event) { + event.preventDefault(); + this.openedContextMenu = true; + } } diff --git a/src/Draggable/Sensors/MouseSensor/tests/MouseSensor.test.js b/src/Draggable/Sensors/MouseSensor/tests/MouseSensor.test.js index 03a03ff4..69a082d3 100644 --- a/src/Draggable/Sensors/MouseSensor/tests/MouseSensor.test.js +++ b/src/Draggable/Sensors/MouseSensor/tests/MouseSensor.test.js @@ -37,7 +37,7 @@ describe('MouseSensor', () => { test('triggers `drag:start` sensor event on mousedown', () => { const draggable = sandbox.querySelector('li'); document.elementFromPoint = () => draggable; - triggerEvent(draggable, 'mousedown'); + triggerEvent(draggable, 'mousedown', {button: 0}); // Wait for delay jest.runTimersToTime(1); @@ -49,7 +49,7 @@ describe('MouseSensor', () => { test('cancels `drag:start` event when canceling sensor event', () => { const draggable = sandbox.querySelector('li'); document.elementFromPoint = () => draggable; - triggerEvent(draggable, 'mousedown'); + triggerEvent(draggable, 'mousedown', {button: 0}); sandbox.addEventListener('drag:start', (event) => { event.detail.cancel(); @@ -66,7 +66,7 @@ describe('MouseSensor', () => { test('does not trigger `drag:start` event releasing mouse before timeout', () => { const draggable = sandbox.querySelector('li'); document.elementFromPoint = () => draggable; - triggerEvent(draggable, 'mousedown'); + triggerEvent(draggable, 'mousedown', {button: 0}); triggerEvent(document.body, 'mouseup'); // Wait for delay @@ -81,7 +81,7 @@ describe('MouseSensor', () => { test('triggers `drag:move` event while moving the mouse', () => { const draggable = sandbox.querySelector('li'); document.elementFromPoint = () => draggable; - triggerEvent(draggable, 'mousedown'); + triggerEvent(draggable, 'mousedown', {button: 0}); // Wait for delay jest.runTimersToTime(1); @@ -96,7 +96,7 @@ describe('MouseSensor', () => { test('triggers `drag:stop` event when releasing mouse', () => { const draggable = sandbox.querySelector('li'); document.elementFromPoint = () => draggable; - triggerEvent(draggable, 'mousedown'); + triggerEvent(draggable, 'mousedown', {button: 0}); // Wait for delay jest.runTimersToTime(1); @@ -122,7 +122,7 @@ describe('MouseSensor', () => { test('does not trigger `drag:start` event when clicking on none draggable element', () => { const draggable = sandbox.querySelector('li'); document.elementFromPoint = () => draggable; - triggerEvent(document.body, 'mousedown'); + triggerEvent(document.body, 'mousedown', {button: 0}); // Wait for delay jest.runTimersToTime(1); diff --git a/src/Draggable/tests/Draggable.test.js b/src/Draggable/tests/Draggable.test.js index 59dd42f7..a5330a30 100644 --- a/src/Draggable/tests/Draggable.test.js +++ b/src/Draggable/tests/Draggable.test.js @@ -37,7 +37,7 @@ describe('Draggable', () => { const callback = jest.fn(); draggable.on('drag:start', callback); - triggerEvent(draggableElement, 'mousedown'); + triggerEvent(draggableElement, 'mousedown', {button: 0}); // Wait for delay jest.runTimersToTime(100); diff --git a/src/Swappable/tests/Swappable.test.js b/src/Swappable/tests/Swappable.test.js index 30faf68f..67eaaeea 100644 --- a/src/Swappable/tests/Swappable.test.js +++ b/src/Swappable/tests/Swappable.test.js @@ -33,7 +33,7 @@ describe('Swappable', () => { // Simulate drag start document.elementFromPoint = () => draggableElement; - triggerEvent(draggableElement, 'mousedown'); + triggerEvent(draggableElement, 'mousedown', {button: 0}); // Wait for gesture delay jest.runTimersToTime(0); From 08ab17b8c360243800b68c127be90963a3c757e2 Mon Sep 17 00:00:00 2001 From: Max Hoffmann Date: Sun, 8 Oct 2017 21:20:57 -0400 Subject: [PATCH 25/34] Temporary solution for automatic user select none on drag --- src/Draggable/Draggable.js | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/Draggable/Draggable.js b/src/Draggable/Draggable.js index 848417c0..4f033691 100644 --- a/src/Draggable/Draggable.js +++ b/src/Draggable/Draggable.js @@ -231,6 +231,7 @@ export default class Draggable { this.source.classList.add(this.getClassNameFor('source:dragging')); this.sourceContainer.classList.add(this.getClassNameFor('container:dragging')); document.body.classList.add(this.getClassNameFor('body:dragging')); + applyUserSelect(document.body, 'none'); if (this.mirror) { const mirrorMoveEvent = new MirrorMoveEvent({ @@ -403,6 +404,7 @@ export default class Draggable { this.sourceContainer.classList.add(this.getClassNameFor('container:placed')); this.sourceContainer.classList.remove(this.getClassNameFor('container:dragging')); document.body.classList.remove(this.getClassNameFor('body:dragging')); + applyUserSelect(document.body, ''); if (this.currentOver) { this.currentOver.classList.remove(this.getClassNameFor('draggable:over')); @@ -498,3 +500,11 @@ function getSensorEvent(event) { function isDragEvent(event) { return /^drag/.test(event.type); } + +function applyUserSelect(element, value) { + element.style.webkitUserSelect = value; + element.style.mozUserSelect = value; + element.style.msUserSelect = value; + element.style.oUserSelect = value; + element.style.userSelect = value; +} From b10ff77675665b457a61db84acbc7fa3df6d9869 Mon Sep 17 00:00:00 2001 From: Max Hoffmann Date: Mon, 9 Oct 2017 09:24:40 -0400 Subject: [PATCH 26/34] Improvements to closest function --- src/shared/utils/closest/closest.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/shared/utils/closest/closest.js b/src/shared/utils/closest/closest.js index 72a86bba..dcd7eb34 100644 --- a/src/shared/utils/closest/closest.js +++ b/src/shared/utils/closest/closest.js @@ -26,7 +26,7 @@ export default function closest(element, selector) { return current; } current = current.parentNode; - } while (current !== document.body && current !== document); + } while (current && current !== document.body && current !== document); return null; } From 74de4163772803140b4e1e91d401df6ab4052a29 Mon Sep 17 00:00:00 2001 From: Max Hoffmann Date: Mon, 9 Oct 2017 14:36:05 -0400 Subject: [PATCH 27/34] Use utils closest function instead of native browser closest --- src/Droppable/Droppable.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Droppable/Droppable.js b/src/Droppable/Droppable.js index f5b8a752..4a66fb94 100644 --- a/src/Droppable/Droppable.js +++ b/src/Droppable/Droppable.js @@ -54,7 +54,7 @@ export default class Droppable { } this.droppables = this._getDroppables(); - const droppable = event.sensorEvent.target.closest(this.options.droppable); + const droppable = closest(event.sensorEvent.target, this.options.droppable); if (!droppable) { event.cancel(); From b503d2987613e914b12cf6fd1e9e051baad4ce6f Mon Sep 17 00:00:00 2001 From: Mark Moyes Date: Mon, 2 Oct 2017 11:43:20 -0400 Subject: [PATCH 28/34] =?UTF-8?q?Add=20defaults=20to=20Droppable,=20so=20n?= =?UTF-8?q?o=20error=20is=20thrown=20if=20the=20user=20doesn=E2=80=99t=20s?= =?UTF-8?q?pecify=20=E2=80=98classes=E2=80=99=20in=20options?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Droppable/Droppable.js | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/src/Droppable/Droppable.js b/src/Droppable/Droppable.js index 4a66fb94..d834d34d 100644 --- a/src/Droppable/Droppable.js +++ b/src/Droppable/Droppable.js @@ -6,15 +6,17 @@ import { DroppableOutEvent, } from './DroppableEvent'; -const classes = { - 'droppable:active': 'draggable-droppable--active', - 'droppable:occupied': 'draggable-droppable--occupied', +const defaults = { + 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.options = Object.assign({}, defaults, options); this._onDragStart = this._onDragStart.bind(this); this._onDragMove = this._onDragMove.bind(this); @@ -45,7 +47,7 @@ export default class Droppable { } getClassNameFor(name) { - return this.options.classes[name] || classes[name]; + return this.options.classes[name] || defaults.classes[name]; } _onDragStart(event) { From 37321a8120b7d3dea277b347c584bfb813d755a5 Mon Sep 17 00:00:00 2001 From: Max Hoffmann Date: Mon, 9 Oct 2017 14:46:57 -0400 Subject: [PATCH 29/34] Fix up linting errors for droppable --- src/Droppable/Droppable.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Droppable/Droppable.js b/src/Droppable/Droppable.js index d834d34d..87cda87e 100644 --- a/src/Droppable/Droppable.js +++ b/src/Droppable/Droppable.js @@ -10,13 +10,13 @@ const defaults = { 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 = Object.assign({}, defaults, options); + this.options = {...defaults, ...options}; this._onDragStart = this._onDragStart.bind(this); this._onDragMove = this._onDragMove.bind(this); From e45f1346e4e0269b51e8dbfcf99cc40ed1aeb0ef Mon Sep 17 00:00:00 2001 From: Max Hoffmann Date: Tue, 10 Oct 2017 17:13:06 -0400 Subject: [PATCH 30/34] Prevent native drag events for mouse sensor --- src/Draggable/Sensors/MouseSensor/MouseSensor.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/Draggable/Sensors/MouseSensor/MouseSensor.js b/src/Draggable/Sensors/MouseSensor/MouseSensor.js index 736c8341..04d84dbe 100644 --- a/src/Draggable/Sensors/MouseSensor/MouseSensor.js +++ b/src/Draggable/Sensors/MouseSensor/MouseSensor.js @@ -68,6 +68,7 @@ export default class MouseSensor extends Sensor { if (this.dragging) { document.addEventListener('contextmenu', this._onContextMenuWhileDragging); + document.addEventListener('dragstart', preventNativeDragStart); } }, this.options.delay); } @@ -115,6 +116,7 @@ export default class MouseSensor extends Sensor { this.trigger(this.currentContainer, dragStopEvent); document.removeEventListener('contextmenu', this._onContextMenuWhileDragging); + document.removeEventListener('dragstart', preventNativeDragStart); this.currentContainer = null; this.dragging = false; @@ -125,3 +127,7 @@ export default class MouseSensor extends Sensor { this.openedContextMenu = true; } } + +function preventNativeDragStart(event) { + event.preventDefault(); +} From 48a1828dff13563b8f904d474e7477169bfd3ac8 Mon Sep 17 00:00:00 2001 From: Max Hoffmann Date: Tue, 10 Oct 2017 17:22:18 -0400 Subject: [PATCH 31/34] Prevent drag start on mouse click with ctrl on mac in mouse sensor --- src/Draggable/Sensors/MouseSensor/MouseSensor.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Draggable/Sensors/MouseSensor/MouseSensor.js b/src/Draggable/Sensors/MouseSensor/MouseSensor.js index 04d84dbe..72541884 100644 --- a/src/Draggable/Sensors/MouseSensor/MouseSensor.js +++ b/src/Draggable/Sensors/MouseSensor/MouseSensor.js @@ -39,7 +39,7 @@ export default class MouseSensor extends Sensor { } _onMouseDown(event) { - if (event.button !== 0) { + if (event.button !== 0 || event.ctrlKey) { return; } From b2ff5daaf6543c618c011ae38aa46c8bcf43d52e Mon Sep 17 00:00:00 2001 From: Max Hoffmann Date: Tue, 10 Oct 2017 18:27:21 -0400 Subject: [PATCH 32/34] Disable force touch sensor by default --- src/Draggable/Draggable.js | 2 -- src/index.js | 3 +++ 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/Draggable/Draggable.js b/src/Draggable/Draggable.js index 4f033691..bf54e6e4 100644 --- a/src/Draggable/Draggable.js +++ b/src/Draggable/Draggable.js @@ -6,7 +6,6 @@ import { DragSensor, MouseSensor, TouchSensor, - ForceTouchSensor, } from './Sensors'; import { @@ -173,7 +172,6 @@ export default class Draggable { sensors() { return [ TouchSensor, - ForceTouchSensor, (this.options.native ? DragSensor : MouseSensor), ]; } diff --git a/src/index.js b/src/index.js index 305e00b0..55df4db6 100644 --- a/src/index.js +++ b/src/index.js @@ -7,6 +7,8 @@ import Sortable from './Sortable'; import {Snappable, Collidable} from './Plugins'; +import ForceTouchSensor from './Draggable/Sensors/ForceTouchSensor'; + export { Draggable, Sortable, @@ -14,5 +16,6 @@ export { Droppable, Snappable, Collidable, + ForceTouchSensor, AbstractEvent as BaseEvent, }; From af86f49d00c0b07b6043d5a885ae5cd2b24d7829 Mon Sep 17 00:00:00 2001 From: Max Hoffmann Date: Tue, 10 Oct 2017 18:40:51 -0400 Subject: [PATCH 33/34] Add changelog --- CHANGELOG.md | 28 ++++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) create mode 100644 CHANGELOG.md diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 00000000..8505c215 --- /dev/null +++ b/CHANGELOG.md @@ -0,0 +1,28 @@ +# Changelog + +## v1.0.0-beta.2 - 2017-10-10 + +### Added + +- Code of Conduct +- Contribution guidelines +- Documentation on `appendTo` option for `Draggable` +- Added concept of `originalSource` +- Fix for text selection issue +- Fix for native drag events firing for the `MouseSensor` +- Fix for missing `classes` option + +### Changes + +- README updates +- Touch improvements +- ForceTouchSensor is not included by default anymore +- Folder/File restructure +- Exports `AbstractEvent` as `BaseEvent` +- Update node version from `8.2.1` to `8.6.0` +- Clones event callbacks before triggering (to prevent mutation during iterations) +- Improvements to `closest` utils helper + +## v1.0.0-beta - 2017-09-27 + +Initial release From 9c63ded7aec1a302ff10f61e8eac7e8cc0aceff7 Mon Sep 17 00:00:00 2001 From: Max Hoffmann Date: Tue, 10 Oct 2017 18:41:34 -0400 Subject: [PATCH 34/34] v1.0.0-beta.2 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 72ebcda2..ba84bcb7 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@shopify/draggable", - "version": "1.0.0-beta", + "version": "1.0.0-beta.2", "private": false, "license": "MIT", "description": "The JavaScript Drag & Drop library your grandparents warned you about.",