Merge pull request #430 from jacojoubert/refactor-disabled

README.md

@@ -292,7 +292,7 @@ modifier
   </li>
 ```
 
-### Multiple Ember-Sortables renders simultaneously (Modifier version) 
+### Multiple Ember-Sortables renders simultaneously (Modifier version)
 
 The modifier version uses a service behind the scenes for communication between the group and the items and to maintain state. It does this seemlessly when the elements are rendered on the screen. However, if there are two sortables rendered at the same time, either in the same component or different components, the state management does not know which items belong to which group.
 
@@ -326,8 +326,10 @@ Ensure that the same name is passed to both the group and the items, this would
 
 
 ### Disabling Drag (Experimental)
-`sortable-item` (component and modifier) exposes an optional `isDraggingDisabled` flag that you can use to disable `drag` on the particular item.
+`sortable-item` (component and modifier) exposes an optional `disabled` (previously `isDraggingDisabled`) flag that you can use to disable reordering for that particular item. Disabling and item won't prevent it from changing position in the array. The user can still move other non-disabled items to over it.
+
 This flag is intended as an utility to make your life easier with 3 main benefits:
+
 1. You can now specify which `sortable-item` are not intended to be draggable/sortable.
 2. You do not have to duplicate the `sortable-item` UI just for the purpose of disabling the `sorting` behavior.
 3. Allows you to access the entire list of `models` for your `onChange` action, which can now be a mix of sortable and non-sortable items.
@@ -350,8 +352,8 @@ component
   an ordered list, `ol`, by default.
 - `sortable-item`
   a list item, `li`, by default.
-  
-The modifier version can be attached to to any element that makes sense, 
+
+The modifier version can be attached to to any element that makes sense,
 
 ##### Keyboard Navigation
 There are 4 modes during keyboard navigation:

addon/modifiers/sortable-item.js

@@ -12,7 +12,7 @@ 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 { assert, deprecate } from '@ember/debug';
 import config from 'ember-get-config';
 const { environment } = config;
 const isTesting = environment === 'test';
@@ -23,7 +23,7 @@ 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.
  *
@@ -64,7 +64,7 @@ export default class SortableItemModifier extends Modifier {
   direction;
 
   @reads("sortableGroup.disabled")
-  disabled;
+  groupDisabled;
 
   @service('ember-sortable@ember-sortable')
   sortableService;
@@ -102,13 +102,27 @@ 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;
   }
 
   /**
@@ -220,10 +234,7 @@ export default class SortableItemModifier extends Modifier {
   isBusy;
 
   /**
-   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;
@@ -242,8 +253,7 @@ export default class SortableItemModifier extends Modifier {
 
   @action
   keyDown(event) {
-    // Prevents keyboard sorting if group is disabled
-    if (this.disabled) { 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) {
@@ -302,13 +312,7 @@ export default class SortableItemModifier extends Modifier {
    * @private
    */
   _primeDrag(startEvent) {
-    // Prevent dragging if the entire group is disabled
-    if (this.disabled) { return; }
-
-    // Prevent dragging if the sortable-item is disabled.
-    if (this.isDraggingDisabled) {
-      return;
-    }
+    if (this.isDisabled) { return; }
 
     if (this.handleElement && !startEvent.target.closest(this.handle)) {
       return;

tests/dummy/app/helpers/eq.js

@@ -0,0 +1,8 @@
+import { helper } from '@ember/component/helper';
+import { isEqual as emberIsEqual } from '@ember/utils';
+
+export function isEqual([a, b]) {
+  return emberIsEqual(a, b);
+}
+
+export default helper(isEqual);

tests/dummy/app/templates/modifier.hbs

@@ -168,7 +168,7 @@
 
 <article class="demo">
   <section class="vertical-demo">
-    <h3>Disabled</h3>
+    <h3>Disabled (group)</h3>
 
     <div>
       <button onclick={{this.toggleDisabled}}>
@@ -195,4 +195,31 @@
       {{/each}}
     </ol>
   </section>
+
+  <section class="vertical-demo">
+    <h3>Vertical (disabled items)</h3>
+
+    <ol data-test-vertical-disabled-item-demo-group
+      {{sortable-group
+        onChange=this.update
+        a11yAnnouncementConfig=this.a11yAnnouncementConfig
+        a11yItemName="spanish number"
+        itemVisualClass=this.itemVisualClass
+        handleVisualClass=this.handleVisualClass
+        groupName="vertical-disabled-item"
+      }}
+    >
+      {{#each model.items as |item|}}
+        <li data-test-vertical-disabled-item-demo-item {{sortable-item model=item groupName="vertical-disabled-item" disabled=(eq item "Dos")}}>
+          {{item}}
+          {{#if (eq item "Dos")}}
+            (disabled)
+          {{/if}}
+          <span class="handle" data-test-vertical-disabled-item-demo-handle {{sortable-handle}} data-item={{item}}>
+            <span>&vArr;</span>
+          </span>
+        </li>
+      {{/each}}
+    </ol>
+  </section>
 </article>