ember-sortable 2.4.0 → 4.0.0

package/addon/modifiers/sortable-item.js

@@ -1,23 +1,24 @@
+/* eslint-disable ember/no-computed-properties-in-native-classes */
 import Modifier from 'ember-modifier';
 import { Promise, defer } from 'rsvp';
-import {action, set} from '@ember/object';
-import {reads} from '@ember/object/computed';
-import {or} from '@ember/object/computed';
-import {DRAG_ACTIONS, ELEMENT_CLICK_ACTION, END_ACTIONS} from "../utils/constant";
+import { action, set } from '@ember/object';
+import { DRAG_ACTIONS, ELEMENT_CLICK_ACTION, END_ACTIONS } from '../utils/constant';
 import { run, throttle, bind, scheduleOnce, later } from '@ember/runloop';
 import { DEBUG } from '@glimmer/env';
-import {getX, getY} from "../utils/coordinate";
-import ScrollContainer from "../system/scroll-container";
-import scrollParent from "../system/scroll-parent";
-import {getBorderSpacing} from "../utils/css-calculation";
+import { getX, getY } from '../utils/coordinate';
+import ScrollContainer from '../system/scroll-container';
+import scrollParent from '../system/scroll-parent';
+import { getBorderSpacing } from '../utils/css-calculation';
 import { buildWaiter } from '@ember/test-waiters';
-import {inject as service} from '@ember/service';
+import { inject as service } from '@ember/service';
 import { assert, deprecate } from '@ember/debug';
 import config from 'ember-get-config';
+import { registerDestructor } from '@ember/destroyable';
+
 const { environment } = config;
 const isTesting = environment === 'test';
 
