ember-sortable 4.0.2 → 5.0.0

package/{addon → dist}/modifiers/sortable-item.js

@@ -1,23 +1,21 @@
-/* eslint-disable ember/no-computed-properties-in-native-classes */
+import { _ as _applyDecoratedDescriptor, a as _defineProperty, b as _initializerDefineProperty } from '../_rollupPluginBabelHelpers-7ae2993d.js';
 import Modifier from 'ember-modifier';
-import { Promise, defer } from 'rsvp';
+import { defer, Promise as Promise$1 } from 'rsvp';
 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 { DRAG_ACTIONS, END_ACTIONS, ELEMENT_CLICK_ACTION } from '../utils/constant.js';
+import { bind, scheduleOnce, throttle, later, run } 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.js';
+import ScrollContainer from '../system/scroll-container.js';
+import scrollParent from '../system/scroll-parent.js';
+import { getBorderSpacing } from '../utils/css-calculation.js';
 import { buildWaiter } from '@ember/test-waiters';
-import { inject as service } from '@ember/service';
+import { inject } from '@ember/service';
 import { assert, deprecate } from '@ember/debug';
-import config from 'ember-get-config';
 import { registerDestructor } from '@ember/destroyable';
+import { isTesting } from '@embroider/macros';
 
-const { environment } = config;
-const isTesting = environment === 'test';
-
+var _dec, _class, _descriptor;
 const sortableItemWaiter = buildWaiter('sortable-item-waiter');
 
 /**
@@ -39,12 +37,7 @@ const sortableItemWaiter = buildWaiter('sortable-item-waiter');
  *      {{/each}}
  *    </ol>
  */
