Add additionalArgs API (lolmaus#34)

* Add additionalArgs API * Fix tests * Split into sourceArgs and targetArgs * Document additionalArgs
stingerlabs · Dec 4, 2019 · dfc250e · dfc250e
1 parent eab3207
commit dfc250e
Show file tree

Hide file tree

Showing 7 changed files with 44 additions and 16 deletions.
diff --git a/README.md b/README.md
@@ -188,7 +188,7 @@ Here's the reference implementation of the `dragEndAction` action:
 
 ```js
   actions: {
-    dragEndAction ({sourceList, sourceIndex, targetList, targetIndex}) {
+    dragEndAction ({sourceArgs, sourceList, sourceIndex, targetArgs, targetList, targetIndex}) {
       if (sourceList === targetList && sourceIndex === targetIndex) return
 
       const item = sourceList.objectAt(sourceIndex)
@@ -288,6 +288,7 @@ Incorrect:
 | `handle`                         | String, typically `"[draggable]"`, or `null` | `null`        | Selector of the drag handle element. When provided, items can only be dragged by handle. :warning: The handle element *must* have `draggable="true"` attribute.                                 |
 | `isHorizontal`                   | Boolean                                      | `false`       | Displays the list horizontally. :warning: Horizontal lists don't work well when nested.   |
 | `isRtl`                          | Boolean                                      | `false`       | RTL - Right to left. Might be useful for certain languages. :warning: Has no effect on vertical lists. |
+| `additionalArgs`                 | <any>                                        | `undefined`   | A catch all for additional arguments you may want to access in the `dragEndAction`. Can be used for things like passing the parent of the list in for saving `hasMany` relationships. |
 
 
 

diff --git a/addon/components/drag-sort-item.js b/addon/components/drag-sort-item.js
@@ -208,14 +208,15 @@ export default Component.extend({
   startDragging () {
     this.collapse()
 
-    const item         = this.get('item')
-    const index        = this.get('index')
-    const items        = this.get('items')
-    const group        = this.get('group')
-    const dragSort     = this.get('dragSort')
-    const isHorizontal = this.get('isHorizontal')
-
-    dragSort.startDragging({item, index, items, group, isHorizontal})
+    const additionalArgs = this.get('additionalArgs')
+    const item           = this.get('item')
+    const index          = this.get('index')
+    const items          = this.get('items')
+    const group          = this.get('group')
+    const dragSort       = this.get('dragSort')
+    const isHorizontal   = this.get('isHorizontal')
+
+    dragSort.startDragging({additionalArgs, item, index, items, group, isHorizontal})
   },
 
   endDragging () {

diff --git a/addon/components/drag-sort-list.js b/addon/components/drag-sort-list.js
@@ -16,6 +16,7 @@ import layout from '../templates/components/drag-sort-list'
 export default Component.extend({
 
   // ----- Arguments -----
+  additionalArgs  : undefined,
   items           : undefined,
   group           : undefined,
   draggingEnabled : true,
@@ -166,14 +167,15 @@ export default Component.extend({
     const items        = this.get('items')
     const dragSort     = this.get('dragSort')
     const isHorizontal = this.get('isHorizontal')
+    const targetArgs   = this.get('additionalArgs')
     let targetIndex    = 0
 
     if (isHorizontal) {
       targetIndex = this.getClosestHorizontalIndex(event)
       dragSort.set('isDraggingUp', false)
     }
 
-    dragSort.dragEntering({group, items, isHorizontal, targetIndex})
+    dragSort.dragEntering({group, items, isHorizontal, targetArgs, targetIndex})
   },
 
   getClosestHorizontalIndex (event) {

diff --git a/addon/services/drag-sort.js b/addon/services/drag-sort.js
@@ -24,7 +24,7 @@ export default Service.extend(EventedMixin, {
 
 
   // ----- Custom methods -----
-  startDragging ({item, index, items, group, isHorizontal}) {
+  startDragging ({additionalArgs, item, index, items, group, isHorizontal}) {
     this.setProperties({
       isDragging   : true,
       isDraggingUp : false,
@@ -33,7 +33,9 @@ export default Service.extend(EventedMixin, {
       group,
       isHorizontal,
 
+      sourceArgs  : additionalArgs,
       sourceList  : items,
+      targetArgs  : additionalArgs,
       targetList  : items,
       sourceIndex : index,
       targetIndex : index,
@@ -72,9 +74,11 @@ export default Service.extend(EventedMixin, {
       next(() => {
         this.trigger('sort', {
           group,
+          sourceArgs     : this.get('sourceArgs'),
           sourceList     : this.get('sourceList'),
           sourceIndex    : this.get('sourceIndex'),
           draggedItem    : this.get('draggedItem'),
+          targetArgs     : this.get('targetArgs'),
           targetList     : this.get('targetList'),
           oldTargetIndex : this.get('targetIndex'),
           newTargetIndex : index,
@@ -91,7 +95,7 @@ export default Service.extend(EventedMixin, {
 
 
 
-  dragEntering ({group, items, isHorizontal, targetIndex = 0}) {
+  dragEntering ({group, items, isHorizontal, targetArgs, targetIndex = 0}) {
     // Ignore entering irrelevant groups
     if (group !== this.get('group')) return
 
@@ -101,15 +105,18 @@ export default Service.extend(EventedMixin, {
       next(() => {
         this.trigger('move', {
           group,
+          sourceArgs    : this.get('sourceArgs'),
           sourceList    : this.get('sourceList'),
           sourceIndex   : this.get('sourceIndex'),
           draggedItem   : this.get('draggedItem'),
           oldTargetList : this.get('targetList'),
           newTargetList : items,
+          targetArgs,
           targetIndex   : targetIndex,
         })
       })
 
+      this.set('targetArgs', targetArgs)
       this.set('targetIndex', targetIndex)
     }
 
@@ -124,8 +131,10 @@ export default Service.extend(EventedMixin, {
 
 
   endDragging ({action}) {
+    const sourceArgs   = this.get('sourceArgs')
     const sourceList   = this.get('sourceList')
     const sourceIndex  = this.get('sourceIndex')
+    const targetArgs   = this.get('targetArgs')
     const targetList   = this.get('targetList')
     let   targetIndex  = this.get('targetIndex')
     const isDraggingUp = this.get('isDraggingUp')
@@ -165,8 +174,10 @@ export default Service.extend(EventedMixin, {
           action({
             group,
             draggedItem,
+            sourceArgs,
             sourceList,
             sourceIndex,
+            targetArgs,
             targetList,
             targetIndex,
           })
@@ -180,8 +191,10 @@ export default Service.extend(EventedMixin, {
       this.trigger('end', {
         group,
         draggedItem,
+        sourceArgs,
         sourceList,
         sourceIndex,
+        targetArgs,
         targetList,
         targetIndex,
       })
@@ -198,7 +211,9 @@ export default Service.extend(EventedMixin, {
       draggedItem : null,
       group       : null,
 
+      sourceArgs  : null,
       sourceList  : null,
+      targetArgs  : null,
       targetList  : null,
       sourceIndex : null,
       targetIndex : null,

diff --git a/addon/templates/components/drag-sort-list.hbs b/addon/templates/components/drag-sort-list.hbs
@@ -1,5 +1,6 @@
 {{#each items as |item index|}}
   {{#drag-sort-item
+    additionalArgs                 = additionalArgs
     item                           = item
     index                          = index
     items                          = items

diff --git a/testem.js b/testem.js
@@ -13,7 +13,6 @@ module.exports = {
         // --no-sandbox is needed when running Chrome inside a container
         process.env.CI ? '--no-sandbox' : null,
         '--headless',
-        '--disable-gpu',
         '--disable-dev-shm-usage',
         '--disable-software-rasterizer',
         '--mute-audio',

diff --git a/tests/integration/components/drag-sort-list-test.js b/tests/integration/components/drag-sort-list-test.js
@@ -20,12 +20,15 @@ module('Integration | Component | drag-sort-list', function (hooks) {
 
     const dragEndCallback = sinon.spy()
 
-    this.setProperties({items, dragEndCallback})
+    const additionalArgs = {parent : 'test'}
+
+    this.setProperties({additionalArgs, items, dragEndCallback})
 
     await render(hbs`
       {{#drag-sort-list
-        items         = items
-        dragEndAction = (action dragEndCallback)
+        additionalArgs = additionalArgs
+        items          = items
+        dragEndAction  = (action dragEndCallback)
         as |item|
       }}
         <div>
@@ -48,7 +51,9 @@ module('Integration | Component | drag-sort-list', function (hooks) {
     assert.ok(dragEndCallback.calledWithExactly({
       group       : undefined,
       draggedItem : items.objectAt(0),
+      sourceArgs  : {parent : 'test'},
       sourceList  : items,
+      targetArgs  : {parent : 'test'},
       targetList  : items,
       sourceIndex : 0,
       targetIndex : 1,
@@ -139,7 +144,9 @@ module('Integration | Component | drag-sort-list', function (hooks) {
     assert.ok(dragEndCallback.calledWithExactly({
       group       : undefined,
       draggedItem : items.objectAt(0),
+      sourceArgs  : undefined,
       sourceList  : items,
+      targetArgs  : undefined,
       targetList  : items,
       sourceIndex : 0,
       targetIndex : 1,
@@ -197,7 +204,9 @@ module('Integration | Component | drag-sort-list', function (hooks) {
     assert.ok(dragEndCallback.calledWithExactly({
       group       : undefined,
       draggedItem : items.objectAt(0),
+      sourceArgs  : undefined,
       sourceList  : items,
+      targetArgs  : undefined,
       targetList  : items,
       sourceIndex : 0,
       targetIndex : 1,