refactor optgroup generation

1 files changed, 77 insertions, 100 deletions

diff --git a/js/jquery.multi-select.js b/js/jquery.multi-select.js
index 7108ef4..06ee1ea 100644
--- a/js/jquery.multi-select.js
+++ b/js/jquery.multi-select.js
@@ -43,99 +43,12 @@
         ms.attr('id', ms.attr('id') ? ms.attr('id') : Math.ceil(Math.random()*1000)+'multiselect');
         this.$container.attr('id', 'ms-'+ms.attr('id'));
 
-        var optgroupLabel = null,
-            optgroupId = null,
-            optgroupCpt = 0,
-            optgroupContainerTemplate = '<li class="ms-optgroup-container"></li>',
-            optgroupUlTemplate = '<ul class="ms-optgroup"></ul>',
-            optgroupLiTemplate = '<li class="ms-optgroup-label"><span></span></li>';
-
-        ms.find('optgroup, option').each(function(){
-          if ($(this).is('optgroup')){
-            optgroupLabel = '<span>'+$(this).attr('label')+'</span>';
-            optgroupId = 'ms-'+ms.attr('id')+'-optgroup-'+optgroupCpt;
-
-            var optgroup = $(this),
-                optgroupSelectable = $(optgroupContainerTemplate),
-                optgroupSelection = $(optgroupContainerTemplate),
-                optgroupSelectionLi = $(optgroupLiTemplate),
-                optgroupSelectableLi = $(optgroupLiTemplate);
-
-            if (that.options.selectableOptgroup){
-              optgroupSelectableLi.on('click', function(){
-                var values = optgroup.children(':not(:selected):not(:disabled)').map(function(){ return $(this).val(); }).get();
-                that.select(values);
-              });
-
-              optgroupSelectionLi.on('click', function(){
-                var values = optgroup.children(':selected:not(:disabled)').map(function(){ return $(this).val(); }).get();
-                that.deselect(values);
-              });
-            }
-
-            optgroupSelectableLi.html(optgroupLabel);
-
-            optgroupSelectable.attr('id', optgroupId+'-selectable')
-              .append($(optgroupUlTemplate)
-                .append(optgroupSelectableLi));
-
-            that.$selectableUl.append(optgroupSelectable);
-
-            optgroupSelectionLi.html(optgroupLabel);
-
-            optgroupSelection.attr('id', optgroupId+'-selection')
-              .append($(optgroupUlTemplate)
-                .append(optgroupSelectionLi));
-
-            that.$selectionUl.append(optgroupSelection);
-
-            optgroupCpt++;
-
-          } else {
-
-            var attributes = "";
-
-            for (var cpt = 0; cpt < this.attributes.length; cpt++){
-              var attr = this.attributes[cpt];
-
-              if(that.isDomNode(attr.name)){
-                attributes += attr.name+'="'+attr.value+'" ';
-              }
-            }
-            var selectableLi = $('<li '+attributes+'><span>'+$(this).text()+'</span></li>'),
-                selectedLi = selectableLi.clone();
-
-            var value = $(this).val(),
-                msId = that.sanitize(value, that.sanitizeRegexp);
-
-            selectableLi
-              .data('ms-value', value)
-              .addClass('ms-elem-selectable')
-              .attr('id', msId+'-selectable');
-
-            selectedLi
-              .data('ms-value', value)
-              .addClass('ms-elem-selection')
-              .attr('id', msId+'-selection')
-              .hide();
-
-            that.$selectionUl.find('.ms-optgroup-label').hide();
-
-            if ($(this).prop('disabled') || ms.prop('disabled')){
-              selectedLi.addClass(that.options.disabledClass);
-              selectableLi.addClass(that.options.disabledClass);
-            }
-
-            if (optgroupId){
-              that.$selectableUl.children('#'+optgroupId+'-selectable').find('ul').first().append(selectableLi);
-              that.$selectionUl.children('#'+optgroupId+'-selection').find('ul').first().append(selectedLi);
-            } else {
-              that.$selectableUl.append(selectableLi);
-              that.$selectionUl.append(selectedLi);
-            }
-          }
+        ms.find('option').each(function(){
+          that.generateLisFromOption(this);
         });
 
+        this.$selectionUl.find('.ms-optgroup-label').hide();
+
         if (that.options.selectableHeader){
           that.$selectableContainer.append(that.options.selectableHeader);
         }
@@ -184,6 +97,79 @@
       }
     },
 
