v0.1.0

.editorconfig

@@ -0,0 +1,12 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_style = tab
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.gitignore

@@ -0,0 +1,5 @@
+node_modules
+mock.png
+.*.sw*
+.build*
+jquery.fn.*

README.md

@@ -0,0 +1,29 @@
+# THIS PROJECT NEEDS A MAINTAINER.
+
+---
+
+polymer-sortablejs
+-------------------
+A Polymer binding to [SortableJS](https://github.com/RubaXa/Sortable/).
+
+Demo: http://rubaxa.github.io/Sortable/
+
+
+<a name="polymer"></a>
+### Support Polymer
+
+```html
+
+<link rel="import" href="path/to/polymer-sortablejs/polymer-sortablejs.html"/>
+
+<sortable-js handle=".handle">
+  <template is="dom-repeat" items={{names}}>
+    <div>{{item}}</div>
+  </template>
+</sortable-js>
+```
+
+
+### NPM
+
+ `npm install polymer-sortablejs`

package.json

@@ -0,0 +1,23 @@
+{
+  "name": "polymer-sortablejs",
+  "version": "0.1.0",
+  "description": "A Polymer binding to SortableJS.",
+  "main": "polymer-sortable.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/SortableJS/polymer-sortablejs.git"
+  },
+  "keywords": [
+    "polymer",
+    "sortable"
+  ],
+  "author": "Guten Ye <guten@guten.me>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/SortableJS/polymer-sortablejs/issues"
+  },
+  "homepage": "https://github.com/SortableJS/polymer-sortablejs#readme"
+}

polymer-sortablejs.html

