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}}