pretty-dropdowns - npm Package Compare versions

Comparing version 2.0.0 to 3.0.0

dist/js/jquery.prettydropdowns.js

 /*!
- * jQuery Pretty Dropdowns Plugin v2.0.0 by T. H. Doan (http://thdoan.github.io/pretty-dropdowns/)
+ * jQuery Pretty Dropdowns Plugin v3.0.0 by T. H. Doan (http://thdoan.github.io/pretty-dropdowns/)
  *
@@ -17,3 +17,78 @@ * jQuery Pretty Dropdowns by T. H. Doan is licensed under the MIT License.
     }, oOptions);
-    var nTimer,
+    var nHoverIndex,
+      nLastIndex,
+      nTimer,
+      aKeys = [
+        '0','1','2','3','4','5','6','7','8','9',,,,,,,,
+        'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'
+      ],
+      $current,
+      handleKeypress = function(e) {
+        var $dropdown = $('.prettydropdown > ul.active'),
+          nItemsHeight = $dropdown.height()/(oOptions.height-2),
+          nItemsPerPage = nItemsHeight%1<0.5 ? Math.floor(nItemsHeight) : Math.ceil(nItemsHeight),
+          sKey;
+        if (!$dropdown.length) return;
+        nHoverIndex = $dropdown.children('li.hover').index();
+        nLastIndex = $dropdown.children().length-1;
+        $current = $dropdown.children().eq(nHoverIndex);
+        $dropdown.data('lastKeypress', +new Date());
+        switch (e.which) {
+          case 13: // Enter
+            $current.click();
+            return;
+          case 27: // Esc
+            resetDropdown($dropdown[0]);
+            return;
+          case 32: // Space
+            sKey = ' ';
+            break;
+          case 33: // Page Up
+            toggleHover($current, 0);
+            toggleHover($dropdown.children().eq(Math.max(nHoverIndex-nItemsPerPage-1, 0)), 1);
+            return;
+          case 34: // Page Down
+            toggleHover($current, 0);
+            toggleHover($dropdown.children().eq(Math.min(nHoverIndex+nItemsPerPage-1, nLastIndex)), 1);
+            return;
+          case 35: // End
+            toggleHover($current, 0);
+            toggleHover($dropdown.children().eq(nLastIndex), 1);
+            return;
+          case 36: // Home
+            toggleHover($current, 0);
+            toggleHover($dropdown.children().eq(0), 1);
+            return;
+          case 38: // Up
+            toggleHover($current, 0);
+            // If not already key-navigated or first item is selected, cycle to the last item;
+            // else select the previous item
+            toggleHover(nHoverIndex ? $dropdown.children().eq(nHoverIndex-1) : $dropdown.children().eq(nLastIndex), 1);
+            return;
+          case 40: // Down
+            toggleHover($current, 0);
+            // If last item is selected, cycle to the first item;
+            // else select the next item
+            toggleHover(nHoverIndex===nLastIndex ? $dropdown.children().eq(0) : $dropdown.children().eq(nHoverIndex+1), 1);
+            return;
+          default:
+            sKey = aKeys[e.which-48];
+        }
+        if (sKey) { // Alphanumeric key pressed
+          clearTimeout(nTimer);
+          $dropdown.data('keysPressed', $dropdown.data('keysPressed')===undefined ? sKey : $dropdown.data('keysPressed') + sKey);
+          nTimer = setTimeout(function() {
+            $dropdown.removeData('keysPressed');
+          }, 300);
+          $dropdown.children().each(function() {
+            if (this===$current[0]) return true;
+            var $this = $(this);
+            if ($this.text().toLowerCase().indexOf($dropdown.data('keysPressed'))===0) {
+              toggleHover($dropdown.children(), 0);
+              toggleHover($this, 1);
+              return false;
+            }
+          });
+        }
+      },
       resetDropdown = function(o) {
@@ -25,6 +100,29 @@ var $dropdown = $(o.currentTarget||o);
           if (!$dropdown.data('hover')) {
-            if ($dropdown.hasClass('reverse')) $dropdown.prepend($('li:last-child', $dropdown));
-            $dropdown.removeClass('active reverse').css('height', '');
+            if ($dropdown.hasClass('reverse')) $dropdown.prepend($dropdown.children('li:last-child'));
+            $dropdown.removeClass('active changing reverse').css('height', '');
+            $dropdown.children().removeClass('hover nohover');
+            $dropdown.removeData('clicked');
+            $('body').off('keydown', handleKeypress);
           }
-        }, (o.type==='mouseleave') ? oOptions.hoverIntent : 0);
+        }, (o.type==='mouseleave' && !$dropdown.data('clicked')) ? oOptions.hoverIntent : 0);
+      },
+      hoverDropdownItem = function(e) {
+        var $dropdown = $(e.currentTarget);
+        if (!$dropdown.hasClass('active') || new Date()-$dropdown.data('lastKeypress')<200) return;
+        toggleHover($dropdown.children(), 0, 1);
+        toggleHover($(e.target), 1, 1);
+      },
+      toggleHover = function($el, bOn, bNoScroll) {
+        if (bOn) {
+          $el.removeClass('nohover').addClass('hover');
+          if ($el.length===1 && $current && !bNoScroll) {
+            var $dropdown = $el.parent();
+            // setTimeout() is required or it will execute too early
+            if ($el.index()===0) setTimeout(function(){ $dropdown.scrollTop(0) });
+            else if ($el.index()===nLastIndex) setTimeout(function(){ $dropdown.scrollTop($dropdown.height()) });
+            else $el[0].scrollIntoView($el.index()<$current.index());
+          }
+        } else {
+          $el.removeClass('hover').addClass('nohover');
+        }
       };
@@ -41,2 +139,3 @@ // Validate options
       var nWidth = $this.outerWidth(),
+        // Height - 2px for borders
         sHtml = '<ul' + ($this.attr('title')?' title="'+$this.attr('title')+'"':'') + ' style="max-height:' + (oOptions.height-2) + 'px;margin:'
@@ -54,6 +153,6 @@ + $this.css('margin-top') + ' '
         };
-      $('option:selected', $this).each(function() {
+      $this.children('option:selected').each(function() {
         sHtml += renderItem(this, 'selected');
       });
-      $('option:not(:selected)', $this).each(function() {
+      $this.children('option:not(:selected)').each(function() {
         sHtml += renderItem(this);
@@ -63,3 +162,3 @@ });
       $this.css('visibility', 'hidden').wrap('<div class="prettydropdown ' + oOptions.customClass + ' loading"></div>').before(sHtml).data('loaded', true);
-      var $dropdown = $('ul', $this.parent()),
+      var $dropdown = $this.parent().children('ul'),
         nWidth = $dropdown.outerWidth(true),
@@ -74,16 +173,16 @@ nOuterWidth;
         $('body').append($clone);
-        nWidth = $('ul', $clone).outerWidth(true);
+        nWidth = $clone.children('ul').outerWidth(true);
         $('li', $clone).width(nWidth);
-        nOuterWidth = $('ul', $clone).outerWidth(true);
+        nOuterWidth = $clone.children('ul').outerWidth(true);
         $clone.remove();
       }
       // Set dropdown width and event handler
-      $('li', $dropdown).width(nWidth).click(function() {
+      $dropdown.children('li').width(nWidth).click(function() {
         var $li = $(this);
         // Only update if different value selected
-        if ($dropdown.hasClass('active') && $li.data('value')!==$('li.selected', $dropdown).data('value')) {
-          $('.selected', $dropdown).removeClass('selected');
+        if ($dropdown.hasClass('active') && $li.data('value')!==$dropdown.children('li.selected').data('value')) {
+          $dropdown.children('li.selected').removeClass('selected');
           $dropdown.prepend($li.addClass('selected')).removeClass('reverse');
           // Sync <select> element
-          $('option[value="' + $li.data('value') +'"]', $this).prop('selected', true);
+          $this.children('option[value="' + $li.data('value') +'"]').prop('selected', true);
           $this.trigger('change');
@@ -102,3 +201,3 @@ }
             if (nOffsetTop-nScrollTop>nWinHeight-(nOffsetTop-nScrollTop+oOptions.height)) {
-              $dropdown.addClass('reverse').append($('li.selected', $dropdown));
+              $dropdown.addClass('reverse').append($dropdown.children('li.selected'));
               if (nOffsetTop-nScrollTop+oOptions.height<nDropdownHeight) {
@@ -112,3 +211,5 @@ $dropdown.outerHeight(nOffsetTop-nScrollTop+oOptions.height);
           }
+          $('body').on('keydown', handleKeypress);
         } else {
+          $dropdown.addClass('changing').data('clicked', true); // Prevent FOUC
           resetDropdown($dropdown[0]);
@@ -121,3 +222,4 @@ }
         },
-        mouseleave: resetDropdown
+        mouseleave: resetDropdown,
+        mousemove:  hoverDropdownItem
       });
@@ -124,0 +226,0 @@ // Done with everything!

package.json

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

README.md

 # jQuery Pretty Dropdowns
 
-Pretty Dropdowns is a simple, lightweight jQuery plugin that converts `<select>` drop-down menus into "pretty" menus that you can style using CSS. As an extra bonus, it does its best to keep the menu options within the viewport.
+Pretty Dropdowns is a simple, lightweight jQuery plugin that converts `<select>` drop-down menus into "pretty" menus that you can style using CSS. Full keyboard navigation is supported (you can go directly to a menu option by typing its text). As an extra bonus, it does its best to keep the menu options within the viewport.
 
-#### [See a demo &raquo;](http://thdoan.github.io/pretty-dropdowns/demo.html)<br>
+**[See a demo &raquo;](https://thdoan.github.io/pretty-dropdowns/demo.html)**
 
@@ -12,5 +12,5 @@ ## Getting Started
 ```
-<link rel="stylesheet" href="/css/prettydropdowns.css">
+<link rel="stylesheet" href="//cdn.rawgit.com/thdoan/pretty-dropdowns/master/dist/css/prettydropdowns.css">
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
-<script src="/js/jquery.prettydropdowns.js"></script>
+<script src="//cdn.rawgit.com/thdoan/pretty-dropdowns/master/dist/js/jquery.prettydropdowns.js"></script>
 ```
@@ -17,0 +17,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

17169

increased by44.08%

Lines of code

345

increased by50.66%

No dependency changes