Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
pretty-dropdowns
Advanced tools
pretty-dropdowns - npm Package Compare versions
Comparing version 4.7.0 to 4.9.0
| /*! | ||
| * jQuery Pretty Dropdowns Plugin v4.7.0 by T. H. Doan (http://thdoan.github.io/pretty-dropdowns/) | ||
| * jQuery Pretty Dropdowns Plugin v4.9.0 by T. H. Doan (http://thdoan.github.io/pretty-dropdowns/) | ||
| * | ||
@@ -14,2 +14,3 @@ * jQuery Pretty Dropdowns by T. H. Doan is licensed under the MIT License. | ||
| oOptions = $.extend({ | ||
| classic: false, | ||
| customClass: 'arrow', | ||
@@ -23,3 +24,3 @@ height: 50, | ||
| oOptions.selectedMarker = ' <span aria-hidden="true" class="checked">' + oOptions.selectedMarker + '</span>'; | ||
| oOptions.selectedMarker = '<span aria-hidden="true" class="checked"> ' + oOptions.selectedMarker + '</span>'; | ||
| // Validate options | ||
@@ -46,3 +47,5 @@ if (isNaN(oOptions.height) || oOptions.height<8) oOptions.height = 8; | ||
| sLabelId; | ||
| if ($select.data('loaded')) return true; // Continue | ||
| // Exit if widget has already been initiated | ||
| if ($select.data('loaded')) return; | ||
| // Set <select> height to reserve space for <div> container | ||
| $select.css('visibility', 'hidden').outerHeight(oOptions.height); | ||
@@ -62,2 +65,3 @@ nTimestamp = +new Date(); | ||
| var $items = $('optgroup, option', $select), | ||
| $selected = $items.filter(':selected'), | ||
| bMultiple = elSel.multiple, | ||
@@ -70,3 +74,5 @@ nWidth = $select.outerWidth(), | ||
| + ' aria-activedescendant="item' + nTimestamp + '-1" aria-expanded="false"' | ||
| + ' style="max-height:' + (oOptions.height-2) + 'px;margin:' | ||
| + ' 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 | ||
@@ -89,13 +95,25 @@ // we have to get each margin individually. See | ||
| } else { | ||
| $items.filter(':selected').each(function() { | ||
| sHtml += renderItem(this, 'selected'); | ||
| }); | ||
| $items.filter(':not(:selected)').each(function() { | ||
| sHtml += renderItem(this); | ||
| }); | ||
| if (oOptions.classic) { | ||
| $items.each(function() { | ||
| sHtml += renderItem(this); | ||
| }); | ||
| } else { | ||
| sHtml += renderItem($selected[0], 'selected'); | ||
| $items.filter(':not(:selected)').each(function() { | ||
| sHtml += renderItem(this); | ||
| }); | ||
| } | ||
| } | ||
| sHtml += '</ul>'; | ||
| $select.wrap('<div ' + (sId ? 'id="prettydropdown-' + sId + '" ' : '') | ||
| + 'class="prettydropdown ' + (elSel.disabled ? 'disabled ' : '') + (bMultiple ? 'multiple ' : '') | ||
| + oOptions.customClass + ' loading"></div>').before(sHtml).data('loaded', true); | ||
| + 'class="prettydropdown ' | ||
| + (oOptions.classic ? 'classic ' : '') | ||
| + (elSel.disabled ? 'disabled ' : '') | ||
| + (bMultiple ? 'multiple ' : '') | ||
| + 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;"' : '') | ||
| +'></div>').before(sHtml).data('loaded', true); | ||
| var $dropdown = $select.parent().children('ul'), | ||
@@ -107,2 +125,3 @@ nWidth = $dropdown.outerWidth(true), | ||
| if (bMultiple) updateSelected($dropdown); | ||
| else if (oOptions.classic) $('[data-value="' + $selected.val() + '"]', $dropdown).addClass('selected').append(oOptions.selectedMarker); | ||
| // Calculate width if initially hidden | ||
@@ -142,5 +161,7 @@ if ($dropdown.width()<=0) { | ||
| var $selected = $dropdown.children('.selected'); | ||
| $selected.removeClass('selected'); | ||
| $dropdown.prepend($li.addClass('selected')).removeClass('reverse').attr('aria-activedescendant', $li.attr('id')); | ||
| if ($selected.data('group')) $dropdown.children('.label').filter(function() { | ||
| $selected.removeClass('selected').children('span.checked').remove(); | ||
| $li.addClass('selected').append(oOptions.selectedMarker); | ||
| if (!oOptions.classic) $dropdown.prepend($li); | ||
| $dropdown.removeClass('reverse').attr('aria-activedescendant', $li.attr('id')); | ||
| if ($selected.data('group') && !oOptions.classic) $dropdown.children('.label').filter(function() { | ||
| return $(this).text()===$selected.data('group'); | ||
@@ -150,3 +171,7 @@ }).after($selected); | ||
| $('optgroup, option', $select).filter(function() { | ||
| return (this.value===$li.data('value') || this.text===$li.text()); | ||
| // NOTE: .data('value') can return numeric, so using == comparison instead. | ||
| return this.value==$li.data('value') || this.text===$li.contents().filter(function() { | ||
| // Filter out selected marker | ||
| return this.nodeType===3; | ||
| }).text(); | ||
| }).prop('selected', true); | ||
@@ -174,3 +199,4 @@ } | ||
| if (nOffsetTop-nScrollTop>nWinHeight-(nOffsetTop-nScrollTop+oOptions.height)) { | ||
| $dropdown.addClass('reverse').append($dropdown.children('.selected')); | ||
| $dropdown.addClass('reverse'); | ||
| if (!oOptions.classic) $dropdown.append($dropdown.children('.selected')); | ||
| if (nOffsetTop-nScrollTop+oOptions.height<nDropdownHeight) { | ||
@@ -363,4 +389,4 @@ $dropdown.outerHeight(nOffsetTop-nScrollTop+oOptions.height); | ||
| + ((oOptions.height!==50) ? ' style="height:' + (oOptions.height-2) | ||
| + 'px;line-height:' + (oOptions.height-2) + 'px"' : '') + '>' + sText | ||
| + (bSelected ? oOptions.selectedMarker : '') + '</li>'; | ||
| + 'px;line-height:' + (oOptions.height-4) + 'px;"' : '') + '>' + sText | ||
| + ((bSelected || sClass==='selected') ? oOptions.selectedMarker : '') + '</li>'; | ||
| }, | ||
@@ -382,3 +408,3 @@ | ||
| if ($dropdown.data('hover')) return; | ||
| if ($dropdown.hasClass('reverse')) $dropdown.prepend($dropdown.children(':last-child')); | ||
| if ($dropdown.hasClass('reverse') && !oOptions.classic) $dropdown.prepend($dropdown.children(':last-child')); | ||
| $dropdown.removeClass('active reverse').removeData('clicked').attr('aria-expanded', 'false').css('height', ''); | ||
@@ -385,0 +411,0 @@ $dropdown.children().removeClass('hover nohover'); |
| { | ||
| "name": "pretty-dropdowns", | ||
| "version": "4.7.0", | ||
| "version": "4.9.0", | ||
| "description": "A simple, lightweight jQuery plugin to create stylized drop-down menus.", | ||
@@ -5,0 +5,0 @@ "keywords": [ |
@@ -59,7 +59,8 @@ # jQuery Pretty Dropdowns | ||
| ------------------- | -------- | ------------ | ----------- | ||
| `classic` | boolean | false | The default behavior is to move the selected item to the top. If you want the order of items to remain static, then set this to `true`. | ||
| `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. | ||
| `height` | number | 50 | The drop-down menu item height. The minimum value is 8. Note that the maximum number of items displayed when the menu is opened is determined by the `size` attribute of the `<select>` element. | ||
| `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 | **✓** | 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>`). | ||
| `selectedMarker` | string | **✓** | The icon or symbol to mark that an item is selected. HTML is accepted (e.g., `<i class="fa fa-check"></i>`). | ||
| `afterLoad` | function | | Callback function to execute after the drop-down menu widget is loaded. | ||
@@ -87,3 +88,3 @@ | ||
| The `data-prefix` and `data-suffix` attributes can be added to the `<option>` elements to insert custom HTML before and after each menu item, respectively. You can make use of these attributes to add icons, thumbnails, badges, etc. to the menu items. A good example can be seen [in the demo](https://thdoan.github.io/pretty-dropdowns/demo.html#example-spell). | ||
| The `data-prefix` and `data-suffix` attributes can be added to the `<option>` elements to insert custom HTML before and after each menu item, respectively. You can make use of these attributes to add icons, thumbnails, badges, etc. to the menu items. A good example can be seen [in the demo](https://thdoan.github.io/pretty-dropdowns/demo.html#example3). | ||
@@ -115,3 +116,3 @@ ## Keyboard Navigation | ||
| - `aria-labelledby` (points to the `<label>` element that is linked to the `<select>` if it exists) | ||
| - `tabindex="0"` (to allow the widget to get focus) | ||
| - `tabindex="0"` (to allow the widget to get focus when you hit the `Tab` key) | ||
@@ -123,3 +124,2 @@ Please [submit an issue](https://github.com/thdoan/pretty-dropdowns/issues) if there are other ways to improve accessibility. | ||
| - After resizing the window, the drop-down menu near the bottom of the page sometimes doesn't open in reverse. | ||
| - The multi-select container height is larger by one pixel. | ||
| - The `title` value will be read twice in some screen reader clients (once for `title`, once for `aria-label`). | ||
@@ -126,0 +126,0 @@ |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis 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
LicenseThis 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
- increased by7.47%
40119
- Lines of code
- increased by5.42%
622
No dependency changes