js

picklist.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);