ember-sortable 2.4.0 → 4.0.0

package/addon/modifiers/sortable-group.js

@@ -1,5 +1,7 @@
+/* eslint-disable ember/no-computed-properties-in-native-classes */
+/* eslint-disable ember/no-incorrect-calls-with-inline-anonymous-functions */
 import Modifier from 'ember-modifier';
-import {action, computed, set} from '@ember/object';
+import { action, computed, set } from '@ember/object';
 import {
   isDownArrowKey,
   isEnterKey,
@@ -7,12 +9,13 @@ import {
   isLeftArrowKey,
   isRightArrowKey,
   isSpaceKey,
-  isUpArrowKey
-} from "../utils/keyboard";
-import {ANNOUNCEMENT_ACTION_TYPES} from "../utils/constant";
-import { defaultA11yAnnouncementConfig } from "../utils/defaults";
+  isUpArrowKey,
+} from '../utils/keyboard';
+import { ANNOUNCEMENT_ACTION_TYPES } from '../utils/constant';
+import { defaultA11yAnnouncementConfig } from '../utils/defaults';
 import { next, schedule, scheduleOnce, later } from '@ember/runloop';
-import {inject as service} from '@ember/service';
+import { inject as service } from '@ember/service';
+import { registerDestructor, isDestroyed } from '@ember/destroyable';
 
 const NO_MODEL = {};
 
