Eliminate replacement _toggleChecked code in multiselect.filter.js (#745)

Replaces the separate _toggleChecked function code in multiselect.filter.js with instead using a parameter that changes the context for _toggleChecked in multiselect.js .

Also, a few housekeeping updates.

Author: SteveTheTechie

src/jquery.multiselect.filter.js

@@ -71,11 +71,11 @@
           else if(e.which === 27) {
             $element.multiselect('close');
             e.preventDefault();
-          } 
+          }
           else if(e.which === 9 && e.shiftKey) {
             $element.multiselect('close');
             e.preventDefault();
-          } 
+          }
           else if(e.altKey) {
             switch(e.which) {
               case 82:
@@ -100,7 +100,7 @@
       // automatically reset the widget on close?
       if (this.options.autoReset)
         $element.on('multiselectclose', $.proxy(this._reset, this));
-     
+
       // rebuild cache when multiselect is updated
       $element.on('multiselectrefresh', $.proxy(function() {
         this.updateCache();
@@ -113,47 +113,19 @@
                                  .prependTo(this.$header);
 
       // reference to the actual inputs
-      this.$inputs = this.instance.$menu.find('input[type="checkbox"], input[type="radio"]');
+      this.$inputs = this.instance.$inputs;
 
       // cache input values for searching
       this.updateCache();
 
-      // rewrite internal _toggleChecked fn so that when checkAll/uncheckAll is fired,
-      // only the currently filtered $elements are checked
-      this.instance._toggleChecked = function(flag, group) {
-        var self = this;
-        var $element = this.element;
-        var $inputs = (group && group.length) ?  group : this.$inputs;
-
-        // do not include hidden elems if the menu isn't open.
-        var selector = self._isOpen ?  ':disabled, :hidden' : ':disabled';
-
-        $inputs = $inputs
-          .not(selector)
-          .each(this._toggleState('checked', flag));
-
-        // update text
-        this.update();
-
-        // gather an array of the values that actually changed
-        var values = {};
-        var inputCount = $inputs.length;
-        for (var x = 0; x < inputCount; x++) {
-          values[ $inputs.get(x).value ] = true;
-        }
-
-        // select option tags
-        $element.find('option').filter(function() {
-          if(!this.disabled && values[this.value]) {
-            self._toggleState('selected', flag).call(this);
-          }
-        });
-
-        // trigger the change event on the select
-        if(inputCount)
-          $element.trigger('change');
-        
+      // Change the normal _toggleChecked fxn behavior so that when checkAll/uncheckAll
+      // is fired, only the currently displayed filtered inputs are checked
+      var $instance = this.instance;
+      $instance._oldToggleChecked = $instance._toggleChecked;
+      $instance._toggleChecked = function(flag, group) {
+         $instance._oldToggleChecked(flag, group, true);
       };
+
     },
 
     // thx for the logic here ben alman

src/jquery.multiselect.js

@@ -68,7 +68,7 @@
      * 3. If still do not have a valid DOM element to append to, then append to the document body.
      *
      * NOTE:  this.element and this.document are jQuery objects per the jQuery UI widget API.
-    * @returns {object} jQuery object to append to or document body.
+    * @returns {object} jQuery object for the DOM element to append to.
      */
     _getAppendEl: function() {
       var elem = this.options.appendTo;                     // jQuery object or selector, DOM element or null.
@@ -80,7 +80,7 @@
         elem = this.element.closest(".ui-front, dialog");
       }
       if (!elem.length) {
-        elem = document.body;                 // Position at end of body.  Note that this returns a DOM element.
+        elem = $(document.body);                 // Position at end of body.  Note that this returns a DOM element.
       }
       return elem;
     },
@@ -169,16 +169,15 @@
       var $checkboxes = (this.$checkboxes = $( document.createElement('ul') ) )
             .addClass('ui-multiselect-checkboxes ui-helper-reset' + (/\bmenu\b/i.test(wrapText) ? '' : ' ui-multiselect-nowrap'));
 
-      // This is the menu that will hold all the options.
+      // This is the menu container that will hold all the options added via refresh().
       var $menu = (this.$menu = $( document.createElement('div') ) )
             .addClass('ui-multiselect-menu ui-widget ui-widget-content ui-corner-all'
                       + (elSelect.multiple ? '' : ' ui-multiselect-single ')
                       + (classes ? ' ' + classes : ''))
             .append($header, $checkboxes);
 
       $button.insertAfter($element);
-      // This is an empty menu at this point.
-      $menu.appendTo( this._getAppendEl() );
+      this._getAppendEl().append($menu);
 
       this._bindEvents();
 
@@ -731,7 +730,7 @@
     /**
      * Converts dimensions specified in options to pixel values.
      * Determines if specified value is a minimum, maximum or exact value.
-     * The value can be a number or a string with px, pts, ems, or % units.
+     * The value can be a number or a string with px, pts, ems, in, cm, mm, or % units.
      * Number/Numeric string treated as pixel measurements
      *  - 30
      *  - '30'
@@ -936,7 +935,7 @@
     /**
      * Calculate accurate outerWidth(false) using getBoundingClientRect()
      * Note that this presumes that the element is visible in the layout.
-     * @param {node} DOM node or jQuery equivalent get width for.
+     * @param {node} DOM node or jQuery equivalent to get width for.
      * @returns {float} Decimal floating point value for the width.
      */
    _getBCRWidth: function(elem) {
@@ -950,7 +949,7 @@
     /**
      * Calculate accurate outerHeight(false) using getBoundingClientRect()
      * Note that this presumes that the element is visible in the layout.
-     * @param {node} DOM node or jQuery equivalent get height for.
+     * @param {node} DOM node or jQuery equivalent to get height for.
      * @returns {float} Decimal floating point value for the height.
      */
    _getBCRHeight: function(elem) {
@@ -964,7 +963,7 @@
     /**
      * Calculate jQuery width correction factor to fix floating point round-off errors.
      * Note that this presumes that the element is visible in the layout.
-     * @param {node} DOM node or jQuery equivalent get width for.
+     * @param {node} DOM node or jQuery equivalent to get width for.
      * @returns {float} Correction value for the width--typically a decimal < 1.0
      */
     _jqWidthFix: function(elem) {
@@ -979,7 +978,7 @@
     /**
      * Calculate jQuery height correction factor to fix floating point round-off errors.
      * Note that this presumes that the element is visible in the layout.
-     * @param {node} DOM node or jQuery equivalent get height for.
+     * @param {node} DOM node or jQuery equivalent to get height for.
      * @returns {float} Correction value for the height--typically a decimal < 1.0
      */
     _jqHeightFix: function(elem) {
@@ -1090,12 +1089,21 @@
      * Potentially scoped down to visible elements from filteredInputs
      * @param {string} flag checked property to set
      * @param {object} group option group that was clicked, if any
-     * @param {array} filteredInputs visible elements with the filter applied
+     * @param {boolean} filteredInputs does not toggle hidden inputs if filtering.
      */
     _toggleChecked: function(flag, group, filteredInputs) {
       var self = this;
       var $element = self.element;
-      var $inputs = (group && group.length) ? group : (filteredInputs || self.$inputs);
+      var $inputs = (group && group.length) ? group : self.$inputs;
+
+      if (filteredInputs) {
+         // Do not include hidden inputs if the menu isn't open.
+         $inputs = $inputs.not( self._isOpen ?  ':disabled, :hidden' : ':disabled' );
+      }
+      else {
+         // If not filtering, then the underlying select is cleared out each time.
+         $element[0].selectedIndex = -1;
+      }
 
       // toggle state on inputs
       $inputs.each(self._toggleState('checked', flag));
@@ -1113,7 +1121,6 @@
       });
 
       // toggle state on original option tags
-      $element[0].selectedIndex = -1;
       $element.find('option')
               .each( function() {
                 if (!this.disabled && values[this.value]) {