diff --git a/README.md b/README.md index 1f3f193..4420b02 100644 --- a/README.md +++ b/README.md @@ -133,7 +133,7 @@ The action is called with two arguments: ```handlebars ... your regular template code -{{#draggable-object-target action="increaseRating" amount="5"}} +{{#draggable-object-target action=(action 'increaseRating') amount="5"}} Drag here to increase rating {{/draggable-object-target}} ``` @@ -141,7 +141,7 @@ The action is called with two arguments: Optionally you can also get an action fired when an object is being dragged over and out of the drop target. No parameter is currently sent with these actions. ```handlebars -{{#draggable-object-target action="increaseRating" amount="5" dragOverAction='myOverAction' dragOutAction='myDragOutAction'}} +{{#draggable-object-target action=(action 'increaseRating') amount="5" dragOverAction='myOverAction' dragOutAction='myDragOutAction'}} Drag here to increase rating {{/draggable-object-target}} ``` @@ -209,21 +209,21 @@ When writing tests, there is a `drag` helper you can use to help facilitate drag #### drag helper - As of v0.4.5 you can use this helper in integration tests without booting up the entire application. - Is an async aware helper ( use await to wait for drop to finish ) - - Can be used to test sortable elements as well as plain draggable - - Has one argument - - the drag start selector + - Can be used to test sortable elements as well as plain draggable + - Has one argument + - the drag start selector - Example: ```.draggable-object.drag-handle``` - And many options: - **dragStartOptions** - options for the drag-start event - - can be used to set a cursor position for the drag start event - - Example: ```{ pageX: 0, pageY: 0 }``` + - can be used to set a cursor position for the drag start event + - Example: ```{ pageX: 0, pageY: 0 }``` - **dragOverMoves** - - array of moves used to simulate dragging over. + - array of moves used to simulate dragging over. - it's an array of [position, selector] arrays where the selector is optional and will use the 'drop' selector ( from drop options ) as default - Example: - ```js + ```js [ [{ clientX: 1, clientY: 500 }, '.drag-move-div'], [{ clientX: 1, clientY: 600 }, '.drag-move-div'] @@ -232,7 +232,7 @@ When writing tests, there is a `drag` helper you can use to help facilitate drag [ [{ clientX: 1, clientY: 500 }], // moves drop selector [{ clientX: 1, clientY: 600 }] // moves drop selector - ] + ] ``` - **dropEndOptions** - options for the drag-end event @@ -247,19 +247,19 @@ When writing tests, there is a `drag` helper you can use to help facilitate drag // check on state of things } ``` - - **beforeDrop** + - **beforeDrop** - a function to call before drop action is called - gives you a chance to inspect state before dropping - Example: ```js beforeDrop() { - // check on state of things + // check on state of things } ``` - **drop** - selector for the element to drop onto - Example: ```.drop-target-div``` - + - You import it like this: ```js @@ -270,21 +270,21 @@ import { drag } from 'your-app/tests/helpers/drag-drop'; You can pass the CSS selector for the `draggable-object-target` and pass a `beforeDrop` callback. Async test Example: - + ```js test('drag stuff', async function(assert) { // setup component await drag('.draggable-object.drag-handle', { drop: '.draggable-container .draggable-object-target:nth-child(1)' }); - + assert.equal("things happened", true); }); ``` In this example, - - we're dragging the draggable-object element with CSS selector `.draggable-object.drag-handle` - - and dropping on a draggable-object-target with the CSS selector `draggable-object-target:eq(1)`. + - we're dragging the draggable-object element with CSS selector `.draggable-object.drag-handle` + - and dropping on a draggable-object-target with the CSS selector `draggable-object-target:eq(1)`. For a fuller example check out this integration [test](https://github.com/mharris717/ember-drag-drop/blob/master/tests/integration/components/sortable-objects-test.js#L63) @@ -292,16 +292,16 @@ For a fuller example check out this integration [test](https://github.com/mharri In order to use async / await style tests you need to tell ember-cli-babel to include a polyfill in [ember-cli-build.js](https://github.com/mharris717/ember-drag-drop/blob/master/ember-cli-build.js#L7) -**Note #2** - You don't have to use the new async/await helper. +**Note #2** + You don't have to use the new async/await helper. You can simply keep using the older drag helper ( which makes your tests far slower because you have to start the application for each test. ) This older helper only has one option ( beforeDrop ) - + ```javascript // old drag helper import { drag } from 'your-app/tests/helpers/ember-drag-drop'; ``` - + ### TODO Theses additions to sort are still incoming: @@ -375,11 +375,11 @@ app/templates/posts.hbs {{/each}}

