ember-sortable 2.2.5 → 3.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,12 @@ import {
   isLeftArrowKey,
   isRightArrowKey,
   isSpaceKey,
-  isUpArrowKey
-} from "../utils/keyboard";
-import {ANNOUNCEMENT_ACTION_TYPES} from "../utils/constant";
-import { defaultA11yAnnouncementConfig } from "../utils/defaults";
-import { run } from '@ember/runloop';
-import {inject as service} from '@ember/service';
+  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';
 
 const NO_MODEL = {};
 
@@ -37,7 +39,6 @@ const NO_MODEL = {};
  *    </ol>
  */
 export default class SortableGroupModifier extends Modifier {
-
   /** Primary keyboard utils */
   // Tracks the currently selected item
   _selectedItem = null;
@@ -54,6 +55,10 @@ export default class SortableGroupModifier extends Modifier {
   isRetainingFocus = false;
   /** End of keyboard utils */
 
+  get disabled() {
+    return this.args.named.disabled || false;
+  }
+
   /** Start of a11y properties */
   /**
    * @property an object containing different classes for visual indicators
@@ -87,7 +92,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() {
@@ -136,7 +141,7 @@ export default class SortableGroupModifier extends Modifier {
 
       this.isRetainingFocus = true;
 
-      run.scheduleOnce('render', () => {
+      scheduleOnce('render', () => {
         this.element.focus();
         this.isRetainingFocus = false;
       });
@@ -175,7 +180,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];
@@ -202,13 +207,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.
@@ -217,7 +222,7 @@ export default class SortableGroupModifier extends Modifier {
       this.confirmKeyboardSelection();
 
       this.isRetainingFocus = true;
-      run.scheduleOnce('render', () => this._focusItem(itemElement));
+      scheduleOnce('render', () => this._focusItem(itemElement));
     } else if (isEscapeKey(event)) {
       // cancel will reset the selectedItem, so caching it here before we remove it.
       const _selectedItemElement = selectedItem.element;
@@ -225,11 +230,11 @@ export default class SortableGroupModifier extends Modifier {
       this.cancelKeyboardSelection();
 
       this.isRetainingFocus = true;
-      run.scheduleOnce('render', () => {
+      scheduleOnce('render', () => {
         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);
@@ -258,7 +263,7 @@ export default class SortableGroupModifier extends Modifier {
     }
     this._announceAction(ANNOUNCEMENT_ACTION_TYPES.MOVE, delta);
     // Guarantees that the before the UI is fully rendered before we move again.
-    run.scheduleOnce('render', () => {
+    scheduleOnce('render', () => {
       this._move(sortedIndex, newSortedIndex);
       this._updateHandleVisualIndicators(item, true);
 
@@ -281,7 +286,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);
@@ -302,7 +307,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);
@@ -331,7 +336,7 @@ export default class SortableGroupModifier extends Modifier {
     const config = {
       a11yItemName,
       index: index,
-      maxLength : sortedItems.length,
+      maxLength: sortedItems.length,
       direction: this.direction,
       delta,
     };
@@ -340,7 +345,7 @@ export default class SortableGroupModifier extends Modifier {
     announcer.textContent = message;
 
     // Reset the message after the message is announced.
-    run.later(() => {
+    later(() => {
       announcer.textContent = '';
     }, 1000);
   }
@@ -359,7 +364,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) {
@@ -393,7 +397,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]);
     });
 
@@ -443,7 +447,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;
   }
 
@@ -451,8 +455,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() {
@@ -468,7 +472,7 @@ export default class SortableGroupModifier extends Modifier {
    @default y
    */
   get direction() {
-    return this.args.named.direction || "y";
+    return this.args.named.direction || 'y';
   }
 
   /**
@@ -495,7 +499,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);
@@ -526,7 +530,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;
@@ -548,7 +552,7 @@ export default class SortableGroupModifier extends Modifier {
    * Enables keyboard navigation
    */
   @action
-  activateKeyDown(selectedItem){
+  activateKeyDown(selectedItem) {
     this._selectedItem = selectedItem;
     this.isKeyDownEnabled = true;
   }
@@ -612,7 +616,7 @@ export default class SortableGroupModifier extends Modifier {
       position = this.firstItemPosition;
     }
 
-    sortedItems.forEach(item => {
+    sortedItems.forEach((item) => {
       let dimension;
       let direction = this.direction;
 
@@ -642,8 +646,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) {
@@ -671,17 +675,17 @@ export default class SortableGroupModifier extends Modifier {
 
     delete this._firstItemPosition;
 
-    run.schedule('render', () => {
-      items.forEach(item => item.freeze());
+    schedule('render', () => {
+      items.forEach((item) => item.freeze());
     });
 
-    run.schedule('afterRender', () => {
-      items.forEach(item => item.reset());
+    schedule('afterRender', () => {
+      items.forEach((item) => item.reset());
     });
 
-    run.next(() => {
-      run.schedule('render', () => {
-        items.forEach(item => item.thaw());
+    next(() => {
+      schedule('render', () => {
+        items.forEach((item) => item.thaw());
       });
     });
   }
@@ -697,24 +701,28 @@ 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();
 
-  didUpdateArguments() {
-  }
+    if (this.disabled) {
+      return;
+    }
 
-  didInstall() {
     this.addEventListener();
+  }
 
+  didUpdateArguments() {}
+
+  didInstall() {
     this.announcer = this._createAnnouncer();
     this.element.insertAdjacentElement('afterend', this.announcer);
 
@@ -723,12 +731,11 @@ export default class SortableGroupModifier extends Modifier {
 
   willRemove() {
     // todo cleanup the announcer
-    if(this.announcer.parentNode) {
+    if (this.announcer.parentNode) {
       this.announcer.parentNode.removeChild(this.announcer);
     }
     this.removeEventListener();
 
     this.sortableService.deregisterGroup(this.groupName, this);
   }
-
 }

package/addon/modifiers/sortable-handle.js

@@ -1,26 +1,24 @@
 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 {
-
   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");
+    this.element.dataset.sortableHandle = true;
+    this.element.tabIndex = '0';
+    this.element.setAttribute('role', 'button');
   }
-
 }