summaryrefslogtreecommitdiffstats
path: root/js/jquery.multi-select.js
blob: b4c63cc93270e31a0f2ef5fe232a2d40a317c86a (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
(function($){

  var msMethods = {
    'init' : function(options){
      this.settings = {
        disabledClass : 'disabled'
      };
      if(options) {
        this.settings = $.extend(this.settings, options);
      }

      var multiSelects = this;
      multiSelects.hide();

      multiSelects.each(function(){

        var ms = $(this);
        ms.attr('id', ms.attr('id') != undefined ? ms.attr('id') : 'ms-'+Math.ceil(Math.random()*1000));
        var container = $('<div id="ms-'+ms.attr('id')+'" class="ms-container"></div>'),
            selectableContainer = $('<div class="ms-selectable"></div>'),
            selectedContainer = $('<div class="ms-selection"></div>'),
            selectableUl = $('<ul></ul>'),
            selectedUl = $('<ul></ul>');
        
        ms.data('settings', multiSelects.settings);
        ms.children('option').each(function(){
          var selectableLi = $('<li ms-value="'+$(this).val()+'">'+$(this).text()+'</li>');
          
          if ($(this).attr('title'))
            selectableLi.attr('title', $(this).attr('title'));
          if ($(this).attr('disabled') || ms.attr('disabled')){
            selectableLi.attr('disabled', 'disabled');
            selectableLi.addClass(multiSelects.settings.disabledClass)
          }
          selectableLi.click(function(){
            ms.multiSelect('select', $(this).attr('ms-value'));
          });
          selectableUl.append(selectableLi);
        });
        if (multiSelects.settings.selectableHeader){
          selectableContainer.append(multiSelects.settings.selectableHeader);
        }
        selectableContainer.append(selectableUl);
        if (multiSelects.settings.selectedHeader){
          selectedContainer.append(multiSelects.settings.selectedHeader);
        }
        selectedContainer.append(selectedUl);
        container.append(selectableContainer);
        container.append(selectedContainer);
        ms.after(container);
        ms.children('option:selected').each(function(){
          ms.multiSelect('select', $(this).val(), 'init');
        });
      });
    },
    'select' : function(value, method){
      var ms = this,
          msValues = (ms.val() ? ms.val() : []),
          alreadyPresent = $.inArray(value, msValues),
          text = ms.find('option[value="'+value+'"]').text();
          titleAttr = ms.find('option[value="'+value+'"]').attr('title');

      if(alreadyPresent == -1 || method == 'init'){
        var selectedLi = $('<li ms-value="'+value+'">'+text+'</li>').detach(),
            newValues = $.merge(msValues, [value]),
            selectableUl = $('#ms-'+ms.attr('id')+' .ms-selectable ul'),
            selectedUl = $('#ms-'+ms.attr('id')+' .ms-selection ul'),
            selectableLi = selectableUl.children('li[ms-value="'+value+'"]');
        
        if (!selectableLi.attr('disabled')){
          selectableLi.hide();
          ms.val(newValues);
          if(titleAttr){
            selectedLi.attr('title', titleAttr)
          }
          selectedLi.click(function(){
            ms.multiSelect('deselect', $(this).attr('ms-value'));
          });
          selectedUl.append(selectedLi);
          if (typeof ms.data('settings').afterSelect == 'function' && method != 'init') {
            ms.data('settings').afterSelect.call(this, value, text);
          }
        }
      }
    },
    'deselect' : function(value){
      var ms = this,
          msValues = (ms.val() ? ms.val() : []),
          present = false,
          newValues = $.map(msValues, function(e){ if(e != value){ return e; }else{ present = true} return false;});

      if(present){
        var selectableUl = $('#ms-'+ms.attr('id')+' .ms-selectable ul'),
            selectedUl = $('#ms-'+ms.attr('id')+' .ms-selection ul'),
            selectableLi = selectableUl.children('li[ms-value="'+value+'"]'),
            selectedLi = selectedUl.children('li[ms-value="'+value+'"]');
          
        ms.val(newValues);
        selectableLi.show();
        selectedLi.remove();
        if (typeof ms.data('settings').afterDeselect == 'function') {
          ms.data('settings').afterDeselect.call(this, value, selectedLi.text());
        }
      }
    },
    'select_all' : function(){
      var ms = this;
      ms.children('option').each(function(){
        ms.multiSelect('select', $(this).val(), 'select_all');
      });
    },
    'deselect_all' :function(){
      var ms = this;
      ms.children('option').each(function(){
        ms.multiSelect('deselect', $(this).val(), 'deselect_all');
      });
    }
  };

  $.fn.multiSelect = function(method){
    if ( msMethods[method] ) {
      return msMethods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
    } else if ( typeof method === 'object' || ! method ) {
      return msMethods.init.apply( this, arguments );
    } else {
      if(console.log) console.log( 'Method ' +  method + ' does not exist on jquery.multiSelect' );
    }
    return false;
  };
})(jQuery);