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 #847

pull/2034/head
jlukic 10 years ago
parent
bcbd9e3515
commit
52897fdbc4
5 changed files with 100 additions and 63 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      src/definitions/elements/label.less
  2. 95
      src/definitions/modules/dropdown.js
  3. 47
      src/definitions/modules/dropdown.less
  4. 4
      src/themes/default/elements/label.variables
  5. 16
      src/themes/default/modules/dropdown.variables

1
src/definitions/elements/label.less
View File

@ -53,7 +53,6 @@
margin-right: 0em;
}
/* Link */
a.ui.label {
cursor: pointer;

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

@ -49,7 +49,6 @@ $.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)
@ -185,9 +184,6 @@ $.fn.dropdown = function(parameters) {
.insertBefore($text)
;
}
if( module.is.multiple() && !module.has.labels()) {
$labels = $('<div />').addClass(className.labels).insertBefore($search);
}
if(settings.allowTab) {
module.set.tabbable();
}
@ -260,8 +256,6 @@ $.fn.dropdown = function(parameters) {
;
$menu = $module.children(selector.menu);
$item = $menu.find(selector.item);
// multiple
$labels = $module.find(selector.labels);
},
toggle: function() {
@ -456,7 +450,6 @@ $.fn.dropdown = function(parameters) {
.not($results)
.addClass(className.filtered)
;
module.verbose('Selecting first non-filtered element');
module.remove.selectedItem();
$item
@ -980,8 +973,8 @@ $.fn.dropdown = function(parameters) {
},
item: function(value, strict) {
var
isMultiple = module.is.multiple(),
$selectedItem = false
$selectedItem = false,
isMultiple
;
value = (value !== undefined)
? value
@ -989,7 +982,8 @@ $.fn.dropdown = function(parameters) {
? module.get.value()
: module.get.text()
;
strict = (value === '' || value === 0)
isMultiple = (module.is.multiple() && $.isArray(value));
strict = (value === '' || value === 0)
? true
: strict || false
;
@ -1001,36 +995,32 @@ $.fn.dropdown = function(parameters) {
optionText = module.get.choiceText($choice),
optionValue = module.get.choiceValue($choice, optionText)
;
if(strict) {
module.verbose('Ambiguous dropdown value using strict type check', $choice, value);
if( optionValue === value ) {
$selectedItem = $(this);
return true;
if(isMultiple) {
if($.inArray(optionValue, value) !== -1 || $.inArray(optionText, value) !== -1) {
$selectedItem = ($selectedItem)
? $selectedItem.add($choice)
: $choice
;
}
else if( !$selectedItem && optionText === value ) {
$selectedItem = $(this);
}
else if(strict) {
module.verbose('Ambiguous dropdown value using strict type check', $choice, value);
if( optionValue === value || optionText === value) {
$selectedItem = $choice;
return true;
}
}
else {
if( optionValue == value ) {
if( optionValue == value || optionText == value) {
module.verbose('Found select item by value', optionValue, value);
$selectedItem = $(this);
return true;
}
else if( !$selectedItem && optionText == value ) {
module.verbose('Found select item by text', optionText, value);
$selectedItem = $(this);
$selectedItem = $choice;
return true;
}
}
})
;
}
else {
value = module.get.text();
}
return $selectedItem || false;
return $selectedItem;
}
},
@ -1154,13 +1144,10 @@ $.fn.dropdown = function(parameters) {
? forceScroll
: false
;
if($item && hasActive) {
if(!$menu.hasClass(className.visible)) {
$menu.addClass(className.loading);
}
menuHeight = $menu.height();
itemHeight = $item.height();
menuScroll = $menu.scrollTop();
@ -1266,16 +1253,42 @@ $.fn.dropdown = function(parameters) {
$selectedItem
.addClass(className.active)
.addClass(className.selected)
.each(function() {
var
$selected = $(this)
;
selectedText = module.get.choiceText($selected);
selectedValue = module.get.choiceValue($selected, selectedText);
if(module.is.multiple()) {
module.add.label(selectedValue, selectedText);
}
else {
module.set.text(selectedText);
}
module.set.value(selectedValue);
settings.onChange.call(element, selectedValue, selectedText, $selected);
})
;
selectedText = module.get.choiceText($selectedItem);
selectedValue = module.get.choiceValue($selectedItem, selectedText);
module.set.text(selectedText);
module.set.value(selectedValue);
settings.onChange.call(element, value, selectedText, $selectedItem);
}
}
},
add: {
label: function(value, text) {
var
$label = $('<a />')
.addClass(className.label)
.data('value', value)
.html(text + '<i class="delete icon"></i>')
;
if(settings.label.variation) {
$label.addClass(settings.label.variation);
}
module.debug('Adding selection label', $label);
$label.insertBefore($search);
}
},
remove: {
active: function() {
$module.removeClass(className.active);
@ -1318,9 +1331,6 @@ $.fn.dropdown = function(parameters) {
},
has: {
labels: function() {
return ($labels.length > 0);
},
search: function() {
return ($search.length > 0);
},
@ -1775,6 +1785,10 @@ $.fn.dropdown.settings = {
preserveHTML : true,
sortSelect : false,
label: {
variation: false
},
allowCategorySelection : false,
delay : {
@ -1819,7 +1833,6 @@ $.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',
@ -1832,7 +1845,7 @@ $.fn.dropdown.settings = {
disabled : 'disabled',
dropdown : 'ui dropdown',
filtered : 'filtered',
labels : 'labels',
label : 'ui label',
loading : 'loading',
menu : 'menu',
multiple : 'multiple',

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

@ -354,9 +354,6 @@ select.ui.dropdown {
border: @selectBorder;
visibility: @selectVisibility;
}
.ui.selection.dropdown > .text {
margin-right: @selectionTextIconDistance;
}
.ui.selection.dropdown > .search.icon,
.ui.selection.dropdown > .delete.icon,
.ui.selection.dropdown > .dropdown.icon {
@ -594,28 +591,44 @@ select.ui.dropdown {
---------------*/
/* Multiple Search Selection */
.ui.multiple.dropdown > .labels {
.ui.multiple.dropdown {
cursor: auto;
padding: @multipleSelectionTopPadding @multipleSelectionRightPadding @multipleSelectionBottomPadding @multipleSelectionLeftPadding;
}
/* Selection Label */
.ui.multiple.dropdown > .label {
display: inline-block;
vertical-align: middle;
padding: @labelPadding;
margin: 0em @labelSpacing @labelSpacing 0em;
}
/* Search Selection */
.ui.multiple.search.selection.dropdown > .labels {
margin: -@selectionVerticalPadding 0em;
}
.ui.multiple.search.selection.dropdown > input.search {
/* Prompt Text */
.ui.multiple.dropdown > .text {
display: none;
position: absolute;
top: auto;
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;
/* Input */
.ui.multiple.selection.dropdown > input.search {
position: static;
padding: 0;
width: auto;
margin-top: @searchSelectionLineHeightOffset;
padding-top: @labelVerticalPadding;
}
.ui.multiple.selection.dropdown > .label + input.search {
margin-left: 0.5em;
}
/* Don't Allow Repeat Selections */
.ui.multiple.search.selection.dropdown .menu .active.item {
display: none;
/* Dropdown Icon */
.ui.multiple.selection.dropdown .dropdown.icon {
padding: 0em;
margin: 0em;
}

4
src/themes/default/elements/label.variables
View File

@ -10,7 +10,7 @@
@verticalAlign: baseline;
@verticalMargin: 0em;
@horizontalMargin: 0.125em;
@horizontalMargin: 0.142857em;
@backgroundColor: #E8E8E8;
@backgroundImage: none;
@labelTextColor: rgba(0, 0, 0, 0.6);
@ -27,7 +27,7 @@
@transition: background @labelTransitionDuration @labelTransitionEasing;
/* Group */
@groupVerticalMargin: 0.75em;
@groupVerticalMargin: 0.5em;
@groupHorizontalMargin: 0.5em;

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

@ -117,7 +117,8 @@
@selectionItemDivider: 1px solid @borderColor;
@selectionVerticalPadding: 0.8em;
@selectionHorizontalPadding: 1.1em;
@selectionPadding: @selectionVerticalPadding @selectionHorizontalPadding;
@selectionIconDistance: 2em;
@selectionPadding: @selectionVerticalPadding @selectionIconDistance @selectionVerticalPadding @selectionHorizontalPadding;
@selectionZIndex: 10;
/* <select> */
@ -126,7 +127,6 @@
@selectVisibility: visible;
@selectHeight: 38px;
@selectionTextIconDistance: 2em;
@selectionTextColor: @textColor;
@selectionTextUnderlayIconOpacity: @disabledOpacity;
@ -203,6 +203,18 @@
@searchComputerMaxMenuHeight: @selectionComputerMaxMenuHeight;
@searchWidescreenMaxMenuHeight: @selectionWidescreenMaxMenuHeight;
/* Multiple */
@labelVerticalPadding: 0.4285em;
@labelHorizontalPadding: @relativeMini;
@labelPadding: @labelVerticalPadding @labelHorizontalPadding;
@labelSpacing: 0.21428em;
@multipleSelectionTopPadding: (@selectionVerticalPadding - @labelVerticalPadding);
@multipleSelectionRightPadding: @selectionIconDistance;
@multipleSelectionBottomPadding: @selectionTopPadding - @labelSpacing;
@multipleSelectionLeftPadding: (@selectionHorizontalPadding - @labelHorizontalPadding);
@multipleSearchOffset: (@labelVerticalPadding - @searchSelectionLineHeightOffset);
/* Inline */
@inlineIconMargin: 0em 0.5em 0em 0.25em;
@inlineTextColor: inherit;

Write Preview
Loading…
Cancel
Save