ember-sortable 2.2.5 → 3.0.0

package/addon/modifiers/sortable-item.js

@@ -1,29 +1,29 @@
+/* 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 { run, throttle } from '@ember/runloop';
+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 {assert} from '@ember/debug';
+import { inject as service } from '@ember/service';
+import { assert, deprecate } from '@ember/debug';
 import config from 'ember-get-config';
+
 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
  *
  * @param {Object} model The model that this item will represent
- * @param {boolean} [isDraggingDisabled=false] Set to true to make this item not draggable
+ * @param {boolean} [disabled=false] Set to true to make this item not sortable
  * @param {Function}  [onDragStart] An optional callback for when dragging starts.
  * @param {Function}  [onDragStop] An optional callback for when dragging stops.
  *
@@ -39,8 +39,9 @@ const sortableItemWaiter = buildWaiter("sortable-item-waiter");
  *    </ol>
  */
 export default class SortableItemModifier extends Modifier {
+  className = 'sortable-item';
 
-  className = "sortable-item";
+  @service('ember-sortable@ember-sortable') sortableService;
 
   _sortableGroup;
   /**
@@ -52,19 +53,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;
+  get model() {
+    return this.args.named.model;
+  }
 
-  @reads("sortableGroup.direction")
-  direction;
+  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.
@@ -74,7 +81,7 @@ export default class SortableItemModifier extends Modifier {
    * @returns {*|string}
    */
   get groupName() {
-    return this.args.named.groupName || "_EmberSortableGroup";
+    return this.args.named.groupName || '_EmberSortableGroup';
   }
 
   /**
@@ -99,13 +106,28 @@ export default class SortableItemModifier extends Modifier {
   }
 
   /**
-   Removes the ability for the current item to be dragged
-   @property isDraggingDisabled
+   Removes the ability for the current item to be sorted
+   @property disabled
    @type  boolean
    @default false
    */
-  get isDraggingDisabled() {
-    return this.args.named.isDraggingDisabled || false;
+  get isDisabled() {
+    deprecate(
+      '"isDraggingDisabled" is deprecated.  Please migrate to "disabled" named argument',
+      !('isDraggingDisabled' in this.args.named),
+      {
+        id: 'ember-sortable.is-dragging-disabled',
+        url: 'https://github.com/adopted-ember-addons/ember-sortable#readme',
+        until: '3.0.0',
+        for: 'ember-sortable',
+        since: {
+          available: '2.2.6',
+          enabled: '2.2.6',
+        },
+      }
+    );
+
+    return this.groupDisabled || this.args.named.disabled || this.args.named.isDraggingDisabled || false;
   }
 
   /**
@@ -120,7 +142,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;
@@ -153,9 +175,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;
   }
@@ -168,7 +190,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);
   }
 
   /**
@@ -179,7 +201,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);
   }
 
   /**
@@ -194,9 +216,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;
   }
@@ -213,14 +235,12 @@ export default class SortableItemModifier extends Modifier {
    @property isBusy
    @type Boolean
    */
-  @or('isDragging', 'isDropping')
-  isBusy;
+  get isBusy() {
+    return this.isDragging || this.isDropping;
+  }
 
   /**
-   Removes the ability for the current item to be dragged
-   @property isDraggingDisabled
-   @type  boolean
-   @default false
+   @property disableCheckScrollBounds
    */
   get disableCheckScrollBounds() {
     return this.args.named.disableCheckScrollBounds != undefined ? this.args.named.disableCheckScrollBounds : isTesting;
@@ -231,14 +251,22 @@ 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 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) {
       this.sortableGroup.activateKeyDown(this);
@@ -260,7 +288,9 @@ export default class SortableItemModifier extends Modifier {
    */
   freeze() {
     let el = this.element;
-    if (!el) { return; }
+    if (!el) {
+      return;
+    }
 
     el.style.transition = 'none';
   }
@@ -270,7 +300,9 @@ export default class SortableItemModifier extends Modifier {
    */
   reset() {
     let el = this.element;
-    if (!el) { return; }
+    if (!el) {
+      return;
+    }
 
     delete this._y;
     delete this._x;
@@ -283,7 +315,9 @@ export default class SortableItemModifier extends Modifier {
    */
   thaw() {
     let el = this.element;
-    if (!el) { return; }
+    if (!el) {
+      return;
+    }
 
     el.style.transition = '';
   }
@@ -296,8 +330,7 @@ export default class SortableItemModifier extends Modifier {
    * @private
    */
   _primeDrag(startEvent) {
-    // Prevent dragging if the sortable-item is disabled.
-    if (this.isDraggingDisabled) {
+    if (this.isDisabled) {
       return;
     }
 
@@ -308,20 +341,20 @@ export default class SortableItemModifier extends Modifier {
     startEvent.preventDefault();
     startEvent.stopPropagation();
 
-    this._prepareDragListener = run.bind(this, this._prepareDrag, startEvent);
+    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));
   }
 
   /**
@@ -338,7 +371,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);
     }
   }
@@ -351,25 +384,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);
   }
@@ -401,7 +436,7 @@ export default class SortableItemModifier extends Modifier {
       },
       get bottom() {
         return this.top + this.height;
-      }
+      },
     };
 
     let leadingEdgeKey, trailingEdgeKey, scrollKey, pageKey;
@@ -418,12 +453,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,
       };
     };
 
@@ -484,7 +521,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;
@@ -499,7 +536,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;
@@ -515,7 +552,7 @@ export default class SortableItemModifier extends Modifier {
    @private
    */
   _scheduleApplyPosition() {
-    run.scheduleOnce('render', this, '_applyPosition');
+    scheduleOnce('render', this, '_applyPosition');
   }
 
   /**
@@ -523,7 +560,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;
 
@@ -531,7 +570,7 @@ export default class SortableItemModifier extends Modifier {
       let x = this.x;
       let dx = x - this.element.offsetLeft + parseFloat(getComputedStyle(this.element).marginLeft);
 
-      this.element.style.transform = `translateX(${dx}px)`;
+      this.element.style.transform = `translateX(${Math.max(0, dx)}px)`;
     }
     if (groupDirection === 'y') {
       let y = this.y;
@@ -546,7 +585,7 @@ export default class SortableItemModifier extends Modifier {
    @private
    */
   _drag(dimension) {
-    if(!this.isDragging) {
+    if (!this.isDragging) {
       return;
     }
     let updateInterval = this.updateInterval;
@@ -567,14 +606,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());
@@ -625,7 +666,7 @@ export default class SortableItemModifier extends Modifier {
       });
     } else {
       const duration = this.isAnimated ? this.transitionDuration : 200;
-      transitionPromise = new Promise((resolve) => run.later(resolve, duration));
+      transitionPromise = new Promise((resolve) => later(resolve, duration));
     }
 
     if (DEBUG) {
@@ -643,14 +684,14 @@ 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();
   }
 
   get isAnimated() {
     if (!this.element) {
-      return;
+      return undefined;
     }
 
     let el = this.element;
@@ -664,7 +705,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]*)/);
@@ -758,15 +799,15 @@ 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);
   }
 
   didReceiveArguments() {
@@ -784,7 +825,7 @@ export default class SortableItemModifier extends Modifier {
 
   didInstall() {
     this.addEventListener();
-    this.element.dataset.sortableItem=true;
+    this.element.dataset.sortableItem = true;
     this.sortableService.registerItem(this.groupName, this);
   }
 
@@ -792,5 +833,4 @@ export default class SortableItemModifier extends Modifier {
     this.removeEventListener();
     this.sortableService.deregisterItem(this.groupName, this);
   }
-
 }

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 };
+    });
   }
 }