@@ -37,7 +40,6 @@ const NO_MODEL = {};
  *    </ol>
  */
 export default class SortableGroupModifier extends Modifier {
-
   /** Primary keyboard utils */
   // Tracks the currently selected item
   _selectedItem = null;
@@ -91,7 +93,7 @@ export default class SortableGroupModifier extends Modifier {
   }
 
   get itemVisualClass() {
-    return this.args.named.itemVisualClass || "is-activated";
+    return this.args.named.itemVisualClass || 'is-activated';
   }
 
   get a11yItemName() {
@@ -179,7 +181,7 @@ export default class SortableGroupModifier extends Modifier {
 
     // switch direction values to notify sortedItems to update, so it sorts by direction.
     let value;
-    const dimension = direction === "y" ? "height" : "width";
+    const dimension = direction === 'y' ? 'height' : 'width';
     // DOWN or RIGHT
     if (toIndex > fromIndex) {
       value = item[direction];
@@ -206,13 +208,13 @@ export default class SortableGroupModifier extends Modifier {
     const direction = this.direction;
     const selectedItem = this._selectedItem;
 
-    if (direction === "y" && isDownArrowKey(event)) {
+    if (direction === 'y' && isDownArrowKey(event)) {
       this.moveItem(selectedItem, 1);
-    } else if (direction === "y" && isUpArrowKey(event)) {
+    } else if (direction === 'y' && isUpArrowKey(event)) {
       this.moveItem(selectedItem, -1);
-    } else if (direction === "x" && isLeftArrowKey(event)) {
+    } else if (direction === 'x' && isLeftArrowKey(event)) {
       this.moveItem(selectedItem, -1);
-    } else if (direction === "x" && isRightArrowKey(event)) {
+    } else if (direction === 'x' && isRightArrowKey(event)) {
       this.moveItem(selectedItem, 1);
     } else if (isEnterKey(event) || isSpaceKey(event)) {
       // confirm will reset the selectedItem, so caching it here before we remove it.
@@ -233,7 +235,7 @@ export default class SortableGroupModifier extends Modifier {
         const moves = this.moves;
         if (moves && moves.length > 0) {
           const sortedItems = this.sortedItems;
-          const itemElement = sortedItems[moves[0].fromIndex].element
+          const itemElement = sortedItems[moves[0].fromIndex].element;
           this._focusItem(itemElement);
         } else {
           this._focusItem(_selectedItemElement);
@@ -285,7 +287,7 @@ export default class SortableGroupModifier extends Modifier {
     const moves = this.moves;
     while (moves.length > 0) {
       const move = moves.pop();
-      this._move(move[1], move[0])
+      this._move(move[1], move[0]);
     }
     this._tearDownA11yApplicationContainer();
     this._updateItemVisualIndicators(_selectedItem, false);
@@ -306,7 +308,7 @@ export default class SortableGroupModifier extends Modifier {
     this.moves = [];
     this._disableKeyboardReorderMode();
     this._tearDownA11yApplicationContainer();
-    set(_selectedItem, "wasDropped", true);
+    set(_selectedItem, 'wasDropped', true);
     this.commit();
     this._updateItemVisualIndicators(_selectedItem, false);
     this._updateHandleVisualIndicators(_selectedItem, false);
@@ -335,7 +337,7 @@ export default class SortableGroupModifier extends Modifier {
     const config = {
       a11yItemName,
       index: index,
-      maxLength : sortedItems.length,
+      maxLength: sortedItems.length,
       direction: this.direction,
       delta,
     };
@@ -363,7 +365,6 @@ export default class SortableGroupModifier extends Modifier {
    * @param {Boolean} isActive to activate or deactivate the class.
    */
   _updateItemVisualIndicators(item, isActive) {
-
     const itemVisualClass = this.itemVisualClass;
 
     if (!itemVisualClass || !item) {
@@ -397,7 +398,7 @@ export default class SortableGroupModifier extends Modifier {
     const visualHandle = handle ? handle : item.element;
     const visualKeys = direction === 'y' ? ['UP', 'DOWN'] : ['LEFT', 'RIGHT'];
 
-    visualKeys.forEach(visualKey => {
+    visualKeys.forEach((visualKey) => {
       visualHandle.classList.remove(handleVisualClass[visualKey]);
     });
 
@@ -447,7 +448,7 @@ export default class SortableGroupModifier extends Modifier {
    * Sets up the group as an application and make it programmatically focusable.
    */
   _setupA11yApplicationContainer() {
-    this.element.setAttribute("role", "application");
+    this.element.setAttribute('role', 'application');
     this.element.tabIndex = -1;
   }
 
@@ -455,8 +456,8 @@ export default class SortableGroupModifier extends Modifier {
    * Tears down the `role=application` container.
    */
   _tearDownA11yApplicationContainer() {
-    this.element.removeAttribute("role");
-    this.element.removeAttribute("tabIndex");
+    this.element.removeAttribute('role');
+    this.element.removeAttribute('tabIndex');
   }
 
   _prepareKeyboardReorderMode() {
@@ -472,7 +473,7 @@ export default class SortableGroupModifier extends Modifier {
    @default y
    */
   get direction() {
-    return this.args.named.direction || "y";
+    return this.args.named.direction || 'y';
   }
 
   /**
@@ -488,7 +489,7 @@ export default class SortableGroupModifier extends Modifier {
     return this.args.named.onChange;
   }
 
-  @service('ember-sortable@ember-sortable')
+  @service('ember-sortable-internal-state')
   sortableService;
 
   /**
@@ -499,7 +500,7 @@ export default class SortableGroupModifier extends Modifier {
    * @returns {*|string}
    */
   get groupName() {
-    return this.args.named.groupName || "_EmberSortableGroup";
+    return this.args.named.groupName || '_EmberSortableGroup';
   }
 
   _groupDef = this.sortableService.fetchGroup(this.groupName);
@@ -530,7 +531,7 @@ export default class SortableGroupModifier extends Modifier {
    @property firstItemPosition
    @type Number
    */
-  @computed("direction", "sortedItems")
+  @computed('direction', 'sortedItems')
   get firstItemPosition() {
     const direction = this.direction;
     const sortedItems = this.sortedItems;
@@ -552,7 +553,7 @@ export default class SortableGroupModifier extends Modifier {
    * Enables keyboard navigation
    */
   @action
-  activateKeyDown(selectedItem){
+  activateKeyDown(selectedItem) {
     this._selectedItem = selectedItem;
     this.isKeyDownEnabled = true;
   }
@@ -616,11 +617,11 @@ export default class SortableGroupModifier extends Modifier {
       position = this.firstItemPosition;
     }
 
-    sortedItems.forEach(item => {
+    sortedItems.forEach((item) => {
       let dimension;
       let direction = this.direction;
 
-      if (!item.isDragging) {
+      if (!isDestroyed(item) && !item.isDragging) {
         set(item, direction, position);
       }
 
@@ -646,8 +647,8 @@ export default class SortableGroupModifier extends Modifier {
   @action
   commit() {
     const items = this.sortedItems;
-    const itemModels = items.map(item => item.model);
-    const draggedItem = items.find(item => item.wasDropped);
+    const itemModels = items.map((item) => item.model);
+    const draggedItem = items.find((item) => item.wasDropped);
     let draggedModel;
 
     if (draggedItem) {
@@ -676,16 +677,16 @@ export default class SortableGroupModifier extends Modifier {
     delete this._firstItemPosition;
 
     schedule('render', () => {
-      items.forEach(item => item.freeze());
+      items.forEach((item) => item.freeze());
     });
 
     schedule('afterRender', () => {
-      items.forEach(item => item.reset());
+      items.forEach((item) => item.reset());
     });
 
     next(() => {
       schedule('render', () => {
-        items.forEach(item => item.thaw());
+        items.forEach((item) => item.thaw());
       });
     });
   }
@@ -701,43 +702,53 @@ export default class SortableGroupModifier extends Modifier {
   // end of API
 
   addEventListener() {
-    this.element.addEventListener("keydown", this.keyDown);
-    this.element.addEventListener("focusout", this.focusOut);
+    this.element.addEventListener('keydown', this.keyDown);
+    this.element.addEventListener('focusout', this.focusOut);
   }
 
   removeEventListener() {
-    this.element.removeEventListener("keydown", this.keyDown);
-    this.element.removeEventListener("focusout", this.focusOut);
+    this.element.removeEventListener('keydown', this.keyDown);
+    this.element.removeEventListener('focusout', this.focusOut);
   }
 
-  didReceiveArguments() {
-    this.removeEventListener();
+  element;
+  didSetup = false;
 
-    if (this.disabled) {
-      return;
-    }
-
-    this.addEventListener();
+  constructor(owner, args) {
+    super(owner, args);
+    registerDestructor(this, cleanup);
   }
 
-  didUpdateArguments() {
-  }
+  modify(element /*, positional, named*/) {
+    this.element = element;
 
-  didInstall() {
-    this.announcer = this._createAnnouncer();
-    this.element.insertAdjacentElement('afterend', this.announcer);
+    this.removeEventListener();
 
-    this.sortableService.registerGroup(this.groupName, this);
-  }
+    if (!this.didSetup) {
+      this.announcer = this._createAnnouncer();
+      this.element.insertAdjacentElement('afterend', this.announcer);
+      this.sortableService.registerGroup(this.groupName, this);
 
-  willRemove() {
-    // todo cleanup the announcer
-    if(this.announcer.parentNode) {
-      this.announcer.parentNode.removeChild(this.announcer);
+      this.didSetup = true;
+    }
+
+    if (this.disabled) {
+      return;
     }
-    this.removeEventListener();
 
-    this.sortableService.deregisterGroup(this.groupName, this);
+    this.addEventListener();
   }
+}
 
+/**
+ *
+ * @param {SortableGroupModifier} instance
+ */
+function cleanup(instance) {
+  // todo cleanup the announcer
+  if (instance.announcer.parentNode) {
+    instance.announcer.parentNode.removeChild(instance.announcer);
+  }
+  instance.removeEventListener();
+  instance.sortableService.deregisterGroup(instance.groupName, instance);
 }

package/addon/modifiers/sortable-handle.js

@@ -1,26 +1,29 @@
 import Modifier from 'ember-modifier';
 
 /**
-* Modifier to to mark the handle of an item. If this is not supplied the item will be the handle
-*
-* @module drag-drop/draggable-group
-* @example*
-*    <ol {{sortable-group onChange=this.update a11yAnnouncementConfig=this.myA11yConfig}}>
-*      {{#each model.items as |item|}}
-*        <li {{sortable-item model=item}}>
-*          {{item.name}}
-*          <span class="handle" {{sortable-handle}}>&varr;</span>
-*        </li>
-*      {{/each}}
-*    </ol>
-*/
+ * Modifier to to mark the handle of an item. If this is not supplied the item will be the handle
+ *
+ * @module drag-drop/draggable-group
+ * @example*
+ *    <ol {{sortable-group onChange=this.update a11yAnnouncementConfig=this.myA11yConfig}}>
+ *      {{#each model.items as |item|}}
+ *        <li {{sortable-item model=item}}>
+ *          {{item.name}}
+ *          <span class="handle" {{sortable-handle}}>&varr;</span>
+ *        </li>
+ *      {{/each}}
+ *    </ol>
+ */
 export default class SortableHandleModifier extends Modifier {
+  didSetup = false;
 
-  didInstall() {
-    // take the model and look up the registered element, the tell that element you are the handle
-    this.element.dataset.sortableHandle=true;
-    this.element.tabIndex = "0";
-    this.element.setAttribute("role", "button");
+  modify(element /*, positional, named*/) {
+    if (!this.didSetup) {
+      // take the model and look up the registered element, the tell that element you are the handle
+      element.dataset.sortableHandle = true;
+      element.tabIndex = '0';
+      element.setAttribute('role', 'button');
+      this.didSetup = true;
+    }
   }
-
 }