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