-const sortableItemWaiter = buildWaiter("sortable-item-waiter");
+const sortableItemWaiter = buildWaiter('sortable-item-waiter');
 
 /**
  * Modifier to mark an element as an item to be reordered
@@ -39,8 +40,9 @@ const sortableItemWaiter = buildWaiter("sortable-item-waiter");
  *    </ol>
  */
 export default class SortableItemModifier extends Modifier {
+  className = 'sortable-item';
 
-  className = "sortable-item";
+  @service('ember-sortable-internal-state') sortableService;
 
   _sortableGroup;
   /**
@@ -52,22 +54,25 @@ export default class SortableItemModifier extends Modifier {
   get sortableGroup() {
     if (this._sortableGroup === undefined) {
       this._sortableGroup = this.sortableService.fetchGroup(this.groupName);
-      assert(`No sortable group named ${this.groupName} found. Please check that the groups and items have the same groupName`, this._sortableGroup !== undefined)
+      assert(
+        `No sortable group named ${this.groupName} found. Please check that the groups and items have the same groupName`,
+        this._sortableGroup !== undefined
+      );
     }
     return this._sortableGroup.groupModifier;
   }
 
-  @reads("args.named.model")
-  model;
-
-  @reads("sortableGroup.direction")
-  direction;
+  get model() {
+    return this.args.named.model;
+  }
 
-  @reads("sortableGroup.disabled")
-  groupDisabled;
+  get direction() {
+    return this.sortableGroup.direction;
+  }
 
-  @service('ember-sortable@ember-sortable')
-  sortableService;
+  get groupDisabled() {
+    return this.sortableGroup.disabled;
+  }
 
   /**
    * This is the group name used to keep groups separate if there are more than one on the screen at a time.
@@ -77,7 +82,7 @@ export default class SortableItemModifier extends Modifier {
    * @returns {*|string}
    */
   get groupName() {
-    return this.args.named.groupName || "_EmberSortableGroup";
+    return this.args.named.groupName || '_EmberSortableGroup';
   }
 
   /**
@@ -110,7 +115,7 @@ export default class SortableItemModifier extends Modifier {
   get isDisabled() {
     deprecate(
       '"isDraggingDisabled" is deprecated.  Please migrate to "disabled" named argument',
-      !("isDraggingDisabled" in this.args.named),
+      !('isDraggingDisabled' in this.args.named),
       {
         id: 'ember-sortable.is-dragging-disabled',
         url: 'https://github.com/adopted-ember-addons/ember-sortable#readme',
@@ -120,7 +125,8 @@ export default class SortableItemModifier extends Modifier {
           available: '2.2.6',
           enabled: '2.2.6',
         },
-      });
+      }
+    );
 
     return this.groupDisabled || this.args.named.disabled || this.args.named.isDraggingDisabled || false;
   }
@@ -137,7 +143,7 @@ export default class SortableItemModifier extends Modifier {
    @default "[data-sortable-handle]"
    */
   get handle() {
-    return this.args.named.handle || "[data-sortable-handle]";
+    return this.args.named.handle || '[data-sortable-handle]';
   }
 
   handleElement;
@@ -170,9 +176,9 @@ export default class SortableItemModifier extends Modifier {
   }
   set isDragging(value) {
     if (value) {
-      this.element.classList.add("is-dragging");
+      this.element.classList.add('is-dragging');
     } else {
-      this.element.classList.remove("is-dragging");
+      this.element.classList.remove('is-dragging');
     }
     this._isDragging = value;
   }
@@ -185,7 +191,7 @@ export default class SortableItemModifier extends Modifier {
    @default null
    */
   get onDragStart() {
-    return this.args.named.onDragStart || (item => item);
+    return this.args.named.onDragStart || ((item) => item);
   }
 
   /**
@@ -196,7 +202,7 @@ export default class SortableItemModifier extends Modifier {
    @default null
    */
   get onDragStop() {
-    return this.args.named.onDragStop || (item => item);
+    return this.args.named.onDragStop || ((item) => item);
   }
 
   /**
@@ -211,9 +217,9 @@ export default class SortableItemModifier extends Modifier {
   }
   set isDropping(value) {
     if (value) {
-      this.element.classList.add("is-dropping");
+      this.element.classList.add('is-dropping');
     } else {
-      this.element.classList.remove("is-dropping");
+      this.element.classList.remove('is-dropping');
     }
     this._isDropping = value;
   }
@@ -230,8 +236,9 @@ export default class SortableItemModifier extends Modifier {
    @property isBusy
    @type Boolean
    */
-  @or('isDragging', 'isDropping')
-  isBusy;
+  get isBusy() {
+    return this.isDragging || this.isDropping;
+  }
 
   /**
    @property disableCheckScrollBounds
@@ -245,15 +252,21 @@ export default class SortableItemModifier extends Modifier {
    */
   @action
   mouseDown(event) {
-    if (event.which !== 1) { return; }
-    if (event.ctrlKey) { return; }
+    if (event.which !== 1) {
+      return;
+    }
+    if (event.ctrlKey) {
+      return;
+    }
 
     this._primeDrag(event);
   }
 
   @action
   keyDown(event) {
-    if (this.isDisabled) { return; }
+    if (this.isDisabled) {
+      return;
+    }
 
     // If the event is coming from within the item, we do not want to activate keyboard reorder mode.
     if (event.target === this.handleElement || event.target === this.element) {
@@ -276,7 +289,9 @@ export default class SortableItemModifier extends Modifier {
    */
   freeze() {
     let el = this.element;
-    if (!el) { return; }
+    if (!el) {
+      return;
+    }
 
     el.style.transition = 'none';
   }
@@ -286,7 +301,9 @@ export default class SortableItemModifier extends Modifier {
    */
   reset() {
     let el = this.element;
-    if (!el) { return; }
+    if (!el) {
+      return;
+    }
 
     delete this._y;
     delete this._x;
@@ -299,7 +316,9 @@ export default class SortableItemModifier extends Modifier {
    */
   thaw() {
     let el = this.element;
-    if (!el) { return; }
+    if (!el) {
+      return;
+    }
 
     el.style.transition = '';
   }
@@ -312,7 +331,9 @@ export default class SortableItemModifier extends Modifier {
    * @private
    */
   _primeDrag(startEvent) {
-    if (this.isDisabled) { return; }
+    if (this.isDisabled) {
+      return;
+    }
 
     if (this.handleElement && !startEvent.target.closest(this.handle)) {
       return;
@@ -323,18 +344,18 @@ export default class SortableItemModifier extends Modifier {
 
     this._prepareDragListener = bind(this, this._prepareDrag, startEvent);
 
-    DRAG_ACTIONS.forEach(event => window.addEventListener(event, this._prepareDragListener));
+    DRAG_ACTIONS.forEach((event) => window.addEventListener(event, this._prepareDragListener));
 
     this._cancelStartDragListener = () => {
-      DRAG_ACTIONS.forEach(event => window.removeEventListener(event, this._prepareDragListener));
+      DRAG_ACTIONS.forEach((event) => window.removeEventListener(event, this._prepareDragListener));
     };
 
     const selfCancellingCallback = () => {
-      END_ACTIONS.forEach(event => window.removeEventListener(event, selfCancellingCallback));
+      END_ACTIONS.forEach((event) => window.removeEventListener(event, selfCancellingCallback));
       this._cancelStartDragListener();
     };
 
-    END_ACTIONS.forEach(event => window.addEventListener(event, selfCancellingCallback));
+    END_ACTIONS.forEach((event) => window.addEventListener(event, selfCancellingCallback));
   }
 
   /**
@@ -351,7 +372,7 @@ export default class SortableItemModifier extends Modifier {
     let dy = Math.abs(getY(startEvent) - getY(event));
 
     if (distance <= dx || distance <= dy) {
-      DRAG_ACTIONS.forEach(event => window.removeEventListener(event, this._prepareDragListener));
+      DRAG_ACTIONS.forEach((event) => window.removeEventListener(event, this._prepareDragListener));
       this._startDrag(startEvent);
     }
   }
@@ -364,25 +385,27 @@ export default class SortableItemModifier extends Modifier {
    * @private
    */
   _startDrag(event) {
-    if (this.isBusy) { return; }
+    if (this.isBusy) {
+      return;
+    }
 
     let drag = this._makeDragHandler(event);
-    let dragThrottled = ev => throttle(this, drag, ev, 16, false);
+    let dragThrottled = (ev) => throttle(this, drag, ev, 16, false);
 
     let drop = () => {
-      DRAG_ACTIONS.forEach(event => window.removeEventListener(event, dragThrottled));
-      END_ACTIONS.forEach(event => window.removeEventListener(event, drop));
+      DRAG_ACTIONS.forEach((event) => window.removeEventListener(event, dragThrottled));
+      END_ACTIONS.forEach((event) => window.removeEventListener(event, drop));
 
       run(() => {
         this._drop();
       });
     };
 
-    DRAG_ACTIONS.forEach(event => window.addEventListener(event, dragThrottled));
-    END_ACTIONS.forEach(event => window.addEventListener(event, drop));
+    DRAG_ACTIONS.forEach((event) => window.addEventListener(event, dragThrottled));
+    END_ACTIONS.forEach((event) => window.addEventListener(event, drop));
 
     this.sortableGroup.prepare();
-    set(this, "isDragging", true);
+    set(this, 'isDragging', true);
     this.onDragStart(this.model);
     this._scrollOnEdges(drag);
   }
@@ -414,7 +437,7 @@ export default class SortableItemModifier extends Modifier {
       },
       get bottom() {
         return this.top + this.height;
-      }
+      },
     };
 
     let leadingEdgeKey, trailingEdgeKey, scrollKey, pageKey;
@@ -431,12 +454,14 @@ export default class SortableItemModifier extends Modifier {
     }
 
     let createFakeEvent = () => {
-      if (this._pageX == null && this._pageY == null) { return; }
+      if (this._pageX == null && this._pageY == null) {
+        return;
+      }
       return {
         pageX: this._pageX,
         pageY: this._pageY,
         clientX: this._pageX,
-        clientY: this._pageY
+        clientY: this._pageY,
       };
     };
 
@@ -497,7 +522,7 @@ export default class SortableItemModifier extends Modifier {
       elementOrigin = this.x;
       scrollOrigin = parentElement.getBoundingClientRect().left;
 
-      return event => {
+      return (event) => {
         this._pageX = getX(event);
         let dx = this._pageX - dragOrigin;
         let scrollX = parentElement.getBoundingClientRect().left;
@@ -512,7 +537,7 @@ export default class SortableItemModifier extends Modifier {
       elementOrigin = this.y;
       scrollOrigin = parentElement.getBoundingClientRect().top;
 
-      return event => {
+      return (event) => {
         this._pageY = getY(event);
         let dy = this._pageY - dragOrigin;
         let scrollY = parentElement.getBoundingClientRect().top;
@@ -536,7 +561,9 @@ export default class SortableItemModifier extends Modifier {
    @private
    */
   _applyPosition() {
-    if (!this.element || !this.element) { return; }
+    if (!this.element || !this.element) {
+      return;
+    }
 
     const groupDirection = this.direction;
 
@@ -559,7 +586,7 @@ export default class SortableItemModifier extends Modifier {
    @private
    */
   _drag(dimension) {
-    if(!this.isDragging) {
+    if (!this.isDragging) {
       return;
     }
     let updateInterval = this.updateInterval;
@@ -580,14 +607,16 @@ export default class SortableItemModifier extends Modifier {
    @private
    */
   _drop() {
-    if (!this.element) { return; }
+    if (!this.element) {
+      return;
+    }
 
     let transitionPromise = this._waitForTransition();
 
     this._preventClick();
 
-    set(this, "isDragging", false);
-    set(this, "isDropping", true);
+    set(this, 'isDragging', false);
+    set(this, 'isDropping', true);
 
     this.sortableGroup.update();
     transitionPromise.then(() => this._complete());
@@ -656,8 +685,8 @@ export default class SortableItemModifier extends Modifier {
    */
   _complete() {
     this.onDragStop(this.model);
-    set(this, "isDropping", false);
-    set(this, "wasDropped", true);
+    set(this, 'isDropping', false);
+    set(this, 'wasDropped', true);
     this.sortableGroup.commit();
   }
 
@@ -677,7 +706,7 @@ export default class SortableItemModifier extends Modifier {
    @property transitionDuration
    @type Number
    */
-   get transitionDuration() {
+  get transitionDuration() {
     let el = this.element;
     let rule = getComputedStyle(el).transitionDuration;
     let match = rule.match(/([\d.]+)([ms]*)/);
@@ -771,39 +800,54 @@ export default class SortableItemModifier extends Modifier {
   }
 
   addEventListener() {
-    this.element.addEventListener("keydown", this.keyDown);
-    this.element.addEventListener("mousedown", this.mouseDown);
-    this.element.addEventListener("touchstart", this.touchStart);
+    this.element.addEventListener('keydown', this.keyDown);
+    this.element.addEventListener('mousedown', this.mouseDown);
+    this.element.addEventListener('touchstart', this.touchStart);
   }
 
   removeEventListener() {
-    this.element.removeEventListener("keydown", this.keyDown);
-    this.element.removeEventListener("mousedown", this.mouseDown);
-    this.element.removeEventListener("touchstart", this.touchStart);
+    this.element.removeEventListener('keydown', this.keyDown);
+    this.element.removeEventListener('mousedown', this.mouseDown);
+    this.element.removeEventListener('touchstart', this.touchStart);
+  }
+
+  element;
+  didSetup = false;
+
+  constructor(owner, args) {
+    super(owner, args);
+    registerDestructor(this, cleanup);
   }
 
-  didReceiveArguments() {
+  modify(element /*, positional, named*/) {
+    this.element = element;
+
     this.element.classList.add(this.className);
 
     // Instead of using `event.preventDefault()` in the 'primeDrag' event,
     // (doesn't work in Chrome 56), we set touch-action: none as a workaround.
     this.handleElement = this.element.querySelector(this.handle);
+
     if (this.handleElement) {
       this.handleElement.style['touch-action'] = 'none';
     } else {
       this.element.style['touch-action'] = 'none';
     }
-  }
-
-  didInstall() {
-    this.addEventListener();
-    this.element.dataset.sortableItem=true;
-    this.sortableService.registerItem(this.groupName, this);
-  }
 
-  willRemove() {
-    this.removeEventListener();
-    this.sortableService.deregisterItem(this.groupName, this);
+    if (!this.didSetup) {
+      this.addEventListener();
+      this.element.dataset.sortableItem = true;
+      this.sortableService.registerItem(this.groupName, this);
+      this.didSetup = true;
+    }
   }
+}
 
+/**
+ *
+ * @param {SortableItemModifier} instance
+ */
+function cleanup(instance) {
+  instance.removeEventListener();
+  instance.sortableService.deregisterItem(instance.groupName, instance);
 }

package/addon/services/ember-sortable.js

@@ -1,7 +1,6 @@
 import Service from '@ember/service';
 
 export default class EmberSortableService extends Service {
-
   /**
    * Internal State for any groups currently in DOM
    *
@@ -13,9 +12,7 @@ export default class EmberSortableService extends Service {
    * }
    * @type {{}}
    */
-  groups = {
-
-  };
+  groups = {};
 
   /**
    * Register a new group with the service
@@ -27,8 +24,8 @@ export default class EmberSortableService extends Service {
     if (this.groups[groupName] === undefined) {
       this.groups[groupName] = {
         groupModifier: groupModifier,
-        items: []
-      }
+        items: [],
+      };
     } else {
       this.groups[groupName].groupModifier = groupModifier;
     }

package/addon/system/scroll-parent.js

@@ -17,7 +17,7 @@ function getParentElements(element) {
 export default function (element) {
   let position = getComputedStyle(element).position;
   let excludeStaticParent = position === 'absolute';
-  let scrollParent = getParentElements(element).filter(function(parent) {
+  let scrollParent = getParentElements(element).filter(function (parent) {
     let parentElemStyles = getComputedStyle(parent);
     if (excludeStaticParent && parentElemStyles.position === 'static') {
       return false;

package/addon/utils/coordinate.js

@@ -31,4 +31,4 @@ export function getX(event) {
   } else {
     return event.clientX;
   }
-}
+}

package/addon/utils/css-calculation.js

@@ -12,6 +12,6 @@ export function getBorderSpacing(el) {
 
   return {
     horizontal: parseFloat(horizontal),
-    vertical: parseFloat(vertical)
+    vertical: parseFloat(vertical),
   };
-}
+}

package/addon/utils/defaults.js

@@ -4,8 +4,7 @@ export const defaultA11yAnnouncementConfig = {
 
     if (direction === 'y') {
       message += 'Press up and down keys to change position,';
-    }
-    else {
+    } else {
       message += 'Press left and right keys to change position,';
     }
 
@@ -14,7 +13,9 @@ export const defaultA11yAnnouncementConfig = {
     return message;
   },
   MOVE({ a11yItemName, index, maxLength, delta }) {
-    return `${a11yItemName} is moved to position, ${index + 1 + delta} of ${maxLength}. Press Space to confirm new position, Escape to cancel.`;
+    return `${a11yItemName} is moved to position, ${
+      index + 1 + delta
+    } of ${maxLength}. Press Space to confirm new position, Escape to cancel.`;
   },
   CONFIRM({ a11yItemName }) {
     return `${a11yItemName} is successfully repositioned.`;

package/addon/utils/keyboard.js

@@ -26,16 +26,7 @@ function createKeyTest(key, keyCode) {
 export const isEnterKey = createKeyTest(ENTER_KEY, ENTER_KEY_CODE);
 export const isEscapeKey = createKeyTest(ESCAPE_KEY, ESCAPE_KEY_CODE);
 export const isSpaceKey = createKeyTest(SPACE_KEY, SPACE_KEY_CODE);
-export const isLeftArrowKey = createKeyTest(
-  ARROW_KEYS.LEFT,
-  ARROW_KEY_CODES.LEFT
-);
+export const isLeftArrowKey = createKeyTest(ARROW_KEYS.LEFT, ARROW_KEY_CODES.LEFT);
 export const isUpArrowKey = createKeyTest(ARROW_KEYS.UP, ARROW_KEY_CODES.UP);
-export const isRightArrowKey = createKeyTest(
-  ARROW_KEYS.RIGHT,
-  ARROW_KEY_CODES.RIGHT
-);
-export const isDownArrowKey = createKeyTest(
-  ARROW_KEYS.DOWN,
-  ARROW_KEY_CODES.DOWN
-);
+export const isRightArrowKey = createKeyTest(ARROW_KEYS.RIGHT, ARROW_KEY_CODES.RIGHT);
+export const isDownArrowKey = createKeyTest(ARROW_KEYS.DOWN, ARROW_KEY_CODES.DOWN);

package/addon-test-support/helpers/drag.js

@@ -1,4 +1,4 @@
-import { triggerEvent, find, settled, } from '@ember/test-helpers';
+import { triggerEvent, find, settled } from '@ember/test-helpers';
 import { getOffset } from '../utils/offset';
 
 /**
@@ -26,12 +26,7 @@ import { getOffset } from '../utils/offset';
   @return {Promise}
 */
 
-export async function drag(
-  mode,
-  itemSelector,
-  offsetFn,
-  callbacks = {}
-) {
+export async function drag(mode, itemSelector, offsetFn, callbacks = {}) {
   let start;
   let move;
   let end;
@@ -62,10 +57,7 @@ export async function drag(
   // https://stackoverflow.com/a/5042051
   const dx = offset.dx || 0;
   const dy = offset.dy || 0;
-  const clientHeight =
-    itemElement.clientHeight ||
-    itemElement.offsetHeight ||
-    itemElement.parentNode.offsetHeight;
+  const clientHeight = itemElement.clientHeight || itemElement.offsetHeight || itemElement.parentNode.offsetHeight;
   const scale = clientHeight / (rect.bottom - rect.top);
   const halfwayX = itemOffset.left + (dx * scale) / 2;
   const halfwayY = itemOffset.top + (dy * scale) / 2;

package/addon-test-support/helpers/index.js

@@ -1,7 +1,4 @@
 import { drag } from './drag';
 import { reorder } from './reorder';
 
-export {
-  drag,
-  reorder,
-}
+export { drag, reorder };

package/addon-test-support/helpers/reorder.js

@@ -1,11 +1,7 @@
 import { find, findAll } from '@ember/test-helpers';
 import { drag } from './drag';
 import { getOffset } from '../utils/offset';
-/**
-  In tests, the dummy app is rendered at half size.
-  To avoid rounding errors, we must therefore double
-  the overshoot.
-*/
+
 const OVERSHOOT = 2;
 
 /**
@@ -38,6 +34,8 @@ export async function reorder(mode, itemSelector, ...resultSelectors) {
     const dx = getOffset(targetElement).left - OVERSHOOT - getOffset(sourceElement).left;
     const dy = getOffset(targetElement).top - OVERSHOOT - getOffset(sourceElement).top;
 
-    await drag(mode, sourceElement, () => { return { dx: dx, dy: dy }; });
+    await drag(mode, sourceElement, () => {
+      return { dx: dx, dy: dy };
+    });
   }
 }

package/addon-test-support/utils/keyboard.js

@@ -26,16 +26,7 @@ function createKeyTest(key, keyCode) {
 export const isEnterKey = createKeyTest(ENTER_KEY, ENTER_KEY_CODE);
 export const isEscapeKey = createKeyTest(ESCAPE_KEY, ESCAPE_KEY_CODE);
 export const isSpaceKey = createKeyTest(SPACE_KEY, SPACE_KEY_CODE);
-export const isLeftArrowKey = createKeyTest(
-  ARROW_KEYS.LEFT,
-  ARROW_KEY_CODES.LEFT
-);
+export const isLeftArrowKey = createKeyTest(ARROW_KEYS.LEFT, ARROW_KEY_CODES.LEFT);
 export const isUpArrowKey = createKeyTest(ARROW_KEYS.UP, ARROW_KEY_CODES.UP);
-export const isRightArrowKey = createKeyTest(
-  ARROW_KEYS.RIGHT,
-  ARROW_KEY_CODES.RIGHT
-);
-export const isDownArrowKey = createKeyTest(
-  ARROW_KEYS.DOWN,
-  ARROW_KEY_CODES.DOWN
-);
+export const isRightArrowKey = createKeyTest(ARROW_KEYS.RIGHT, ARROW_KEY_CODES.RIGHT);
+export const isDownArrowKey = createKeyTest(ARROW_KEYS.DOWN, ARROW_KEY_CODES.DOWN);

package/addon-test-support/utils/offset.js

@@ -1,9 +1,9 @@
 /** Vanilla Javascript equivalent of JQuery's `.offset`.
-  * Reference: https://github.com/nefe/You-Dont-Need-jQuery
-  *
-  * @method getOffset
-  * @param {Element} el an element
-  */
+ * Reference: https://github.com/nefe/You-Dont-Need-jQuery
+ *
+ * @method getOffset
+ * @param {Element} el an element
+ */
 export function getOffset(el) {
   const box = el.getBoundingClientRect();
 
@@ -11,4 +11,4 @@ export function getOffset(el) {
     top: box.top + window.pageYOffset - document.documentElement.clientTop,
     left: box.left + window.pageXOffset - document.documentElement.clientLeft,
   };
-}
+}