richard
/
SemanSemantic-UItic-UI
mirror of https://github.com/Semantic-Org/Semantic-UI.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Beginning multiselect rewrite

pull/2034/head
jlukic 9 years ago
parent
3f2e341f1f
commit
a1d77ec374
3 changed files with 106 additions and 29 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 87
      src/definitions/modules/dropdown.js
  2. 43
      src/definitions/modules/dropdown.less
  3. 5
      src/themes/default/modules/dropdown.variables

87
src/definitions/modules/dropdown.js
View File

@ -49,6 +49,7 @@ $.fn.dropdown = function(parameters) {
$module = $(this), $module = $(this),
$text = $module.find(selector.text), $text = $module.find(selector.text),
$search = $module.find(selector.search), $search = $module.find(selector.search),
$labels = $module.find(selector.labels),
$input = $module.find(selector.input), $input = $module.find(selector.input),
$combo = ($module.prev().find(selector.text).length > 0) $combo = ($module.prev().find(selector.text).length > 0)
@ -65,7 +66,8 @@ $.fn.dropdown = function(parameters) {
elementNamespace, elementNamespace,
id, id,
observer,
selectObserver,
menuObserver,
module module
; ;
@ -117,25 +119,37 @@ $.fn.dropdown = function(parameters) {
$document $document
.off(elementNamespace) .off(elementNamespace)
; ;
if(selectObserver) {
selectObserver.disconnect();
}
if(menuObserver) {
menuObserver.disconnect();
}
}, },
observeChanges: function() { observeChanges: function() {
if('MutationObserver' in window) { if('MutationObserver' in window) {
observer = new MutationObserver(function(mutations) {
if( module.is.selectMutation(mutations) ) {
module.debug('<select> modified, recreating menu');
module.setup.select();
}
else {
module.debug('DOM tree modified, updating selector cache');
module.refresh();
}
selectObserver = new MutationObserver(function(mutations) {
module.debug('<select> 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') ) { if( $module.is('select') ) {
module.setup.select(); module.setup.select();
} }
if( module.is.search() && !module.is.searchable() ) {
if( module.is.search() && !module.has.search() ) {
$search = $('<input />') $search = $('<input />')
.addClass(className.search) .addClass(className.search)
.insertBefore($text) .insertBefore($text)
; ;
} }
if( module.is.multiple() && !module.has.labels()) {
$labels = $('<div />').addClass(className.labels).insertBefore($search);
}
if(settings.allowTab) { if(settings.allowTab) {
module.set.tabbable(); module.set.tabbable();
} }
@ -238,8 +255,10 @@ $.fn.dropdown = function(parameters) {
? $module.prev().find(selector.text) ? $module.prev().find(selector.text)
: $module.prev() : $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() { toggle: function() {
@ -310,7 +329,7 @@ $.fn.dropdown = function(parameters) {
$module $module
.on('keydown' + eventNamespace, module.event.keydown) .on('keydown' + eventNamespace, module.event.keydown)
; ;
if( module.is.searchable() ) {
if( module.has.search() ) {
$module $module
.on(module.get.inputEvent(), selector.search, module.event.input) .on(module.get.inputEvent(), selector.search, module.event.input)
; ;
@ -1071,7 +1090,7 @@ $.fn.dropdown = function(parameters) {
} }
}, },
tabbable: function() { tabbable: function() {
if( module.is.searchable() ) {
if( module.has.search() ) {
module.debug('Searchable dropdown initialized'); module.debug('Searchable dropdown initialized');
$search $search
.val('') .val('')
@ -1224,7 +1243,7 @@ $.fn.dropdown = function(parameters) {
$item.removeClass(className.selected); $item.removeClass(className.selected);
}, },
tabbable: function() { tabbable: function() {
if( module.is.searchable() ) {
if( module.has.search() ) {
module.debug('Searchable dropdown initialized'); module.debug('Searchable dropdown initialized');
$search $search
.attr('tabindex', '-1') .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: { is: {
active: function() { active: function() {
return $module.hasClass(className.active); return $module.hasClass(className.active);
@ -1267,6 +1301,9 @@ $.fn.dropdown = function(parameters) {
: $menu.is(':hidden') : $menu.is(':hidden')
; ;
}, },
multiple: function() {
return $module.hasClass(className.multiple) || ($module.is('select') && $module.attr('multiple'));
},
selectMutation: function(mutations) { selectMutation: function(mutations) {
var var
selectChanged = false selectChanged = false
@ -1282,11 +1319,8 @@ $.fn.dropdown = function(parameters) {
search: function() { search: function() {
return $module.hasClass(className.search); return $module.hasClass(className.search);
}, },
searchable: function() {
return ($search.length > 0);
},
searchSelection: function() { searchSelection: function() {
return ( module.is.searchable() && $search.parent().is($module) );
return ( module.has.search() && $search.closest(selector.menu).length == 0 );
}, },
selection: function() { selection: function() {
return $module.hasClass(className.selection); return $module.hasClass(className.selection);
@ -1732,9 +1766,10 @@ $.fn.dropdown.settings = {
dropdown : '.ui.dropdown', dropdown : '.ui.dropdown',
input : '> input[type="hidden"], > select', input : '> input[type="hidden"], > select',
item : '.item', item : '.item',
labels : '> .labels',
menu : '.menu', menu : '.menu',
menuIcon : '.dropdown.icon', menuIcon : '.dropdown.icon',
search : '> input.search, .menu > .search > input, .menu > input.search',
search : 'input.search, .menu > .search > input',
text : '> .text:not(.icon)' text : '> .text:not(.icon)'
}, },
@ -1744,8 +1779,10 @@ $.fn.dropdown.settings = {
disabled : 'disabled', disabled : 'disabled',
dropdown : 'ui dropdown', dropdown : 'ui dropdown',
filtered : 'filtered', filtered : 'filtered',
labels : 'labels',
loading : 'loading', loading : 'loading',
menu : 'menu', menu : 'menu',
multiple : 'multiple',
placeholder : 'default', placeholder : 'default',
search : 'search', search : 'search',
selected : 'selected', selected : 'selected',

43
src/definitions/modules/dropdown.less
View File

@ -457,7 +457,7 @@ select.ui.dropdown {
box-shadow: @selectionVisibleHoverBoxShadow; box-shadow: @selectionVisibleHoverBoxShadow;
} }
.ui.selection.visible.dropdown:hover .menu { .ui.selection.visible.dropdown:hover .menu {
border: @selectionVisibleHoverMenuBorder;
border-color: @selectionVisibleHoverBorderColor;
box-shadow: @selectionVisibleHoverMenuBoxShadow; box-shadow: @selectionVisibleHoverMenuBoxShadow;
} }
@ -513,10 +513,12 @@ select.ui.dropdown {
} }
/* Text Layering */ /* Text Layering */
.ui.search.dropdown > .pointer > input.search,
.ui.search.dropdown > input.search { .ui.search.dropdown > input.search {
position: absolute; position: absolute;
z-index: 2; z-index: 2;
} }
.ui.search.dropdown > .pointer > .text,
.ui.search.dropdown > .text { .ui.search.dropdown > .text {
cursor: text; cursor: text;
position: relative; position: relative;
@ -524,22 +526,33 @@ select.ui.dropdown {
} }
/* Search Selection */ /* Search Selection */
.ui.search.selection.dropdown > .pointer > input.search,
.ui.search.selection.dropdown > input.search { .ui.search.selection.dropdown > input.search {
line-height: @searchSelectionLineHeight; line-height: @searchSelectionLineHeight;
padding: @searchSelectionInputPadding; padding: @searchSelectionInputPadding;
} }
/* Active/Visible Search */ /* 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.active > input.search,
.ui.search.dropdown.visible > input.search { .ui.search.dropdown.visible > input.search {
cursor: auto; cursor: auto;
} }
.ui.search.dropdown.active > .pointer > .text,
.ui.search.dropdown.visible > .pointer > .text,
.ui.search.dropdown.active > .text, .ui.search.dropdown.active > .text,
.ui.search.dropdown.visible > .text { .ui.search.dropdown.visible > .text {
pointer-events: none; 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 */ /* 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 Inline

5
src/themes/default/modules/dropdown.variables
View File

@ -114,7 +114,7 @@
@selectionMinWidth: 180px; @selectionMinWidth: 180px;
@selectionBackground: @white; @selectionBackground: @white;
@selectionDisplay: inline-block; @selectionDisplay: inline-block;
@selectionItemDivider: 1px solid rgba(0, 0, 0, 0.05);
@selectionItemDivider: 1px solid @borderColor;
@selectionVerticalPadding: 0.8em; @selectionVerticalPadding: 0.8em;
@selectionHorizontalPadding: 1.1em; @selectionHorizontalPadding: 1.1em;
@selectionPadding: @selectionVerticalPadding @selectionHorizontalPadding; @selectionPadding: @selectionVerticalPadding @selectionHorizontalPadding;
@ -129,6 +129,9 @@
@selectionTextIconDistance: 2em; @selectionTextIconDistance: 2em;
@selectionTextColor: @textColor; @selectionTextColor: @textColor;
@selectionTextUnderlayIconOpacity: @disabledOpacity;
@selectionTextUnderlayColor: @unselectedTextColor;
@selectionBoxShadow: none; @selectionBoxShadow: none;
@selectionBorderColor: @borderColor; @selectionBorderColor: @borderColor;
@selectionBorder: 1px solid @selectionBorderColor; @selectionBorder: 1px solid @selectionBorderColor;

Write Preview
Loading…
Cancel
Save