diff --git a/src/definitions/modules/dropdown.js b/src/definitions/modules/dropdown.js index 9b46b5327..7f7d33dbf 100644 --- a/src/definitions/modules/dropdown.js +++ b/src/definitions/modules/dropdown.js @@ -49,6 +49,7 @@ $.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) @@ -65,7 +66,8 @@ $.fn.dropdown = function(parameters) { elementNamespace, id, - observer, + selectObserver, + menuObserver, module ; @@ -117,25 +119,37 @@ $.fn.dropdown = function(parameters) { $document .off(elementNamespace) ; + if(selectObserver) { + selectObserver.disconnect(); + } + if(menuObserver) { + menuObserver.disconnect(); + } }, observeChanges: function() { if('MutationObserver' in window) { - observer = new MutationObserver(function(mutations) { - if( module.is.selectMutation(mutations) ) { - module.debug(' modified, recreating menu'); + module.setup.select(); }); - observer.observe(element, { - childList : true, - subtree : true + menuObserver = new MutationObserver(function(mutations) { + module.debug('Menu modified, updating selector cache'); + module.refresh(); }); - module.debug('Setting up mutation observer', observer); + if(module.has.input()) { + selectObserver.observe($input[0], { + childList : true, + subtree : true + }); + } + if(module.has.menu()) { + menuObserver.observe($menu[0], { + childList : true, + subtree : true + }); + } + module.debug('Setting up mutation observer', selectObserver, menuObserver); } }, @@ -165,12 +179,15 @@ $.fn.dropdown = function(parameters) { if( $module.is('select') ) { module.setup.select(); } - if( module.is.search() && !module.is.searchable() ) { + if( module.is.search() && !module.has.search() ) { $search = $('') .addClass(className.search) .insertBefore($text) ; } + if( module.is.multiple() && !module.has.labels()) { + $labels = $('
').addClass(className.labels).insertBefore($search); + } if(settings.allowTab) { module.set.tabbable(); } @@ -238,8 +255,10 @@ $.fn.dropdown = function(parameters) { ? $module.prev().find(selector.text) : $module.prev() ; - $menu = $module.children(selector.menu); - $item = $menu.find(selector.item); + $menu = $module.children(selector.menu); + $item = $menu.find(selector.item); + // multiple + $labels = $module.find(selector.labels); }, toggle: function() { @@ -310,7 +329,7 @@ $.fn.dropdown = function(parameters) { $module .on('keydown' + eventNamespace, module.event.keydown) ; - if( module.is.searchable() ) { + if( module.has.search() ) { $module .on(module.get.inputEvent(), selector.search, module.event.input) ; @@ -1071,7 +1090,7 @@ $.fn.dropdown = function(parameters) { } }, tabbable: function() { - if( module.is.searchable() ) { + if( module.has.search() ) { module.debug('Searchable dropdown initialized'); $search .val('') @@ -1224,7 +1243,7 @@ $.fn.dropdown = function(parameters) { $item.removeClass(className.selected); }, tabbable: function() { - if( module.is.searchable() ) { + if( module.has.search() ) { module.debug('Searchable dropdown initialized'); $search .attr('tabindex', '-1') @@ -1245,6 +1264,21 @@ $.fn.dropdown = function(parameters) { } }, + has: { + labels: function() { + return ($labels.length > 0); + }, + search: function() { + return ($search.length > 0); + }, + input: function() { + return ($input.length > 0); + }, + menu: function() { + return ($menu.length > 0); + } + }, + is: { active: function() { return $module.hasClass(className.active); @@ -1267,6 +1301,9 @@ $.fn.dropdown = function(parameters) { : $menu.is(':hidden') ; }, + multiple: function() { + return $module.hasClass(className.multiple) || ($module.is('select') && $module.attr('multiple')); + }, selectMutation: function(mutations) { var selectChanged = false @@ -1282,11 +1319,8 @@ $.fn.dropdown = function(parameters) { search: function() { return $module.hasClass(className.search); }, - searchable: function() { - return ($search.length > 0); - }, searchSelection: function() { - return ( module.is.searchable() && $search.parent().is($module) ); + return ( module.has.search() && $search.closest(selector.menu).length == 0 ); }, selection: function() { return $module.hasClass(className.selection); @@ -1732,9 +1766,10 @@ $.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, .menu > input.search', + search : 'input.search, .menu > .search > input', text : '> .text:not(.icon)' }, @@ -1744,8 +1779,10 @@ $.fn.dropdown.settings = { disabled : 'disabled', dropdown : 'ui dropdown', filtered : 'filtered', + labels : 'labels', loading : 'loading', menu : 'menu', + multiple : 'multiple', placeholder : 'default', search : 'search', selected : 'selected', diff --git a/src/definitions/modules/dropdown.less b/src/definitions/modules/dropdown.less index c5bdde85c..2992f0f45 100755 --- a/src/definitions/modules/dropdown.less +++ b/src/definitions/modules/dropdown.less @@ -457,7 +457,7 @@ select.ui.dropdown { box-shadow: @selectionVisibleHoverBoxShadow; } .ui.selection.visible.dropdown:hover .menu { - border: @selectionVisibleHoverMenuBorder; + border-color: @selectionVisibleHoverBorderColor; box-shadow: @selectionVisibleHoverMenuBoxShadow; } @@ -513,10 +513,12 @@ select.ui.dropdown { } /* Text Layering */ +.ui.search.dropdown > .pointer > input.search, .ui.search.dropdown > input.search { position: absolute; z-index: 2; } +.ui.search.dropdown > .pointer > .text, .ui.search.dropdown > .text { cursor: text; position: relative; @@ -524,22 +526,33 @@ select.ui.dropdown { } /* Search Selection */ +.ui.search.selection.dropdown > .pointer > input.search, .ui.search.selection.dropdown > input.search { line-height: @searchSelectionLineHeight; padding: @searchSelectionInputPadding; } /* Active/Visible Search */ +.ui.search.dropdown.active > .pointer > input.search, +.ui.search.dropdown.visible > .pointer > input.search, .ui.search.dropdown.active > input.search, .ui.search.dropdown.visible > input.search { cursor: auto; } +.ui.search.dropdown.active > .pointer > .text, +.ui.search.dropdown.visible > .pointer > .text, .ui.search.dropdown.active > .text, .ui.search.dropdown.visible > .text { pointer-events: none; } -.ui.active.search.dropdown > input.search:focus + .text { - color: @unselectedTextColor !important; + +/* Filtered Text */ +.ui.active.search.dropdown input.search:focus + .text .icon, +.ui.active.search.dropdown input.search:focus + .text .flag { + opacity: @selectionTextUnderlayIconOpacity; +} +.ui.active.search.dropdown input.search:focus + .text { + color: @selectionTextUnderlayColor !important; } /* Search Menu */ @@ -570,6 +583,30 @@ select.ui.dropdown { } } +/*-------------- + Multiple +---------------*/ + +/* Multiple Search Selection */ +.ui.multiple.dropdown > .labels { + display: inline-block; + vertical-align: middle; +} + +/* Search Selection */ +.ui.multiple.search.selection.dropdown > .labels { + margin: -@selectionVerticalPadding 0em; +} +.ui.multiple.search.selection.dropdown > input.search { + 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; +} + /*-------------- Inline diff --git a/src/themes/default/modules/dropdown.variables b/src/themes/default/modules/dropdown.variables index f79baf5cd..473d24aaf 100644 --- a/src/themes/default/modules/dropdown.variables +++ b/src/themes/default/modules/dropdown.variables @@ -114,7 +114,7 @@ @selectionMinWidth: 180px; @selectionBackground: @white; @selectionDisplay: inline-block; -@selectionItemDivider: 1px solid rgba(0, 0, 0, 0.05); +@selectionItemDivider: 1px solid @borderColor; @selectionVerticalPadding: 0.8em; @selectionHorizontalPadding: 1.1em; @selectionPadding: @selectionVerticalPadding @selectionHorizontalPadding; @@ -129,6 +129,9 @@ @selectionTextIconDistance: 2em; @selectionTextColor: @textColor; +@selectionTextUnderlayIconOpacity: @disabledOpacity; +@selectionTextUnderlayColor: @unselectedTextColor; + @selectionBoxShadow: none; @selectionBorderColor: @borderColor; @selectionBorder: 1px solid @selectionBorderColor;