Skip to content

Commit

Permalink
feat(dropdown): support separate transition displaytype
Browse files Browse the repository at this point in the history
In situations where a dropdown was inside a right menu (which got a flex setting) the transition module was taking that flex displaytype setting for the dropdown menu. This unfortunately results into a horizontal menu list.
To be able to adjust this, i added the displayType, used for the transition, setting to the dropdown module as well. If set, this setting could be used just as in transition to correct the display if needed.

Additionally this setting also had to be provided to the hiding transition, otherwise the wrong flex setting would be reapplied before hiding the dropdown again.
  • Loading branch information
lubber-de authored Sep 12, 2020
1 parent 65fe7e5 commit 8ae681c
Showing 1 changed file with 10 additions and 4 deletions.
14 changes: 10 additions & 4 deletions src/definitions/modules/dropdown.js
Original file line number Diff line number Diff line change
Expand Up @@ -2136,6 +2136,9 @@ $.fn.dropdown = function(parameters) {
;
}
return $selectedItem;
},
displayType: function() {
return $module.hasClass('column') ? 'flex' : settings.displayType;
}
},

Expand Down Expand Up @@ -3565,11 +3568,10 @@ $.fn.dropdown = function(parameters) {
module.set.scrollPosition(module.get.selectedItem(), true);
}
if( module.is.hidden($currentMenu) || module.is.animating($currentMenu) ) {
var displayType = $module.hasClass('column') ? 'flex' : false;
if(transition == 'none') {
start();
$currentMenu.transition({
displayType: displayType
displayType: module.get.displayType()
}).transition('show');
callback.call(element);
}
Expand All @@ -3582,7 +3584,7 @@ $.fn.dropdown = function(parameters) {
duration : settings.duration,
queue : true,
onStart : start,
displayType: displayType,
displayType: module.get.displayType(),
onComplete : function() {
callback.call(element);
}
Expand Down Expand Up @@ -3616,7 +3618,9 @@ $.fn.dropdown = function(parameters) {

if(transition == 'none') {
start();
$currentMenu.transition('hide');
$currentMenu.transition({
displayType: module.get.displayType()
}).transition('hide');
callback.call(element);
}
else if($.fn.transition !== undefined && $module.transition('is supported')) {
Expand All @@ -3628,6 +3632,7 @@ $.fn.dropdown = function(parameters) {
verbose : settings.verbose,
queue : false,
onStart : start,
displayType: module.get.displayType(),
onComplete : function() {
callback.call(element);
}
Expand Down Expand Up @@ -3956,6 +3961,7 @@ $.fn.dropdown.settings = {

transition : 'auto', // auto transition will slide down or up based on direction
duration : 200, // duration of transition
displayType : false, // displayType of transition

glyphWidth : 1.037, // widest glyph width in em (W is 1.037 em) used to calculate multiselect input width

Expand Down

0 comments on commit 8ae681c

Please sign in to comment.