--- /dev/null
+/*\r
+ * multiselect2side jQuery plugin\r
+ *\r
+ * Copyright (c) 2010 Giovanni Casassa (senamion.com - senamion.it)\r
+ *\r
+ * Dual licensed under the MIT (MIT-LICENSE.txt)\r
+ * and GPL (GPL-LICENSE.txt) licenses.\r
+ *\r
+ * http://www.senamion.com\r
+ *\r
+ */\r
+\r
+(function($) {\r
+ jQuery.fn.multiselect2side = function (o) {\r
+ o = $.extend({\r
+ selectedPosition: 'right',\r
+ moveOptions: true,\r
+ labelTop: 'Top',\r
+ labelBottom: 'Bottom',\r
+ labelUp: 'Up',\r
+ labelDown: 'Down',\r
+ labelSort: 'Sort',\r
+ labelsx: 'Available',\r
+ labeldx: 'Selected',\r
+ maxSelected: -1\r
+ }, o);\r
+\r
+ return this.each(function () {\r
+ var el = $(this);\r
+\r
+ var originalName = $(this).attr("name");\r
+ if (originalName.indexOf('[') != -1)\r
+ originalName = originalName.substring(0, originalName.indexOf('['));\r
+\r
+ var nameDx = originalName + "ms2side__dx";\r
+ var nameSx = originalName + "ms2side__sx";\r
+ var size = $(this).attr("size");\r
+ // SIZE MIN\r
+ if (size < 6) {\r
+ $(this).attr("size", "6");\r
+ size = 6;\r
+ }\r
+\r
+ // UP AND DOWN\r
+ var divUpDown =\r
+ "<div class='ms2side__updown'>" +\r
+ "<p class='SelSort' title='Sort'>" + o.labelSort + "</p>" +\r
+ "<p class='MoveTop' title='Move on top selected option'>" + o.labelTop + "</p>" +\r
+ "<p class='MoveUp' title='Move up selected option'>" + o.labelUp + "</p>" +\r
+ "<p class='MoveDown' title='Move down selected option'>" + o.labelDown + "</p>" +\r
+ "<p class='MoveBottom' title='Move on bottom selected option'>" + o.labelBottom + "</p>" +\r
+ "</div>";\r
+\r
+ // CREATE NEW ELEMENT (AND HIDE IT) AFTER THE HIDDED ORGINAL SELECT\r
+ var htmlToAdd =\r
+ "<div class='ms2side__div'>" +\r
+ ((o.selectedPosition != 'right' && o.moveOptions) ? divUpDown : "") +\r
+ "<div class='ms2side__select'>" +\r
+ (o.labelsx ? ("<div class='ms2side__header'>" + o.labelsx + "</div>") : "") +\r
+ "<select title='" + o.labelsx + "' name='" + nameSx + "' id='" + nameSx + "' size='" + size + "' multiple='multiple' ></select>" +\r
+ "</div>" +\r
+ "<div class='ms2side__options'>" +\r
+ ((o.selectedPosition == 'right')\r
+ ?\r
+ ("<p class='AddOne' title='Add Selected'>›</p>" +\r
+ "<p class='AddAll' title='Add All'>»</p>" +\r
+ "<p class='RemoveOne' title='Remove Selected'>‹</p>" +\r
+ "<p class='RemoveAll' title='Remove All'>«</p>")\r
+ :\r
+ ("<p class='AddOne' title='Add Selected'>‹</p>" +\r
+ "<p class='AddAll' title='Add All'>«</p>" +\r
+ "<p class='RemoveOne' title='Remove Selected'>›</p>" +\r
+ "<p class='RemoveAll' title='Remove All'>»</p>")\r
+ ) +\r
+ "</div>" +\r
+ "<div class='ms2side__select'>" +\r
+ (o.labeldx ? ("<div class='ms2side__header'>" + o.labeldx + "</div>") : "") +\r
+ "<select title='" + o.labeldx + "' name='" + nameDx + "' id='" + nameDx + "' size='" + size + "' multiple='multiple' ></select>" +\r
+ "</div>" +\r
+ ((o.selectedPosition == 'right' && o.moveOptions) ? divUpDown : "") +\r
+ "</div>";\r
+ $(this).after(htmlToAdd).hide();\r
+\r
+ // ELEMENTS\r
+ var allSel = $(this).next().find("select");\r
+ var leftSel = (o.selectedPosition == 'right') ? allSel.eq(0) : allSel.eq(1);\r
+ var rightSel = (o.selectedPosition == 'right') ? allSel.eq(1) : allSel.eq(0);\r
+ // HEIGHT DIV\r
+ var heightDiv = $(".ms2side__select").eq(0).height();\r
+\r
+ // CENTER MOVE OPTIONS AND UPDOWN OPTIONS\r
+ $(this).next().find('.ms2side__options, .ms2side__updown').each(function(){\r
+ var top = ((heightDiv/2) - ($(this).height()/2));\r
+ if (top > 0)\r
+ $(this).css('padding-top', top + 'px' );\r
+ });\r
+\r
+ // MOVE SELECTED OPTION TO RIGHT, NOT SELECTED TO LEFT\r
+ $(this).find("option:selected").clone().appendTo(rightSel);\r
+ $(this).find("option:not(:selected)").clone().appendTo(leftSel);\r
+\r
+ // SELECT FIRST LEFT ITEM\r
+ if (!($.browser.msie && $.browser.version == '6.0'))\r
+ leftSel.find("option").eq(0).attr("selected", true);\r
+\r
+ // ON CHANGE REFRESH ALL BUTTON STATUS\r
+ allSel.change(function() {\r
+ var div = $(this).parent().parent();\r
+ var selectSx = leftSel.children();\r
+ var selectDx = rightSel.children();\r
+ var selectedSx = leftSel.find("option:selected");\r
+ var selectedDx = rightSel.find("option:selected");\r
+\r
+ if (selectedSx.size() == 0 || (o.maxSelected >= 0 && (selectedSx.size() + selectDx.size()) > o.maxSelected))\r
+ div.find(".AddOne").addClass('ms2side__hide');\r
+ else\r
+ div.find(".AddOne").removeClass('ms2side__hide');\r
+\r
+ // FIRST HIDE ALL\r
+ div.find(".RemoveOne, .MoveUp, .MoveDown, .MoveTop, .MoveBottom, .SelSort").addClass('ms2side__hide');\r
+ if (selectDx.size() > 1)\r
+ div.find(".SelSort").removeClass('ms2side__hide');\r
+ if (selectedDx.size() > 0) {\r
+ div.find(".RemoveOne").removeClass('ms2side__hide');\r
+ // ALL SELECTED - NO MOVE\r
+ if (selectedDx.size() < selectDx.size()) { // FOR NOW (JOE) && selectedDx.size() == 1\r
+ if (selectedDx.val() != selectDx.val()) // FIRST OPTION, NO UP AND TOP BUTTON\r
+ div.find(".MoveUp, .MoveTop").removeClass('ms2side__hide');\r
+ if (selectedDx.last().val() != selectDx.last().val()) // LAST OPTION, NO DOWN AND BOTTOM BUTTON\r
+ div.find(".MoveDown, .MoveBottom").removeClass('ms2side__hide');\r
+ }\r
+ }\r
+\r
+ if (selectSx.size() == 0 || (o.maxSelected >= 0 && selectSx.size() >= o.maxSelected))\r
+ div.find(".AddAll").addClass('ms2side__hide');\r
+ else\r
+ div.find(".AddAll").removeClass('ms2side__hide');\r
+\r
+ if (selectDx.size() == 0)\r
+ div.find(".RemoveAll").addClass('ms2side__hide');\r
+ else\r
+ div.find(".RemoveAll").removeClass('ms2side__hide');\r
+ });\r
+\r
+ // DOUBLE CLICK ON LEFT SELECT OPTION\r
+ leftSel.dblclick(function () {\r
+ $(this).find("option:selected").each(function(i, selected){\r
+\r
+ if (o.maxSelected < 0 || rightSel.children().size() < o.maxSelected) {\r
+ $(this).remove().appendTo(rightSel);\r
+ el.find("[value=" + $(selected).val() + "]").attr("selected", true).remove().appendTo(el);\r
+ }\r
+ });\r
+ $(this).trigger('change');\r
+ });\r
+\r
+ // DOUBLE CLICK ON RIGHT SELECT OPTION\r
+ rightSel.dblclick(function () {\r
+ $(this).find("option:selected").each(function(i, selected){\r
+ $(this).remove().appendTo(leftSel);\r
+ el.find("[value=" + $(selected).val() + "]").attr("selected", false).remove().appendTo(el);\r
+ });\r
+ $(this).trigger('change');\r
+ });\r
+\r
+ // CLICK ON OPTION\r
+ $(this).next().find('.ms2side__options').children().click(function () {\r
+ if (!$(this).hasClass("ms2side__hide")) {\r
+ if ($(this).hasClass("AddOne")) {\r
+ leftSel.find("option:selected").each(function(i, selected){\r
+ $(this).remove().appendTo(rightSel);\r
+ el.find("[value=" + $(selected).val() + "]").attr("selected", true).remove().appendTo(el);\r
+ });\r
+\r
+ } else if ($(this).hasClass("AddAll")) { // ALL SELECTED\r
+ leftSel.children().appendTo(rightSel);\r
+ leftSel.children().remove();\r
+ el.find('option').attr("selected", true);\r
+ // el.children().attr("selected", true); -- PROBLEM WITH OPTGROUP\r
+\r
+ } else if ($(this).hasClass("RemoveOne")) {\r
+ rightSel.find("option:selected").each(function(i, selected){\r
+ $(this).remove().appendTo(leftSel);\r
+ el.find("[value=" + $(selected).val() + "]").attr("selected", false).remove().appendTo(el);\r
+ });\r
+\r
+ } else if ($(this).hasClass("RemoveAll")) { // ALL REMOVED\r
+ rightSel.children().appendTo(leftSel);\r
+ rightSel.children().remove();\r
+ el.find('option').attr("selected", false);\r
+ //el.children().attr("selected", false); -- PROBLEM WITH OPTGROUP\r
+ }\r
+ }\r
+\r
+ leftSel.trigger('change');\r
+ });\r
+\r
+ // CLICK ON UP - DOWN\r
+ $(this).next().find('.ms2side__updown').children().click(function () {\r
+ var selectedDx = rightSel.find("option:selected");\r
+ var selectDx = rightSel.find("option");\r
+\r
+ if (!$(this).hasClass("ms2side__hide")) {\r
+ if ($(this).hasClass("SelSort")) {\r
+ // SORT SELECTED ELEMENT\r
+ selectDx.sort(function(a, b) {\r
+ var compA = $(a).text().toUpperCase();\r
+ var compB = $(b).text().toUpperCase();\r
+ return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;\r
+ })\r
+ // FIRST REMOVE FROM ORIGINAL SELECT\r
+ el.find("option:selected").remove();\r
+ // AFTER ADD ON ORIGINAL AND RIGHT SELECT\r
+ selectDx.each(function() {\r
+ rightSel.append($(this).clone().attr("selected", true));\r
+ el.append($(this).attr("selected", true));\r
+ });\r
+\r
+ } else if ($(this).hasClass("MoveUp")) {\r
+ var prev = selectedDx.first().prev();\r
+ var hPrev = el.find("[value=" + prev.val() + "]");\r
+\r
+ selectedDx.each(function() {\r
+ $(this).insertBefore(prev);\r
+ el.find("[value=" + $(this).val() + "]").insertBefore(hPrev); // HIDDEN SELECT\r
+ });\r
+\r
+ } else if ($(this).hasClass("MoveDown")) {\r
+ var next = selectedDx.last().next();\r
+ var hNext = el.find("[value=" + next.val() + "]");\r
+\r
+ selectedDx.each(function() {\r
+ $(this).insertAfter(next);\r
+ el.find("[value=" + $(this).val() + "]").insertAfter(hNext); // HIDDEN SELECT\r
+ });\r
+\r
+ } else if ($(this).hasClass("MoveTop")) {\r
+ var first = selectDx.first();\r
+ var hFirst = el.find("[value=" + first.val() + "]");\r
+\r
+ selectedDx.each(function() {\r
+ $(this).insertBefore(first);\r
+ el.find("[value=" + $(this).val() + "]").insertBefore(hFirst); // HIDDEN SELECT\r
+ });\r
+\r
+ } else if ($(this).hasClass("MoveBottom")) {\r
+ var last = selectDx.last();\r
+ var hLast = el.find("[value=" + last.val() + "]");\r
+\r
+ selectedDx.each(function() {\r
+ last = $(this).insertAfter(last); // WITH last = SAME POSITION OF SELECTED OPTION AFTER MOVE\r
+ hLast = el.find("[value=" + $(this).val() + "]").insertAfter(hLast); // HIDDEN SELECT\r
+ });\r
+ }\r
+ }\r
+\r
+ leftSel.trigger('change');\r
+ });\r
+\r
+ // HOVER ON OPTION\r
+ $(this).next().find('.ms2side__options, .ms2side__updown').children().hover(\r
+ function () {\r
+ $(this).addClass('ms2side_hover');\r
+ },\r
+ function () {\r
+ $(this).removeClass('ms2side_hover');\r
+ }\r
+ );\r
+\r
+ // UPDATE BUTTON ON START\r
+ leftSel.trigger('change');\r
+ // SHOW WHEN ALL READY\r
+ $(this).next().show();\r
+ });\r
+ };\r
+})(jQuery);\r