Merge pull request #5 from oskarrough/master

Nested containers, improved actions

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 }}
 		<div>
 			...
@@ -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

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(){
-
-	}
-});
+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);
+    });
+  })
+});

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', '');
-	}
-});
+	})
+});

app/templates/components/ember-dragula.hbs

@@ -0,0 +1 @@
+{{yield this}}