-export default class SortableItemModifier extends Modifier {
-  className = 'sortable-item';
-
-  @service('ember-sortable-internal-state') sortableService;
-
-  _sortableGroup;
+let SortableItemModifier = (_dec = inject('ember-sortable-internal-state'), (_class = class SortableItemModifier extends Modifier {
   /**
    * The SortableGroupModifier this item belongs to. Assigned by the group
    * when it inspects all the items in the list
@@ -54,24 +47,18 @@ 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;
   }
-
   get model() {
     return this.named.model;
   }
-
   get direction() {
-    return this.sortableGroup.direction;
+    return this.sortableGroup?.direction;
   }
-
   get groupDisabled() {
-    return this.sortableGroup.disabled;
+    return this.sortableGroup?.disabled;
   }
 
   /**
@@ -113,21 +100,16 @@ export default class SortableItemModifier extends Modifier {
    @default false
    */
   get isDisabled() {
-    deprecate(
-      '"isDraggingDisabled" is deprecated.  Please migrate to "disabled" named argument',
-      !('isDraggingDisabled' in this.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',
-        },
+    deprecate('"isDraggingDisabled" is deprecated.  Please migrate to "disabled" named argument', !('isDraggingDisabled' in this.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.named.disabled || this.named.isDraggingDisabled || false;
   }
 
@@ -145,9 +127,6 @@ export default class SortableItemModifier extends Modifier {
   get handle() {
     return this.named.handle || '[data-sortable-handle]';
   }
-
-  handleElement;
-
   /**
    * Tolerance, in pixels, for when sorting should start.
    * If specified, sorting will not start until after mouse
@@ -170,7 +149,7 @@ export default class SortableItemModifier extends Modifier {
    * @default false
    * @protected
    */
-  _isDragging = false;
+
   get isDragging() {
     return this._isDragging;
   }
@@ -191,7 +170,7 @@ export default class SortableItemModifier extends Modifier {
    @default null
    */
   get onDragStart() {
-    return this.named.onDragStart || ((item) => item);
+    return this.named.onDragStart || (item => item);
   }
 
   /**
@@ -202,7 +181,7 @@ export default class SortableItemModifier extends Modifier {
    @default null
    */
   get onDragStop() {
-    return this.named.onDragStop || ((item) => item);
+    return this.named.onDragStop || (item => item);
   }
 
   /**
@@ -211,7 +190,7 @@ export default class SortableItemModifier extends Modifier {
    @type Boolean
    @default false
    */
-  _isDropping = false;
+
   get isDropping() {
     return this._isDropping;
   }
@@ -230,7 +209,6 @@ export default class SortableItemModifier extends Modifier {
    @type Boolean
    @default false
    */
-  wasDropped = false;
 
   /**
    @property isBusy
@@ -244,13 +222,12 @@ export default class SortableItemModifier extends Modifier {
    @property disableCheckScrollBounds
    */
   get disableCheckScrollBounds() {
-    return this.named.disableCheckScrollBounds != undefined ? this.named.disableCheckScrollBounds : isTesting;
+    return this.named.disableCheckScrollBounds != undefined ? this.named.disableCheckScrollBounds : isTesting();
   }
 
   /**
    @method mouseDown
    */
-  @action
   mouseDown(event) {
     if (event.which !== 1) {
       return;
@@ -258,16 +235,12 @@ export default class SortableItemModifier extends Modifier {
     if (event.ctrlKey) {
       return;
     }
-
     this._primeDrag(event);
   }
-
-  @action
   keyDown(event) {
     if (this.isDisabled) {
       return;
     }
-
     this.setupHandleElement();
 
     // If the event is coming from within the item, we do not want to activate keyboard reorder mode.
@@ -281,7 +254,6 @@ export default class SortableItemModifier extends Modifier {
   /**
    @method touchStart
    */
-  @action
   touchStart(event) {
     this._primeDrag(event);
   }
@@ -294,7 +266,6 @@ export default class SortableItemModifier extends Modifier {
     if (!el) {
       return;
     }
-
     el.style.transition = 'none';
   }
 
@@ -306,10 +277,8 @@ export default class SortableItemModifier extends Modifier {
     if (!el) {
       return;
     }
-
     delete this._y;
     delete this._x;
-
     el.style.transform = '';
   }
 
@@ -321,7 +290,6 @@ export default class SortableItemModifier extends Modifier {
     if (!el) {
       return;
     }
-
     el.style.transition = '';
   }
 
@@ -336,28 +304,21 @@ export default class SortableItemModifier extends Modifier {
     if (this.isDisabled) {
       return;
     }
-
     if (this.handleElement && !startEvent.target.closest(this.handle)) {
       return;
     }
-
     startEvent.preventDefault();
     startEvent.stopPropagation();
-
     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));
   }
 
   /**
@@ -372,9 +333,8 @@ export default class SortableItemModifier extends Modifier {
     let distance = this.distance;
     let dx = Math.abs(getX(startEvent) - getX(event));
     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);
     }
   }
@@ -390,22 +350,17 @@ export default class SortableItemModifier extends Modifier {
     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);
     this.onDragStart(this.model);
@@ -417,7 +372,6 @@ export default class SortableItemModifier extends Modifier {
    @property maxScrollSpeed
    @default 20
    */
-  maxScrollSpeed = 20;
 
   _scrollOnEdges(drag) {
     let groupDirection = this.direction;
@@ -439,9 +393,8 @@ export default class SortableItemModifier extends Modifier {
       },
       get bottom() {
         return this.top + this.height;
-      },
+      }
     };
-
     let leadingEdgeKey, trailingEdgeKey, scrollKey, pageKey;
     if (groupDirection === 'x') {
       leadingEdgeKey = 'left';
@@ -454,7 +407,6 @@ export default class SortableItemModifier extends Modifier {
       scrollKey = 'scrollTop';
       pageKey = 'pageY';
     }
-
     let createFakeEvent = () => {
       if (this._pageX == null && this._pageY == null) {
         return;
@@ -463,7 +415,7 @@ export default class SortableItemModifier extends Modifier {
         pageX: this._pageX,
         pageY: this._pageY,
         clientX: this._pageX,
-        clientY: this._pageY,
+        clientY: this._pageY
       };
     };
 
@@ -474,20 +426,16 @@ export default class SortableItemModifier extends Modifier {
       let leadingEdge = itemContainer[leadingEdgeKey];
       let trailingEdge = itemContainer[trailingEdgeKey];
       let scroll = scrollContainer[scrollKey]();
-
       let delta = 0;
       if (trailingEdge >= scrollContainer[trailingEdgeKey]) {
         delta = trailingEdge - scrollContainer[trailingEdgeKey];
       } else if (leadingEdge <= scrollContainer[leadingEdgeKey]) {
         delta = leadingEdge - scrollContainer[leadingEdgeKey];
       }
-
       if (delta !== 0) {
         let speed = this.maxScrollSpeed;
         delta = Math.min(Math.max(delta, -1 * speed), speed);
-
         delta = scrollContainer[scrollKey](scroll + delta) - scroll;
-
         let event = createFakeEvent();
         if (event) {
           if (scrollContainer.isWindow) {
@@ -500,7 +448,6 @@ export default class SortableItemModifier extends Modifier {
         requestAnimationFrame(checkScrollBounds);
       }
     };
-
     if (!this.disableCheckScrollBounds) {
       requestAnimationFrame(checkScrollBounds);
     }
@@ -518,33 +465,27 @@ export default class SortableItemModifier extends Modifier {
     let elementOrigin;
     let scrollOrigin;
     let parentElement = this.element.parentNode;
-
     if (groupDirection === 'x') {
       dragOrigin = getX(startEvent);
       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;
         let x = elementOrigin + dx + (scrollOrigin - scrollX);
-
         this._drag(x);
       };
     }
-
     if (groupDirection === 'y') {
       dragOrigin = getY(startEvent);
       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;
         let y = elementOrigin + dy + (scrollOrigin - scrollY);
-
         this._drag(y);
       };
     }
@@ -566,19 +507,15 @@ export default class SortableItemModifier extends Modifier {
     if (!this.element || !this.element) {
       return;
     }
-
     const groupDirection = this.direction;
-
     if (groupDirection === 'x') {
       let x = this.x;
       let dx = x - this.element.offsetLeft + parseFloat(getComputedStyle(this.element).marginLeft);
-
       this.element.style.transform = `translateX(${dx}px)`;
     }
     if (groupDirection === 'y') {
       let y = this.y;
       let dy = y - this.element.offsetTop;
-
       this.element.style.transform = `translateY(${dy}px)`;
     }
   }
@@ -593,14 +530,12 @@ export default class SortableItemModifier extends Modifier {
     }
     let updateInterval = this.updateInterval;
     const groupDirection = this.direction;
-
     if (groupDirection === 'x') {
       this.x = dimension;
     }
     if (groupDirection === 'y') {
       this.y = dimension;
     }
-
     throttle(this, this.sortableGroup.update, updateInterval);
   }
 
@@ -612,14 +547,10 @@ export default class SortableItemModifier extends Modifier {
     if (!this.element) {
       return;
     }
-
     let transitionPromise = this._waitForTransition();
-
     this._preventClick();
-
     set(this, 'isDragging', false);
     set(this, 'isDropping', true);
-
     this.sortableGroup.update();
     transitionPromise.then(() => this._complete());
   }
@@ -629,11 +560,10 @@ export default class SortableItemModifier extends Modifier {
    @private
    */
   _preventClick() {
-    const selfCancellingCallback = (event) => {
+    const selfCancellingCallback = event => {
       this.element.removeEventListener(ELEMENT_CLICK_ACTION, selfCancellingCallback);
       this._preventClickHandler(event);
     };
-
     this.element.addEventListener(ELEMENT_CLICK_ACTION, selfCancellingCallback);
   }
 
@@ -654,13 +584,10 @@ export default class SortableItemModifier extends Modifier {
    */
   _waitForTransition() {
     let waiterToken;
-
     if (DEBUG) {
       waiterToken = sortableItemWaiter.beginAsync();
     }
-
     let transitionPromise;
-
     if (this.isAnimated) {
       const deferred = defer();
       this.element.addEventListener('transitionend', deferred.resolve);
@@ -669,15 +596,13 @@ export default class SortableItemModifier extends Modifier {
       });
     } else {
       const duration = this.isAnimated ? this.transitionDuration : 200;
-      transitionPromise = new Promise((resolve) => later(resolve, duration));
+      transitionPromise = new Promise$1(resolve => later(resolve, duration));
     }
-
     if (DEBUG) {
       transitionPromise = transitionPromise.finally(() => {
         sortableItemWaiter.endAsync(waiterToken);
       });
     }
-
     return transitionPromise;
   }
 
@@ -691,15 +616,12 @@ export default class SortableItemModifier extends Modifier {
     set(this, 'wasDropped', true);
     this.sortableGroup.commit();
   }
-
   get isAnimated() {
     if (!this.element) {
       return undefined;
     }
-
     let el = this.element;
     let transitionProperty = getComputedStyle(el).transitionProperty;
-
     return /all|transform/.test(transitionProperty) && this.transitionDuration > 0;
   }
 
@@ -712,18 +634,14 @@ export default class SortableItemModifier extends Modifier {
     let el = this.element;
     let rule = getComputedStyle(el).transitionDuration;
     let match = rule.match(/([\d.]+)([ms]*)/);
-
     if (match) {
       let value = parseFloat(match[1]);
       let unit = match[2];
-
       if (unit === 's') {
         value = value * 1000;
       }
-
       return value;
     }
-
     return 0;
   }
 
@@ -737,7 +655,6 @@ export default class SortableItemModifier extends Modifier {
       let marginLeft = parseFloat(getComputedStyle(this.element).marginLeft);
       this._x = this.element.scrollLeft + this.element.offsetLeft - marginLeft;
     }
-
     return this._x;
   }
   set x(value) {
@@ -756,10 +673,8 @@ export default class SortableItemModifier extends Modifier {
     if (this._y === undefined) {
       this._y = this.element.offsetTop;
     }
-
     return this._y;
   }
-
   set y(value) {
     if (value !== this._y) {
       this._y = value;
@@ -776,11 +691,9 @@ export default class SortableItemModifier extends Modifier {
     let el = this.element;
     let width = el.offsetWidth;
     let elStyles = getComputedStyle(el);
-
     width += parseInt(elStyles.marginLeft) + parseInt(elStyles.marginRight); // equal to jQuery.outerWidth(true)
 
     width += getBorderSpacing(el).horizontal;
-
     return width;
   }
 
@@ -792,64 +705,71 @@ export default class SortableItemModifier extends Modifier {
   get height() {
     let el = this.element;
     let height = el.offsetHeight;
-
     let marginBottom = parseFloat(getComputedStyle(el).marginBottom);
     height += marginBottom;
-
     height += getBorderSpacing(el).vertical;
-
     return height;
   }
-
   addEventListener() {
     this.element.addEventListener('keydown', this.keyDown);
     this.element.addEventListener('mousedown', this.mouseDown);
     this.element.addEventListener('touchstart', this.touchStart);
+    this.listenersRegistered = true;
   }
-
   removeEventListener() {
     this.element.removeEventListener('keydown', this.keyDown);
     this.element.removeEventListener('mousedown', this.mouseDown);
     this.element.removeEventListener('touchstart', this.touchStart);
+    this.listenersRegistered = false;
   }
-
   setupHandleElement() {
     this.handleElement = this.element.querySelector(this.handle);
-
     if (this.handleElement) {
       this.handleElement.style['touch-action'] = 'none';
     } else {
       this.element.style['touch-action'] = 'none';
     }
   }
-
-  element;
-  didSetup = false;
-
   constructor(owner, args) {
     super(owner, args);
+    _defineProperty(this, "className", 'sortable-item');
+    _initializerDefineProperty(this, "sortableService", _descriptor, this);
+    _defineProperty(this, "_sortableGroup", void 0);
+    _defineProperty(this, "handleElement", void 0);
+    _defineProperty(this, "_isDragging", false);
+    _defineProperty(this, "_isDropping", false);
+    _defineProperty(this, "wasDropped", false);
+    _defineProperty(this, "maxScrollSpeed", 20);
+    _defineProperty(this, "element", void 0);
+    _defineProperty(this, "didSetup", false);
+    _defineProperty(this, "listenersRegistered", false);
     registerDestructor(this, cleanup);
   }
-
   modify(element, _positional, named) {
     this.element = element;
     this.named = named;
-
     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.setupHandleElement();
-
     if (!this.didSetup) {
-      this.addEventListener();
       this.element.dataset.sortableItem = true;
       this.sortableService.registerItem(this.groupName, this);
       this.didSetup = true;
     }
+    if (this.named.disabled && this.listenersRegistered) {
+      this.removeEventListener();
+    } else if (!this.named.disabled && !this.listenersRegistered) {
+      this.addEventListener();
+    }
   }
-}
-
+}, (_descriptor = _applyDecoratedDescriptor(_class.prototype, "sortableService", [_dec], {
+  configurable: true,
+  enumerable: true,
+  writable: true,
+  initializer: null
+}), _applyDecoratedDescriptor(_class.prototype, "mouseDown", [action], Object.getOwnPropertyDescriptor(_class.prototype, "mouseDown"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "keyDown", [action], Object.getOwnPropertyDescriptor(_class.prototype, "keyDown"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "touchStart", [action], Object.getOwnPropertyDescriptor(_class.prototype, "touchStart"), _class.prototype)), _class));
 /**
  *
  * @param {SortableItemModifier} instance
@@ -858,3 +778,6 @@ function cleanup(instance) {
   instance.removeEventListener();
   instance.sortableService.deregisterItem(instance.groupName, instance);
 }
+
+export { SortableItemModifier as default };
+//# sourceMappingURL=sortable-item.js.map