diff --git a/server/documents/modules/modal.html.eco b/server/documents/modules/modal.html.eco index ece802be4..d069e4009 100755 --- a/server/documents/modules/modal.html.eco +++ b/server/documents/modules/modal.html.eco @@ -365,31 +365,38 @@ type : 'UI Module' detachable true - If set to false will prevent the modal from being moved to inside the dimmer + Setting to to false will prevent the modal from being removed from the DOM and appended to the dimmer allowMultiple false - If set to true will not close other visible modals when opening a new one + Setting to true will prevent closing other visible modals when opening a new one offset 0 - A vertical offset to allow for content outside of modal, for example a close button, to be centered. + A vertical offset to allow for content outside of the modal (close button, etc) context body - Selector or jquery object specifying the area to dim + A CSS selector or jQuery object specifying the area to dim closable true - Settings to false will not allow you to close the modal by clicking on the dimmer + Setting to false will not allow you to close the modal by clicking on the dimmer + + + autofocus + + true + + Setting to false will prevent autofocusing on the first input within the modal useCSS @@ -417,7 +424,7 @@ type : 'UI Module' easeOutExpo - Animation easing is only used if javascript animations are used. + Animation easing is only used if javascript animations are used diff --git a/src/modules/modal.js b/src/modules/modal.js index 2680f0f8a..df1aa99a0 100755 --- a/src/modules/modal.js +++ b/src/modules/modal.js @@ -252,50 +252,52 @@ $.fn.modal = function(parameters) { }, showModal: function(callback) { + if(module.is.active()) { + module.debug('Modal is already visible'); + return; + } + callback = $.isFunction(callback) ? callback : function(){} ; - if( !module.is.active() ) { - if(module.cache === undefined) { - module.cacheSizes(); - } - module.set.position(); - module.set.screenHeight(); - module.set.type(); + module.save.focus(); + module.add.keyboardShortcuts(); + + if(module.cache === undefined) { + module.cacheSizes(); + } + module.set.position(); + module.set.screenHeight(); + module.set.type(); - if(module.othersVisible() && !settings.allowMultiple) { - module.debug('Other modals visible, queueing show animation'); - module.hideOthers(module.showModal); + if(module.othersVisible() && !settings.allowMultiple) { + module.debug('Other modals visible, queueing show animation'); + module.hideOthers(module.showModal); + } + else { + $.proxy(settings.onShow, element)(); + + var transitionCallback = function() { + module.set.active(); + $.proxy(settings.onVisible, element)(); + callback(); + }; + + if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) { + module.debug('Showing modal with css animations'); + $module + .transition(settings.transition + ' in', settings.duration, transitionCallback) + ; } else { - $.proxy(settings.onShow, element)(); - if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) { - module.debug('Showing modal with css animations'); - $module - .transition(settings.transition + ' in', settings.duration, function() { - $.proxy(settings.onVisible, element)(); - module.set.active(); - callback(); - }) - ; - } - else { - module.debug('Showing modal with javascript'); - $module - .fadeIn(settings.duration, settings.easing, function() { - $.proxy(settings.onVisible, element)(); - module.set.active(); - callback(); - }) - ; - } + module.debug('Showing modal with javascript'); + $module + .fadeIn(settings.duration, settings.easing, transitionCallback) + ; } } - else { - module.debug('Modal is already visible'); - } }, showDimmer: function() { @@ -304,7 +306,7 @@ $.fn.modal = function(parameters) { $dimmable.dimmer('show'); } else { - module.debug('Dimmer already visible'); + module.debug('Dimmer is already visible'); } }, @@ -322,7 +324,7 @@ $.fn.modal = function(parameters) { hideDimmer: function() { if( !module.is.active() ) { - module.debug('Dimmer is not visible cannot hide'); + module.debug('Dimmer is already hidden'); return; } module.debug('Hiding dimmer'); @@ -343,35 +345,37 @@ $.fn.modal = function(parameters) { }, hideModal: function(callback) { + if(!module.is.active()) { + module.debug('Modal is already hidden'); + return; + } + callback = $.isFunction(callback) ? callback : function(){} ; - if( !module.is.active() ) { - module.debug('Cannot hide modal it is not active'); - return; - } - module.debug('Hiding modal'); + + module.restore.focus(); module.remove.keyboardShortcuts(); + $.proxy(settings.onHide, element)(); + + var transitionCallback = function() { + module.remove.active(); + $.proxy(settings.onHidden, element)(); + callback(); + }; + if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) { + module.debug('Hiding modal with css animations'); $module - .transition(settings.transition + ' out', settings.duration, function() { - $.proxy(settings.onHidden, element)(); - module.remove.active(); - module.restore.focus(); - callback(); - }) + .transition(settings.transition + ' out', settings.duration, transitionCallback) ; } else { + module.debug('Hiding modal with javascript'); $module - .fadeOut(settings.duration, settings.easing, function() { - $.proxy(settings.onHidden, element)(); - module.remove.active(); - module.restore.focus(); - callback(); - }) + .fadeOut(settings.duration, settings.easing, transitionCallback) ; } }, @@ -489,17 +493,22 @@ $.fn.modal = function(parameters) { } }, active: function() { - module.add.keyboardShortcuts(); - module.save.focus(); - $module - .addClass(className.active) - ; + $module.addClass(className.active); + if(settings.closable) { $dimmer .off('click' + eventNamespace) .on('click' + eventNamespace, module.event.click) ; } + + if(settings.autofocus) { + var $inputs = $module.find(':input:visible'); + var $autofocus = $inputs.filter('[autofocus]'); + var $input = $autofocus.length ? $autofocus : $inputs; + + $input.first().focus(); + } }, scrolling: function() { $dimmable.addClass(className.scrolling); @@ -724,6 +733,7 @@ $.fn.modal.settings = { allowMultiple : true, detachable : true, closable : true, + autofocus : true, context : 'body', duration : 500, @@ -765,4 +775,4 @@ $.extend( $.easing, { } }); -})( jQuery, window , document ); \ No newline at end of file +})( jQuery, window , document );