@@ -0,0 +1,171 @@
+<link rel="import" href="../polymer/polymer.html">
+<script src="./Sortable.js"></script>
+
+<dom-module id="sortable-js">
+  <template>
+    <content></content>
+  </template>
+</dom-module>
+<script>
+'use strict';
+  Polymer({
+    is: "sortable-js",
+
+    properties: {
+      group             : { type: String, value: function() { return Math.random(); }, observer: "groupChanged" },
+      sort              : { type: Boolean, value: true, observer: "sortChanged" },
+      disabled          : { type: Boolean, value: false, observer: "disabledChanged" },
+      store             : { type: Object, value: null, observer: "storeChanged" },
+      handle            : { type: String, value: null, observer: "handleChanged" },
+      scrollSensitivity : { type: Number, value: 30, observer: "scrollSensitivityChanged" },
+      scrollSpeed       : { type: Number, value: 10, observer: "scrollSpeedChanged" },
+      ghostClass        : { type: String, value: "sortable-ghost", observer: "ghostClassChanged" },
+      chosenClass       : { type: String, value: "sortable-chosen", observer: "chosenClassChanged" },
+      ignore            : { type: String, value: "a, img", observer: "ignoreChanged" },
+      filter            : { type: Object, value: null, observer: "filterChanged" },
+      animation         : { type: Number, value: 0, observer: "animationChanged" },
+      dropBubble        : { type: Boolean, value: false, observer: "dropBubbleChanged" },
+      dragoverBubble    : { type: Boolean, value: false, observer: "dragoverBubbleChanged" },
+      dataIdAttr        : { type: String, value: "data-id", observer: "dataIdAttrChanged" },
+      delay             : { type: Number, value: 0, observer: "delayChanged" },
+      forceFallback     : { type: Boolean, value: false, observer: "forceFallbackChanged" },
+      fallbackClass     : { type: String, value: "sortable-fallback", observer: "fallbackClassChanged" },
+      fallbackOnBody    : { type: Boolean, value: false, observer: "fallbackOnBodyChanged" },
+      draggable         : {},
+      scroll            : {}
+    },
+
+    created: function() {
+      // override default DOM property behavior
+      Object.defineProperties(this, {
+        draggable: { get: function() { return this._draggable || this.getAttribute("draggable") || ">*";}, set: function(value) { this._draggable = value; this.draggableChanged(value);} },
+        scroll: { get: function() { return this._scroll || JSON.parse(this.getAttribute("scroll") || "true"); }, set: function(value) { this._scroll = value; this.scrollChanged(value);} }
+      });
+    },
+
+    attached: function() {
+      // Given
+      //   <sortable-js>
+      //     <template is="dom-repeat" items={{data}}>
+      //       <div>
+      //         <template is="dom-if" if="true">
+      //           <span>hello</span></template></div>
+      // After render, it becomes
+      //   <sortable-js>
+      //     <div>
+      //       <span>hello</span>
+      //       <template is="dom-if">
+      //     <tempalte is="dom-repeat">
+      this.initialize();
+
+    },
+
+    detached: function() {
+      this.destroy();
+    },
+
+
+    initialize: function() {
+      var templates = this.querySelectorAll("template[is='dom-repeat']");
+      var template = templates[templates.length-1];
+
+      var options = {};
+      Object.keys(this.properties).forEach(function(key) {
+        options[key] = this[key];
+      }.bind(this));
+
+      var _this = this;
+      var eventCallbacks = {
+        onUpdate: function (e) {
+          if (template) {
+            if(manuallyHandleUpdateEvents) {
+              template.items.splice(e.newIndex, 0, template.items.splice(e.oldIndex, 1)[0]);
+            } else {
+              template.splice("items", e.newIndex, 0, template.splice("items", e.oldIndex, 1)[0]);
+            }
+          }
+          _this.fire("update", e);
+        },
+
+        onAdd: function(e) {
+          if (template) {
+            var froms = e.from.querySelectorAll("template[is='dom-repeat']");
+            var from = froms[froms.length-1];
+            var item = from.items[e.oldIndex];
+            template.splice("items", e.newIndex, 0, item);
+          }
+          _this.fire("add", e);
+        },
+
+        onRemove: function(e) {
+          if (template) {
+            template.splice("items", e.oldIndex, 1)[0];
+          }
+          _this.fire("remove", e);
+        },
+
+        onChoose: function(e) {
+          _this.fire("choose", e);
+        },
+
+        onStart: function(e) {
+          _this.fire("start", e);
+        },
+
+        onEnd: function(e) {
+          _this.fire("end", e);
+        },
+
+        onSort: function(e) {
+          _this.fire("sort", e);
+        },
+
+        onFilter: function(e) {
+          _this.fire("filter", e);
+        },
+
+        onMove: function(e) {
+          _this.fire("move", e);
+        },
+
+        onClone: function(e) {
+          _this.fire("clone", e);
+        }
+      };
+
+      Object.keys(eventCallbacks).forEach(function(name){
+        options[name] = eventCallbacks[name];
+      });
+
+      this.sortable = Sortable.create(this, options);
+    },
+
+    destroy: function() {
+      if(this.sortable) {
+        this.sortable.destroy();
+      }
+    },
+
+    groupChanged             : function(value) { this.sortable && this.sortable.option("group", value); },
+    sortChanged              : function(value) { this.sortable && this.sortable.option("sort", value); },
+    disabledChanged          : function(value) { this.sortable && this.sortable.option("disabled", value); },
+    storeChanged             : function(value) { this.sortable && this.sortable.option("store", value); },
+    handleChanged            : function(value) { this.sortable && this.sortable.option("handle", value); },
+    scrollChanged           : function(value) { this.sortable && this.sortable.option("scroll", value); },
+    scrollSensitivityChanged : function(value) { this.sortable && this.sortable.option("scrollSensitivity", value); },
+    scrollSpeedChanged       : function(value) { this.sortable && this.sortable.option("scrollSpeed", value); },
+    draggableChanged        : function(value) { this.sortable && this.sortable.option("draggable", value); },
+    ghostClassChanged        : function(value) { this.sortable && this.sortable.option("ghostClass", value); },
+    chosenClassChanged       : function(value) { this.sortable && this.sortable.option("chosenClass", value); },
+    ignoreChanged            : function(value) { this.sortable && this.sortable.option("ignore", value); },
+    filterChanged            : function(value) { this.sortable && this.sortable.option("filter", value); },
+    animationChanged         : function(value) { this.sortable && this.sortable.option("animation", value); },
+    dropBubbleChanged        : function(value) { this.sortable && this.sortable.option("dropBubble", value); },
+    dragoverBubbleChanged    : function(value) { this.sortable && this.sortable.option("dragoverBubble", value); },
+    dataIdAttrChanged        : function(value) { this.sortable && this.sortable.option("dataIdAttr", value); },
+    delayChanged             : function(value) { this.sortable && this.sortable.option("delay", value); },
+    forceFallbackChanged     : function(value) { this.sortable && this.sortable.option("forceFallback", value); },
+    fallbackClassChanged     : function(value) { this.sortable && this.sortable.option("fallbackClass", value); },
+    fallbackOnBodyChanged    : function(value) { this.sortable && this.sortable.option("fallbackOnBody", value); }
+  });
+</script>