From f76eb496c02e354308caf96988a1a686e46a069c Mon Sep 17 00:00:00 2001 From: jlukic Date: Wed, 8 Apr 2015 15:33:36 -0400 Subject: [PATCH] Iterating on multi select completion --- src/definitions/modules/dropdown.js | 74 ++++++++++++------- src/definitions/modules/dropdown.less | 26 ++++--- src/themes/default/modules/dropdown.variables | 8 +- 3 files changed, 72 insertions(+), 36 deletions(-) diff --git a/src/definitions/modules/dropdown.js b/src/definitions/modules/dropdown.js index a8bb0c10d..9d7d5b230 100644 --- a/src/definitions/modules/dropdown.js +++ b/src/definitions/modules/dropdown.js @@ -367,7 +367,6 @@ $.fn.dropdown = function(parameters) { module.verbose('Mouse detected binding mouse events'); if(module.is.multiple()) { $module - .on('click' + eventNamespace, module.event.click) .on('click' + eventNamespace, selector.label, module.event.label.click) .on('click' + eventNamespace, selector.remove, module.event.remove.click) ; @@ -548,7 +547,7 @@ $.fn.dropdown = function(parameters) { event: { focus: function() { - if(settings.showonFocus && !activated && module.is.hidden()) { + if(settings.showOnFocus && !activated && module.is.hidden()) { module.show(); } }, @@ -658,7 +657,12 @@ $.fn.dropdown = function(parameters) { }, test: { toggle: function(event) { - if( module.determine.eventOnElement(event, module.toggle) ) { + var + toggleBehavior = (module.is.multiple()) + ? module.show + : module.toggle + ; + if( module.determine.eventOnElement(event, toggleBehavior) ) { event.preventDefault(); } }, @@ -911,6 +915,7 @@ $.fn.dropdown = function(parameters) { ; if($visibleItems.index( $nextItem ) < 0) { module.verbose('Up key pressed but reached top of current menu'); + event.preventDefault(); return; } else { @@ -934,6 +939,7 @@ $.fn.dropdown = function(parameters) { ; if($nextItem.length === 0) { module.verbose('Down key pressed but reached bottom of current menu'); + event.preventDefault(); return; } else { @@ -1032,20 +1038,19 @@ $.fn.dropdown = function(parameters) { : text ; module.set.selected(value, $(this)); - module.hide(function() { - module.remove.filteredItem(); - }); + if(module.is.multiple() && !module.is.searchSelection() && !module.is.allFiltered()) { + module.filterActive(); + } + else { + module.hide(function() { + module.remove.filteredItem(); + }); + } }, select: function(text, value) { - value = (value !== undefined) - ? value - : text - ; - module.set.selected(value, $(this)); - module.hide(function() { - module.remove.filteredItem(); - }); + // mimics action.activate but does not select text + module.action.activate.call(this); }, combo: function(text, value) { @@ -2107,41 +2112,59 @@ $.fn.dropdown.settings = { verbose : false, performance : true, + // what event should show menu on : 'click', + + // action on item selection action : 'activate', + // add tabindex to element allowTab : true, + + // show menu on focus showOnFocus : true, + // search anywhere in value fullTextSearch : false, - preserveHTML : true, - sortSelect : false, - label: { - transition : 'horizontal flip', - duration : 250, - variation : false - }, + // preserve html when selecting value + preserveHTML : true, + // sort selection on init + sortSelect : false, + // what to match against with search selection (both, text, or label) match: 'both', + // allow elements with sub-menus to be selected allowCategorySelection : false, - delay : { + // delay before event + delay : { hide : 300, show : 200, search : 50, touch : 50 }, + // force a value selection on search selection forceSelection : true, - // widest glyph width in em (W is 1.0714 em) + // menu transiton + transition : 'auto', + duration : 250, + + // widest glyph width in em (W is 1.0714 em) used to calculate multiselect input width glyphWidth : 1.0714, - transition : 'auto', + // multi select delimiting key delimiter : ',', - duration : 250, + + // label settings on multi-select + label: { + transition : 'horizontal flip', + duration : 250, + variation : false + }, /* Callbacks */ onLabelSelect : function($selectedLabels){}, @@ -2151,7 +2174,6 @@ $.fn.dropdown.settings = { onHide : function(){}, /* Component */ - name : 'Dropdown', namespace : 'dropdown', diff --git a/src/definitions/modules/dropdown.less b/src/definitions/modules/dropdown.less index 5145011b4..e47f3843a 100755 --- a/src/definitions/modules/dropdown.less +++ b/src/definitions/modules/dropdown.less @@ -457,6 +457,21 @@ select.ui.dropdown { box-shadow: @selectionVisibleMenuBoxShadow; } +/* Focus */ +.ui.selection.dropdown:focus { + border-color: @selectionFocusBorderColor; + box-shadow: @selectionFocusBoxShadow; +} +.ui.selection.dropdown:focus .menu { + border-color: @selectionFocusBorderColor; + box-shadow: @selectionFocusMenuBoxShadow; +} + +/* Visible */ +.ui.selection.visible.dropdown > .text:not(.default) { + font-weight: @selectionVisibleTextFontWeight; + color: @selectionVisibleTextColor; +} /* Visible Hover */ .ui.selection.visible.dropdown:hover { @@ -468,14 +483,6 @@ select.ui.dropdown { box-shadow: @selectionVisibleHoverMenuBoxShadow; } - -/* Active Item */ -.ui.selection.active.dropdown > .text:not(.default), -.ui.selection.visible.dropdown > .text:not(.default) { - font-weight: @selectionVisibleTextFontWeight; - color: @selectionVisibleTextColor; -} - /* Dropdown Icon */ .ui.active.selection.dropdown > .dropdown.icon, .ui.visible.selection.dropdown > .dropdown.icon { @@ -591,7 +598,7 @@ select.ui.dropdown { /* Multiple Selection */ .ui.multiple.dropdown { - padding: @multipleSelectionTopPadding @multipleSelectionRightPadding @multipleSelectionBottomPadding @multipleSelectionLeftPadding; + padding: @multipleSelectionPadding; } .ui.multiple.dropdown .menu { cursor: auto; @@ -711,6 +718,7 @@ select.ui.dropdown { z-index: @activeItemZIndex; } + /*-------------------- Default Text ----------------------*/ diff --git a/src/themes/default/modules/dropdown.variables b/src/themes/default/modules/dropdown.variables index c11416379..09f35fa65 100644 --- a/src/themes/default/modules/dropdown.variables +++ b/src/themes/default/modules/dropdown.variables @@ -182,6 +182,11 @@ @selectionHoverBorderColor: @selectedBorderColor; @selectionHoverBoxShadow: none; +/* Hover */ +@selectionFocusBorderColor: @selectedBorderColor; +@selectionFocusBoxShadow: none; +@selectionFocusMenuBoxShadow: @raisedShadow; + /* Visible */ @selectionVisibleTextFontWeight: normal; @selectionVisibleTextColor: @hoveredTextColor; @@ -226,6 +231,7 @@ @multipleSelectionRightPadding: @selectionIconDistance; @multipleSelectionBottomPadding: @multipleSelectionTopPadding; @multipleSelectionLeftPadding: (@selectionHorizontalPadding - @labelHorizontalPadding); +@multipleSelectionPadding: @multipleSelectionTopPadding @multipleSelectionRightPadding @multipleSelectionBottomPadding @multipleSelectionLeftPadding; @multipleSelectionInlineMargin: 0.4em 0em 0.4em 0.5em; @multipleSelectionInlineLineHeight: @searchSelectionLineHeight; @@ -301,7 +307,7 @@ @upwardSelectionVisibleBoxShadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.08); @upwardSelectionVisibleHoverBoxShadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.05); @upwardSelectionVisibleHoverMenuBoxShadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.08); -@upwardSelectionVisibleBorderRadius: @selectionVisibleConnectingBorder @selectionVisibleConnectingBorder @borderRadius @borderRadius; +@upwardSelectionVisibleBorderRadius: @selectionVisibleConnectingBorder @selectionVisibleConnectingBorder @borderRadius @borderRadius; /* Flyout Direction */ @leftMenuDropdownIconFloat: left;