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
Split 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),
$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('<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') ) {
module.setup.select();
}
if( module.is.search() && !module.is.searchable() ) {
if( module.is.search() && !module.has.search() ) {
$search = $('<input />')
.addClass(className.search)
.insertBefore($text)
;
}
if( module.is.multiple() && !module.has.labels()) {
$labels = $('<div />').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',

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

@ -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

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

@ -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;

Write Preview
Loading…
Cancel
Save