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

Dropdown now uses a loading class to calculate scroll position for active element before showing

pull/1481/head
jlukic 10 years ago
parent
9170fad1bd
commit
f9d3e54fc1
3 changed files with 64 additions and 19 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 73
      src/definitions/modules/dropdown.js
  2. 5
      src/definitions/modules/dropdown.less
  3. 5
      src/themes/default/modules/dropdown.variables

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

@ -218,24 +218,34 @@ $.fn.dropdown = function(parameters) {
}
},
show: function() {
module.debug('Checking if dropdown can show');
show: function(callback) {
callback = $.isFunction(callback)
? callback
: function(){}
;
if( !module.is.active() && !module.is.allFiltered() ) {
module.debug('Showing dropdown');
module.animate.show(function() {
if( module.can.click() ) {
module.bind.intent();
}
module.set.visible();
$.proxy(callback, element)();
});
$.proxy(settings.onShow, element)();
}
},
hide: function() {
hide: function(callback) {
callback = $.isFunction(callback)
? callback
: function(){}
;
if( module.is.active() ) {
module.debug('Hiding dropdown');
module.animate.hide(function() {
module.remove.visible();
$.proxy(callback, element)();
});
$.proxy(settings.onHide, element)();
}
@ -602,7 +612,6 @@ $.fn.dropdown = function(parameters) {
value = module.get.choiceValue($choice, text),
callback = function() {
module.remove.searchTerm();
setTimeout(module.remove.filteredItem, settings.transition);
module.determine.selectAction(text, value);
},
openingSubMenu = ($choice.find(selector.menu).size() > 0)
@ -636,7 +645,10 @@ $.fn.dropdown = function(parameters) {
}
},
eventInModule: function(event, callback) {
callback = callback || function(){};
callback = $.isFunction(callback)
? callback
: function(){}
;
if( $(event.target).closest($module).size() === 0 ) {
module.verbose('Triggering event', callback);
callback();
@ -648,7 +660,10 @@ $.fn.dropdown = function(parameters) {
}
},
eventInMenu: function(event, callback) {
callback = callback || function(){};
callback = $.isFunction(callback)
? callback
: function(){}
;
if( $(event.target).closest($menu).size() === 0 ) {
module.verbose('Triggering event', callback);
callback();
@ -666,7 +681,9 @@ $.fn.dropdown = function(parameters) {
nothing: function() {},
hide: function() {
module.hide();
module.hide(function() {
module.remove.filteredItem();
});
},
select: function(text, value) {
@ -676,7 +693,9 @@ $.fn.dropdown = function(parameters) {
;
module.set.selected(value);
module.set.value(value);
module.hide();
module.hide(function() {
module.remove.filteredItem();
});
},
activate: function(text, value) {
@ -686,7 +705,9 @@ $.fn.dropdown = function(parameters) {
;
module.set.selected(value);
module.set.value(value);
module.hide();
module.hide(function() {
module.remove.filteredItem();
});
},
combo: function(text, value) {
@ -696,7 +717,9 @@ $.fn.dropdown = function(parameters) {
;
module.set.selected(value);
module.set.value(value);
module.hide();
module.hide(function() {
module.remove.filteredItem();
});
}
},
@ -919,6 +942,12 @@ $.fn.dropdown = function(parameters) {
belowPage
;
if($item && hasActive) {
if(!$menu.hasClass(className.visible)) {
console.log('adddig loading');
$menu.addClass(className.loading);
}
menuHeight = $menu.height();
itemHeight = $item.height();
menuScroll = $menu.scrollTop();
@ -927,12 +956,11 @@ $.fn.dropdown = function(parameters) {
offset = menuScroll - menuOffset + itemOffset;
belowPage = menuScroll + menuHeight < (offset + edgeTolerance);
abovePage = ((offset - edgeTolerance) < menuScroll);
if(abovePage || belowPage) {
module.debug('Scrolling to active item');
$menu
.scrollTop(offset)
;
}
module.debug('Scrolling to active item', offset);
$menu
.scrollTop(offset)
.removeClass(className.loading)
;
}
},
text: function(text) {
@ -1100,10 +1128,13 @@ $.fn.dropdown = function(parameters) {
module.hideSubMenus();
module.hideOthers();
module.set.active();
module.set.scrollPosition();
}
;
callback = callback || function(){};
callback = $.isFunction(callback)
? callback
: function(){}
;
module.set.scrollPosition();
module.verbose('Doing menu show animation', $currentMenu);
if( module.is.hidden($currentMenu) || module.is.animating($currentMenu) ) {
if(settings.transition == 'none') {
@ -1175,7 +1206,10 @@ $.fn.dropdown = function(parameters) {
module.remove.active();
}
;
callback = callback || function(){};
callback = $.isFunction(callback)
? callback
: function(){}
;
if( module.is.visible($currentMenu) || module.is.animating($currentMenu) ) {
module.verbose('Doing menu hide animation', $currentMenu);
@ -1486,6 +1520,7 @@ $.fn.dropdown.settings = {
disabled : 'disabled',
dropdown : 'ui dropdown',
filtered : 'filtered',
loading : 'loading',
menu : 'menu',
placeholder : 'default',
search : 'search',

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

@ -610,6 +610,11 @@ select.ui.dropdown {
.ui.loading.dropdown > .text {
transition: none;
}
.ui.dropdown > .loading.menu {
display: block;
visibility: hidden;
z-index: @loadingZIndex;
}
/*--------------------
Keyboard Select

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

@ -191,6 +191,7 @@
States
--------------------*/
/* Hovered */
@hoveredItemBackground: @transparentBlack;
@hoveredItemColor: @selectedTextColor;
@ -198,6 +199,9 @@
@defaultTextColor: rgba(179, 179, 179, 0.7);
@defaultTextHoverColor: rgba(140, 140, 140, 0.7);
/* Loading */
@loadingZIndex: -1;
/* Active Menu Item */
@activeItemBackground: transparent;
@activeItemZIndex: @menuZIndex + 1;
@ -205,6 +209,7 @@
@activeItemFontWeight: bold;
@activeItemColor: @selectedTextColor;
/* Selected */
@selectedBackground: @subtleTransparentBlack;
@selectedColor: @selectedTextColor;

Write Preview
Loading…
Cancel
Save