horsensspejder-web/jquery/jquery-picklist.js

/**
 * jQuery PickList Widget
 *
 * Copyright (c) 2012-2013 Jonathon Freeman <jonathon@awnry.com>
 * Distributed under the terms of the MIT License.
 *
 * http://code.google.com/p/jquery-ui-picklist/
 */
(function($)
{
        $.widget("awnry.pickList",
        {
                widgetEventPrefix: "pickList_",

                options:
                {
                        // Container classes
                        mainClass:                  "pickList",
                        listContainerClass:         "pickList_listContainer",
                        sourceListContainerClass:   "pickList_sourceListContainer",
                        controlsContainerClass:     "pickList_controlsContainer",
                        targetListContainerClass:   "pickList_targetListContainer",
                        listClass:                  "pickList_list",
                        sourceListClass:            "pickList_sourceList",
                        targetListClass:            "pickList_targetList",
                        clearClass:                 "pickList_clear",

                        // List item classes
                        listItemClass:              "pickList_listItem",
                        richListItemClass:          "pickList_richListItem",
                        selectedListItemClass:      "pickList_selectedListItem",

                        // Control classes
                        addAllClass:                "pickList_addAll",
                        addClass:                   "pickList_add",
                        removeAllClass:             "pickList_removeAll",
                        removeClass:                "pickList_remove",

                        // Control labels
                        addAllLabel:                "&gt;&gt;",
                        addLabel:                   "&gt;",
                        removeAllLabel:             "&lt;&lt;",
                        removeLabel:                "&lt;",

                        // List labels
                        listLabelClass:             "pickList_listLabel",
                        sourceListLabel:            "Available",
                        sourceListLabelClass:       "pickList_sourceListLabel",
                        targetListLabel:            "Selected",
                        targetListLabelClass:       "pickList_targetListLabel",

                        // Sorting
                        sortItems:                  true,
                        sortAttribute:              "label",

                        // Name of custom value attribute for list items
                        listItemValueAttribute:     "data-value",

                        // Additional list items
                        items:                                          []
                },

                _create: function()
                {
                        var self = this;

                        self._buildPickList();
                        self._refresh();
                },

                _buildPickList: function()
                {
                        var self = this;

                        self._trigger("beforeBuild");

                        self.pickList = $("<div/>")
                                        .hide()
                                        .addClass(self.options.mainClass)
                                        .insertAfter(self.element)
                                        .append(self._buildSourceList())
                                        .append(self._buildControls())
                                        .append(self._buildTargetList())
                                        .append( $("<div/>").addClass(self.options.clearClass) );

                        self._populateLists();

                        self.element.hide();
                        self.pickList.show();

                        self._trigger("afterBuild");
                },

                _buildSourceList: function()
                {
                        var self = this;

                        var container = $("<div/>")
                                        .addClass(self.options.listContainerClass)
                                        .addClass(self.options.sourceListContainerClass)
                                        .css({
                                                "-moz-user-select": "none",
                                                "-webkit-user-select": "none",
                                                "user-select": "none",
                                                "-ms-user-select": "none"
                                        })
                                        .each(function()
                                        {
                                                this.onselectstart = function() { return false; };
                                        });

                        var label = $("<div/>")
                                        .text(self.options.sourceListLabel)
                                        .addClass(self.options.listLabelClass)
                                        .addClass(self.options.sourceListLabelClass);

                        self.sourceList = $("<ul/>")
                                        .addClass(self.options.listClass)
                                        .addClass(self.options.sourceListClass)
                                        .delegate("li", "click", { pickList: self }, self._changeHandler);

                        container
                                        .append(label)
                                        .append(self.sourceList);

                        self.sourceList.delegate(".pickList_listItem", "dblclick", {pickList: self}, function(e)
                        {
                                var self = e.data.pickList;
                                self._addItems( self.sourceList.children(".ui-selected") );
                        });

                        return container;
                },

                _buildTargetList: function()
                {
                        var self = this;

                        var container = $("<div/>")
                                        .addClass(self.options.listContainerClass)
                                        .addClass(self.options.targetListContainerClass)
                                        .css({
                                                "-moz-user-select": "none",
                                                "-webkit-user-select": "none",
                                                "user-select": "none",
                                                "-ms-user-select": "none"
                                        })
                                        .each(function()
                                        {
                                                this.onselectstart = function() { return false; };
                                        });

                        var label = $("<div/>")
                                        .text(self.options.targetListLabel)
                                        .addClass(self.options.listLabelClass)
                                        .addClass(self.options.targetListLabelClass);

                        self.targetList = $("<ul/>")
                                        .addClass(self.options.listClass)
                                        .addClass(self.options.targetListClass)
                                        .delegate("li", "click", { pickList: self }, self._changeHandler);

                        container
                                        .append(label)
                                        .append(self.targetList);

                        self.targetList.delegate(".pickList_listItem", "dblclick", {pickList: self}, function(e)
                        {
                                var self = e.data.pickList;
                                self._removeItems( self.targetList.children(".ui-selected") );
                        });

                        return container;
                },

                _buildControls: function()
                {
                        var self = this;

                        self.controls = $("<div/>").addClass(self.options.controlsContainerClass);

                        self.addAllButton = $("<button type='button'/>").click({pickList: self}, self._addAllHandler).html(self.options.addAllLabel).addClass(self.options.addAllClass);
                        self.addButton = $("<button type='button'/>").click({pickList: self}, self._addHandler).html(self.options.addLabel).addClass(self.options.addClass);
                        self.removeButton = $("<button type='button'/>").click({pickList: self}, self._removeHandler).html(self.options.removeLabel).addClass(self.options.removeClass);
                        self.removeAllButton = $("<button type='button'/>").click({pickList: self}, self._removeAllHandler).html(self.options.removeAllLabel).addClass(self.options.removeAllClass);

                        self.controls
                                        .append(self.addAllButton)
                                        .append(self.addButton)
                                        .append(self.removeButton)
                                        .append(self.removeAllButton);

                        return self.controls;
                },

                _populateLists: function()
                {
                        var self = this;

                        self._trigger("beforePopulate");

                        var sourceListItems = [];
                        var targetListItems = [];
                        var selectItems = self.element.children();

                        selectItems.not(":selected").each(function()
                        {
                                sourceListItems.push( self._createDoppelganger(this) );
                        });

                        selectItems.filter(":selected").each(function()
                        {
                                targetListItems.push( self._createDoppelganger(this) );
                        });

                        self.sourceList.append(sourceListItems.join("\n"));
                        self.targetList.append(targetListItems.join("\n"));
                        self.insertItems(self.options.items);

                        self._trigger("afterPopulate");
                },

                _addItems: function(items)
                {
                        var self = this;
                        
                        self._trigger("beforeAdd");

                        self.targetList.append( self._removeSelections(items) );

                        var itemIds = [];
                        items.each(function()
                        {
                                itemIds.push( self._getItemValue(this) );
                        });

                        self.element.children().filter(function()
                        {
                                return $.inArray(this.value, itemIds) != -1;
                        }).attr("selected", "selected");

                        self._refresh();

                        self._trigger("afterAdd", null, { items: items });
                        self._trigger("onChange", null, { type: "add", items: items });
                },

                _removeItems: function(items)
                {
                        var self = this;
                        
                        self._trigger("beforeRemove");

                        self.sourceList.append( self._removeSelections(items) );

                        var itemIds = [];
                        items.each(function()
                        {
                                itemIds.push( self._getItemValue(this) );
                        });

                        self.element.children().filter(function()
                        {
                                return $.inArray(this.value, itemIds) != -1;
                        }).removeAttr("selected");

                        self._refresh();

                        self._trigger("afterRemove", null, { items: items });
                        self._trigger("onChange", null, { type: "remove", items: items });
                },

                _addAllHandler: function(e)
                {
                        var self = e.data.pickList;

                        self._trigger("beforeAddAll");

                        var items = self.sourceList.children();
                        self.targetList.append( self._removeSelections(items) );

                        self.element.children().not(":selected").attr("selected", "selected");

                        self._refresh();

                        self._trigger("afterAddAll", null, { items: items });
                        self._trigger("onChange", null, { type: "addAll", items: items });
                },

                _addHandler: function(e)
                {
                        var self = e.data.pickList;
                        self._addItems(self.sourceList.children(".ui-selected"));
                },

                _removeHandler: function(e)
                {
                        var self = e.data.pickList;
                        self._removeItems(self.targetList.children(".ui-selected"));
                },

                _removeAllHandler: function(e)
                {
                        var self = e.data.pickList;

                        self._trigger("beforeRemoveAll");

                        var items = self.targetList.children();
                        self.sourceList.append( self._removeSelections(items) );

                        self.element.children().filter(":selected").removeAttr("selected");

                        self._refresh();

                        self._trigger("afterRemoveAll", null, { items: items });
                        self._trigger("onChange", null, { type: "removeAll", items: items });
                },

                _refresh: function()
                {
                        var self = this;

                        self._trigger("beforeRefresh");

                        self._refreshControls();

                        // Sort the selection lists.
                        if(self.options.sortItems)
                        {
                                self._sortItems(self.sourceList, self.options);
                                self._sortItems(self.targetList, self.options);
                        }

                        self._trigger("afterRefresh");
                },

                _refreshControls: function()
                {
                        var self = this;

                        self._trigger("beforeRefreshControls");

                        // Enable/disable the Add All button state.
                        if(self.sourceList.children().length)
                        {
                                self.addAllButton.removeAttr("disabled");
                        }
                        else
                        {
                                self.addAllButton.attr("disabled", "disabled");
                        }

                        // Enable/disable the Remove All button state.
                        if(self.targetList.children().length)
                        {
                                self.removeAllButton.removeAttr("disabled");
                        }
                        else
                        {
                                self.removeAllButton.attr("disabled", "disabled");
                        }

                        // Enable/disable the Add button state.
                        if(self.sourceList.children(".ui-selected").length)
                        {
                                self.addButton.removeAttr("disabled");
                        }
                        else
                        {
                                self.addButton.attr("disabled", "disabled");
                        }

                        // Enable/disable the Remove button state.
                        if(self.targetList.children(".ui-selected").length)
                        {
                                self.removeButton.removeAttr("disabled");
                        }
                        else
                        {
                                self.removeButton.attr("disabled", "disabled");
                        }

                        self._trigger("afterRefreshControls");
                },

                _sortItems: function(list, options)
                {
                        var items = new Array();

                        list.children().each(function()
                        {
                                items.push( $(this) );
                        });

                        items.sort(function(a, b)
                        {
                                if(a.attr(options.sortAttribute) > b.attr(options.sortAttribute))
                                {
                                        return 1;
                                }
                                else if(a.attr(options.sortAttribute) == b.attr(options.sortAttribute))
                                {
                                        return 0;
                                }
                                else
                                {
                                        return -1;
                                }
                        });

                        list.empty();

                        for(var i = 0; i < items.length; i++)
                        {
                                list.append(items[i]);
                        }
                },

                _changeHandler: function(e)
                {
                        var self = e.data.pickList;

                        if(e.ctrlKey)
                        {
                                if(self._isSelected( $(this) ))
                                {
                                        self._removeSelection( $(this) );
                                }
                                else
                                {
                                        self.lastSelectedItem = $(this);
                                        self._addSelection( $(this) );
                                }
                        }
                        else if(e.shiftKey)
                        {
                                var current = self._getItemValue(this);
                                var last = self._getItemValue(self.lastSelectedItem);

                                if($(this).index() < $(self.lastSelectedItem).index())
                                {
                                        var temp = current;
                                        current = last;
                                        last = temp;
                                }

                                var pastStart = false;
                                var beforeEnd = true;

                                self._clearSelections( $(this).parent() );

                                $(this).parent().children().each(function()
                                {
                                        if(self._getItemValue(this) == last)
                                        {
                                                pastStart = true;
                                        }

                                        if(pastStart && beforeEnd)
                                        {
                                                self._addSelection( $(this) );
                                        }

                                        if(self._getItemValue(this) == current)
                                        {
                                                beforeEnd = false;
                                        }

                                });
                        }
                        else
                        {
                                self.lastSelectedItem = $(this);
                                self._clearSelections( $(this).parent() );
                                self._addSelection( $(this) );
                        }

                        self._refreshControls();
                },

                _isSelected: function(listItem)
                {
                        return listItem.hasClass("ui-selected");
                },

                _addSelection: function(listItem)
                {
                        var self = this;

                        return listItem
                                        .addClass("ui-selected")
                                        .addClass("ui-state-highlight")
                                        .addClass(self.options.selectedListItemClass);
                },

                _removeSelection: function(listItem)
                {
                        var self = this;

                        return listItem
                                        .removeClass("ui-selected")
                                        .removeClass("ui-state-highlight")
                                        .removeClass(self.options.selectedListItemClass);
                },

                _removeSelections: function(listItems)
                {
                        var self = this;

                        listItems.each(function()
                        {
                                $(this)
                                                .removeClass("ui-selected")
                                                .removeClass("ui-state-highlight")
                                                .removeClass(self.options.selectedListItemClass);
                        });

                        return listItems;
                },

                _clearSelections: function(list)
                {
                        var self = this;

                        list.children().each(function()
                        {
                                self._removeSelection( $(this) );
                        });
                },

                _setOption: function(key, value)
                {
                        switch(key)
                        {
                                case "clear":
                                {
                                        break;
                                }
                        }

                        $.Widget.prototype._setOption.apply(this, arguments);
                },

                destroy: function()
                {
                        var self = this;

                        self._trigger("onDestroy");

                        self.pickList.remove();
                        self.element.show();

                        $.Widget.prototype.destroy.call(self);
                },

                insert: function(item)
                {
                        var self = this;

                        var list = item.selected ? self.targetList : self.sourceList;
                        var selectItem = self._createSelectItem(item);
                        var listItem = self._createListItem(item);

                        self.element.append(selectItem);
                        list.append(listItem);

                        self._trigger("onChange");

                        self._refresh();
                },

                insertItems: function(items)
                {
                        var self = this;

                        var selectItems = [];
                        var sourceItems = [];
                        var targetItems = [];

                        $(items).each(function()
                        {
                                var selectItem = self._createSelectItem(this);
                                var listItem = self._createListItem(this);

                                selectItems.push(selectItem);

                                if(this.selected)
                                {
                                        targetItems.push(listItem);
                                }
                                else
                                {
                                        sourceItems.push(listItem);
                                }
                        });

                        self.element.append(selectItems.join("\n"));
                        self.sourceList.append(sourceItems.join("\n"));
                        self.targetList.append(targetItems.join("\n"));

                        self._trigger("onChange");

                        self._refresh();
                },

                _createSelectItem: function(item)
                {
                        var selected = item.selected ? " selected='selected'" : "";
                        return "<option value='" + item.value + "'" + selected + ">" + item.label + "</option>";
                },

                _createListItem: function(item)
                {
                        var self = this;

                        if(item.element != undefined)
                        {
                                var richItemHtml = item.element.clone().wrap("<div>").parent().html();
                                item.element.hide();
                                return "<li " + self.options.listItemValueAttribute + "='" + item.value + "' label='" + item.label + "' class='" + self.options.listItemClass + " " + self.options.richListItemClass + "'>" + richItemHtml + "</li>";
                        }

                        return "<li " + self.options.listItemValueAttribute + "='" + item.value + "' label='" + item.label + "' class='" + self.options.listItemClass + "'>" + item.label + "</li>";
                },

                _createDoppelganger: function(item)
                {
                        var self = this;
                        return "<li " + self.options.listItemValueAttribute + "='" + $(item).val() + "' label='" + $(item).text() + "' class='" + self.options.listItemClass + "'>" + $(item).text() + "</li>";
                },

                _getItemValue: function(item)
                {
                        var self = this;
                        return $(item).attr(self.options.listItemValueAttribute);
                }
        });
}(jQuery));
1	/**
2	* jQuery PickList Widget
3	*
4	* Copyright (c) 2012-2013 Jonathon Freeman <jonathon@awnry.com>
5	* Distributed under the terms of the MIT License.
6	*
7	* http://code.google.com/p/jquery-ui-picklist/
8	*/
9	(function($)
10	{
11	$.widget("awnry.pickList",
12	{
13	widgetEventPrefix: "pickList_",
14
15	options:
16	{
17	// Container classes
18	mainClass: "pickList",
19	listContainerClass: "pickList_listContainer",
20	sourceListContainerClass: "pickList_sourceListContainer",
21	controlsContainerClass: "pickList_controlsContainer",
22	targetListContainerClass: "pickList_targetListContainer",
23	listClass: "pickList_list",
24	sourceListClass: "pickList_sourceList",
25	targetListClass: "pickList_targetList",
26	clearClass: "pickList_clear",
27
28	// List item classes
29	listItemClass: "pickList_listItem",
30	richListItemClass: "pickList_richListItem",
31	selectedListItemClass: "pickList_selectedListItem",
32
33	// Control classes
34	addAllClass: "pickList_addAll",
35	addClass: "pickList_add",
36	removeAllClass: "pickList_removeAll",
37	removeClass: "pickList_remove",
38
39	// Control labels
40	addAllLabel: ">>",
41	addLabel: ">",
42	removeAllLabel: "<<",
43	removeLabel: "<",
44
45	// List labels
46	listLabelClass: "pickList_listLabel",
47	sourceListLabel: "Available",
48	sourceListLabelClass: "pickList_sourceListLabel",
49	targetListLabel: "Selected",
50	targetListLabelClass: "pickList_targetListLabel",
51
52	// Sorting
53	sortItems: true,
54	sortAttribute: "label",
55
56	// Name of custom value attribute for list items
57	listItemValueAttribute: "data-value",
58
59	// Additional list items
60	items: []
61	},
62
63	_create: function()
64	{
65	var self = this;
66
67	self._buildPickList();
68	self._refresh();
69	},
70
71	_buildPickList: function()
72	{
73	var self = this;
74
75	self._trigger("beforeBuild");
76
77	self.pickList = $("<div/>")
78	.hide()
79	.addClass(self.options.mainClass)
80	.insertAfter(self.element)
81	.append(self._buildSourceList())
82	.append(self._buildControls())
83	.append(self._buildTargetList())
84	.append( $("<div/>").addClass(self.options.clearClass) );
85
86	self._populateLists();
87
88	self.element.hide();
89	self.pickList.show();
90
91	self._trigger("afterBuild");
92	},
93
94	_buildSourceList: function()
95	{
96	var self = this;
97
98	var container = $("<div/>")
99	.addClass(self.options.listContainerClass)
100	.addClass(self.options.sourceListContainerClass)
101	.css({
102	"-moz-user-select": "none",
103	"-webkit-user-select": "none",
104	"user-select": "none",
105	"-ms-user-select": "none"
106	})
107	.each(function()
108	{
109	this.onselectstart = function() { return false; };
110	});
111
112	var label = $("<div/>")
113	.text(self.options.sourceListLabel)
114	.addClass(self.options.listLabelClass)
115	.addClass(self.options.sourceListLabelClass);
116
117	self.sourceList = $("<ul/>")
118	.addClass(self.options.listClass)
119	.addClass(self.options.sourceListClass)
120	.delegate("li", "click", { pickList: self }, self._changeHandler);
121
122	container
123	.append(label)
124	.append(self.sourceList);
125
126	self.sourceList.delegate(".pickList_listItem", "dblclick", {pickList: self}, function(e)
127	{
128	var self = e.data.pickList;
129	self._addItems( self.sourceList.children(".ui-selected") );
130	});
131
132	return container;
133	},
134
135	_buildTargetList: function()
136	{
137	var self = this;
138
139	var container = $("<div/>")
140	.addClass(self.options.listContainerClass)
141	.addClass(self.options.targetListContainerClass)
142	.css({
143	"-moz-user-select": "none",
144	"-webkit-user-select": "none",
145	"user-select": "none",
146	"-ms-user-select": "none"
147	})
148	.each(function()
149	{
150	this.onselectstart = function() { return false; };
151	});
152
153	var label = $("<div/>")
154	.text(self.options.targetListLabel)
155	.addClass(self.options.listLabelClass)
156	.addClass(self.options.targetListLabelClass);
157
158	self.targetList = $("<ul/>")
159	.addClass(self.options.listClass)
160	.addClass(self.options.targetListClass)
161	.delegate("li", "click", { pickList: self }, self._changeHandler);
162
163	container
164	.append(label)
165	.append(self.targetList);
166
167	self.targetList.delegate(".pickList_listItem", "dblclick", {pickList: self}, function(e)
168	{
169	var self = e.data.pickList;
170	self._removeItems( self.targetList.children(".ui-selected") );
171	});
172
173	return container;
174	},
175
176	_buildControls: function()
177	{
178	var self = this;
179
180	self.controls = $("<div/>").addClass(self.options.controlsContainerClass);
181
182	self.addAllButton = $("<button type='button'/>").click({pickList: self}, self._addAllHandler).html(self.options.addAllLabel).addClass(self.options.addAllClass);
183	self.addButton = $("<button type='button'/>").click({pickList: self}, self._addHandler).html(self.options.addLabel).addClass(self.options.addClass);
184	self.removeButton = $("<button type='button'/>").click({pickList: self}, self._removeHandler).html(self.options.removeLabel).addClass(self.options.removeClass);
185	self.removeAllButton = $("<button type='button'/>").click({pickList: self}, self._removeAllHandler).html(self.options.removeAllLabel).addClass(self.options.removeAllClass);
186
187	self.controls
188	.append(self.addAllButton)
189	.append(self.addButton)
190	.append(self.removeButton)
191	.append(self.removeAllButton);
192
193	return self.controls;
194	},
195
196	_populateLists: function()
197	{
198	var self = this;
199
200	self._trigger("beforePopulate");
201
202	var sourceListItems = [];
203	var targetListItems = [];
204	var selectItems = self.element.children();
205
206	selectItems.not(":selected").each(function()
207	{
208	sourceListItems.push( self._createDoppelganger(this) );
209	});
210
211	selectItems.filter(":selected").each(function()
212	{
213	targetListItems.push( self._createDoppelganger(this) );
214	});
215
216	self.sourceList.append(sourceListItems.join("\n"));
217	self.targetList.append(targetListItems.join("\n"));
218	self.insertItems(self.options.items);
219
220	self._trigger("afterPopulate");
221	},
222
223	_addItems: function(items)
224	{
225	var self = this;
226
227	self._trigger("beforeAdd");
228
229	self.targetList.append( self._removeSelections(items) );
230
231	var itemIds = [];
232	items.each(function()
233	{
234	itemIds.push( self._getItemValue(this) );
235	});
236
237	self.element.children().filter(function()
238	{
239	return $.inArray(this.value, itemIds) != -1;
240	}).attr("selected", "selected");
241
242	self._refresh();
243
244	self._trigger("afterAdd", null, { items: items });
245	self._trigger("onChange", null, { type: "add", items: items });
246	},
247
248	_removeItems: function(items)
249	{
250	var self = this;
251
252	self._trigger("beforeRemove");
253
254	self.sourceList.append( self._removeSelections(items) );
255
256	var itemIds = [];
257	items.each(function()
258	{
259	itemIds.push( self._getItemValue(this) );
260	});
261
262	self.element.children().filter(function()
263	{
264	return $.inArray(this.value, itemIds) != -1;
265	}).removeAttr("selected");
266
267	self._refresh();
268
269	self._trigger("afterRemove", null, { items: items });
270	self._trigger("onChange", null, { type: "remove", items: items });
271	},
272
273	_addAllHandler: function(e)
274	{
275	var self = e.data.pickList;
276
277	self._trigger("beforeAddAll");
278
279	var items = self.sourceList.children();
280	self.targetList.append( self._removeSelections(items) );
281
282	self.element.children().not(":selected").attr("selected", "selected");
283
284	self._refresh();
285
286	self._trigger("afterAddAll", null, { items: items });
287	self._trigger("onChange", null, { type: "addAll", items: items });
288	},
289
290	_addHandler: function(e)
291	{
292	var self = e.data.pickList;
293	self._addItems(self.sourceList.children(".ui-selected"));
294	},
295
296	_removeHandler: function(e)
297	{
298	var self = e.data.pickList;
299	self._removeItems(self.targetList.children(".ui-selected"));
300	},
301
302	_removeAllHandler: function(e)
303	{
304	var self = e.data.pickList;
305
306	self._trigger("beforeRemoveAll");
307
308	var items = self.targetList.children();
309	self.sourceList.append( self._removeSelections(items) );
310
311	self.element.children().filter(":selected").removeAttr("selected");
312
313	self._refresh();
314
315	self._trigger("afterRemoveAll", null, { items: items });
316	self._trigger("onChange", null, { type: "removeAll", items: items });
317	},
318
319	_refresh: function()
320	{
321	var self = this;
322
323	self._trigger("beforeRefresh");
324
325	self._refreshControls();
326
327	// Sort the selection lists.
328	if(self.options.sortItems)
329	{
330	self._sortItems(self.sourceList, self.options);
331	self._sortItems(self.targetList, self.options);
332	}
333
334	self._trigger("afterRefresh");
335	},
336
337	_refreshControls: function()
338	{
339	var self = this;
340
341	self._trigger("beforeRefreshControls");
342
343	// Enable/disable the Add All button state.
344	if(self.sourceList.children().length)
345	{
346	self.addAllButton.removeAttr("disabled");
347	}
348	else
349	{
350	self.addAllButton.attr("disabled", "disabled");
351	}
352
353	// Enable/disable the Remove All button state.
354	if(self.targetList.children().length)
355	{
356	self.removeAllButton.removeAttr("disabled");
357	}
358	else
359	{
360	self.removeAllButton.attr("disabled", "disabled");
361	}
362
363	// Enable/disable the Add button state.
364	if(self.sourceList.children(".ui-selected").length)
365	{
366	self.addButton.removeAttr("disabled");
367	}
368	else
369	{
370	self.addButton.attr("disabled", "disabled");
371	}
372
373	// Enable/disable the Remove button state.
374	if(self.targetList.children(".ui-selected").length)
375	{
376	self.removeButton.removeAttr("disabled");
377	}
378	else
379	{
380	self.removeButton.attr("disabled", "disabled");
381	}
382
383	self._trigger("afterRefreshControls");
384	},
385
386	_sortItems: function(list, options)
387	{
388	var items = new Array();
389
390	list.children().each(function()
391	{
392	items.push( $(this) );
393	});
394
395	items.sort(function(a, b)
396	{
397	if(a.attr(options.sortAttribute) > b.attr(options.sortAttribute))
398	{
399	return 1;
400	}
401	else if(a.attr(options.sortAttribute) == b.attr(options.sortAttribute))
402	{
403	return 0;
404	}
405	else
406	{
407	return -1;
408	}
409	});
410
411	list.empty();
412
413	for(var i = 0; i < items.length; i++)
414	{
415	list.append(items[i]);
416	}
417	},
418
419	_changeHandler: function(e)
420	{
421	var self = e.data.pickList;
422
423	if(e.ctrlKey)
424	{
425	if(self._isSelected( $(this) ))
426	{
427	self._removeSelection( $(this) );
428	}
429	else
430	{
431	self.lastSelectedItem = $(this);
432	self._addSelection( $(this) );
433	}
434	}
435	else if(e.shiftKey)
436	{
437	var current = self._getItemValue(this);
438	var last = self._getItemValue(self.lastSelectedItem);
439
440	if($(this).index() < $(self.lastSelectedItem).index())
441	{
442	var temp = current;
443	current = last;
444	last = temp;
445	}
446
447	var pastStart = false;
448	var beforeEnd = true;
449
450	self._clearSelections( $(this).parent() );
451
452	$(this).parent().children().each(function()
453	{
454	if(self._getItemValue(this) == last)
455	{
456	pastStart = true;
457	}
458
459	if(pastStart && beforeEnd)
460	{
461	self._addSelection( $(this) );
462	}
463
464	if(self._getItemValue(this) == current)
465	{
466	beforeEnd = false;
467	}
468
469	});
470	}
471	else
472	{
473	self.lastSelectedItem = $(this);
474	self._clearSelections( $(this).parent() );
475	self._addSelection( $(this) );
476	}
477
478	self._refreshControls();
479	},
480
481	_isSelected: function(listItem)
482	{
483	return listItem.hasClass("ui-selected");
484	},
485
486	_addSelection: function(listItem)
487	{
488	var self = this;
489
490	return listItem
491	.addClass("ui-selected")
492	.addClass("ui-state-highlight")
493	.addClass(self.options.selectedListItemClass);
494	},
495
496	_removeSelection: function(listItem)
497	{
498	var self = this;
499
500	return listItem
501	.removeClass("ui-selected")
502	.removeClass("ui-state-highlight")
503	.removeClass(self.options.selectedListItemClass);
504	},
505
506	_removeSelections: function(listItems)
507	{
508	var self = this;
509
510	listItems.each(function()
511	{
512	$(this)
513	.removeClass("ui-selected")
514	.removeClass("ui-state-highlight")
515	.removeClass(self.options.selectedListItemClass);
516	});
517
518	return listItems;
519	},
520
521	_clearSelections: function(list)
522	{
523	var self = this;
524
525	list.children().each(function()
526	{
527	self._removeSelection( $(this) );
528	});
529	},
530
531	_setOption: function(key, value)
532	{
533	switch(key)
534	{
535	case "clear":
536	{
537	break;
538	}
539	}
540
541	$.Widget.prototype._setOption.apply(this, arguments);
542	},
543
544	destroy: function()
545	{
546	var self = this;
547
548	self._trigger("onDestroy");
549
550	self.pickList.remove();
551	self.element.show();
552
553	$.Widget.prototype.destroy.call(self);
554	},
555
556	insert: function(item)
557	{
558	var self = this;
559
560	var list = item.selected ? self.targetList : self.sourceList;
561	var selectItem = self._createSelectItem(item);
562	var listItem = self._createListItem(item);
563
564	self.element.append(selectItem);
565	list.append(listItem);
566
567	self._trigger("onChange");
568
569	self._refresh();
570	},
571
572	insertItems: function(items)
573	{
574	var self = this;
575
576	var selectItems = [];
577	var sourceItems = [];
578	var targetItems = [];
579
580	$(items).each(function()
581	{
582	var selectItem = self._createSelectItem(this);
583	var listItem = self._createListItem(this);
584
585	selectItems.push(selectItem);
586
587	if(this.selected)
588	{
589	targetItems.push(listItem);
590	}
591	else
592	{
593	sourceItems.push(listItem);
594	}
595	});
596
597	self.element.append(selectItems.join("\n"));
598	self.sourceList.append(sourceItems.join("\n"));
599	self.targetList.append(targetItems.join("\n"));
600
601	self._trigger("onChange");
602
603	self._refresh();
604	},
605
606	_createSelectItem: function(item)
607	{
608	var selected = item.selected ? " selected='selected'" : "";
609	return "<option value='" + item.value + "'" + selected + ">" + item.label + "</option>";
610	},
611
612	_createListItem: function(item)
613	{
614	var self = this;
615
616	if(item.element != undefined)
617	{
618	var richItemHtml = item.element.clone().wrap("<div>").parent().html();
619	item.element.hide();
620	return "<li " + self.options.listItemValueAttribute + "='" + item.value + "' label='" + item.label + "' class='" + self.options.listItemClass + " " + self.options.richListItemClass + "'>" + richItemHtml + "</li>";
621	}
622
623	return "<li " + self.options.listItemValueAttribute + "='" + item.value + "' label='" + item.label + "' class='" + self.options.listItemClass + "'>" + item.label + "</li>";
624	},
625
626	_createDoppelganger: function(item)
627	{
628	var self = this;
629	return "<li " + self.options.listItemValueAttribute + "='" + $(item).val() + "' label='" + $(item).text() + "' class='" + self.options.listItemClass + "'>" + $(item).text() + "</li>";
630	},
631
632	_getItemValue: function(item)
633	{
634	var self = this;
635	return $(item).attr(self.options.listItemValueAttribute);
636	}
637	});
638	}(jQuery));