Skip to content

Commit 883f912

Browse files
lubber-delubber-de
authored
feat(chore): consistent show/hide callbacks
This PR unifies the usage and availability of common used callbacks onShow, onHide, onVisible, onHidden sidebar was the only component having onShow AFTER the element was shown and onVisible BEFORE the sidebar was shown. Every other component had this the other way around: popup, calendar, modal, toast, dimmer, nag modal, sidebar and dimmer now also have cancel support for the onshow callback (all other components already had) dimmer and transition also have cancel support for the onHide callback(all other components aready had) shape callback beforeChange was renamed/suffixed by on as we have it everywhere and also tab has it the "hidden" callback onBeforeHide for the transition module (used by toast to smootly hide a toast) is now official and simplified. For consistency i also added onBeforeShow
1 parent 123b50f commit 883f912

File tree

5 files changed

+43
-27
lines changed

5 files changed

+43
-27
lines changed

‎src/definitions/modules/dimmer.js

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -192,11 +192,14 @@ $.fn.dimmer = function(parameters) {
192192
? callback
193193
: function(){}
194194
;
195-
module.debug('Showing dimmer', $dimmer, settings);
196-
module.set.variation();
197195
if( (!module.is.dimmed() || module.is.animating()) && module.is.enabled() ) {
196+
if(settings.onShow.call(element) === false) {
197+
module.verbose('Show callback returned false cancelling dimmer show');
198+
return;
199+
}
200+
module.debug('Showing dimmer', $dimmer, settings);
201+
module.set.variation();
198202
module.animate.show(callback);
199-
settings.onShow.call(element);
200203
settings.onChange.call(element);
201204
}
202205
else {
@@ -210,9 +213,12 @@ $.fn.dimmer = function(parameters) {
210213
: function(){}
211214
;
212215
if( module.is.dimmed() || module.is.animating() ) {
216+
if(settings.onHide.call(element) === false) {
217+
module.verbose('Hide callback returned false cancelling dimmer hide');
218+
return;
219+
}
213220
module.debug('Hiding dimmer', $dimmer);
214221
module.animate.hide(callback);
215-
settings.onHide.call(element);
216222
settings.onChange.call(element);
217223
}
218224
else {

‎src/definitions/modules/modal.js

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -514,6 +514,10 @@ $.fn.modal = function(parameters) {
514514
: function(){}
515515
;
516516
if( module.is.animating() || !module.is.active() ) {
517+
if(settings.onShow.call(element) === false) {
518+
module.verbose('Show callback returned false cancelling show');
519+
return;
520+
}
517521
module.showDimmer();
518522
module.cacheSizes();
519523
module.set.bodyMargin();
@@ -543,7 +547,6 @@ $.fn.modal = function(parameters) {
543547
$module.detach().appendTo($dimmer);
544548
}
545549
}
546-
settings.onShow.call(element);
547550
if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) {
548551
module.debug('Showing modal with css animations');
549552
$module
@@ -586,14 +589,14 @@ $.fn.modal = function(parameters) {
586589
? callback
587590
: function(){}
588591
;
589-
module.debug('Hiding modal');
590592
if(settings.onHide.call(element, $(this)) === false) {
591593
module.verbose('Hide callback returned false cancelling hide');
592594
ignoreRepeatedEvents = false;
593595
return false;
594596
}
595597

596598
if( module.is.animating() || module.is.active() ) {
599+
module.debug('Hiding modal');
597600
if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) {
598601
module.remove.active();
599602
$module

‎src/definitions/modules/shape.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -126,7 +126,7 @@ $.fn.shape = function(parameters) {
126126
module.reset();
127127
module.set.active();
128128
};
129-
settings.beforeChange.call($nextSide[0]);
129+
settings.onBeforeChange.call($nextSide[0]);
130130
if(module.get.transitionEvent()) {
131131
module.verbose('Starting CSS animation');
132132
$module
@@ -813,7 +813,7 @@ $.fn.shape.settings = {
813813
height: 'initial',
814814

815815
// callback occurs on side change
816-
beforeChange : function() {},
816+
onBeforeChange : function() {},
817817
onChange : function() {},
818818

819819
// allow animation to same side

‎src/definitions/modules/sidebar.js

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -371,6 +371,10 @@ $.fn.sidebar = function(parameters) {
371371
: function(){}
372372
;
373373
if(module.is.hidden()) {
374+
if(settings.onShow.call(element) === false) {
375+
module.verbose('Show callback returned false cancelling show');
376+
return;
377+
}
374378
module.refreshSidebars();
375379
if(settings.overlay) {
376380
module.error(error.overlay);
@@ -395,10 +399,9 @@ $.fn.sidebar = function(parameters) {
395399
}
396400
module.pushPage(function() {
397401
callback.call(element);
398-
settings.onShow.call(element);
402+
settings.onVisible.call(element);
399403
});
400404
settings.onChange.call(element);
401-
settings.onVisible.call(element);
402405
}
403406
else {
404407
module.debug('Sidebar is already visible');
@@ -410,15 +413,14 @@ $.fn.sidebar = function(parameters) {
410413
? callback
411414
: function(){}
412415
;
413-
if(module.is.visible() || module.is.animating()) {
416+
if((module.is.visible() || module.is.animating()) && settings.onHide.call(element) !== false) {
414417
module.debug('Hiding sidebar', callback);
415418
module.refreshSidebars();
416419
module.pullPage(function() {
417420
callback.call(element);
418421
settings.onHidden.call(element);
419422
});
420423
settings.onChange.call(element);
421-
settings.onHide.call(element);
422424
}
423425
},
424426

‎src/definitions/modules/transition.js

Lines changed: 20 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -771,42 +771,43 @@ $.fn.transition = function() {
771771
},
772772

773773
hide: function() {
774+
if(settings.onHide.call(element) === false) {
775+
module.verbose('Hide callback returned false cancelling hide');
776+
return false;
777+
}
774778
module.verbose('Hiding element');
775779
if( module.is.animating() ) {
776780
module.reset();
777781
}
778782
element.blur(); // IE will trigger focus change if element is not blurred before hiding
779783
module.remove.display();
780784
module.remove.visible();
781-
if($.isFunction(settings.onBeforeHide)){
782-
settings.onBeforeHide.call(element,function(){
783-
module.hideNow();
784-
});
785-
} else {
786-
module.hideNow();
787-
}
788-
785+
settings.onBeforeHide.call(element, module.hideNow);
789786
},
790787

791788
hideNow: function() {
792789
module.set.hidden();
793790
module.force.hidden();
794-
settings.onHide.call(element);
791+
settings.onHidden.call(element);
795792
settings.onComplete.call(element);
796793
// module.repaint();
797794
},
798795

799796
show: function(display) {
800-
module.verbose('Showing element', display);
801-
if(module.force.visible()) {
797+
if(module.force.visible() && settings.onShow.call(element) !== false) {
798+
module.verbose('Showing element', display);
802799
module.remove.hidden();
803-
module.set.visible();
804-
settings.onShow.call(element);
805-
settings.onComplete.call(element);
806-
// module.repaint();
800+
settings.onBeforeShow.call(element, module.showNow);
807801
}
808802
},
809803

804+
showNow: function(){
805+
module.set.visible();
806+
settings.onVisible.call(element);
807+
settings.onComplete.call(element);
808+
// module.repaint();
809+
},
810+
810811
toggle: function() {
811812
if( module.is.visible() ) {
812813
module.hide();
@@ -1055,7 +1056,11 @@ $.fn.transition.settings = {
10551056
onStart : function() {},
10561057
onComplete : function() {},
10571058
onShow : function() {},
1059+
onBeforeShow : function(callback) {callback.call(this)},
1060+
onVisible : function() {},
10581061
onHide : function() {},
1062+
onHidden : function() {},
1063+
onBeforeHide : function(callback) {callback.call(this)},
10591064

10601065
// whether timeout should be used to ensure callback fires in cases animationend does not
10611066
useFailSafe : true,

0 commit comments

Comments
 (0)