js/jquery.multiselect2side.js

   1 /*
   2  * multiselect2side jQuery plugin
   3  *
   4  * Copyright (c) 2010 Giovanni Casassa (senamion.com - senamion.it)
   5  *
   6  * Dual licensed under the MIT (MIT-LICENSE.txt)
   7  * and GPL (GPL-LICENSE.txt) licenses.
   8  *
   9  * http://www.senamion.com
  10  *
  11  */
  12
  13 (function($) {
  14   jQuery.fn.multiselect2side = function (o) {
  15     o = $.extend({
  16       selectedPosition: 'right',
  17       moveOptions:      true,
  18       labelTop:         'Top',
  19       labelBottom:      'Bottom',
  20       labelUp:          'Up',
  21       labelDown:        'Down',
  22       labelSort:        'Sort',
  23       labelsx:          'Available',
  24       labeldx:          'Selected',
  25       maxSelected:      -1,
  26       leftSel:          null,
  27       rightSel:         null,
  28
  29       sortOptions: function() {
  30         o.leftSel.sortOptions();
  31         o.rightSel.sortOptions();
  32       }
  33     }, o);
  34
  35     return this.each(function () {
  36       var el = $(this);
  37
  38       var hiddenName = $(this).attr("name");
  39       var originalID = $(this).attr("id");
  40       if (!originalID)
  41         originalID = hiddenName;
  42       if (originalID.indexOf('[') != -1)
  43         originalID = originalID.substring(0, originalID.indexOf('['));
  44
  45       var nameDx   = originalID + "ms2side__dx";
  46       var idDx     = originalID + "ms2side__dx";
  47       var nameSx   = originalID + "ms2side__sx";
  48       var hiddenId = originalID + "ms2side_hidden";
  49       var size     = $(this).attr("size");
  50       $(this).attr("name", originalID + "ms2side__orig");
  51       // SIZE MIN
  52       if (size < 6) {
  53         $(this).attr("size", "6");
  54         size = 6;
  55       }
  56
  57       // UP AND DOWN
  58       var divUpDown =
  59         "<div class='ms2side__updown'>" +
  60         "<p class='SelSort' title='Sort'>" + o.labelSort + "</p>" +
  61         "<p class='MoveTop' title='Move on top selected option'>" + o.labelTop + "</p>" +
  62         "<p class='MoveUp' title='Move up selected option'>" + o.labelUp + "</p>" +
  63         "<p class='MoveDown' title='Move down selected option'>" + o.labelDown + "</p>" +
  64         "<p class='MoveBottom' title='Move on bottom selected option'>" + o.labelBottom + "</p>" +
  65         "</div>";
  66
  67       // CREATE NEW ELEMENT (AND HIDE IT) AFTER THE HIDDED ORGINAL SELECT
  68       var htmlToAdd =
  69         "<div class='ms2side__div'>" +
  70         ((o.selectedPosition != 'right' && o.moveOptions) ? divUpDown : "") +
  71         "<div class='ms2side__select'>" +
  72         (o.labelsx ? ("<div class='ms2side__header'>" + o.labelsx + "</div>") : "") +
  73         "<select title='" + o.labelsx + "' name='" + nameSx + "' id='" + nameSx + "' size='" + size + "' multiple='multiple' ></select>" +
  74         "</div>" +
  75         "<div class='ms2side__options'>" +
  76         ((o.selectedPosition == 'right')
  77          ?
  78          ("<p class='AddOne' title='Add Selected'>&rsaquo;</p>" +
  79           "<p class='AddAll' title='Add All'>&raquo;</p>" +
  80           "<p class='RemoveOne' title='Remove Selected'>&lsaquo;</p>" +
  81           "<p class='RemoveAll' title='Remove All'>&laquo;</p>")
  82          :
  83          ("<p class='AddOne' title='Add Selected'>&lsaquo;</p>" +
  84           "<p class='AddAll' title='Add All'>&laquo;</p>" +
  85           "<p class='RemoveOne' title='Remove Selected'>&rsaquo;</p>" +
  86           "<p class='RemoveAll' title='Remove All'>&raquo;</p>")
  87         ) +
  88         "</div>" +
  89         "<div class='ms2side__select'>" +
  90         (o.labeldx ? ("<div class='ms2side__header'>" + o.labeldx + "</div>") : "") +
  91         "<select title='" + o.labeldx + "' name='" + nameDx + "' id='" + idDx + "' size='" + size + "' multiple='multiple' ></select>" +
  92         "</div>" +
  93         "<span id=\"" + hiddenId + "\"></span>" +
  94         ((o.selectedPosition == 'right' && o.moveOptions) ? divUpDown : "") +
  95         "</div>";
  96       $(this).after(htmlToAdd).hide();
  97       $("#" + hiddenId).hide();
  98
  99       // ELEMENTS
 100       var allSel    = $(this).next().find("select");
 101       var leftSel   = (o.selectedPosition == 'right') ? allSel.eq(0) : allSel.eq(1);
 102       var rightSel  = (o.selectedPosition == 'right') ? allSel.eq(1) : allSel.eq(0);
 103       // HEIGHT DIV
 104       var heightDiv = $(".ms2side__select").eq(0).height();
 105       o.leftSel     = leftSel;
 106       o.rightSel    = rightSel;
 107
 108       // CENTER MOVE OPTIONS AND UPDOWN OPTIONS
 109       $(this).next().find('.ms2side__options, .ms2side__updown').each(function(){
 110         var     top = ((heightDiv/2) - ($(this).height()/2));
 111         if (top > 0)
 112           $(this).css('padding-top',  top + 'px' );
 113       });
 114
 115       // MOVE SELECTED OPTION TO RIGHT, NOT SELECTED TO LEFT
 116       $(this).find("option:selected").clone().appendTo(rightSel);
 117       $(this).find("option:not(:selected)").clone().appendTo(leftSel);
 118
 119       // Mark all unselected.
 120       rightSel.find("option").attr("selected", false);
 121
 122       // ON CHANGE REFRESH ALL BUTTON STATUS
 123       allSel.change(function() {
 124         var div        = $(this).parent().parent();
 125         var selectSx   = leftSel.children();
 126         var selectDx   = rightSel.children();
 127         var selectedSx = leftSel.find("option:selected");
 128         var selectedDx = rightSel.find("option:selected");
 129         var hiddenCont = $("#" + hiddenId);
 130
 131         if (selectedSx.size() == 0 || (o.maxSelected >= 0 && (selectedSx.size() + selectDx.size()) > o.maxSelected))
 132           div.find(".AddOne").addClass('ms2side__hide');
 133         else
 134           div.find(".AddOne").removeClass('ms2side__hide');
 135
 136         // FIRST HIDE ALL
 137         div.find(".RemoveOne, .MoveUp, .MoveDown, .MoveTop, .MoveBottom, .SelSort").addClass('ms2side__hide');
 138         // if (selectDx.size() > 1)
 139           // div.find(".SelSort").removeClass('ms2side__hide');
 140         if (selectedDx.size() > 0) {
 141           div.find(".RemoveOne").removeClass('ms2side__hide');
 142           // // ALL SELECTED - NO MOVE
 143           // if (selectedDx.size() < selectDx.size()) {    // FOR NOW (JOE) && selectedDx.size() == 1
 144           //   if (selectedDx.val() != selectDx.val())     // FIRST OPTION, NO UP AND TOP BUTTON
 145           //     div.find(".MoveUp, .MoveTop").removeClass('ms2side__hide');
 146           //   if (selectedDx.last().val() != selectDx.last().val())       // LAST OPTION, NO DOWN AND BOTTOM BUTTON
 147           //     div.find(".MoveDown, .MoveBottom").removeClass('ms2side__hide');
 148           // }
 149         }
 150
 151         if (selectSx.size() == 0 || (o.maxSelected >= 0 && selectSx.size() >= o.maxSelected))
 152           div.find(".AddAll").addClass('ms2side__hide');
 153         else
 154           div.find(".AddAll").removeClass('ms2side__hide');
 155
 156         if (selectDx.size() == 0)
 157           div.find(".RemoveAll").addClass('ms2side__hide');
 158         else
 159           div.find(".RemoveAll").removeClass('ms2side__hide');
 160
 161         // Rebuild hidden inputs...
 162         hiddenCont.empty();
 163         rightSel.find("option").each(function(idx, option) {
 164           $('<input type="hidden"/>').attr("name", hiddenName).attr("value", $(option).attr("value")).appendTo(hiddenCont);
 165         });
 166       });
 167
 168       // DOUBLE CLICK ON LEFT SELECT OPTION
 169       leftSel.dblclick(function () {
 170         $(this).find("option:selected").each(function(i, selected){
 171
 172           if (o.maxSelected < 0 || rightSel.children().size() < o.maxSelected) {
 173             $(this).remove().appendTo(rightSel);
 174             el.find("[value=" + $(selected).val() + "]").attr("selected", true).remove().appendTo(el);
 175           }
 176         });
 177         $(this).trigger('change');
 178         o.sortOptions();
 179       });
 180
 181       // DOUBLE CLICK ON RIGHT SELECT OPTION
 182       rightSel.dblclick(function () {
 183         $(this).find("option:selected").each(function(i, selected){
 184           $(this).remove().appendTo(leftSel);
 185           el.find("[value=" + $(selected).val() + "]").attr("selected", false).remove().appendTo(el);
 186         });
 187         $(this).trigger('change');
 188         o.sortOptions();
 189       });
 190
 191       // CLICK ON OPTION
 192       $(this).next().find('.ms2side__options').children().click(function () {
 193         if (!$(this).hasClass("ms2side__hide")) {
 194           if ($(this).hasClass("AddOne")) {
 195             leftSel.find("option:selected").each(function(i, selected){
 196               $(this).remove().appendTo(rightSel);
 197               el.find("[value=" + $(selected).val() + "]").attr("selected", true).remove().appendTo(el);
 198             });
 199             o.sortOptions();
 200
 201           } else if ($(this).hasClass("AddAll")) {        // ALL SELECTED
 202             leftSel.children().appendTo(rightSel);
 203             leftSel.children().remove();
 204             el.find('option').attr("selected", true);
 205             // el.children().attr("selected", true); -- PROBLEM WITH OPTGROUP
 206             o.sortOptions();
 207
 208           } else if ($(this).hasClass("RemoveOne")) {
 209             rightSel.find("option:selected").each(function(i, selected){
 210               $(this).remove().appendTo(leftSel);
 211               el.find("[value=" + $(selected).val() + "]").attr("selected", false).remove().appendTo(el);
 212             });
 213             o.sortOptions();
 214
 215           } else if ($(this).hasClass("RemoveAll")) {     // ALL REMOVED
 216             rightSel.children().appendTo(leftSel);
 217             rightSel.children().remove();
 218             el.find('option').attr("selected", false);
 219             //el.children().attr("selected", false); -- PROBLEM WITH OPTGROUP
 220             o.sortOptions();
 221           }
 222         }
 223
 224         leftSel.trigger('change');
 225       });
 226
 227       // CLICK ON UP - DOWN
 228       $(this).next().find('.ms2side__updown').children().click(function () {
 229         var selectedDx = rightSel.find("option:selected");
 230         var selectDx   = rightSel.find("option");
 231
 232         if (!$(this).hasClass("ms2side__hide")) {
 233           if ($(this).hasClass("SelSort")) {
 234             // SORT SELECTED ELEMENT
 235             selectDx.sort(function(a, b) {
 236               var compA = $(a).text().toUpperCase();
 237               var compB = $(b).text().toUpperCase();
 238               return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
 239             })
 240             // FIRST REMOVE FROM ORIGINAL SELECT
 241             el.find("option:selected").remove();
 242             // AFTER ADD ON ORIGINAL AND RIGHT SELECT
 243             selectDx.each(function() {
 244               rightSel.append($(this).clone().attr("selected", true));
 245               el.append($(this).attr("selected", true));
 246             });
 247
 248           } else if ($(this).hasClass("MoveUp")) {
 249             var prev = selectedDx.first().prev();
 250             var hPrev = el.find("[value=" + prev.val() + "]");
 251
 252             selectedDx.each(function() {
 253               $(this).insertBefore(prev);
 254               el.find("[value=" + $(this).val() + "]").insertBefore(hPrev);     // HIDDEN SELECT
 255             });
 256
 257           } else if ($(this).hasClass("MoveDown")) {
 258             var next = selectedDx.last().next();
 259             var hNext = el.find("[value=" + next.val() + "]");
 260
 261             selectedDx.each(function() {
 262               $(this).insertAfter(next);
 263               el.find("[value=" + $(this).val() + "]").insertAfter(hNext);      // HIDDEN SELECT
 264             });
 265
 266           } else if ($(this).hasClass("MoveTop")) {
 267             var first = selectDx.first();
 268             var hFirst = el.find("[value=" + first.val() + "]");
 269
 270             selectedDx.each(function() {
 271               $(this).insertBefore(first);
 272               el.find("[value=" + $(this).val() + "]").insertBefore(hFirst);    // HIDDEN SELECT
 273             });
 274
 275           } else if ($(this).hasClass("MoveBottom")) {
 276             var last = selectDx.last();
 277             var hLast = el.find("[value=" + last.val() + "]");
 278
 279             selectedDx.each(function() {
 280               last = $(this).insertAfter(last); // WITH last = SAME POSITION OF SELECTED OPTION AFTER MOVE
 281               hLast = el.find("[value=" + $(this).val() + "]").insertAfter(hLast);      // HIDDEN SELECT
 282             });
 283           }
 284         }
 285
 286         leftSel.trigger('change');
 287       });
 288
 289       // HOVER ON OPTION
 290       $(this).next().find('.ms2side__options, .ms2side__updown').children().hover(
 291         function () {
 292           $(this).addClass('ms2side_hover');
 293         },
 294         function () {
 295           $(this).removeClass('ms2side_hover');
 296         }
 297       );
 298
 299       // UPDATE BUTTON ON START
 300       leftSel.trigger('change');
 301       o.sortOptions();
 302       // SHOW WHEN ALL READY
 303       $(this).next().show();
 304     });
 305   };
 306 })(jQuery);