From 52897fdbc4d63973f119284fc70074bf9a1d8541 Mon Sep 17 00:00:00 2001 From: jlukic Date: Fri, 20 Mar 2015 15:52:28 -0400 Subject: [PATCH] Iteration on multiselect #847 --- src/definitions/elements/label.less | 1 - src/definitions/modules/dropdown.js | 95 +++++++++++-------- src/definitions/modules/dropdown.less | 47 +++++---- src/themes/default/elements/label.variables | 4 +- src/themes/default/modules/dropdown.variables | 16 +++- 5 files changed, 100 insertions(+), 63 deletions(-) diff --git a/src/definitions/elements/label.less b/src/definitions/elements/label.less index 00d5614a6..9e61d443c 100755 --- a/src/definitions/elements/label.less +++ b/src/definitions/elements/label.less @@ -53,7 +53,6 @@ margin-right: 0em; } - /* Link */ a.ui.label { cursor: pointer; diff --git a/src/definitions/modules/dropdown.js b/src/definitions/modules/dropdown.js index 0f164e4ab..24c62d724 100644 --- a/src/definitions/modules/dropdown.js +++ b/src/definitions/modules/dropdown.js @@ -49,7 +49,6 @@ $.fn.dropdown = function(parameters) { $module = $(this), $text = $module.find(selector.text), $search = $module.find(selector.search), - $labels = $module.find(selector.labels), $input = $module.find(selector.input), $combo = ($module.prev().find(selector.text).length > 0) @@ -185,9 +184,6 @@ $.fn.dropdown = function(parameters) { .insertBefore($text) ; } - if( module.is.multiple() && !module.has.labels()) { - $labels = $('
').addClass(className.labels).insertBefore($search); - } if(settings.allowTab) { module.set.tabbable(); } @@ -260,8 +256,6 @@ $.fn.dropdown = function(parameters) { ; $menu = $module.children(selector.menu); $item = $menu.find(selector.item); - // multiple - $labels = $module.find(selector.labels); }, toggle: function() { @@ -456,7 +450,6 @@ $.fn.dropdown = function(parameters) { .not($results) .addClass(className.filtered) ; - module.verbose('Selecting first non-filtered element'); module.remove.selectedItem(); $item @@ -980,8 +973,8 @@ $.fn.dropdown = function(parameters) { }, item: function(value, strict) { var - isMultiple = module.is.multiple(), - $selectedItem = false + $selectedItem = false, + isMultiple ; value = (value !== undefined) ? value @@ -989,7 +982,8 @@ $.fn.dropdown = function(parameters) { ? module.get.value() : module.get.text() ; - strict = (value === '' || value === 0) + isMultiple = (module.is.multiple() && $.isArray(value)); + strict = (value === '' || value === 0) ? true : strict || false ; @@ -1001,36 +995,32 @@ $.fn.dropdown = function(parameters) { optionText = module.get.choiceText($choice), optionValue = module.get.choiceValue($choice, optionText) ; - if(strict) { - module.verbose('Ambiguous dropdown value using strict type check', $choice, value); - if( optionValue === value ) { - $selectedItem = $(this); - return true; + if(isMultiple) { + if($.inArray(optionValue, value) !== -1 || $.inArray(optionText, value) !== -1) { + $selectedItem = ($selectedItem) + ? $selectedItem.add($choice) + : $choice + ; } - else if( !$selectedItem && optionText === value ) { - $selectedItem = $(this); + } + else if(strict) { + module.verbose('Ambiguous dropdown value using strict type check', $choice, value); + if( optionValue === value || optionText === value) { + $selectedItem = $choice; return true; } } else { - if( optionValue == value ) { + if( optionValue == value || optionText == value) { module.verbose('Found select item by value', optionValue, value); - $selectedItem = $(this); - return true; - } - else if( !$selectedItem && optionText == value ) { - module.verbose('Found select item by text', optionText, value); - $selectedItem = $(this); + $selectedItem = $choice; return true; } } }) ; } - else { - value = module.get.text(); - } - return $selectedItem || false; + return $selectedItem; } }, @@ -1154,13 +1144,10 @@ $.fn.dropdown = function(parameters) { ? forceScroll : false ; - if($item && hasActive) { - if(!$menu.hasClass(className.visible)) { $menu.addClass(className.loading); } - menuHeight = $menu.height(); itemHeight = $item.height(); menuScroll = $menu.scrollTop(); @@ -1266,16 +1253,42 @@ $.fn.dropdown = function(parameters) { $selectedItem .addClass(className.active) .addClass(className.selected) + .each(function() { + var + $selected = $(this) + ; + selectedText = module.get.choiceText($selected); + selectedValue = module.get.choiceValue($selected, selectedText); + if(module.is.multiple()) { + module.add.label(selectedValue, selectedText); + } + else { + module.set.text(selectedText); + } + module.set.value(selectedValue); + settings.onChange.call(element, selectedValue, selectedText, $selected); + }) ; - selectedText = module.get.choiceText($selectedItem); - selectedValue = module.get.choiceValue($selectedItem, selectedText); - module.set.text(selectedText); - module.set.value(selectedValue); - settings.onChange.call(element, value, selectedText, $selectedItem); } } }, + add: { + label: function(value, text) { + var + $label = $('') + .addClass(className.label) + .data('value', value) + .html(text + '') + ; + if(settings.label.variation) { + $label.addClass(settings.label.variation); + } + module.debug('Adding selection label', $label); + $label.insertBefore($search); + } + }, + remove: { active: function() { $module.removeClass(className.active); @@ -1318,9 +1331,6 @@ $.fn.dropdown = function(parameters) { }, has: { - labels: function() { - return ($labels.length > 0); - }, search: function() { return ($search.length > 0); }, @@ -1775,6 +1785,10 @@ $.fn.dropdown.settings = { preserveHTML : true, sortSelect : false, + label: { + variation: false + }, + allowCategorySelection : false, delay : { @@ -1819,7 +1833,6 @@ $.fn.dropdown.settings = { dropdown : '.ui.dropdown', input : '> input[type="hidden"], > select', item : '.item', - labels : '> .labels', menu : '.menu', menuIcon : '.dropdown.icon', search : 'input.search, .menu > .search > input', @@ -1832,7 +1845,7 @@ $.fn.dropdown.settings = { disabled : 'disabled', dropdown : 'ui dropdown', filtered : 'filtered', - labels : 'labels', + label : 'ui label', loading : 'loading', menu : 'menu', multiple : 'multiple', diff --git a/src/definitions/modules/dropdown.less b/src/definitions/modules/dropdown.less index daea2fccc..37508d037 100755 --- a/src/definitions/modules/dropdown.less +++ b/src/definitions/modules/dropdown.less @@ -354,9 +354,6 @@ select.ui.dropdown { border: @selectBorder; visibility: @selectVisibility; } -.ui.selection.dropdown > .text { - margin-right: @selectionTextIconDistance; -} .ui.selection.dropdown > .search.icon, .ui.selection.dropdown > .delete.icon, .ui.selection.dropdown > .dropdown.icon { @@ -594,28 +591,44 @@ select.ui.dropdown { ---------------*/ /* Multiple Search Selection */ -.ui.multiple.dropdown > .labels { +.ui.multiple.dropdown { + cursor: auto; + padding: @multipleSelectionTopPadding @multipleSelectionRightPadding @multipleSelectionBottomPadding @multipleSelectionLeftPadding; +} + +/* Selection Label */ +.ui.multiple.dropdown > .label { display: inline-block; vertical-align: middle; + padding: @labelPadding; + margin: 0em @labelSpacing @labelSpacing 0em; } -/* Search Selection */ -.ui.multiple.search.selection.dropdown > .labels { - margin: -@selectionVerticalPadding 0em; -} -.ui.multiple.search.selection.dropdown > input.search { +/* Prompt Text */ +.ui.multiple.dropdown > .text { + display: none; + position: absolute; + top: auto; left: auto; - min-width: 200px; - padding-left: 0; } -.ui.multiple.search.selection.dropdown > .labels + input.search, -.ui.multiple.search.selection.dropdown > .labels ~ .text { - padding-left: 0.5em; + +/* Input */ +.ui.multiple.selection.dropdown > input.search { + position: static; + padding: 0; + width: auto; + margin-top: @searchSelectionLineHeightOffset; + padding-top: @labelVerticalPadding; +} +.ui.multiple.selection.dropdown > .label + input.search { + margin-left: 0.5em; } -/* Don't Allow Repeat Selections */ -.ui.multiple.search.selection.dropdown .menu .active.item { - display: none; + +/* Dropdown Icon */ +.ui.multiple.selection.dropdown .dropdown.icon { + padding: 0em; + margin: 0em; } diff --git a/src/themes/default/elements/label.variables b/src/themes/default/elements/label.variables index baeacebf7..b1c4292e1 100644 --- a/src/themes/default/elements/label.variables +++ b/src/themes/default/elements/label.variables @@ -10,7 +10,7 @@ @verticalAlign: baseline; @verticalMargin: 0em; -@horizontalMargin: 0.125em; +@horizontalMargin: 0.142857em; @backgroundColor: #E8E8E8; @backgroundImage: none; @labelTextColor: rgba(0, 0, 0, 0.6); @@ -27,7 +27,7 @@ @transition: background @labelTransitionDuration @labelTransitionEasing; /* Group */ -@groupVerticalMargin: 0.75em; +@groupVerticalMargin: 0.5em; @groupHorizontalMargin: 0.5em; diff --git a/src/themes/default/modules/dropdown.variables b/src/themes/default/modules/dropdown.variables index faea28cba..dc86555d8 100644 --- a/src/themes/default/modules/dropdown.variables +++ b/src/themes/default/modules/dropdown.variables @@ -117,7 +117,8 @@ @selectionItemDivider: 1px solid @borderColor; @selectionVerticalPadding: 0.8em; @selectionHorizontalPadding: 1.1em; -@selectionPadding: @selectionVerticalPadding @selectionHorizontalPadding; +@selectionIconDistance: 2em; +@selectionPadding: @selectionVerticalPadding @selectionIconDistance @selectionVerticalPadding @selectionHorizontalPadding; @selectionZIndex: 10; /*