Skip to content

Instantly share code, notes, and snippets.

@superscott
Created February 27, 2014 00:03
Show Gist options
  • Save superscott/9241521 to your computer and use it in GitHub Desktop.
Save superscott/9241521 to your computer and use it in GitHub Desktop.
js
(function(b, k, l, h) {
var i = function(a, b) {
arguments.length && this._init(a, b)
}, j = 0;
i.prototype = {
defaults: {
mainClass: "pickList",
listContainerClass: "pickList_listContainer",
sourceListContainerClass: "pickList_sourceListContainer",
controlsContainerClass: "pickList_controlsContainer",
targetListContainerClass: "pickList_targetListContainer",
listClass: "pickList_list",
sourceListClass: "pickList_sourceList",
targetListClass: "pickList_targetList",
listItemClass: "pickList_listItem",
selectedListItemClass: "pickList_selectedListItem",
filterContainerClass: "pickList_filter",
sourceFilterClass: "pickList_sourceFilter",
targetFilterClass: "pickList_targetFilter",
addAllClass: "pickList_addAll",
addClass: "pickList_add",
removeAllClass: "pickList_removeAll",
removeClass: "pickList_remove",
addAllLabel: ">&gt",
addLabel: ">",
removeAllLabel: "<<",
removeLabel: "<",
sourceListLabel: "Available",
targetListLabel: "Selected",
listLabelClass: "pickList_listLabel",
sourceListLabelClass: "pickList_sourceListLabel",
targetListLabelClass: "pickList_targetListLabel",
enableCounters: !0,
enableFilters: !0,
sortList: !0,
guidPrefix: "pl"
},
_init: function(a, c) {
this.element = b(a);
this.options = b.extend({}, this.defaults, c, this.element.data());
this._itemDictionary = {};
this._buildPickList();
this._refresh();
},
_buildPickList: function() {
this.element.attr("multiple") || this.element.attr("multiple", !0).html(this.element.html());
this._pickList = b("<div></div>").addClass(this.options.mainClass).append(this._buildList("source")).append(this._buildControls()).append(this._buildList("target"));
this._populateLists();
this._pickList.insertBefore(this.element.hide());
},
_buildList: function(a) {
var c = b("<div></div>").addClass(this.options.listContainerClass).addClass(this.options[a + "ListContainerClass"]);
this[a + "Label"] = b("<div></div>").text(this.options[a + "ListLabel"]).addClass(this.options.listLabelClass).addClass(this.options[a + "ListLabelClass"]).append(b("<span></span>").toggle(this.options.showCounters));
this[a + "List"] = b("<ul></ul>").addClass(this.options.listClass).addClass(this.options[a +
"ListClass"]).delegate("li", "click", {
pickList: this
}, this._changeHandler).css({
"-moz-user-select": "none",
"-webkit-user-select": "none",
"user-select": "none",
"-ms-user-select": "none"
}).each(function() {
this.onselectstart = function() {
return !1;
};
});
b("<div></div>").append(this[a + "Label"]).append(this[a + "List"]).appendTo(c);
a = b("<div></div>", {
"class": this.options.filterContainerClass,
css: {
display: "none"
}
}).addClass(this.options[a + "FilterClass"]).append(b('<input type="text">')).insertAfter(this[a + "Label"]);
this.options.enableFilters && a.find('input[type="text"]').on("keyup", b.proxy(this._filterHandler, this)).end().show();
return c;
},
_buildControls: function() {
this.controls = b("<div></div>").addClass(this.options.controlsContainerClass);
this.addAllButton = b('<button class="btn"></button>').on("click", b.proxy(this._addAllHandler, this)).html(this.options.addAllLabel).addClass(this.options.addAllClass);
this.addButton = b('<button class="btn"></button>').on("click", b.proxy(this._addHandler, this)).html(this.options.addLabel).addClass(this.options.addClass);
this.removeButton = b('<button class="btn"></button>').on("click", b.proxy(this._removeHandler, this)).html(this.options.removeLabel).addClass(this.options.removeClass);
this.removeAllButton = b('<button class="btn"></button>').on("click", b.proxy(this._removeAllHandler, this)).html(this.options.removeAllLabel).addClass(this.options.removeAllClass);
this.controls.append(this.addAllButton).append(this.addButton).append(this.removeButton).append(this.removeAllButton);
return this.controls;
},
_populateLists: function() {
var a = this,
c = 0 >= a.element[0].selectedIndex,
e = a._generateRandomId();
a.element.children().each(function() {
var d = b(this),
g = d.text(),
f = e + "_" + b(this).index(),
g = b("<li></li>").text(g).attr("id", f).addClass(a.options.listItemClass);
a._itemDictionary[f] = d;
c || !d.is(":selected") ? a.sourceList.append(g) : a.targetList.append(g);
});
a.options.sortList && (a._sortItems(a.sourceList), a._sortItems(a.targetList));
},
_addItem: function(a) {
var c = this;
a.each(function(a, d) {
c.targetList.append(c._removeSelection(b(d)));
itemId = b(d).attr("id");
c._itemDictionary[itemId].attr("selected", !0);
});
c.options.sortList && (c._sortItems(c.sourceList), c._sortItems(c.targetList));
},
_removeItem: function(a) {
var c = this;
a.each(function(a, d) {
c.sourceList.append(c._removeSelection(b(d)));
itemId = b(d).attr("id");
c._itemDictionary[itemId].removeAttr("selected");
});
c.options.sortList && (c._sortItems(c.sourceList), c._sortItems(c.targetList));
},
_filterHandler: function(a) {
if (this.options.enableFilters) {
var c = this,
a = b(a.target),
e = a.val().toString().toLowerCase();
a.parent().next().children("li").show().filter(function() {
return -1 == b(this).text().toString().toLowerCase().indexOf(e)
}).each(function(a, e) {
c._removeSelection(b(e)).hide()
});
this._refresh()
}
},
_addAllHandler: function(a) {
this._addItem(this.sourceList.children(":visible"));
this._refresh();
a.preventDefault()
},
_addHandler: function(a) {
this._addItem(this.sourceList.children(".pickList_selected:visible"));
this._refresh();
a.preventDefault()
},
_removeHandler: function(a) {
this._removeItem(this.targetList.children(".pickList_selected:visible"));
this._refresh();
a.preventDefault()
},
_removeAllHandler: function(a) {
this._removeItem(this.targetList.children(":visible"));
this._refresh();
a.preventDefault()
},
_refresh: function() {
var a = this;
a.sourceList.children("li:visible").length ? a.addAllButton.removeAttr("disabled") : a.addAllButton.attr("disabled", !0);
a.targetList.children("li:visible").length ? a.removeAllButton.removeAttr("disabled") : a.removeAllButton.attr("disabled", !0);
a.sourceList.children(".pickList_selected:visible").length ? a.addButton.removeAttr("disabled") : a.addButton.attr("disabled", !0);
a.targetList.children(".pickList_selected:visible").length ? a.removeButton.removeAttr("disabled") : a.removeButton.attr("disabled", !0);
a.options.showCounters && b.each(["source", "target"], function(c, e) {
var d = a[e + "List"].children("li");
b("span", a[e + "Label"]).text(a._formatString(" - showing {0} of {1}", d.filter(":visible").length, d.length))
})
},
_sortItems: function(a) {
var c = a.children("li");
c.sort(function(a, c) {
return b(a).text().toLowerCase().localeCompare(b(c).text().toLowerCase())
});
b.each(c, function(b,
c) {
a.append(c)
})
},
_changeHandler: function(a) {
var c = a.data.pickList;
if (a.ctrlKey) c._isSelected(b(this)) ? c._removeSelection(b(this)) : (c.lastSelectedItem = b(this), c._addSelection(b(this)));
else if (a.shiftKey) {
var e = b(this).get(0),
d = c.lastSelectedItem.get(0);
b(this).index() < b(c.lastSelectedItem).index() && (a = e, e = d, d = a);
var g = !1,
f = !0;
c._clearSelections(b(this).parent());
b(this).parent().children(":visible").each(function() {
b(this).get(0) == d && (g = !0);
g && f && c._addSelection(b(this));
b(this).get(0) == e && (f = !1)
})
} else c.lastSelectedItem = b(this), c._clearSelections(b(this).parent()), c._addSelection(b(this));
c._refresh()
},
_isSelected: function(a) {
return a.hasClass("pickList_selected")
},
_addSelection: function(a) {
return a.addClass("pickList_selected").addClass(this.options.selectedListItemClass)
},
_removeSelection: function(a) {
return a.removeClass("pickList_selected").removeClass(this.options.selectedListItemClass)
},
_clearSelections: function(a) {
var c = this;
a.children().each(function() {
c._removeSelection(b(this))
})
},
_generateRandomId: function() {
var a = (new Date).getTime().toString(32),
b;
for (b = 0; 5 > b; b++) a += Math.floor(65535 * Math.random()).toString(32);
return this.options.guidPrefix + a + (j++).toString(32)
},
_formatString: function(a) {
var b = [].splice.call(arguments, 1);
return a.replace(/{(\d+)}/g, function(a, d) {
return "undefined" != typeof b[d] ? b[d] : a
})
},
option: function(a, c) {
if (0 === arguments.length) return b.extend({}, this.options);
if ("string" === typeof a) {
if (c === h) return this.options[a];
this.options[a] = c
}
return this
},
destroy: function() {
this.pickList.remove();
this.element.show()
}
};
b.fn.picklist = function(a) {
var c = "string" === typeof a,
e = Array.prototype.slice.call(arguments, 1),
d = this;
if (c && "_" === a.charAt(0)) return d;
c ? this.each(function() {
var c = b.data(this, "pickList"),
f = c && b.isFunction(c[a]) ? c[a].apply(c, e) : c;
if (f !== c && f !== h) return d = f, !1
}) : this.each(function() {
b.data(this, "pickList") || b.data(this, "pickList", new i(this, a))
});
return d
};
b(function() {
b('[data-provide="picklist"]').each(function() {
var a = b(this);
a.picklist(a.data())
})
})
})(jQuery, window, document);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment