diff --git a/README.md b/README.md
index 0fa264c..66013e1 100644
--- a/README.md
+++ b/README.md
@@ -1,19 +1,20 @@
[![Build Status](https://travis-ci.org/kalcifer/ember-dragula.svg?branch=master)](https://travis-ci.org/kalcifer/ember-dragula)
-# Ember-dragula
+# Ember Dragula
-##Introduction
+## Introduction
An ember addon that allows to use Dragula - A drag and drop library (https://github.com/bevacqua/dragula)
-##How to use
+## How to use
###Install addon
+
ember install ember-dragula
###Syntax
The following syntax is required to get the addon working.
```
-{{#ember-dragula config=dragulaconfig dragulaEvent='dragulaEvent' }}
+{{#ember-dragula config=dragulaconfig over='doSomethingOnOver' drag='doSomethingOnDrag'}}
{{#ember-dragula-container }}
...
@@ -30,25 +31,23 @@ The following syntax is required to get the addon working.
{{/ember-dragula-container}}
{{/ember-dragula}}
```
+
Since dragula uses containers whose elements we can drag and drop. So ```ember-dragula``` is the ember container for all dragula containers(including those defined in ```isContainer```. It is also the component that manages the lifecycle for the associated drake.
###Passing options
In the above code snippet, the config parameter must be in the following format.
-```
- 'dragulaconfig':{
- 'options':{
- copy: false,
- revertOnSpill: false,
- removeOnSpill: false
- //Other options from the dragula source page.
- },
- 'eventList':[{
- name:'drag'
- },{
- name:'drop'
- }]// all the events that you want to listen to. TBD - will make this simpler.
- }
+
+```js
+dragulaconfig: {
+ options: {
+ copy: false,
+ revertOnSpill: false,
+ removeOnSpill: false
+ // Other options from the dragula source page.
+ },
+ enabledEvents: ['drag', 'drop']
+}
```
## Installation
diff --git a/addon/components/ember-dragula-container.js b/addon/components/ember-dragula-container.js
index d972408..e181cc7 100644
--- a/addon/components/ember-dragula-container.js
+++ b/addon/components/ember-dragula-container.js
@@ -1,20 +1,12 @@
import Ember from 'ember';
-export default Ember.Component.extend({
- didInsertElement:function(){
- Ember.run.next(function(){
- this.get('parentView').drake.containers.push(this.element);
-
- }.bind(this));
- },
- setElementIdToChildren:function(){
- var childViews = this.get('childViews');
- var elementToChild = {};
- childViews.forEach(function(view){
- elementToChild[view.elementId] = view.tree;
- });
- },
- willDestroyElement:function(){
-
- }
-});
\ No newline at end of file
+const {Component, on} = Ember;
+
+export default Component.extend({
+ registerOnDrake: on('didInsertElement', function () {
+ Ember.run.next(() => {
+ let drake = this.get('parentView').drake || this.drake;
+ drake.containers.push(this.element);
+ });
+ })
+});
diff --git a/addon/components/ember-dragula.js b/addon/components/ember-dragula.js
index 468b7f3..5021459 100644
--- a/addon/components/ember-dragula.js
+++ b/addon/components/ember-dragula.js
@@ -1,26 +1,27 @@
import Ember from 'ember';
-export default Ember.Component.extend({
- willInsertElement:function(){
+const {Component, on} = Ember;
+
+export default Component.extend({
+ registerDrake: on('willInsertElement', function () {
var options = this.config.options || {};
this.set('drake', window.dragula(options));
- this.set('parent', this);
- },
- didInsertElement:function(){
- this.setEventListeners();
- },
- setEventListeners:function(){
- if(this.config.eventList){
- this.config.eventList.forEach(function(event){
- this.drake.on(event.name, function(){
- this.sendAction('dragulaEvent', event.name, arguments);
- }.bind(this));
- }.bind(this));
- }
- },
- willDestroyElement:function(){
+ }),
+
+ setEventListeners: on('didInsertElement', function () {
+ if (!this.config.enabledEvents) {
+ return;
+ }
+ this.config.enabledEvents.forEach(eventName => {
+ this.drake.on(eventName, (...args) => {
+ this.sendAction(eventName, args);
+ });
+ });
+ }),
+
+ destroyDrake: on('willDestroyElement', function () {
this.drake.containers.removeObject(this.element);
this.drake.destroy();
this.set('drake', '');
- }
-});
\ No newline at end of file
+ })
+});
diff --git a/app/templates/components/ember-dragula.hbs b/app/templates/components/ember-dragula.hbs
new file mode 100644
index 0000000..f4a0b59
--- /dev/null
+++ b/app/templates/components/ember-dragula.hbs
@@ -0,0 +1 @@
+{{yield this}}