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

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

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

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

@ -218,15 +218,24 @@
@searchComputerMaxMenuHeight: @selectionComputerMaxMenuHeight;
@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);
@multipleSelectionRightPadding: @selectionIconDistance;
@multipleSelectionPadding: @multipleSelectionVerticalPadding @multipleSelectionRightPadding @multipleSelectionVerticalPadding @multipleSelectionLeftPadding;
@multipleSelectionMinHeight: (@multipleSelectionVerticalPadding * 2) + @multipleSelectionChildLineHeight + (@multipleSelectionChildVerticalMargin * 2);
/* Child Elements */
@multipleSelectionChildVerticalMargin: (@searchSelectionVerticalPadding / 2);
@multipleSelectionChildVerticalMargin: (@searchSelectionVerticalPadding * (2/3));
@multipleSelectionChildSpacing: 0.4285em;
@multipleSelectionChildMargin: @multipleSelectionChildVerticalMargin 0em @multipleSelectionChildVerticalMargin @multipleSelectionChildSpacing;
@multipleSelectionChildLineHeight: @searchSelectionLineHeight;
@ -237,21 +246,15 @@
@multipleSelectionDropdownIconPadding: @labelPadding;
/* Selection Label */
@labelVerticalPadding: 0.4285em;
@labelSize: @relativeSmall;
@labelHorizontalPadding: @relativeMini;
@labelPadding: @labelVerticalPadding @labelHorizontalPadding;
@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

Write Preview
Loading…
Cancel
Save