+    'generateLisFromOption' : function(option){
+      var that = this,
+          ms = that.$element,
+          attributes = "",
+          $option = $(option);
+
+      for (var cpt = 0; cpt < option.attributes.length; cpt++){
+        var attr = option.attributes[cpt];
+
+        if(attr.name !== 'value'){
+          attributes += attr.name+'="'+attr.value+'" ';
+        }
+      }
+      var selectableLi = $('<li '+attributes+'><span>'+$option.text()+'</span></li>'),
+          selectedLi = selectableLi.clone(),
+          value = $option.val(),
+          elementId = that.sanitize(value, that.sanitizeRegexp);
+
+      selectableLi
+        .data('ms-value', value)
+        .addClass('ms-elem-selectable')
+        .attr('id', elementId+'-selectable');
+
+      selectedLi
+        .data('ms-value', value)
+        .addClass('ms-elem-selection')
+        .attr('id', elementId+'-selection')
+        .hide();
+
+      if ($option.prop('disabled') || ms.prop('disabled')){
+        selectedLi.addClass(that.options.disabledClass);
+        selectableLi.addClass(that.options.disabledClass);
+      }
+
+      var $optgroup = $option.parent('optgroup');
+
+      if ($optgroup.length > 0){
+        var optgroupLabel = $optgroup.attr('label'),
+            optgroupId = that.sanitize(optgroupLabel, that.sanitizeRegexp),
+            $selectableOptgroup = that.$selectableUl.find('#optgroup-selectable-'+optgroupId),
+            $selectionOptgroup = that.$selectionUl.find('#optgroup-selection-'+optgroupId);
+        
+        if ($selectableOptgroup.length === 0){
+          var optgroupContainerTpl = '<li class="ms-optgroup-container"></li>',
+              optgroupTpl = '<ul class="ms-optgroup"><li class="ms-optgroup-label"><span>'+optgroupLabel+'</span></li></ul>';
+          
+          $selectableOptgroup = $(optgroupContainerTpl);
+          $selectionOptgroup = $(optgroupContainerTpl);
+          $selectableOptgroup.attr('id', 'optgroup-selectable-'+optgroupId);
+          $selectionOptgroup.attr('id', 'optgroup-selection-'+optgroupId);
+          $selectableOptgroup.append($(optgroupTpl));
+          $selectionOptgroup.append($(optgroupTpl));
+          if (that.options.selectableOptgroup){
+            $selectableOptgroup.find('.ms-optgroup-label').on('click', function(){
+              var values = $optgroup.children(':not(:selected)').map(function(){ return $(this).val() }).get();
+              that.select(values);
+            });
+            $selectionOptgroup.find('.ms-optgroup-label').on('click', function(){
+              var values = $optgroup.children(':selected').map(function(){ return $(this).val() }).get();
+              that.deselect(values);
+            });
+          }
+          that.$selectableUl.append($selectableOptgroup);
+          that.$selectionUl.append($selectionOptgroup);
+        }
+        $selectableOptgroup.children().append(selectableLi);
+        $selectionOptgroup.children().append(selectedLi);
+      } else {
+        that.$selectableUl.append(selectableLi);
+        that.$selectionUl.append(selectedLi);
+      }
+    },
+
     'activeKeyboard' : function($list){
       var that = this;
 
@@ -438,15 +424,6 @@
       }
     },
 
-    isDomNode: function (attr){
-      return (
-        attr &&
-        typeof attr === "object" &&
-        typeof attr.nodeType === "number" &&
-        typeof attr.nodeName === "string"
-      );
-    },
-
     sanitize: function(value, reg){
       return(value.replace(reg, '_'));
     }