pretty-dropdowns - npm Package Compare versions

Comparing version 1.0.6 to 2.0.0

dist/js/jquery.prettydropdowns.js

 /*!
- * jQuery Pretty Dropdowns Plugin v1.0.6 by T. H. Doan (http://thdoan.github.io/pretty-dropdowns/)
+ * jQuery Pretty Dropdowns Plugin v2.0.0 by T. H. Doan (http://thdoan.github.io/pretty-dropdowns/)
  *
@@ -10,10 +10,32 @@ * jQuery Pretty Dropdowns by T. H. Doan is licensed under the MIT License.
 (function($) {
-  $.fn.prettyDropdown = function() {
+  $.fn.prettyDropdown = function(oOptions) {
+    // Default options
+    oOptions = $.extend({
+      customClass: 'arrow',
+      height: 50,
+      hoverIntent: 200
+    }, oOptions);
+    var nTimer,
+      resetDropdown = function(o) {
+        var $dropdown = $(o.currentTarget||o);
+        $dropdown.data('hover', false);
+        clearTimeout(nTimer);
+        nTimer = setTimeout(function() {
+          if (!$dropdown.data('hover')) {
+            if ($dropdown.hasClass('reverse')) $dropdown.prepend($('li:last-child', $dropdown));
+            $dropdown.removeClass('active reverse').css('height', '');
+          }
+        }, (o.type==='mouseleave') ? oOptions.hoverIntent : 0);
+      };
+    // Validate options
+    if (isNaN(oOptions.height) || oOptions.height<8) oOptions.height = 8;
+    if (isNaN(oOptions.hoverIntent) || oOptions.hoverIntent<0) oOptions.hoverIntent = 200;
     return this.each(function() {
       var $this = $(this);
       if ($this.data('loaded')) return true; // Continue
+      $this.outerHeight(oOptions.height);
       // NOTE: $this.css('margin') returns empty string in Firefox.
       // See https://github.com/jquery/jquery/issues/3383
       var nWidth = $this.outerWidth(),
-        sHtml = '<ul' + ($this.attr('title')?' title="'+$this.attr('title')+'"':'') + ' style="margin:'
+        sHtml = '<ul' + ($this.attr('title')?' title="'+$this.attr('title')+'"':'') + ' style="max-height:' + (oOptions.height-2) + 'px;margin:'
           + $this.css('margin-top') + ' '
@@ -23,15 +45,17 @@ + $this.css('margin-right') + ' '
           + $this.css('margin-left') + ';">',
-        resetDropdown = function(o) {
-          var $dropdown = $(o.currentTarget||o);
-          if ($dropdown.hasClass('reverse')) $dropdown.prepend($('li:last-child', $dropdown));
-          $dropdown.removeClass('active reverse').css('height', '');
+        renderItem = function(el, sClass) {
+          return '<li data-value="' + el.value + '"'
+            + (el.title ? ' title="' + el.title + '"' : '')
+            + (sClass ? ' class="' + sClass + '"' : '')
+            + ((oOptions.height!==50) ? ' style="height:' + (oOptions.height-2) + 'px;line-height:' + (oOptions.height-2) + 'px"' : '')
+            + '>' + el.text + '</li>';
         };
       $('option:selected', $this).each(function() {
-        sHtml += '<li class="chevron" data-value="' + this.value + '">' + this.text + '</li>';
+        sHtml += renderItem(this, 'selected');
       });
       $('option:not(:selected)', $this).each(function() {
-        sHtml += '<li data-value="' + this.value + '">' + this.text + '</li>';
+        sHtml += renderItem(this);
       });
       sHtml += '</ul>';
-      $this.css('visibility', 'hidden').wrap('<div class="prettydropdown loading"></div>').before(sHtml).data('loaded', true);
+      $this.css('visibility', 'hidden').wrap('<div class="prettydropdown ' + oOptions.customClass + ' loading"></div>').before(sHtml).data('loaded', true);
       var $dropdown = $('ul', $this.parent()),
@@ -56,5 +80,5 @@ nWidth = $dropdown.outerWidth(true),
         // Only update if different value selected
-        if ($dropdown.hasClass('active') && $li.data('value')!==$('li.chevron', $dropdown).data('value')) {
-          $('.chevron', $dropdown).removeClass('chevron');
-          $dropdown.prepend($li.addClass('chevron')).removeClass('reverse');
+        if ($dropdown.hasClass('active') && $li.data('value')!==$('li.selected', $dropdown).data('value')) {
+          $('.selected', $dropdown).removeClass('selected');
+          $dropdown.prepend($li.addClass('selected')).removeClass('reverse');
           // Sync <select> element
@@ -71,6 +95,14 @@ $('option[value="' + $li.data('value') +'"]', $this).prop('selected', true);
             nDropdownHeight = $dropdown.outerHeight(),
-            nDropdownBottom = nOffsetTop + nDropdownHeight - nScrollTop;
+            nDropdownBottom = nOffsetTop-nScrollTop+nDropdownHeight;
           if (nDropdownBottom>nWinHeight) {
-            if (nOffsetTop-nScrollTop>=nDropdownHeight-50) $dropdown.addClass('reverse').append($('li.chevron', $dropdown));
-            else $dropdown.height($dropdown.height()-(nDropdownBottom-nWinHeight));
+            // Expand to direction that has the most space
+            if (nOffsetTop-nScrollTop>nWinHeight-(nOffsetTop-nScrollTop+oOptions.height)) {
+              $dropdown.addClass('reverse').append($('li.selected', $dropdown));
+              if (nOffsetTop-nScrollTop+oOptions.height<nDropdownHeight) {
+                $dropdown.outerHeight(nOffsetTop-nScrollTop+oOptions.height);
+                $dropdown.scrollTop(nDropdownHeight);
+              }
+            } else {
+              $dropdown.height($dropdown.height()-(nDropdownBottom-nWinHeight));
+            }
           }
@@ -81,3 +113,9 @@ } else {
       });
-      $dropdown.on('mouseleave', resetDropdown);
+      $dropdown.on({
+        mouseenter: function() {
+          $dropdown.data('hover', true);
+        },
+        mouseleave: resetDropdown
+      });
+      // Done with everything!
       $dropdown.parent().width(nOuterWidth||$dropdown.outerWidth(true)).removeClass('loading');
@@ -84,0 +122,0 @@ });

package.json

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

README.md

@@ -31,2 +31,22 @@ # jQuery Pretty Dropdowns
 
+You can also specify some options:
+
+```
+<script>
+$(document).ready(function() {
+  $('select').prettyDropdown({
+    height: 30
+  });
+});
+</script>
+```
+
+## Options
+
+Name          | Type   | Default | Description
+------------- | ------ | ------- | -----------
+`customClass` | string | arrow   | The class name to customize the drop-down menu style. The default `arrow` class displays a chevron-type arrow icon. Two additional helper classes are built in (add either or both to `arrow`): `triangle` converts the chevron into a solid triangle; `small` renders the arrow icon at half size.
+`height`      | number | 50      | The drop-down menu height.
+`hoverIntent` | number | 200     | The wait period (in milliseconds) before collapsing the drop-down menu after you hover off of it. If you hover back onto the menu within the wait period, it will remain open.
+
 ## Installation
@@ -33,0 +53,0 @@

No alert changes

Improved metrics

Total package byte prevSize

11916

increased by30.36%

Lines of code

229

increased by30.11%

Number of lines in readme file

60

increased by50%

No dependency changes