Created
May 11, 2011 19:05
-
-
Save brianjmiller/967082 to your computer and use it in GitHub Desktop.
dumb version of Y.Sortable with drop handling
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
YUI.add( | |
"custom-manage-parcel_manager", | |
function(Y) { | |
var PACKAGE_TEMPLATE = '<li>{variant_sku} ({label})<input type="hidden" name="package-{id}" value="{parcel_id}" /></li>'; | |
var Clazz = Y.namespace("Bikes.Manage").ParcelManager = Y.Base.create( | |
"custom_manage_parcel_manager", | |
Y.IC.RendererBase, | |
[], | |
{ | |
_button_add: null, | |
_button_reset: null, | |
//initializer: function (config) { | |
//Y.log(Clazz.NAME + "::initializer"); | |
//Y.log(Clazz.NAME + "::initializer - packages: " + Y.dump(config.packages)); | |
//}, | |
destructor: function () { | |
Y.log(Clazz.NAME + "::destructor"); | |
this._button_add = null; | |
this._button_reset = null; | |
}, | |
renderUI: function () { | |
Y.log(Clazz.NAME + "::renderUI"); | |
Clazz.superclass.renderUI.apply(this, arguments); | |
this._grid_node = Y.Node.create('<div class="yui3-g mini" style="padding-left: 5px;"></div>'); | |
this._grid_node.generateID(); | |
this._src_node = Y.Node.create('<div class="yui3-u" style="padding-top: 2px;">Packages</div>'); | |
this._src_list_node = Y.Node.create('<ul></ul>'); | |
this._parcels_node = Y.Node.create('<div class="yui3-u">Parcels</div>'); | |
this._parcels_container_node = Y.Node.create('<div></div>'); | |
this._src_node.addClass( this.getClassName("packages") ); | |
this._src_list_node.addClass( this.getClassName("package_list") ); | |
this._parcels_node.addClass( this.getClassName("parcels") ); | |
this._parcels_container_node.addClass( this.getClassName("parcels", "container") ); | |
this._grid_node.append(this._src_node); | |
this._grid_node.append(this._parcels_node); | |
this._src_list_node.generateID(); | |
this._src_node.append(this._src_list_node); | |
this._button_add = Y.Node.create('<button class="mini">+</button>'); | |
this._button_add.on( | |
"click", | |
function (e) { | |
e.preventDefault(); | |
this.addParcel(); | |
}, | |
this | |
); | |
this._button_reset = Y.Node.create('<button class="mini">Reset</button>'); | |
this._button_reset.on( | |
"click", | |
function (e) { | |
e.preventDefault(); | |
this.syncUI(); | |
}, | |
this | |
); | |
this._parcels_node.append(this._button_add); | |
this._parcels_node.append(this._button_reset); | |
this._parcels_node.append(this._parcels_container_node); | |
this.get("contentBox").append(this._grid_node); | |
}, | |
bindUI: function () { | |
Y.log(Clazz.NAME + "::bindUI"); | |
Clazz.superclass.bindUI.apply(this, arguments); | |
this._bindPackageList(this._src_list_node); | |
}, | |
syncUI: function () { | |
Y.log(Clazz.NAME + "::syncUI"); | |
Clazz.superclass.syncUI.apply(this, arguments); | |
this._parcels_container_node.setContent(""); | |
this._src_list_node.setContent(""); | |
var alo = false; | |
Y.each( | |
this.get("packages"), | |
function (package, i, a) { | |
Y.log(Clazz.NAME + "::syncUI - each package: " + package.id); | |
if (package.is_combinable) { | |
package.parcel_id = ""; | |
var package_node = Y.Node.create(Y.substitute(PACKAGE_TEMPLATE, package)); | |
package_node.addClass("movable"); | |
this._src_list_node.append(package_node); | |
} | |
else { | |
this.addParcel( [ package ] ); | |
alo = true; | |
} | |
}, | |
this | |
); | |
if (! alo) { | |
this.addParcel(); | |
} | |
}, | |
addParcel: function (packages) { | |
Y.log(Clazz.NAME + "::addParcel"); | |
var parcel_node = Y.Node.create('<ul></ul>'); | |
var p_id = parcel_node.generateID(); | |
parcel_node.addClass( this.getClassName("package_list") ); | |
Y.each( | |
packages, | |
function (package) { | |
Y.log(Clazz.NAME + "::addParcel - each package"); | |
package.parcel_id = p_id; | |
var package_node = Y.Node.create(Y.substitute(PACKAGE_TEMPLATE, package)); | |
parcel_node.append(package_node); | |
if (package.is_combinable) { | |
package_node.addClass("movable"); | |
} | |
else { | |
package_node.addClass("immovable"); | |
} | |
}, | |
this | |
); | |
this._parcels_container_node.append(parcel_node); | |
this._bindPackageList(parcel_node); | |
}, | |
_bindPackageList: function (node) { | |
Y.log(Clazz.NAME + "::_bindPackageList"); | |
var grid_id = this._grid_node.get("id"); | |
var delegate = new Y.DD.Delegate ( | |
{ | |
container: node, | |
nodes: 'li.movable', | |
target: false, | |
dragConfig: { | |
groups: [ grid_id ] | |
} | |
} | |
); | |
delegate.dd.plug( | |
Y.Plugin.DDConstrained, | |
{ | |
constrain2node: this._grid_node, | |
} | |
); | |
delegate.dd.plug( | |
Y.Plugin.DDProxy, | |
{ | |
moveOnEnd: false, | |
cloneNode: true | |
} | |
); | |
delegate.on( | |
{ | |
'drag:start': Y.bind(this._onDragStart, delegate), | |
'drag:enter': Y.bind(this._onDragEnter, delegate), | |
'drag:drophit': Y.bind(this._onDragDropHit, delegate), | |
'drag:dropmiss': Y.bind(this._onDragDropMiss, delegate) | |
} | |
); | |
var src_drop = node.plug( | |
Y.Plugin.Drop, | |
{ | |
groups: [ grid_id ] | |
} | |
); | |
}, | |
_onDragStart: function (e) { | |
//Y.log(Clazz.NAME + "::_onDragStart"); | |
//Y.log(Clazz.NAME + "::_onDragStart - delegate: " + delegate); | |
//Y.log(Clazz.NAME + "::_onDragStart - delegate - currentNode: " + delegate.get("currentNode")); | |
this.get("currentNode").setStyle("zIndex", "999"); | |
this.get("currentNode").setStyle("opacity", ".1") | |
}, | |
_onDragEnter: function (e) { | |
//Y.log(Clazz.NAME + "::_onDragEnter"); | |
//Y.log(Clazz.NAME + "::_onDragEnter - e.drag: " + e.drag); | |
//Y.log(Clazz.NAME + "::_onDragEnter - e.drop: " + e.drop); | |
e.drop.get("node").append( this.get("currentNode") ); | |
var parcel_id = e.drop.get("node").get("id"); | |
this.get("currentNode").one("input").set("value", parcel_id); | |
}, | |
_onDragDropHit: function (e) { | |
//Y.log(Clazz.NAME + "::_onDragDropHit"); | |
//Y.log(Clazz.NAME + "::_onDragDropHit - e.drag: " + e.drag); | |
//Y.log(Clazz.NAME + "::_onDragDropHit - e.drop: " + e.drop); | |
this.get("currentNode").remove(); | |
e.drop.get("node").append( e.drag.get("node") ); | |
e.drag.get("node").setStyle("opacity", "1"); | |
e.drag.get("node").setStyle("zIndex", ""); | |
}, | |
_onDragDropMiss: function (e) { | |
//Y.log(Clazz.NAME + "::_onDragDropMiss"); | |
//Y.log(Clazz.NAME + "::_onDragDropMiss - e.drag: " + e.drag); | |
//Y.log(Clazz.NAME + "::_onDragDropMiss - e.drop: " + e.drop); | |
this.get("currentNode").setStyle("opacity", "1"); | |
this.get("currentNode").setStyle("zIndex", ""); | |
} | |
}, | |
{ | |
ATTRS: { | |
packages: { | |
value: null | |
} | |
} | |
} | |
); | |
Y.IC.Renderer.registerConstructor('Bikes.Manage.ParcelManager', Clazz.prototype.constructor); | |
}, | |
"@VERSION@", | |
{ | |
requires: [ | |
"custom-manage-parcel_manager-css", | |
"ic-renderer-base", | |
"dd-delegate", | |
"dd-drop-plugin", | |
"dd-constrain" | |
] | |
} | |
); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment