mirror of https://github.com/RubaXa/Sortable.git
Lebedev Konstantin
9 years ago
2 changed files with 6 additions and 184 deletions
@ -1,171 +0,0 @@ |
|||||||
<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> |
|
||||||
Loading…
Reference in new issue