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

Adds better handling of set.dimmed() when queued animations, now triggers on start of animation using new transition callback

pull/1177/head
jlukic 10 years ago
parent
70a125ecc3
commit
88a82e5537
2 changed files with 68 additions and 65 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 132
      src/definitions/modules/dimmer.js
  2. 1
      src/definitions/modules/dimmer.less

132
src/definitions/modules/dimmer.js
View File

@ -127,7 +127,6 @@ $.fn.dimmer = function(parameters) {
}, },
event: { event: {
click: function(event) { click: function(event) {
module.verbose('Determining if event occured on dimmer', event); module.verbose('Determining if event occured on dimmer', event);
if( $dimmer.find(event.target).size() === 0 || $(event.target).is(selector.content) ) { if( $dimmer.find(event.target).size() === 0 || $(event.target).is(selector.content) ) {
@ -135,7 +134,6 @@ $.fn.dimmer = function(parameters) {
event.stopImmediatePropagation(); event.stopImmediatePropagation();
} }
} }
}, },
addContent: function(element) { addContent: function(element) {
@ -166,21 +164,66 @@ $.fn.dimmer = function(parameters) {
return $element; return $element;
}, },
show: function(callback) {
callback = $.isFunction(callback)
? callback
: function(){}
;
module.debug('Showing dimmer', $dimmer, settings);
if( (!module.is.dimmed() || module.is.animating()) && module.is.enabled() ) {
module.animate.show(callback);
$.proxy(settings.onShow, element)();
$.proxy(settings.onChange, element)();
}
else {
module.debug('Dimmer is already shown or disabled');
}
},
hide: function(callback) {
callback = $.isFunction(callback)
? callback
: function(){}
;
if( module.is.dimmed() || module.is.animating() ) {
module.debug('Hiding dimmer', $dimmer);
module.animate.hide(callback);
$.proxy(settings.onHide, element)();
$.proxy(settings.onChange, element)();
}
else {
module.debug('Dimmer is not visible');
}
},
toggle: function() {
module.verbose('Toggling dimmer visibility', $dimmer);
if( !module.is.dimmed() ) {
module.show();
}
else {
module.hide();
}
},
animate: { animate: {
show: function(callback) { show: function(callback) {
callback = $.isFunction(callback) callback = $.isFunction(callback)
? callback ? callback
: function(){} : function(){}
; ;
module.set.dimmed();
if(settings.on != 'hover' && settings.useCSS && $.fn.transition !== undefined && $dimmer.transition('is supported')) {
if(settings.useCSS && $.fn.transition !== undefined && $dimmer.transition('is supported')) {
$dimmer $dimmer
.transition({ .transition({
animation : settings.transition + ' in', animation : settings.transition + ' in',
queue : true,
duration : module.get.duration(), duration : module.get.duration(),
start : function() {
module.set.dimmed();
},
complete : function() { complete : function() {
module.set.active();
if( !module.is.animating() ) {
module.set.active();
}
callback(); callback();
} }
}) })
@ -188,6 +231,7 @@ $.fn.dimmer = function(parameters) {
} }
else { else {
module.verbose('Showing dimmer animation with javascript'); module.verbose('Showing dimmer animation with javascript');
module.set.dimmed();
$dimmer $dimmer
.stop() .stop()
.css({ .css({
@ -197,7 +241,9 @@ $.fn.dimmer = function(parameters) {
}) })
.fadeTo(module.get.duration(), 1, function() { .fadeTo(module.get.duration(), 1, function() {
$dimmer.removeAttr('style'); $dimmer.removeAttr('style');
module.set.active();
if( !module.is.animating() ) {
module.set.active();
}
callback(); callback();
}) })
; ;
@ -208,16 +254,17 @@ $.fn.dimmer = function(parameters) {
? callback ? callback
: function(){} : function(){}
; ;
if(settings.on != 'hover' && settings.useCSS && $.fn.transition !== undefined && $dimmer.transition('is supported')) {
if(settings.useCSS && $.fn.transition !== undefined && $dimmer.transition('is supported')) {
module.verbose('Hiding dimmer with css'); module.verbose('Hiding dimmer with css');
module.remove.dimmed();
$dimmer $dimmer
.transition({ .transition({
animation : settings.transition + ' out', animation : settings.transition + ' out',
duration : module.get.duration(), duration : module.get.duration(),
queue : true,
complete : function() { complete : function() {
module.remove.active();
if( !module.is.animating() ) {
module.remove.dimmed();
module.remove.active();
}
callback(); callback();
} }
}) })
@ -225,12 +272,14 @@ $.fn.dimmer = function(parameters) {
} }
else { else {
module.verbose('Hiding dimmer with javascript'); module.verbose('Hiding dimmer with javascript');
module.remove.dimmed();
$dimmer $dimmer
.stop() .stop()
.fadeOut(module.get.duration(), function() { .fadeOut(module.get.duration(), function() {
if( !module.is.animating() ) {
module.remove.dimmed();
module.remove.active();
}
$dimmer.removeAttr('style'); $dimmer.removeAttr('style');
module.remove.active();
callback(); callback();
}) })
; ;
@ -271,7 +320,7 @@ $.fn.dimmer = function(parameters) {
return $dimmer.hasClass(className.active); return $dimmer.hasClass(className.active);
}, },
animating: function() { animating: function() {
return ( $dimmer.is(':animated') || $dimmer.hasClass(className.transition) );
return ( $dimmer.is(':animated') || $dimmer.hasClass(className.animating) );
}, },
closable: function() { closable: function() {
if(settings.closable == 'auto') { if(settings.closable == 'auto') {
@ -313,11 +362,7 @@ $.fn.dimmer = function(parameters) {
set: { set: {
active: function() { active: function() {
module.set.dimmed();
$dimmer
.removeClass(className.transition)
.addClass(className.active)
;
$dimmer.addClass(className.active);
}, },
dimmable: function() { dimmable: function() {
$dimmable.addClass(className.dimmable); $dimmable.addClass(className.dimmable);
@ -336,7 +381,6 @@ $.fn.dimmer = function(parameters) {
remove: { remove: {
active: function() { active: function() {
$dimmer $dimmer
.removeClass(className.transition)
.removeClass(className.active) .removeClass(className.active)
; ;
}, },
@ -348,48 +392,6 @@ $.fn.dimmer = function(parameters) {
} }
}, },
show: function(callback) {
callback = $.isFunction(callback)
? callback
: function(){}
;
module.debug('Showing dimmer', $dimmer, settings);
if( !module.is.active() && module.is.enabled() ) {
module.animate.show(callback);
$.proxy(settings.onShow, element)();
$.proxy(settings.onChange, element)();
}
else {
module.debug('Dimmer is already shown or disabled');
}
},
hide: function(callback) {
callback = $.isFunction(callback)
? callback
: function(){}
;
if( module.is.active() || module.is.animating() ) {
module.debug('Hiding dimmer', $dimmer);
module.animate.hide(callback);
$.proxy(settings.onHide, element)();
$.proxy(settings.onChange, element)();
}
else {
module.debug('Dimmer is not visible');
}
},
toggle: function() {
module.verbose('Toggling dimmer visibility', $dimmer);
if( !module.is.dimmed() ) {
module.show();
}
else {
module.hide();
}
},
setting: function(name, value) { setting: function(name, value) {
module.debug('Changing setting', name, value); module.debug('Changing setting', name, value);
if( $.isPlainObject(name) ) { if( $.isPlainObject(name) ) {
@ -614,13 +616,13 @@ $.fn.dimmer.settings = {
className : { className : {
active : 'active', active : 'active',
animating : 'animating',
dimmable : 'dimmable', dimmable : 'dimmable',
dimmed : 'dimmed', dimmed : 'dimmed',
disabled : 'disabled', disabled : 'disabled',
pageDimmer : 'page',
hide : 'hide', hide : 'hide',
show : 'show',
transition : 'transition'
pageDimmer : 'page',
show : 'show'
} }
}; };

1
src/definitions/modules/dimmer.less
View File

@ -75,6 +75,7 @@
States States
*******************************/ *******************************/
.animating.dimmable:not(body),
.dimmed.dimmable:not(body) { .dimmed.dimmable:not(body) {
overflow: @overflow; overflow: @overflow;
} }

Write Preview
Loading…
Cancel
Save