From df0777b0daca01e154f4bf3c3a96cb4bf8a8bbae Mon Sep 17 00:00:00 2001 From: jlukic Date: Sat, 28 Sep 2013 17:51:48 -0400 Subject: [PATCH] Refactors modal plugin, modals now have icons auto formatted. Removes selector count from popup Former-commit-id: 7de4e027eee144b11b93a31605484aa8ca07faa0 Former-commit-id: 142c99d2e5cadad3cd821cd2173953925e339d25 --- src/modules/modal.js | 115 ++++++++++++++++++++++------------------- src/modules/modal.less | 12 ++--- src/modules/popup.js | 5 -- 3 files changed, 67 insertions(+), 65 deletions(-) diff --git a/src/modules/modal.js b/src/modules/modal.js index f0fdeff3c..704aafb3d 100755 --- a/src/modules/modal.js +++ b/src/modules/modal.js @@ -13,10 +13,11 @@ $.fn.modal = function(parameters) { var - $allModules = $(this), - $document = $(document), + $allModules = $(this), + $window = $(window), + $document = $(document), - settings = ( $.isPlainObject(parameters) ) + settings = ( $.isPlainObject(parameters) ) ? $.extend(true, {}, $.fn.modal.settings, parameters) : $.fn.modal.settings, @@ -39,15 +40,14 @@ $.fn.modal = function(parameters) { invokedResponse ; + $allModules .each(function() { var $module = $(this), $context = $(settings.context), $otherModals = $allModules.not($module), - $closeButton = $module.find(selector.closeButton), - - $dimmer, + $close = $module.find(selector.close), element = this, instance = $module.data(moduleNamespace), @@ -57,39 +57,21 @@ $.fn.modal = function(parameters) { module = { initialize: function() { - module.verbose('Attaching events'); - $closeButton - .on('click', module.event.close) + module.verbose('Initializing dimmer', $context); + $context + .dimmer('add content', $module) ; - module.cache.sizes(); - module.verbose('Creating dimmer'); - $context - .dimmer({ - closable: settings.closable, - duration: settings.duration, - onShow: function() { - module.add.keyboardShortcuts(); - $.proxy(settings.onShow, this)(); - }, - onHide: function() { - if($module.is(':visible')) { - $context.off('.dimmer'); - module.hide(); - $.proxy(settings.onHide, this)(); - } - module.remove.keyboardShortcuts(); - } + module.verbose('Attaching close events', $close); + $close + .on('click' + eventNamespace, module.event.close) + ; + $window + .on('resize', function() { + module.event.debounce(module.refresh, 50); }) ; - $dimmer = $context.children(selector.dimmer); - if( $module.parent()[0] !== $dimmer[0] ) { - module.debug('Moving element inside dimmer', $context); - $module = $module - .detach() - .appendTo($dimmer) - ; - } + module.instantiate(); }, @@ -108,11 +90,21 @@ $.fn.modal = function(parameters) { ; }, + refresh: function() { + module.cacheSizes(); + module.set.type(); + module.set.position(); + }, + event: { close: function() { module.verbose('Close button pressed'); $context.dimmer('hide'); }, + debounce: function(method, delay) { + clearTimeout(module.timer); + module.timer = setTimeout(method, delay); + }, keyboard: function(event) { var keyCode = event.which, @@ -125,10 +117,8 @@ $.fn.modal = function(parameters) { } }, resize: function() { - module.cache.sizes(); - if( $module.is(':visible') ) { - module.set.type(); - module.set.position(); + if( $context.dimmer('is active') ) { + module.refresh(); } } }, @@ -143,7 +133,8 @@ $.fn.modal = function(parameters) { }, show: function() { - module.debug('Showing modal'); + module.showDimmer(); + module.cacheSizes(); module.set.type(); module.set.position(); module.hideAll(); @@ -158,6 +149,12 @@ $.fn.modal = function(parameters) { ; } module.debug('Triggering dimmer'); + $.proxy(settings.onShow, element)(); + }, + + showDimmer: function() { + module.debug('Showing modal'); + module.set.dimmerSettings(); $context.dimmer('show'); }, @@ -179,6 +176,7 @@ $.fn.modal = function(parameters) { .fadeOut(settings.duration, settings.easing, module.remove.active) ; } + $.proxy(settings.onHide, element)(); }, hideAll: function() { @@ -209,16 +207,14 @@ $.fn.modal = function(parameters) { } }, - cache: { - sizes: function() { - module.cache = { - height : $module.outerHeight() + settings.offset, - contextHeight : (settings.context == 'body') - ? $(window).height() - : $context.height() - }; - module.debug('Caching modal and container sizes', module.cache); - } + cacheSizes: function() { + module.cache = { + height : $module.outerHeight() + settings.offset, + contextHeight : (settings.context == 'body') + ? $(window).height() + : $context.height() + }; + module.debug('Caching modal and container sizes', module.cache); }, can: { @@ -237,6 +233,20 @@ $.fn.modal = function(parameters) { active: function() { $module.addClass(className.active); }, + dimmerSettings: function() { + module.debug('Setting dimmer settings', settings.closable); + $context + .dimmer('setting', 'closable', settings.closable) + .dimmer('setting', 'duration', settings.duration) + .dimmer('setting', 'onShow' , module.add.keyboardShortcuts) + .dimmer('setting', 'onHide', function() { + module.hide(); + module.remove.keyboardShortcuts(); + }) + .dimmer('destroy') + .dimmer('initialize') + ; + }, type: function() { if(module.can.fit()) { module.verbose('Modal fits on screen'); @@ -248,7 +258,7 @@ $.fn.modal = function(parameters) { } }, position: function() { - module.verbose('Centering modal on page', module.cache.height / 2); + module.verbose('Centering modal on page', module.cache, module.cache.height / 2); if(module.can.fit()) { $module .css({ @@ -465,8 +475,7 @@ $.fn.modal.settings = { onHide : function(){}, selector : { - closeButton : '.close, .actions .button', - dimmer: '.ui.dimmer' + close : '.close, .actions .button' }, error : { method : 'The method you called is not defined.' diff --git a/src/modules/modal.less b/src/modules/modal.less index ec1259b9e..1b14098b1 100755 --- a/src/modules/modal.less +++ b/src/modules/modal.less @@ -63,8 +63,6 @@ ---------------*/ .ui.modal > .header { - border-bottom: 1px solid rgba(0, 0, 0, 0.1); - margin: 0em; padding: 1.5rem 2rem; @@ -99,9 +97,11 @@ .ui.modal > .content > .right { display: table-cell; padding-left: 5%; - vertical-align: middle; - - box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.1); + vertical-align: top; +} +.ui.modal > .content > .left > .icon { + font-size: 8em; + margin: 0em; } .ui.modal > .content p { line-height: 1.6; @@ -112,8 +112,6 @@ ---------------*/ .ui.modal .actions { - border-top: 1px solid rgba(0, 0, 0, 0.1); - padding: 1rem 2rem; text-align: right; } diff --git a/src/modules/popup.js b/src/modules/popup.js index 9f61ec29d..b628b3a13 100755 --- a/src/modules/popup.js +++ b/src/modules/popup.js @@ -552,11 +552,6 @@ $.fn.popup = function(parameters) { if(moduleSelector) { title += ' \'' + moduleSelector + '\''; } - if($allModules.size() > 1) { - if($allModules.size() > 1) { - title += ' ' + '(' + $allModules.size() + ')'; - } - } if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) { console.groupCollapsed(title); if(console.table) {