From f8aa8bbf8d478735839413780a8ed26ca8935cb4 Mon Sep 17 00:00:00 2001 From: jlukic Date: Sat, 12 Oct 2013 16:34:45 -0400 Subject: [PATCH] Rewrites modal and dimmer fixes #233, no longer dependencies between closing dimmer and closing modal, each can close separately. Disables transition logging by default --- src/modules/dimmer.js | 38 +++++++------- src/modules/modal.js | 103 +++++++++++++++++++++----------------- src/modules/transition.js | 2 +- 3 files changed, 77 insertions(+), 66 deletions(-) diff --git a/src/modules/dimmer.js b/src/modules/dimmer.js index b6101436e..f7a48dab1 100755 --- a/src/modules/dimmer.js +++ b/src/modules/dimmer.js @@ -15,28 +15,12 @@ $.fn.dimmer = function(parameters) { var $allModules = $(this), - settings = ( $.isPlainObject(parameters) ) - ? $.extend(true, {}, $.fn.dimmer.settings, parameters) - : $.fn.dimmer.settings, - - selector = settings.selector, - namespace = settings.namespace, - className = settings.className, - error = settings.error, - - eventNamespace = '.' + namespace, - moduleNamespace = 'module-' + namespace, - moduleSelector = $allModules.selector || '', - time = new Date().getTime(), performance = [], query = arguments[0], methodInvoked = (typeof query == 'string'), queryArguments = [].slice.call(arguments, 1), - clickEvent = ('ontouchstart' in document.documentElement) - ? 'touchstart' - : 'click', invokedResponse ; @@ -44,6 +28,23 @@ $.fn.dimmer = function(parameters) { $allModules .each(function() { var + settings = ( $.isPlainObject(parameters) ) + ? $.extend(true, {}, $.fn.dimmer.settings, parameters) + : $.fn.dimmer.settings, + + selector = settings.selector, + namespace = settings.namespace, + className = settings.className, + error = settings.error, + + eventNamespace = '.' + namespace, + moduleNamespace = 'module-' + namespace, + moduleSelector = $allModules.selector || '', + + clickEvent = ('ontouchstart' in document.documentElement) + ? 'touchstart' + : 'click', + $module = $(this), $dimmer, $dimmable, @@ -66,7 +67,7 @@ $.fn.dimmer = function(parameters) { $dimmer = $dimmable.children(selector.dimmer).first(); } else { - module.create(); + $dimmer = module.create(); } } }, @@ -141,8 +142,7 @@ $.fn.dimmer = function(parameters) { }, create: function() { - $dimmer = $( settings.template.dimmer() ); - return $dimmer.appendTo($dimmable); + return $( settings.template.dimmer() ).appendTo($dimmable); }, animate: { diff --git a/src/modules/modal.js b/src/modules/modal.js index fa32e9539..106f3f36b 100755 --- a/src/modules/modal.js +++ b/src/modules/modal.js @@ -17,19 +17,6 @@ $.fn.modal = function(parameters) { $window = $(window), $document = $(document), - settings = ( $.isPlainObject(parameters) ) - ? $.extend(true, {}, $.fn.modal.settings, parameters) - : $.fn.modal.settings, - - selector = settings.selector, - className = settings.className, - namespace = settings.namespace, - error = settings.error, - - eventNamespace = '.' + namespace, - moduleNamespace = 'module-' + namespace, - moduleSelector = $allModules.selector || '', - time = new Date().getTime(), performance = [], @@ -44,6 +31,19 @@ $.fn.modal = function(parameters) { $allModules .each(function() { var + settings = ( $.isPlainObject(parameters) ) + ? $.extend(true, {}, $.fn.modal.settings, parameters) + : $.fn.modal.settings, + + selector = settings.selector, + className = settings.className, + namespace = settings.namespace, + error = settings.error, + + eventNamespace = '.' + namespace, + moduleNamespace = 'module-' + namespace, + moduleSelector = $allModules.selector || '', + $module = $(this), $context = $(settings.context), $otherModals = $allModules.not($module), @@ -64,7 +64,6 @@ $.fn.modal = function(parameters) { $dimmer = $context .dimmer('add content', $module) - .dimmer('get dimmer') ; module.verbose('Attaching close events', $close); @@ -107,7 +106,7 @@ $.fn.modal = function(parameters) { ; event = $.isFunction(module[event]) ? module[event] - : module.show + : module.toggle ; if($toggle.size() > 0) { module.debug('Attaching modal events to element', selector, event); @@ -124,7 +123,7 @@ $.fn.modal = function(parameters) { event: { close: function() { module.verbose('Close button pressed'); - $context.dimmer('hide'); + module.hide(); }, debounce: function(method, delay) { clearTimeout(module.timer); @@ -137,12 +136,12 @@ $.fn.modal = function(parameters) { ; if(keyCode == escapeKey) { module.debug('Escape key pressed hiding modal'); - $context.dimmer('hide'); + module.hide(); event.preventDefault(); } }, resize: function() { - if( $context.dimmer('is active') ) { + if( $dimmer.dimmer('is active') ) { module.refresh(); } } @@ -164,20 +163,12 @@ $.fn.modal = function(parameters) { module.hideAll(); if(settings.transition && $.fn.transition !== undefined) { $module - .transition(settings.transition + ' in', settings.duration, function() { - module.set.active(); - module.save.focus(); - module.set.type(); - }) + .transition(settings.transition + ' in', settings.duration, module.set.active) ; } else { $module - .fadeIn(settings.duration, settings.easing, function() { - module.set.active(); - module.save.focus(); - module.set.type(); - }) + .fadeIn(settings.duration, settings.easing, module.set.active) ; } module.debug('Triggering dimmer'); @@ -187,18 +178,30 @@ $.fn.modal = function(parameters) { showDimmer: function() { module.debug('Showing modal'); module.set.dimmerSettings(); - $context.dimmer('show'); + $dimmer.dimmer('show'); + }, + + hide: function() { + if( $dimmer.dimmer('is active') ) { + $dimmer.dimmer('hide'); + } + if( module.is.active() ) { + module.hideModal(); + $.proxy(settings.onHide, element)(); + } + else { + module.debug('Cannot hide modal, modal is not visible'); + } }, + hideDimmer: function() { - $context.dimmer('hide'); + module.debug('Hiding dimmer'); + $dimmer.dimmer('hide'); }, - hide: function() { + hideModal: function() { module.debug('Hiding modal'); - // remove keyboard detection - $document - .off('keyup.' + eventNamespace) - ; + module.remove.keyboardShortcuts(); if(settings.transition && $.fn.transition !== undefined) { $module .transition(settings.transition + ' out', settings.duration, function() { @@ -215,7 +218,6 @@ $.fn.modal = function(parameters) { }) ; } - $.proxy(settings.onHide, element)(); }, hideAll: function() { @@ -242,7 +244,9 @@ $.fn.modal = function(parameters) { restore: { focus: function() { - $focusedElement.focus(); + if($focusedElement.size() > 0) { + $focusedElement.focus(); + } } }, @@ -267,7 +271,7 @@ $.fn.modal = function(parameters) { height : $module.outerHeight() + settings.offset, contextHeight : (settings.context == 'body') ? $(window).height() - : $context.height() + : $dimmer.height() }; module.debug('Caching modal and container sizes', module.cache); }, @@ -286,21 +290,28 @@ $.fn.modal = function(parameters) { set: { active: function() { - $module.addClass(className.active); + module.save.focus(); + module.set.type(); + $module + .addClass(className.active) + ; + if(settings.closable) { + $dimmer + .dimmer('get dimmer') + .on('click', module.hide) + ; + } }, dimmerSettings: function() { - module.debug('Setting dimmer settings', settings.closable); - $context - .dimmer('setting', 'closable', settings.closable) + module.debug('Setting dimmer settings', $dimmer); + $dimmer + .dimmer('setting', 'closable', false) .dimmer('setting', 'duration', { show : settings.duration * 0.95, hide : settings.duration * 1.05 }) .dimmer('setting', 'onShow' , module.add.keyboardShortcuts) - .dimmer('setting', 'onHide', function() { - module.hide(); - module.remove.keyboardShortcuts(); - }) + // destory after changing settings in order to reattach events .dimmer('destroy') .dimmer('initialize') ; diff --git a/src/modules/transition.js b/src/modules/transition.js index 4bbc2f806..b70d2c5ad 100755 --- a/src/modules/transition.js +++ b/src/modules/transition.js @@ -609,7 +609,7 @@ $.fn.transition.settings = { name : 'Transition', // debug content outputted to console - debug : true, + debug : false, // verbose debug output verbose : true,