Skip to content

Commit f4159a9

Browse files
RubaXaRubaXa
committed
Merge branch 'master' into dev
2 parents 1065b92 + 3955c3b commit f4159a9

File tree

4 files changed

+158
-1404
lines changed

4 files changed

+158
-1404
lines changed

‎README.md‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ Demo: http://rubaxa.github.io/Sortable/
1212
* Supports drag handles *and selectable text* (better than voidberg's html5sortable)
1313
* Smart auto-scrolling
1414
* Built using native HTML5 drag and drop API
15-
* Supports [Meteor](meteor/README.md), [AngularJS](#ng) and [React](#react)
15+
* Supports [Meteor](meteor/README.md), [AngularJS](#ng), [React](#react) and [Polymer](#polymer)
1616
* Supports any CSS library, e.g. [Bootstrap](#bs)
1717
* Simple API
1818
* [CDN](#cdn)
@@ -472,6 +472,18 @@ Other attributes are:
472472

473473
---
474474

475+
<a name="polymer"></a>
476+
### Support Polymer
477+
```html
478+
479+
<link rel="import" href="bower_components/Sortable/Sortable-js.html">
480+
481+
<sortable-js handle=".handle">
482+
<template is="dom-repeat" items={{names}}>
483+
<div>{{item}}</div>
484+
</template>
485+
<sortable-js>
486+
```
475487

476488
### Method
477489

‎Sortable.html‎

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

‎bower.json‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,13 +19,17 @@
1919
"drag",
2020
"and",
2121
"drop",
22-
"dnd"
22+
"dnd",
23+
"web-components"
2324
],
2425
"license": "MIT",
2526
"ignore": [
2627
"node_modules",
2728
"bower_components",
2829
"test",
2930
"tests"
30-
]
31+
],
32+
"dependencies": {
33+
"polymer": "Polymer/polymer#~1.1.4",
34+
}
3135
}

0 commit comments

Comments
 (0)