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

Iteration on multiselect fixes

pull/2169/head
jlukic 9 years ago
parent
0803d41fc6
commit
02c9fb2e8a
3 changed files with 101 additions and 43 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 104
      src/definitions/modules/dropdown.js
  2. 7
      src/definitions/modules/dropdown.less
  3. 33
      src/themes/default/modules/dropdown.variables

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

@ -175,6 +175,33 @@ $.fn.dropdown = function(parameters) {
} }
}, },
select: {
firstUnfiltered: function() {
module.remove.selectedItem();
$item
.not('.' + className.filtered)
.eq(0)
.addClass(className.selected)
;
},
nextAvailable: function($selected) {
$selected = $selected.eq(0);
var
$nextAvailable = $selected.nextAll(selector.item).not('.' + className.filtered).eq(0),
$prevAvailable = $selected.prevAll(selector.item).not('.' + className.filtered).eq(0),
hasNext = ($nextAvailable.length > 0)
;
if(hasNext) {
module.verbose('Moving selection to', $nextAvailable);
$nextAvailable.addClass(className.selected);
}
else {
module.verbose('Moving selection to', $prevAvailable);
$prevAvailable.addClass(className.selected);
}
}
},
setup: { setup: {
layout: function() { layout: function() {
if( $module.is('select') ) { if( $module.is('select') ) {
@ -325,10 +352,18 @@ $.fn.dropdown = function(parameters) {
; ;
}, },
hideMenu: function() {
module.verbose('Hiding menu instantaneously');
module.remove.active();
module.remove.visible();
$menu.transition('hide');
},
hideSubMenus: function() { hideSubMenus: function() {
var var
$subMenus = $menu.children(selector.item).find(selector.menu) $subMenus = $menu.children(selector.item).find(selector.menu)
; ;
module.verbose('Hiding sub menus', $subMenus);
$subMenus.transition('hide'); $subMenus.transition('hide');
}, },
@ -474,7 +509,6 @@ $.fn.dropdown = function(parameters) {
} }
} }
if(settings.match == 'both' || settings.match == 'value') { if(settings.match == 'both' || settings.match == 'value') {
console.log('here');
value = String(module.get.choiceValue($choice, text)); value = String(module.get.choiceValue($choice, text));
if(value.match(exactRegExp)) { if(value.match(exactRegExp)) {
@ -499,16 +533,11 @@ $.fn.dropdown = function(parameters) {
module.filterActive(); module.filterActive();
} }
module.verbose('Selecting first non-filtered element'); module.verbose('Selecting first non-filtered element');
module.remove.selectedItem();
$item
.not('.' + className.filtered)
.eq(0)
.addClass(className.selected)
;
module.select.firstUnfiltered();
if( module.is.allFiltered() ) { if( module.is.allFiltered() ) {
module.debug('All items filtered, hiding dropdown', searchTerm); module.debug('All items filtered, hiding dropdown', searchTerm);
if(module.is.searchSelection()) { if(module.is.searchSelection()) {
module.hide();
module.hideMenu();
} }
settings.onNoResults.call(element, searchTerm); settings.onNoResults.call(element, searchTerm);
} }
@ -531,7 +560,7 @@ $.fn.dropdown = function(parameters) {
forceSelection: function() { forceSelection: function() {
var var
$currentlySelected = $item.not(className.filtered).filter('.' + className.selected).eq(0), $currentlySelected = $item.not(className.filtered).filter('.' + className.selected).eq(0),
$activeItem = $item.filter('.' + className.active).eq(0),
$activeItem = $item.not(className.filtered).filter('.' + className.active).eq(0),
$selectedItem = ($currentlySelected.length > 0) $selectedItem = ($currentlySelected.length > 0)
? $currentlySelected ? $currentlySelected
: $activeItem, : $activeItem,
@ -581,6 +610,9 @@ $.fn.dropdown = function(parameters) {
search: { search: {
focus: function() { focus: function() {
activated = true; activated = true;
if(module.is.multiple()) {
module.remove.activeLabel();
}
if(settings.showOnFocus) { if(settings.showOnFocus) {
module.show(); module.show();
} }
@ -766,7 +798,7 @@ $.fn.dropdown = function(parameters) {
// tokenize on comma // tokenize on comma
if(module.is.visible()) { if(module.is.visible()) {
module.verbose('Delimiter key pressed. Tokenizing'); module.verbose('Delimiter key pressed. Tokenizing');
module.event.item.click.call($selectedItem, event);
// do tokenize
event.preventDefault(); event.preventDefault();
} }
} }
@ -817,12 +849,14 @@ $.fn.dropdown = function(parameters) {
module.verbose('Removing active labels'); module.verbose('Removing active labels');
$activeLabel.last().next().addClass(className.active); $activeLabel.last().next().addClass(className.active);
module.remove.labels($activeLabel); module.remove.labels($activeLabel);
event.preventDefault();
} }
else if(caretAtStart && !hasActiveLabel && pressedKey == keys.backspace) { else if(caretAtStart && !hasActiveLabel && pressedKey == keys.backspace) {
module.verbose('Removing last label on input backspace'); module.verbose('Removing last label on input backspace');
$activeLabel = $label.last().addClass(className.active); $activeLabel = $label.last().addClass(className.active);
activeValue = $activeLabel.data('value'); activeValue = $activeLabel.data('value');
module.remove.selected(activeValue); module.remove.selected(activeValue);
event.preventDefault();
} }
} }
else { else {
@ -840,7 +874,7 @@ $.fn.dropdown = function(parameters) {
; ;
if(isShortcutKey) { if(isShortcutKey) {
var var
$currentlySelected = $item.not(className.filtered).filter('.' + className.selected).eq(0),
$currentlySelected = $item.not('.' + className.filtered).filter('.' + className.selected).eq(0),
$activeItem = $menu.children('.' + className.active).eq(0), $activeItem = $menu.children('.' + className.active).eq(0),
$selectedItem = ($currentlySelected.length > 0) $selectedItem = ($currentlySelected.length > 0)
? $currentlySelected ? $currentlySelected
@ -848,11 +882,12 @@ $.fn.dropdown = function(parameters) {
$visibleItems = ($selectedItem.length > 0) $visibleItems = ($selectedItem.length > 0)
? $selectedItem.siblings(':not(.' + className.filtered +')').andSelf() ? $selectedItem.siblings(':not(.' + className.filtered +')').andSelf()
: $menu.children(':not(.' + className.filtered +')'), : $menu.children(':not(.' + className.filtered +')'),
$subMenu = $selectedItem.children(selector.menu),
$parentMenu = $selectedItem.closest(selector.menu),
inVisibleMenu = ($parentMenu.hasClass(className.visible) || $parentMenu.hasClass(className.animating)),
hasSubMenu = ($subMenu.length> 0),
hasSelectedItem = ($selectedItem.length > 0),
$subMenu = $selectedItem.children(selector.menu),
$parentMenu = $selectedItem.closest(selector.menu),
inVisibleMenu = ($parentMenu.hasClass(className.visible) || $parentMenu.hasClass(className.animating)),
hasSubMenu = ($subMenu.length> 0),
hasSelectedItem = ($selectedItem.length > 0),
selectedIsVisible = ($selectedItem.not('.' + selector.filtered).length > 0),
$nextItem, $nextItem,
isSubMenuItem, isSubMenuItem,
newIndex newIndex
@ -867,7 +902,7 @@ $.fn.dropdown = function(parameters) {
module.verbose('Pressed enter on unselectable category, opening sub menu'); module.verbose('Pressed enter on unselectable category, opening sub menu');
pressedKey = keys.rightArrow; pressedKey = keys.rightArrow;
} }
else {
else if(selectedIsVisible) {
module.verbose('Enter key pressed, choosing selected item'); module.verbose('Enter key pressed, choosing selected item');
module.event.item.click.call($selectedItem, event); module.event.item.click.call($selectedItem, event);
event.stopImmediatePropagation(); event.stopImmediatePropagation();
@ -940,6 +975,7 @@ $.fn.dropdown = function(parameters) {
? $nextItem = $selectedItem.nextAll(selector.item + ':not(.' + className.filtered + ')').eq(0) ? $nextItem = $selectedItem.nextAll(selector.item + ':not(.' + className.filtered + ')').eq(0)
: $item.eq(0) : $item.eq(0)
; ;
console.log(hasSelectedItem, inVisibleMenu, $nextItem);
if($nextItem.length === 0) { if($nextItem.length === 0) {
module.verbose('Down key pressed but reached bottom of current menu'); module.verbose('Down key pressed but reached bottom of current menu');
event.preventDefault(); event.preventDefault();
@ -1533,26 +1569,33 @@ $.fn.dropdown = function(parameters) {
if($selectedItem) { if($selectedItem) {
module.debug('Setting selected menu item to', $selectedItem); module.debug('Setting selected menu item to', $selectedItem);
if(!module.is.multiple()) {
if(module.is.single()) {
module.remove.activeItem(); module.remove.activeItem();
module.remove.selectedItem();
}
else if(settings.filterActive) {
module.remove.selectedItem();
} }
module.remove.selectedItem();
$selectedItem $selectedItem
.each(function() { .each(function() {
var var
$selected = $(this), $selected = $(this),
isNotActive = (!$selected.hasClass(className.active)),
isVisible = (!$selected.is('.' + className.filtered)),
shouldAnimate = (isMultiple && $selectedItem.length == 1) shouldAnimate = (isMultiple && $selectedItem.length == 1)
; ;
selectedText = module.get.choiceText($selected); selectedText = module.get.choiceText($selected);
selectedValue = module.get.choiceValue($selected, selectedText); selectedValue = module.get.choiceValue($selected, selectedText);
if(isMultiple) { if(isMultiple) {
if(!$selected.hasClass(className.active)) {
if(isNotActive) {
module.add.label(selectedValue, selectedText, shouldAnimate); module.add.label(selectedValue, selectedText, shouldAnimate);
module.set.value(selectedValue, selectedText, $selected); module.set.value(selectedValue, selectedText, $selected);
$selected.addClass(className.active); $selected.addClass(className.active);
// move keyboard pointer to next element
module.filterActive(); module.filterActive();
module.select.nextAvailable($selectedItem);
} }
else {
else if(isVisible) {
module.remove.selected(selectedValue); module.remove.selected(selectedValue);
} }
} }
@ -1615,11 +1658,17 @@ $.fn.dropdown = function(parameters) {
$item.removeClass(className.active); $item.removeClass(className.active);
}, },
filteredItem: function() { filteredItem: function() {
$item.removeClass(className.filtered);
if(settings.filterActive) {
$item.not('.' + className.active).removeClass(className.filtered);
}
else {
$item.removeClass(className.filtered);
}
}, },
searchTerm: function() { searchTerm: function() {
module.verbose('Cleared search term'); module.verbose('Cleared search term');
$search.val(''); $search.val('');
module.remove.filteredItem();
}, },
selected: function(value) { selected: function(value) {
var var
@ -1647,9 +1696,11 @@ $.fn.dropdown = function(parameters) {
} }
$selectedItem $selectedItem
.removeClass(className.filtered) .removeClass(className.filtered)
.removeClass(className.selected)
.removeClass(className.active) .removeClass(className.active)
; ;
if(!module.filterActive) {
$selectedItem.removeClass(className.selected);
}
} }
}, },
selectedItem: function() { selectedItem: function() {
@ -1775,6 +1826,9 @@ $.fn.dropdown = function(parameters) {
multiple: function() { multiple: function() {
return $module.hasClass(className.multiple); return $module.hasClass(className.multiple);
}, },
single: function() {
return !module.is.multiple();
},
selectMutation: function(mutations) { selectMutation: function(mutations) {
var var
selectChanged = false selectChanged = false
@ -1832,7 +1886,7 @@ $.fn.dropdown = function(parameters) {
? callback ? callback
: function(){} : function(){}
; ;
if(!module.is.multiple()) {
if(module.is.single()) {
module.set.scrollPosition(module.get.activeItem(), true); module.set.scrollPosition(module.get.activeItem(), true);
} }
module.verbose('Doing menu show animation', $currentMenu); module.verbose('Doing menu show animation', $currentMenu);
@ -2187,7 +2241,7 @@ $.fn.dropdown.settings = {
// label settings on multi-select // label settings on multi-select
label: { label: {
transition : 'horizontal flip', transition : 'horizontal flip',
duration : 250,
duration : 150,
variation : false variation : false
}, },

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

@ -592,7 +592,6 @@ select.ui.dropdown {
/* Multiple Selection */ /* Multiple Selection */
.ui.multiple.dropdown { .ui.multiple.dropdown {
padding: @multipleSelectionPadding; padding: @multipleSelectionPadding;
min-height: @multipleSelectionMinHeight;
} }
.ui.multiple.dropdown .menu { .ui.multiple.dropdown .menu {
cursor: auto; cursor: auto;
@ -609,8 +608,9 @@ select.ui.dropdown {
user-select: none; user-select: none;
display: inline-block; display: inline-block;
vertical-align: baseline; vertical-align: baseline;
font-size: @labelSize;
padding: @labelPadding; padding: @labelPadding;
margin: @labelVerticalSpacing @labelHorizontalSpacing @labelVerticalSpacing 0em;
margin: @labelMargin;
} }
/* Dropdown Icon */ /* Dropdown Icon */
@ -655,8 +655,9 @@ select.ui.dropdown {
position: static; position: static;
padding: 0; padding: 0;
max-width: 100%; max-width: 100%;
width: @multipleSelectionSearchStartWidth;
margin: @multipleSelectionChildMargin; margin: @multipleSelectionChildMargin;
width: @multipleSelectionSearchStartWidth;
line-height: @multipleSelectionChildLineHeight;
} }

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

@ -218,15 +218,24 @@
@searchComputerMaxMenuHeight: @selectionComputerMaxMenuHeight; @searchComputerMaxMenuHeight: @selectionComputerMaxMenuHeight;
@searchWidescreenMaxMenuHeight: @selectionWidescreenMaxMenuHeight; @searchWidescreenMaxMenuHeight: @selectionWidescreenMaxMenuHeight;
/* Multiple Selection */
@multipleSelectionVerticalPadding: (@searchSelectionVerticalPadding / 2); /* Split Padding Between Child and Group */
/* Inline */
@inlineIconMargin: 0em 0.5em 0em 0.25em;
@inlineTextColor: inherit;
@inlineTextFontWeight: bold;
@inlineMenuDistance: 0.25em;
@inlineMenuBorderRadius: @borderRadius;
/* Multiple */
/* Split Actual Padding Between Child and Group (allows for label spacing) */
@multipleSelectionVerticalPadding: (@searchSelectionVerticalPadding * (1/3));
@multipleSelectionLeftPadding: (@selectionHorizontalPadding - @labelHorizontalPadding); @multipleSelectionLeftPadding: (@selectionHorizontalPadding - @labelHorizontalPadding);
@multipleSelectionRightPadding: @selectionIconDistance; @multipleSelectionRightPadding: @selectionIconDistance;
@multipleSelectionPadding: @multipleSelectionVerticalPadding @multipleSelectionRightPadding @multipleSelectionVerticalPadding @multipleSelectionLeftPadding; @multipleSelectionPadding: @multipleSelectionVerticalPadding @multipleSelectionRightPadding @multipleSelectionVerticalPadding @multipleSelectionLeftPadding;
@multipleSelectionMinHeight: (@multipleSelectionVerticalPadding * 2) + @multipleSelectionChildLineHeight + (@multipleSelectionChildVerticalMargin * 2);
/* Child Elements */ /* Child Elements */
@multipleSelectionChildVerticalMargin: (@searchSelectionVerticalPadding / 2);
@multipleSelectionChildVerticalMargin: (@searchSelectionVerticalPadding * (2/3));
@multipleSelectionChildSpacing: 0.4285em; @multipleSelectionChildSpacing: 0.4285em;
@multipleSelectionChildMargin: @multipleSelectionChildVerticalMargin 0em @multipleSelectionChildVerticalMargin @multipleSelectionChildSpacing; @multipleSelectionChildMargin: @multipleSelectionChildVerticalMargin 0em @multipleSelectionChildVerticalMargin @multipleSelectionChildSpacing;
@multipleSelectionChildLineHeight: @searchSelectionLineHeight; @multipleSelectionChildLineHeight: @searchSelectionLineHeight;
@ -237,21 +246,15 @@
@multipleSelectionDropdownIconPadding: @labelPadding; @multipleSelectionDropdownIconPadding: @labelPadding;
/* Selection Label */ /* Selection Label */
@labelVerticalPadding: 0.4285em;
@labelSize: @relativeSmall; @labelSize: @relativeSmall;
@labelHorizontalPadding: @relativeMini;
@labelPadding: @labelVerticalPadding @labelHorizontalPadding;
@labelHorizontalSpacing: 0.5em; @labelHorizontalSpacing: 0.5em;
@labelVerticalSpacing: (0.3333em / 2);
@labelVerticalSpacing: (0.46153em / 2); /* 6px @ 13em */
@labelMargin: @labelVerticalSpacing @labelHorizontalSpacing @labelVerticalSpacing 0em;
@labelVerticalPadding: 0.3846em; /* 5px @ 13px/em */
@labelHorizontalPadding: @relativeMini;
@labelPadding: @labelVerticalPadding @labelHorizontalPadding;
/* Inline */
@inlineIconMargin: 0em 0.5em 0em 0.25em;
@inlineTextColor: inherit;
@inlineTextFontWeight: bold;
@inlineMenuDistance: 0.25em;
@inlineMenuBorderRadius: @borderRadius;
/*------------------- /*-------------------
States States

Write Preview
Loading…
Cancel
Save