diff --git a/RELEASE-NOTES.md b/RELEASE-NOTES.md index c7cc2b3fd..2c037779a 100644 --- a/RELEASE-NOTES.md +++ b/RELEASE-NOTES.md @@ -43,6 +43,7 @@ - **Dropdown** - Dropdowns now automatically observe changes in `menu` and will update selector cache with new additions - **Dropdown** - Added `showOnFocus` option that lets you specify whether dropdown menu should show on focus - **Dropdown** - `fullTextSearch: true` now uses fuzzy search (same as `ui search`) +- **Dropdown** - Page down and page up now works with dropdown menus - **Form** - Added placeholder color rules for IE, `ms-input-placeholder` - **Form** - Fix `errored field` dropdown keyboard selection color - **Form Validation** - `data-validate` now takes precedence over other validation matching schemes like `name` or `id` diff --git a/src/definitions/modules/dropdown.js b/src/definitions/modules/dropdown.js index 351f74d6b..f4eecb451 100644 --- a/src/definitions/modules/dropdown.js +++ b/src/definitions/modules/dropdown.js @@ -169,6 +169,9 @@ $.fn.dropdown = function(parameters) { query = module.get.query() ; module.verbose('Searching for query', query); + if(settings.allowAdditions) { + module.add.userChoice(); + } module.filter(query); if(module.is.searchSelection() && module.can.show() ) { module.show(); @@ -1757,11 +1760,35 @@ $.fn.dropdown = function(parameters) { html = settings.templates.message(message) ; if($message.length > 0) { - module.remove.message(); + $message + .html(html) + ; + } + else { + $message = $('
') + .html(html) + .addClass(className.message) + .appendTo($menu) + ; } - $message = $(html) - .appendTo($menu) + }, + userChoice: function(choice) { + var + $addition = $menu.children(selector.addition), + html = settings.templates.addition(choice) ; + if($addition.length > 0) { + $addition + .html(html) + ; + } + else { + $addition = $('
') + .html(html) + .addClass(className.addition) + .prependTo($menu) + ; + } }, variables: function(message) { var @@ -2345,71 +2372,45 @@ $.fn.dropdown.settings = { verbose : false, performance : true, - on : 'click', - // what event should show menu - - action : 'activate', - // action on item selection - - allowTab : true, - // add tabindex to element - - showOnFocus : true, - // show menu on focus - - fullTextSearch : false, - // search anywhere in value + on : 'click', // what event should show menu action on item selection + action : 'activate', // action on item selection - placeholder : 'auto', - // whether to convert blank values to placeholder text + preserveHTML : true, // preserve html when selecting value + sortSelect : false, // sort selection on init - match : 'both', - // what to match against with search selection (both, text, or label) + forceSelection : true, // force a choice on blur with search selection + useLabels : true, // whether multiple select should filter currently active selections from choices - allowCategorySelection : false, - // allow elements with sub-menus to be selected + transition : 'auto', // auto transition will slide down or up based on direction + duration : 200, // duration of transition - forceSelection : true, - // force a value selection on search selection + allowAdditions : false, // whether multiple select should allow user added values + delimiter : ',', // multi select delimiting key - transition : 'auto', - duration : 200, - // menu transition + glyphWidth : 1.0714, // widest glyph width in em (W is 1.0714 em) used to calculate multiselect input width + // delay before event delay : { hide : 300, show : 200, search : 50, touch : 50 }, - // delay before event - - glyphWidth : 1.0714, - // widest glyph width in em (W is 1.0714 em) used to calculate multiselect input width - - allowAdditions : false, - // whether multiple select should allow user added values - - tokenize : 'missing', - delimiter : ',', - // multi select delimiting key + // label settings on multi-select label: { transition : 'horizontal flip', - duration : 150, + duration : 200, variation : false }, - // label settings on multi-select - - useLabels : true, - // whether multiple select should filter currently active selections from choices - /* Callbacks */ onLabelSelect : function($selectedLabels){}, @@ -2448,6 +2449,7 @@ $.fn.dropdown.settings = { }, selector : { + addition : '.addition', dropdown : '.ui.dropdown', icon : '> .dropdown.icon', input : '> input[type="hidden"], > select', @@ -2464,6 +2466,7 @@ $.fn.dropdown.settings = { className : { active : 'active', + addition : 'addition', animating : 'animating', disabled : 'disabled', dropdown : 'ui dropdown', @@ -2487,23 +2490,7 @@ $.fn.dropdown.settings = { /* Templates */ $.fn.dropdown.settings.templates = { - message: function(message) { - return '
' + message + '
'; - }, - menu: function(select) { - var - placeholder = select.placeholder || false, - values = select.values || {}, - html = '' - ; - $.each(select.values, function(index, option) { - html += '
' + option.name + '
'; - }); - return html; - }, - label: function(value, text) { - return text + ''; - }, + // generates dropdown from select values dropdown: function(select) { var placeholder = select.placeholder || false, @@ -2523,16 +2510,37 @@ $.fn.dropdown.settings.templates = { }); html += '
'; return html; - } -}; + }, + + // generates just menu from select + menu: function(select) { + var + placeholder = select.placeholder || false, + values = select.values || {}, + html = '' + ; + $.each(select.values, function(index, option) { + html += '
' + option.name + '
'; + }); + return html; + }, + + // generates label for multiselect + label: function(value, text) { + return text + ''; + }, -/* Dependencies */ -$.extend( $.easing, { - easeOutQuad: function (x, t, b, c, d) { - return -c *(t/=d)*(t-2) + b; + // generates messages like "No results" + message: function(message) { + return message; }, -}); + // generates user addition to selection menu + addition: function(choice) { + return choice; + } + +}; })( jQuery, window , document ); diff --git a/src/themes/github/collections/menu.variables b/src/themes/github/collections/menu.variables index 7f4000b39..14793204d 100644 --- a/src/themes/github/collections/menu.variables +++ b/src/themes/github/collections/menu.variables @@ -16,14 +16,10 @@ @activeBackground: rgba(0, 0, 0, 0.04); @activeHoverBackground: rgba(0, 0, 0, 0.04); -@boxShadow: - 0px 1px 2px 0px rgba(0, 0, 0, 0.15) -; @headerBackground: rgba(0, 0, 0, 0.08); -@subMenuMargin: 1em; -@subMenuFontSize: 0.9rem; +@subMenuMargin: 0.5em -0.6em 0; @subMenuHorizontalPadding: 0.7em; @arrowHoverColor: #EEEEEE;