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 @@
\ 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', {