Possible Statuses

-{{#draggable-object-target action="setStatus" status="Ready to Publish"}} +{{#draggable-object-target action=(action 'setStatus') status="Ready to Publish"}} Ready to Publish {{/draggable-object-target}} -{{#draggable-object-target action="setStatus" status="Needs Revision"}} +{{#draggable-object-target action=(action 'setStatus') status="Needs Revision"}} Needs Revision {{/draggable-object-target}} ``` diff --git a/addon/components/draggable-object-target.js b/addon/components/draggable-object-target.js index 90a67b8..a908559 100644 --- a/addon/components/draggable-object-target.js +++ b/addon/components/draggable-object-target.js @@ -8,7 +8,7 @@ export default Component.extend(Droppable, { handlePayload(payload, event) { let obj = this.get('coordinator').getObject(payload,{target: this}); - this.sendAction('action',obj,{target: this, event: event}); + this.get('action')(obj, { target: this, event: event }); }, handleDrop(event) { diff --git a/app/templates/components/object-bin.hbs b/app/templates/components/object-bin.hbs index 299bce3..6ad9585 100644 --- a/app/templates/components/object-bin.hbs +++ b/app/templates/components/object-bin.hbs @@ -1,4 +1,4 @@ -{{#draggable-object-target action="handleObjectDropped"}} +{{#draggable-object-target action=(action 'handleObjectDropped') }}
{{name}}

{{#each model as |obj|}} diff --git a/doc/examples/classify-posts.md b/doc/examples/classify-posts.md index bc65be9..ddfd325 100644 --- a/doc/examples/classify-posts.md +++ b/doc/examples/classify-posts.md @@ -45,11 +45,11 @@ app/templates/posts.hbs {{/each}}

Possible Statuses

-{{#draggable-object-target action="setStatus" status="Ready to Publish"}} +{{#draggable-object-target action=(action 'setStatus') status="Ready to Publish"}} Ready to Publish {{/draggable-object-target}} -{{#draggable-object-target action="setStatus" status="Needs Revision"}} +{{#draggable-object-target action=(action 'setStatus') status="Needs Revision"}} Needs Revision {{/draggable-object-target}} -``` \ No newline at end of file +``` diff --git a/doc/full.md b/doc/full.md index c2f9181..3878c2d 100644 --- a/doc/full.md +++ b/doc/full.md @@ -46,12 +46,12 @@ The two things to provide to the component are: The action is called with two arguments: * The dragged object. -* An options hash. Currently the only key is `target`, which is the draggable-object-target component. +* An options hash. Currently the only key is `target`, which is the draggable-object-target component. ```handlebars ... your regular template code -{{#draggable-object-target action="increaseRating" amount="5"}} +{{#draggable-object-target action=(action 'increaseRating') amount="5"}} Drag here to increase rating {{/draggable-object-target}} ``` @@ -122,12 +122,11 @@ app/templates/posts.hbs {{/each}}

Possible Statuses

-{{#draggable-object-target action="setStatus" status="Ready to Publish"}} +{{#draggable-object-target action=(action 'setStatus') status="Ready to Publish"}} Ready to Publish {{/draggable-object-target}} -{{#draggable-object-target action="setStatus" status="Needs Revision"}} +{{#draggable-object-target action=(action 'setStatus') status="Needs Revision"}} Needs Revision {{/draggable-object-target}} ``` - diff --git a/doc/primitives/draggable-object-target.md b/doc/primitives/draggable-object-target.md index f952c79..ec552c5 100644 --- a/doc/primitives/draggable-object-target.md +++ b/doc/primitives/draggable-object-target.md @@ -10,12 +10,12 @@ The two things to provide to the component are: The action is called with two arguments: * The dragged object. -* An options hash. Currently the only key is `target`, which is the draggable-object-target component. +* An options hash. Currently the only key is `target`, which is the draggable-object-target component. ```handlebars ... your regular template code -{{#draggable-object-target action="increaseRating" amount="5"}} +{{#draggable-object-target action=(action 'increaseRating') amount="5"}} Drag here to increase rating {{/draggable-object-target}} ``` @@ -35,4 +35,4 @@ Ember.Controller.extend({ } } }); -``` \ No newline at end of file +``` diff --git a/tests/dummy/app/templates/handle.hbs b/tests/dummy/app/templates/handle.hbs index 457e480..50c79e6 100644 --- a/tests/dummy/app/templates/handle.hbs +++ b/tests/dummy/app/templates/handle.hbs @@ -1,6 +1,6 @@

Drag and Drop With a handle

-{{#draggable-object-target action="dragResult" resultText='Drag is Complete' dragOverAction='draggingOverTarget' dragOutAction='leftDragTarget' overrideClass='dropTarget'}} +{{#draggable-object-target action=(action 'dragResult') resultText='Drag is Complete' dragOverAction='draggingOverTarget' dragOutAction='leftDragTarget' overrideClass='dropTarget'}} {{#if dragFinishText}} {{dragFinishText}} {{else}} @@ -23,4 +23,4 @@
Template is here: https://github.com/mharris717/ember-drag-drop/blob/master/tests/dummy/app/templates/handle.hbs
Controller is here: https://github.com/mharris717/ember-drag-drop/blob/master/tests/dummy/app/controllers/handle.js -
\ No newline at end of file + diff --git a/tests/dummy/app/templates/simple.hbs b/tests/dummy/app/templates/simple.hbs index d93d432..27f223c 100644 --- a/tests/dummy/app/templates/simple.hbs +++ b/tests/dummy/app/templates/simple.hbs @@ -1,6 +1,6 @@

A simple example of one drag and one drop

-{{#draggable-object-target action="dragResult" resultText='Drag is Complete' dragOverAction='draggingOverTarget' dragOutAction='leftDragTarget' overrideClass='dropTarget'}} +{{#draggable-object-target action=(action 'dragResult') resultText='Drag is Complete' dragOverAction='draggingOverTarget' dragOutAction='leftDragTarget' overrideClass='dropTarget'}} {{#if dragFinishText}} {{dragFinishText}} {{else}} diff --git a/tests/integration/components/draggable-object-test.js b/tests/integration/components/draggable-object-test.js index 439ba30..b2cbb71 100644 --- a/tests/integration/components/draggable-object-test.js +++ b/tests/integration/components/draggable-object-test.js @@ -36,7 +36,7 @@ test('Draggable Object is draggable', async function(assert) { this.on('dragMoveAction', (event) => assert.ok(event)); this.render(hbs` - {{#draggable-object content=myObject class='draggable-object' dragMoveAction=(action "dragMoveAction")}} + {{#draggable-object content=myObject class='draggable-object' dragMoveAction=(action 'dragMoveAction')}} Hi {{/draggable-object}} diff --git a/tests/integration/components/helpers-test.js b/tests/integration/components/helpers-test.js index 228edc6..16b6525 100644 --- a/tests/integration/components/helpers-test.js +++ b/tests/integration/components/helpers-test.js @@ -5,7 +5,7 @@ import { drag } from '../../helpers/drag-drop'; import $ from 'jquery'; moduleForComponent('ember-drag-drop', 'Integration | Helpers', { - integration: true, + integration: true }); const collection = ['hiphop', 'jazz', 'funk']; @@ -15,12 +15,12 @@ const template = hbs`
{{genre}}
{{/draggable-object}} - {{draggable-object-target classNames=genre class='drop-target' action=dropAction destination=index coordinator=coordinator}} + {{draggable-object-target classNames=genre class='drop-target' action=(action dropAction) destination=index coordinator=coordinator}} {{/each}} `; test('drag helper drags to a draggable object target and calls the action upon drop', async function(assert) { - assert.expect(2); + assert.expect(3); let coordinator = Coordinator.create(); @@ -31,6 +31,10 @@ test('drag helper drags to a draggable object target and calls the action upon d this.set('collection', collection); this.set('coordinator', coordinator); + this.set('dropAction', () => { + assert.ok(true, 'called drop action'); + }) + this.render(template); await drag('.draggable-object.hiphop', { drop: '.drop-target.jazz' }); @@ -48,6 +52,7 @@ test('drag helper allows a callback to be called before dropping', async functio this.set('collection', collection); this.set('coordinator', coordinator); + this.set('dropAction', () => {}); this.render(template); await drag('.draggable-object.jazz', {