pretty-dropdowns - npm Package Compare versions

Comparing version 3.3.3 to 4.0.0

dist/js/jquery.prettydropdowns.js

 /*!
- * jQuery Pretty Dropdowns Plugin v3.3.3 by T. H. Doan (http://thdoan.github.io/pretty-dropdowns/)
+ * jQuery Pretty Dropdowns Plugin v4.0.0 by T. H. Doan (http://thdoan.github.io/pretty-dropdowns/)
  *
@@ -15,3 +15,5 @@ * jQuery Pretty Dropdowns by T. H. Doan is licensed under the MIT License.
       height: 50,
-      hoverIntent: 200
+      hoverIntent: 200,
+      selectedDelimiter: '; ',
+      selectedMarker: '✓'
     }, oOptions);
@@ -137,3 +139,3 @@ var $current,
         var $dropdown = $(e.currentTarget);
-        if ($dropdown[0]===e.target || !$dropdown.hasClass('active') || new Date()-$dropdown.data('lastKeypress')<200) return;
+        if (e.target.nodeName!=='LI' || !$dropdown.hasClass('active') || new Date()-$dropdown.data('lastKeypress')<200) return;
         toggleHover($dropdown.children(), 0, 1);
@@ -158,11 +160,2 @@ toggleHover($(e.target), 1, 1);
       },
-      selectDropdownItem = function($li) {
-        var $dropdown = $li.parent(),
-          $select = $dropdown.parent().find('select');
-        $dropdown.children('li.selected').removeClass('selected');
-        $dropdown.prepend($li.addClass('selected')).removeClass('reverse').attr('aria-activedescendant', $li.attr('id'));
-        // Sync <select> element
-        $select.children('option[value="' + $li.data('value') +'"]').prop('selected', true);
-        $select.trigger('change');
-      },
       toggleHover = function($li, bOn, bNoScroll) {
@@ -195,8 +188,9 @@ if (bOn) {
       if ($select.data('loaded')) return true; // Continue
-      $select.outerHeight(oOptions.height);
-      var nCount = 0,
+      $select.css('visibility', 'hidden').outerHeight(oOptions.height);
+      var bMultiple = $select.prop('multiple'),
+        nCount = 0,
         nTimestamp = +new Date(),
         nWidth = $select.outerWidth(),
         // Height - 2px for borders
-        sHtml = '<ul' + ($select.attr('title')?' title="'+$select.attr('title')+'"':'')
+        sHtml = '<ul' + (this.title ? ' title="' + this.title + '"' : '')
           + ' tabindex="0" role="listbox" aria-activedescendant="item' + nTimestamp
@@ -211,5 +205,6 @@ + '-1" aria-expanded="false" style="max-height:' + (oOptions.height-2) + 'px;margin:'
         renderItem = function(el, sClass) {
-          return '<li id="item' + nTimestamp + '-' + nCount
-            + '" data-value="' + el.value + '"'
-            + (el.title ? ' title="' + el.title + '"' : '')
+          ++nCount;
+          return '<li id="item' + nTimestamp + '-' + nCount + '"'
+            + (el ? ' data-value="' + el.value + '"' : '')
+            + (el && el.title ? ' title="' + el.title + '"' : '')
             + ' role="option"'
@@ -219,15 +214,18 @@ + (sClass ? ' class="' + sClass + '"' : '')
             + 'px;line-height:' + (oOptions.height-2) + 'px"' : '')
-            + '>' + el.text + '</li>';
+            + '>' + (el ? el.text : '') + '</li>';
         };
-      $select.children('option:selected').each(function() {
-        ++nCount;
-        sHtml += renderItem(this, 'selected');
-      });
+      if (bMultiple) {
+        sHtml += renderItem(null, 'selected multiple');
+      } else {
+        $select.children('option:selected').each(function() {
+          sHtml += renderItem(this, 'selected');
+        });
+      }
       $select.children('option:not(:selected)').each(function() {
-        ++nCount;
         sHtml += renderItem(this);
       });
       sHtml += '</ul>';
-      $select.css('visibility', 'hidden').wrap('<div class="prettydropdown ' + oOptions.customClass + ' loading"></div>').before(sHtml).data('loaded', true);
+      $select.wrap('<div class="prettydropdown ' + oOptions.customClass + ' loading"></div>').before(sHtml).data('loaded', true);
       var $dropdown = $select.parent().children('ul'),
+        $items = $dropdown.children(),
         nWidth = $dropdown.outerWidth(true),
@@ -251,8 +249,35 @@ nOuterWidth;
       // is a scrollbar.
-      $dropdown.children().width(nWidth).css('width', $dropdown.children().css('width')).click(function() {
+      $items.width(nWidth).css('width', $items.css('width')).click(function() {
+        var $li = $(this);
         // Only update if different value selected
         if ($dropdown.hasClass('active') && $(this).data('value')!==$dropdown.children('li.selected').data('value')) {
-          selectDropdownItem($(this));
+          // Select highlighted item
+          if ($select.prop('multiple')) {
+            if ($li.data('selected')) $li.children('span').remove();
+            else $li.append(' <span aria-hidden="true">' + oOptions.selectedMarker + '</span>');
+            $li.data('selected', !$li.data('selected'));
+            // Update first item with comma-separated list of selected values
+            var aSelected = [];
+            $items.each(function(nIndex) {
+              if (nIndex===0) return true; // Skip first item
+              if ($(this).data('selected')) aSelected.push($select.children().eq(nIndex-1).text());
+              // Sync <select> element
+              $select.children().eq(nIndex-1).prop('selected', $(this).data('selected'));
+            });
+            if (aSelected.length) {
+              $items.eq(0).text(aSelected.join(oOptions.selectedDelimiter));
+              $dropdown.attr('title', ($select[0].title ? $select[0].title + '\n' : '') + 'Selected: ' + $items.eq(0).text());
+            } else {
+              $items.eq(0).empty();
+              $dropdown.attr('title', $select[0].title);
+            }
+          } else {
+            $dropdown.children('li.selected').removeClass('selected');
+            $dropdown.prepend($li.addClass('selected')).removeClass('reverse').attr('aria-activedescendant', $li.attr('id'));
+            // Sync <select> element
+            $select.children('option[value="' + $li.data('value') +'"]').prop('selected', true);
+          }
+          $select.trigger('change');
         }
-        $dropdown.toggleClass('active');
+        if ($li.index()===0 || !bMultiple || !$dropdown.hasClass('active')) $dropdown.toggleClass('active');
         // Try to keep drop-down menu within viewport
@@ -259,0 +284,0 @@ if ($dropdown.hasClass('active')) {

package.json

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

README.md

@@ -8,3 +8,5 @@ # jQuery Pretty Dropdowns
 - Two arrow styles and sizes to choose from (or add your own style)
-- Full keyboard navigation support (you can even go directly to a menu item by typing its text)
+- Support for multiple-select lists (`<select multiple>`)
+- Tooltips (`title`) carried over at both `<select>` and `<option>` levels
+- Full keyboard navigation (you can even go directly to a menu item by typing its text)
 - Accessible (it plays nicely with screen readers)
@@ -20,5 +22,5 @@ - Sensible (when you open the menu it does its best to keep the menu items within the viewport)
 ```
-<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="//cdn.rawgit.com/thdoan/pretty-dropdowns/master/dist/js/jquery.prettydropdowns.js"></script>
+<link rel="stylesheet" href="/css/prettydropdowns.css">
+<script src="//code.jquery.com/jquery-2.2.4.min.js"></script>
+<script src="/js/jquery.prettydropdowns.js"></script>
 ```
@@ -54,7 +56,9 @@
 
-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.
+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. The minimum value is 8.
+`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. The minimum value is 0.
+`selectedDelimiter` | string | ;            | The separator character to use for the list of selected values in a multi-select menu.
+`selectedMarker`    | string | **&#10003;** | The icon or symbol to mark that an item is selected in a multi-select menu. HTML is accepted (e.g., `<i class="fa fa-check"></i>`).
 
@@ -61,0 +65,0 @@ ## Keyboard Navigation

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

26897

increased by23.7%

Number of package files

7

increased by40%

Lines of code

461

increased by8.73%

Number of lines in readme file

87

increased by4.82%

No dependency changes