pretty-dropdowns - npm Package Compare versions

Comparing version 4.9.0 to 4.9.4

dist/js/jquery.prettydropdowns.js

 /*!
- * jQuery Pretty Dropdowns Plugin v4.9.0 by T. H. Doan (http://thdoan.github.io/pretty-dropdowns/)
+ * jQuery Pretty Dropdowns Plugin v4.9.4 by T. H. Doan (http://thdoan.github.io/pretty-dropdowns/)
  *
@@ -43,2 +43,3 @@ * jQuery Pretty Dropdowns by T. H. Doan is licensed under the MIT License.
         var $select = $(elSel),
+          nSize = elSel.size,
           sId = elSel.name || elSel.id || '',
@@ -48,2 +49,4 @@ sLabelId;
         if ($select.data('loaded')) return;
+        // Remove 'size' attribute to it doesn't affect vertical alignment
+        $select.data('size', nSize).removeAttr('size');
         // Set <select> height to reserve space for <div> container
@@ -66,3 +69,2 @@ $select.css('visibility', 'hidden').outerHeight(oOptions.height);
           bMultiple = elSel.multiple,
-          nWidth = $select.outerWidth(),
           // Height - 2px for borders
@@ -73,8 +75,5 @@ sHtml = '<ul' + (elSel.disabled ? '' : ' tabindex="0"') + ' role="listbox"'
             + ' aria-activedescendant="item' + nTimestamp + '-1" aria-expanded="false"'
-            + ' style="height:' + (oOptions.height-2) + 'px;'
-            + (elSel.size ? 'max-height:' + (oOptions.height-2)*elSel.size + 'px;' : '')
-            + 'margin:'
-            // NOTE: $select.css('margin') returns an empty string in Firefox, so
-            // we have to get each margin individually. See
-            // https://github.com/jquery/jquery/issues/3383
+            + ' style="max-height:' + (oOptions.height-2) + 'px;margin:'
+            // NOTE: $select.css('margin') returns an empty string in Firefox, so we have to get
+            // each margin individually. See https://github.com/jquery/jquery/issues/3383
             + $select.css('margin-top') + ' '
@@ -84,2 +83,8 @@ + $select.css('margin-right') + ' '
             + $select.css('margin-left') + ';">';
+        // NOTE: If 'size' attribute is larger than 1, then the first item won't be selected by
+        // default, so we have to do it manually.
+        if (!$selected[0]) {
+          $items[0].selected = true;
+          $selected = $items.filter(':selected');
+        }
         if (bMultiple) {
@@ -113,6 +118,6 @@ sHtml += renderItem(null, 'selected');
           + oOptions.customClass + ' loading"'
-          // NOTE: For some reason, the container height is larger by 1px if the
-          // <select> has the 'multiple' attribute or 'size' attribute with a
-          // value larger than 1. To fix this, we have to inline the height.
-          + ((bMultiple || elSel.size>1) ? ' style="height:' + oOptions.height + 'px;"' : '')
+          // NOTE: For some reason, the container height is larger by 1px if the <select> has the
+          // 'multiple' attribute or 'size' attribute with a value larger than 1. To fix this, we
+          // have to inline the height.
+          + ((bMultiple || nSize>1) ? ' style="height:' + oOptions.height + 'px;"' : '')
           +'></div>').before(sHtml).data('loaded', true);
@@ -139,5 +144,4 @@ var $dropdown = $select.parent().children('ul'),
         // Set dropdown width and event handler
-        // NOTE: Setting width using width(), then css() because width() only can
-        // return a float, which can result in a missing right border when there
-        // is a scrollbar.
+        // NOTE: Setting width using width(), then css() because width() only can return a float,
+        // which can result in a missing right border when there is a scrollbar.
         $items.width(nWidth).css('width', $items.css('width')).click(function() {
@@ -185,11 +189,14 @@ var $li = $(this);
           if ($dropdown.hasClass('active')) {
-            // Ensure the selected item is in view
-            $dropdown.scrollTop(0);
             // Close any other open menus
             if ($('.prettydropdown > ul.active').length>1) resetDropdown($('.prettydropdown > ul.active').not($dropdown)[0]);
             var nWinHeight = window.innerHeight,
+              nMaxHeight,
               nOffsetTop = $dropdown.offset().top,
               nScrollTop = document.body.scrollTop,
-              nDropdownHeight = $dropdown.outerHeight(),
-              nDropdownBottom = nOffsetTop-nScrollTop+nDropdownHeight;
+              nDropdownHeight = $dropdown.outerHeight();
+            if (nSize) {
+              nMaxHeight = (oOptions.height-2)*nSize;
+              if (nMaxHeight<nDropdownHeight-2) nDropdownHeight = nMaxHeight+2;
+            }
+            var nDropdownBottom = nOffsetTop-nScrollTop+nDropdownHeight;
             if (nDropdownBottom>nWinHeight) {
@@ -202,2 +209,3 @@ // Expand to direction that has the most space
                   $dropdown.outerHeight(nOffsetTop-nScrollTop+oOptions.height);
+                  // Ensure the selected item is in view
                   $dropdown.scrollTop(nDropdownHeight);
@@ -209,2 +217,5 @@ }
             }
+            if (nMaxHeight && nMaxHeight<$dropdown.height()) $dropdown.css('height', nMaxHeight + 'px');
+            // Ensure the selected item is in view
+            if (oOptions.classic) $li[0].scrollIntoView(!$dropdown.hasClass('reverse'));
           } else {
@@ -264,3 +275,6 @@ $dropdown.data('clicked', true);
           case 13: // Enter
-            if (!bOpen) toggleHover($current, 1);
+            if (!bOpen) {
+              $current = $items.filter('.selected');
+              toggleHover($current, 1);
+            }
             $current.click();
@@ -275,2 +289,3 @@ break;
             } else {
+              $current = $items.filter('.selected');
               toggleHover($current, 1);
@@ -307,4 +322,4 @@ $current.click();
               toggleHover($current, 0);
-              // If not already key-navigated or first item is selected, cycle to
-              // the last item; or else select the previous item
+              // If not already key-navigated or first item is selected, cycle to the last item; or
+              // else select the previous item
               toggleHover(nHoverIndex ? $items.eq(nHoverIndex-1) : $items.eq(nLastIndex), 1);
@@ -316,4 +331,3 @@ }
               toggleHover($current, 0);
-              // If last item is selected, cycle to the first item; or else select
-              // the next item
+              // If last item is selected, cycle to the first item; or else select the next item
               toggleHover(nHoverIndex===nLastIndex ? $items.eq(0) : $items.eq(nHoverIndex+1), 1);
@@ -365,5 +379,6 @@ }
       // Construct menu item
+      // elOpt is null for first item in multi-select menus
       renderItem = function(elOpt, sClass, bSelected) {
         var sGroup = '',
-          sText,
+          sText = '',
           sTitle;
@@ -402,7 +417,6 @@ sClass = sClass || '';
         var $dropdown = $(o.currentTarget||o);
-        // NOTE: Sometimes it's possible for $dropdown to point to the wrong
-        // element when you quickly hover over another menu. To prevent this, we
-        // need to check for .active as a backup and manually reassign $dropdown.
-        // This also requires that it's not clicked on because in rare cases the
-        // reassignment fails and the reverse menu will not get reset.
+        // NOTE: Sometimes it's possible for $dropdown to point to the wrong element when you
+        // quickly hover over another menu. To prevent this, we need to check for .active as a
+        // backup and manually reassign $dropdown. This also requires that it's not clicked on
+        // because in rare cases the reassignment fails and the reverse menu will not get reset.
         if (o.type==='mouseleave' && !$dropdown.hasClass('active') && !$dropdown.data('clicked')) $dropdown = $('.prettydropdown > ul.active');
@@ -420,2 +434,3 @@ $dropdown.data('hover', false);
       // Set menu item hover state
+      // bNoScroll set on hoverDropdownItem()
       toggleHover = function($li, bOn, bNoScroll) {
@@ -475,2 +490,3 @@ if (bOn) {
         $select.unwrap().data('loaded', false);
+        this.size = $select.data('size');
         init(this);
@@ -477,0 +493,0 @@ });

package.json

 {
   "name": "pretty-dropdowns",
-  "version": "4.9.0",
+  "version": "4.9.4",
   "description": "A simple, lightweight jQuery plugin to create stylized drop-down menus.",
@@ -5,0 +5,0 @@ "keywords": [

No alert changes

Improved metrics

Total package byte prevSize

41059

increased by2.34%

Lines of code

638

increased by2.57%

No dependency changes