diff --git a/src/modules/dimmer.js b/src/modules/dimmer.js index 7a9660f0c..2070342c0 100755 --- a/src/modules/dimmer.js +++ b/src/modules/dimmer.js @@ -54,8 +54,6 @@ $.fn.dimmer = function(parameters) { module ; - console.log(element, parameters); - module = { preinitialize: function() { @@ -152,13 +150,21 @@ $.fn.dimmer = function(parameters) { animate: { show: function(callback) { - callback = callback || function(){}; + callback = $.isFunction(callback) + ? callback + : function(){} + ; module.set.dimmed(); if($.fn.transition !== undefined) { $dimmer - .transition(settings.transition + ' in', module.get.duration(), function() { - module.set.active(); - callback(); + .transition({ + animation : settings.transition + ' in', + queue : true, + duration : module.get.duration(), + complete : function() { + module.set.active(); + callback(); + }, }) ; } @@ -180,14 +186,22 @@ $.fn.dimmer = function(parameters) { } }, hide: function(callback) { - callback = callback || function(){}; - module.remove.dimmed(); + callback = $.isFunction(callback) + ? callback + : function(){} + ; if($.fn.transition !== undefined) { module.verbose('Hiding dimmer with css'); $dimmer - .transition(settings.transition + ' out', module.get.duration(), function() { - module.remove.active(); - callback(); + .transition({ + animation : settings.transition + ' out', + duration : module.get.duration(), + queue : true, + complete : function() { + module.remove.dimmed(); + module.remove.active(); + callback(); + } }) ; } @@ -197,6 +211,7 @@ $.fn.dimmer = function(parameters) { .stop() .fadeOut(module.get.duration(), function() { $dimmer.removeAttr('style'); + module.remove.dimmed(); module.remove.active(); callback(); }) @@ -229,27 +244,30 @@ $.fn.dimmer = function(parameters) { }, is: { - dimmer: function() { - return $module.is(selector.dimmer); - }, - dimmable: function() { - return $module.is(selector.dimmable); - }, active: function() { return $dimmer.hasClass(className.active); }, animating: function() { return ( $dimmer.is(':animated') || $dimmer.hasClass(className.transition) ); }, - page: function () { - return $dimmable.is('body'); + dimmer: function() { + return $module.is(selector.dimmer); }, - enabled: function() { - return !$dimmable.hasClass(className.disabled); + dimmable: function() { + return $module.is(selector.dimmable); + }, + dimmed: function() { + return $dimmable.hasClass(className.dimmed); }, disabled: function() { return $dimmable.hasClass(className.disabled); }, + enabled: function() { + return !module.is.disabled(); + }, + page: function () { + return $dimmable.is('body'); + }, pageDimmer: function() { return $dimmer.hasClass(className.pageDimmer); } @@ -263,6 +281,7 @@ $.fn.dimmer = function(parameters) { set: { active: function() { + module.set.dimmed(); $dimmer .removeClass(className.transition) .addClass(className.active) @@ -298,8 +317,12 @@ $.fn.dimmer = function(parameters) { }, show: function(callback) { + callback = $.isFunction(callback) + ? callback + : function(){} + ; module.debug('Showing dimmer', $dimmer, settings); - if( !(module.is.active() || module.is.animating() ) && module.is.enabled() ) { + if( !module.is.active() && module.is.enabled() ) { module.animate.show(callback); $.proxy(settings.onShow, element)(); $.proxy(settings.onChange, element)(); @@ -310,7 +333,11 @@ $.fn.dimmer = function(parameters) { }, hide: function(callback) { - if( module.is.active() && !module.is.animating() ) { + 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)(); @@ -323,7 +350,7 @@ $.fn.dimmer = function(parameters) { toggle: function() { module.verbose('Toggling dimmer visibility', $dimmer); - if( !module.is.active() ) { + if( !module.is.dimmed() ) { module.show(); } else { @@ -332,26 +359,22 @@ $.fn.dimmer = function(parameters) { }, setting: function(name, value) { - if(value !== undefined) { - if( $.isPlainObject(name) ) { - $.extend(true, settings, name); - } - else { - settings[name] = value; - } + if( $.isPlainObject(name) ) { + $.extend(true, settings, name); + } + else if(value !== undefined) { + settings[name] = value; } else { return settings[name]; } }, internal: function(name, value) { - if(value !== undefined) { - if( $.isPlainObject(name) ) { - $.extend(true, module, name); - } - else { - module[name] = value; - } + if( $.isPlainObject(name) ) { + $.extend(true, module, name); + } + else if(value !== undefined) { + module[name] = value; } else { return module[name]; @@ -520,12 +543,11 @@ $.fn.dimmer.settings = { name : 'Dimmer', namespace : 'dimmer', - verbose : true, debug : true, + verbose : true, performance : true, transition : 'fade', - on : false, closable : true, duration : { diff --git a/src/modules/dimmer.less b/src/modules/dimmer.less index 8bc8d3d82..a92dfa1bd 100755 --- a/src/modules/dimmer.less +++ b/src/modules/dimmer.less @@ -74,27 +74,6 @@ z-index: 1000; } -/* -.ui.dimmed.dimmable > :not(.dimmer) { - -webkit-transition: - filter 0.5s ease - ; - -moz-transition: - filter 0.5s ease - ; - -o-transition: - filter 0.5s ease - ; - -ms-transition: - filter 0.5s ease - ; - transition: - filter 0.5s ease - ; -} -*/ - - /* Dimmer Content */; .ui.dimmer > .content { width: 100%; @@ -129,12 +108,11 @@ /******************************* States *******************************/ -/* -.ui.dimmed.dimmable > :not(.dimmer) { - -webkit-filter: ~"blur(5px) grayscale(0.7)"; - -moz-filter: ~"blur(5px) grayscale(0.7)"; + +.ui.dimmed.dimmable:not(body) { + overflow: hidden; } -*/ + .ui.dimmed.dimmable > .ui.dimmer, .ui.active.dimmer { display: block; @@ -148,7 +126,6 @@ height: 0em !important; } - /******************************* Variations *******************************/