feat: on- prefix is a global syntax, use sortable- prefix for events and allow to bind to options

Author: erik-lieben

README.md

@@ -51,13 +51,13 @@ export function configure(aurelia: Aurelia) {
 ```
 ## Usage:
 ```html
-<div sortable="options.bind: options" />
+<div sortable.bind="options" />
 ```
 
 Each event can be used in the following way:
 
 ```html
-<div sortable="options.bind: options" on-move.delegate="func($event)" />
+<div sortable.bind="options" sortable-move.delegate="func($event)" />
 ```
 
 ```javascript
@@ -72,15 +72,13 @@ export class Home {
 ## sortable
 The following attributes can be set to catch events
 
-| Attribute  | Sortablejs event | Description 
-| ---------- | ---------------- | --------------
-| on-add     | onAdd            | Element is dropped into the list from another list
-| on-end     | onEnd            | Dragging ended 
-| on-filter  | onFilter         | Attempt to drag a filtered element
-| on-move    | onMove           | Event when you move an item in the list or between lists 
-| on-remove  | onRemove         | Element is removed from the list into another list 
-| on-sort    | onSort           | Called by any change to the list (add / update / remove) 
-| on-start   | onStart          | Dragging started 
-| on-update  | onUpdate         | Changed sorting within list
-
-When events are specified in the options property the override the above events.
+| Attribute        | Sortablejs event | Description 
+| ---------------- | ---------------- | --------------
+| sortable-add     | onAdd            | Element is dropped into the list from another list
+| sortable-end     | onEnd            | Dragging ended 
+| sortable-filter  | onFilter         | Attempt to drag a filtered element
+| sortable-move    | onMove           | Event when you move an item in the list or between lists 
+| sortable-remove  | onRemove         | Element is removed from the list into another list 
+| sortable-sort    | onSort           | Called by any change to the list (add / update / remove) 
+| sortable-start   | onStart          | Dragging started 
+| sortable-update  | onUpdate         | Changed sorting within list

src/sortable.ts

@@ -1,33 +1,41 @@
-import { bindable, bindingMode, inject } from "aurelia-framework";
+import { inject } from "aurelia-framework";
 import * as Sortable from "sortablejs";
 
 @inject(Element)
 export class SortableCustomAttribute {
 
-  @bindable({ defaultBindingMode: bindingMode.oneTime })
-  public options;
-
   private sortable;
 
-  private defaultOptions = {
-      onAdd: event => this.dispatch("on-add", event),
-      onEnd:  event => this.dispatch("on-end", event),
-      onFilter: event => this.dispatch("on-filter", event),
-      onMove: event => this.dispatch("on-move", event),
-      onRemove: event => this.dispatch("on-remove", event),
-      onSort: event => this.dispatch("on-sort", event),
-      onStart: event => this.dispatch("on-start", event),
-      onUpdate: event => this.dispatch("on-update", event),
-    };
-
   constructor(private element: Element) { }
 
+  public detached() {
+    this.sortable.destroy();
+  }
+
   public attached() {
-    this.sortable = Sortable.create(this.element, Object.assign(this.defaultOptions, this.options || {}));
+    if (!this.sortable) {
+      this.sortable = Sortable.create(this.element, {});
+    }
   }
 
-  public detached() {
-    this.sortable.destroy();
+  public valueChanged(newValue) {
+    if (this.sortable) {
+      this.sortable.destroy();
+    }
+
+    this.sortable = Sortable.create(this.element, Object.assign({}, newValue || {}));
+    this.attachListeners();
+  }
+
+  private attachListeners() {
+    Sortable.utils.on(this.element, "add", event => this.dispatch("sortable-add", event));
+    Sortable.utils.on(this.element, "end", event => this.dispatch("sortable-end", event));
+    Sortable.utils.on(this.element, "filter", event => this.dispatch("sortable-filter", event));
+    Sortable.utils.on(this.element, "move", event => this.dispatch("sortable-move", event));
+    Sortable.utils.on(this.element, "remove", event => this.dispatch("sortable-remove", event));
+    Sortable.utils.on(this.element, "sort", event => this.dispatch("sortable-sort", event));
+    Sortable.utils.on(this.element, "start", event => this.dispatch("sortable-start", event));
+    Sortable.utils.on(this.element, "update", event => this.dispatch("sortable-update", event));
   }
 
   private  dispatch(name, data) {