Skip to content

Commit 6782706

Browse files
RubaXaRubaXa
committed
v0.1.0
0 parents  commit 6782706

5 files changed

Lines changed: 240 additions & 0 deletions

File tree

‎.editorconfig‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
# editorconfig.org
2+
root = true
3+
4+
[*]
5+
indent_style = tab
6+
end_of_line = lf
7+
charset = utf-8
8+
trim_trailing_whitespace = true
9+
insert_final_newline = true
10+
11+
[*.md]
12+
trim_trailing_whitespace = false

‎.gitignore‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
node_modules
2+
mock.png
3+
.*.sw*
4+
.build*
5+
jquery.fn.*

‎README.md‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
# THIS PROJECT NEEDS A MAINTAINER.
2+
3+
---
4+
5+
polymer-sortablejs
6+
-------------------
7+
A Polymer binding to [SortableJS](https://github.com/RubaXa/Sortable/).
8+
9+
Demo: http://rubaxa.github.io/Sortable/
10+
11+
12+
<a name="polymer"></a>
13+
### Support Polymer
14+
15+
```html
16+
17+
<link rel="import" href="path/to/polymer-sortablejs/polymer-sortablejs.html"/>
18+
19+
<sortable-js handle=".handle">
20+
<template is="dom-repeat" items={{names}}>
21+
<div>{{item}}</div>
22+
</template>
23+
</sortable-js>
24+
```
25+
26+
27+
### NPM
28+
29+
`npm install polymer-sortablejs`

‎package.json‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
{
2+
"name": "polymer-sortablejs",
3+
"version": "0.1.0",
4+
"description": "A Polymer binding to SortableJS.",
5+
"main": "polymer-sortable.js",
6+
"scripts": {
7+
"test": "echo \"Error: no test specified\" && exit 1"
8+
},
9+
"repository": {
10+
"type": "git",
11+
"url": "git+https://github.com/SortableJS/polymer-sortablejs.git"
12+
},
13+
"keywords": [
14+
"polymer",
15+
"sortable"
16+
],
17+
"author": "Guten Ye <guten@guten.me>",
18+
"license": "MIT",
19+
"bugs": {
20+
"url": "https://github.com/SortableJS/polymer-sortablejs/issues"
21+
},
22+
"homepage": "https://github.com/SortableJS/polymer-sortablejs#readme"
23+
}

‎polymer-sortablejs.html‎

Lines changed: 171 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,171 @@
1+
<link rel="import" href="../polymer/polymer.html">
2+
<script src="./Sortable.js"></script>
3+
4+
<dom-module id="sortable-js">
5+
<template>
6+
<content></content>
7+
</template>
8+
</dom-module>
9+
<script>
10+
'use strict';
11+
Polymer({
12+
is: "sortable-js",
13+
14+
properties: {
15+
group : { type: String, value: function() { return Math.random(); }, observer: "groupChanged" },
16+
sort : { type: Boolean, value: true, observer: "sortChanged" },
17+
disabled : { type: Boolean, value: false, observer: "disabledChanged" },
18+
store : { type: Object, value: null, observer: "storeChanged" },
19+
handle : { type: String, value: null, observer: "handleChanged" },
20+
scrollSensitivity : { type: Number, value: 30, observer: "scrollSensitivityChanged" },
21+
scrollSpeed : { type: Number, value: 10, observer: "scrollSpeedChanged" },
22+
ghostClass : { type: String, value: "sortable-ghost", observer: "ghostClassChanged" },
23+
chosenClass : { type: String, value: "sortable-chosen", observer: "chosenClassChanged" },
24+
ignore : { type: String, value: "a, img", observer: "ignoreChanged" },
25+
filter : { type: Object, value: null, observer: "filterChanged" },
26+
animation : { type: Number, value: 0, observer: "animationChanged" },
27+
dropBubble : { type: Boolean, value: false, observer: "dropBubbleChanged" },
28+
dragoverBubble : { type: Boolean, value: false, observer: "dragoverBubbleChanged" },
29+
dataIdAttr : { type: String, value: "data-id", observer: "dataIdAttrChanged" },
30+
delay : { type: Number, value: 0, observer: "delayChanged" },
31+
forceFallback : { type: Boolean, value: false, observer: "forceFallbackChanged" },
32+
fallbackClass : { type: String, value: "sortable-fallback", observer: "fallbackClassChanged" },
33+
fallbackOnBody : { type: Boolean, value: false, observer: "fallbackOnBodyChanged" },
34+
draggable : {},
35+
scroll : {}
36+
},
37+
38+
created: function() {
39+
// override default DOM property behavior
40+
Object.defineProperties(this, {
41+
draggable: { get: function() { return this._draggable || this.getAttribute("draggable") || ">*";}, set: function(value) { this._draggable = value; this.draggableChanged(value);} },
42+
scroll: { get: function() { return this._scroll || JSON.parse(this.getAttribute("scroll") || "true"); }, set: function(value) { this._scroll = value; this.scrollChanged(value);} }
43+
});
44+
},
45+
46+
attached: function() {
47+
// Given
48+
// <sortable-js>
49+
// <template is="dom-repeat" items={{data}}>
50+
// <div>
51+
// <template is="dom-if" if="true">
52+
// <span>hello</span></template></div>
53+
// After render, it becomes
54+
// <sortable-js>
55+
// <div>
56+
// <span>hello</span>
57+
// <template is="dom-if">
58+
// <tempalte is="dom-repeat">
59+
this.initialize();
60+
61+
},
62+
63+
detached: function() {
64+
this.destroy();
65+
},
66+
67+
68+
initialize: function() {
69+
var templates = this.querySelectorAll("template[is='dom-repeat']");
70+
var template = templates[templates.length-1];
71+
72+
var options = {};
73+
Object.keys(this.properties).forEach(function(key) {
74+
options[key] = this[key];
75+
}.bind(this));
76+
77+
var _this = this;
78+
var eventCallbacks = {
79+
onUpdate: function (e) {
80+
if (template) {
81+
if(manuallyHandleUpdateEvents) {
82+
template.items.splice(e.newIndex, 0, template.items.splice(e.oldIndex, 1)[0]);
83+
} else {
84+
template.splice("items", e.newIndex, 0, template.splice("items", e.oldIndex, 1)[0]);
85+
}
86+
}
87+
_this.fire("update", e);
88+
},
89+
90+
onAdd: function(e) {
91+
if (template) {
92+
var froms = e.from.querySelectorAll("template[is='dom-repeat']");
93+
var from = froms[froms.length-1];
94+
var item = from.items[e.oldIndex];
95+
template.splice("items", e.newIndex, 0, item);
96+
}
97+
_this.fire("add", e);
98+
},
99+
100+
onRemove: function(e) {
101+
if (template) {
102+
template.splice("items", e.oldIndex, 1)[0];
103+
}
104+
_this.fire("remove", e);
105+
},
106+
107+
onChoose: function(e) {
108+
_this.fire("choose", e);
109+
},
110+
111+
onStart: function(e) {
112+
_this.fire("start", e);
113+
},
114+
115+
onEnd: function(e) {
116+
_this.fire("end", e);
117+
},
118+
119+
onSort: function(e) {
120+
_this.fire("sort", e);
121+
},
122+
123+
onFilter: function(e) {
124+
_this.fire("filter", e);
125+
},
126+
127+
onMove: function(e) {
128+
_this.fire("move", e);
129+
},
130+
131+
onClone: function(e) {
132+
_this.fire("clone", e);
133+
}
134+
};
135+
136+
Object.keys(eventCallbacks).forEach(function(name){
137+
options[name] = eventCallbacks[name];
138+
});
139+
140+
this.sortable = Sortable.create(this, options);
141+
},
142+
143+
destroy: function() {
144+
if(this.sortable) {
145+
this.sortable.destroy();
146+
}
147+
},
148+
149+
groupChanged : function(value) { this.sortable && this.sortable.option("group", value); },
150+
sortChanged : function(value) { this.sortable && this.sortable.option("sort", value); },
151+
disabledChanged : function(value) { this.sortable && this.sortable.option("disabled", value); },
152+
storeChanged : function(value) { this.sortable && this.sortable.option("store", value); },
153+
handleChanged : function(value) { this.sortable && this.sortable.option("handle", value); },
154+
scrollChanged : function(value) { this.sortable && this.sortable.option("scroll", value); },
155+
scrollSensitivityChanged : function(value) { this.sortable && this.sortable.option("scrollSensitivity", value); },
156+
scrollSpeedChanged : function(value) { this.sortable && this.sortable.option("scrollSpeed", value); },
157+
draggableChanged : function(value) { this.sortable && this.sortable.option("draggable", value); },
158+
ghostClassChanged : function(value) { this.sortable && this.sortable.option("ghostClass", value); },
159+
chosenClassChanged : function(value) { this.sortable && this.sortable.option("chosenClass", value); },
160+
ignoreChanged : function(value) { this.sortable && this.sortable.option("ignore", value); },
161+
filterChanged : function(value) { this.sortable && this.sortable.option("filter", value); },
162+
animationChanged : function(value) { this.sortable && this.sortable.option("animation", value); },
163+
dropBubbleChanged : function(value) { this.sortable && this.sortable.option("dropBubble", value); },
164+
dragoverBubbleChanged : function(value) { this.sortable && this.sortable.option("dragoverBubble", value); },
165+
dataIdAttrChanged : function(value) { this.sortable && this.sortable.option("dataIdAttr", value); },
166+
delayChanged : function(value) { this.sortable && this.sortable.option("delay", value); },
167+
forceFallbackChanged : function(value) { this.sortable && this.sortable.option("forceFallback", value); },
168+
fallbackClassChanged : function(value) { this.sortable && this.sortable.option("fallbackClass", value); },
169+
fallbackOnBodyChanged : function(value) { this.sortable && this.sortable.option("fallbackOnBody", value); }
170+
});
171+
</script>

0 commit comments

Comments
 (0)