From 28bf34ed8a9af485ed0673f6e90d4468c5fab20f Mon Sep 17 00:00:00 2001 From: Jack Date: Sun, 2 Jul 2017 15:39:13 -0700 Subject: [PATCH] #4368 - Dimmer will now reset settings before each modal show making it simpler to work with multiple modal types in same page --- RELEASE-NOTES.md | 1 + src/definitions/modules/dimmer.js | 13 +++---- src/definitions/modules/modal.js | 62 ++++++++++++++++++++----------- 3 files changed, 47 insertions(+), 29 deletions(-) mode change 100644 => 100755 src/definitions/modules/dimmer.js mode change 100644 => 100755 src/definitions/modules/modal.js diff --git a/RELEASE-NOTES.md b/RELEASE-NOTES.md index 449315a0f..4fb35fe15 100755 --- a/RELEASE-NOTES.md +++ b/RELEASE-NOTES.md @@ -13,6 +13,7 @@ - **Site** - Site now includes custom scrollbar styles for UI (not page) by default in WebKit/Chrome. You can disable this by setting `@useCustomScrollbars: false` in your `site.variables` **Bugs** +- **Modal** - Using multiple modals with different `inverted` `blurring` or `closable` settings will no longer in some cases inherit the options of other modals #4368 - **Modal** - Fixed issue where modal `refresh` was being called on modals even if they are hidden. #5319 **Thanks @p2kmgcl** - **Dropdown** - Fixed issue where using `down` key to re-open dropdown when using `search selection dropdown` would start at the top element instead of jumping to selected element - **Dropdown** - Fix dropdown arrow being slightly off center due to em calculation being incorrect due to differences in relative em diff --git a/src/definitions/modules/dimmer.js b/src/definitions/modules/dimmer.js old mode 100644 new mode 100755 index 2feb915ec..3e317d004 --- a/src/definitions/modules/dimmer.js +++ b/src/definitions/modules/dimmer.js @@ -130,12 +130,10 @@ $.fn.dimmer = function(parameters) { module.set.pageDimmer(); } - if( module.is.closable() ) { - module.verbose('Adding dimmer close event', $dimmer); - $dimmable - .on(clickEvent + eventNamespace, selector.dimmer, module.event.click) - ; - } + $dimmable + .on(clickEvent + eventNamespace, selector.dimmer, module.event.click) + ; + } }, @@ -153,7 +151,7 @@ $.fn.dimmer = function(parameters) { event: { click: function(event) { module.verbose('Determining if event occured on dimmer', event); - if( $dimmer.find(event.target).length === 0 || $(event.target).is(selector.content) ) { + if( ($dimmer.find(event.target).length === 0 || $(event.target).is(selector.content)) && module.is.closable()) { module.hide(); event.stopImmediatePropagation(); } @@ -191,6 +189,7 @@ $.fn.dimmer = function(parameters) { ; module.debug('Showing dimmer', $dimmer, settings); if( (!module.is.dimmed() || module.is.animating()) && module.is.enabled() ) { + module.set.variation(); module.animate.show(callback); settings.onShow.call(element); settings.onChange.call(element); diff --git a/src/definitions/modules/modal.js b/src/definitions/modules/modal.js old mode 100644 new mode 100755 index ea19e47f0..e0cdfd630 --- a/src/definitions/modules/modal.js +++ b/src/definitions/modules/modal.js @@ -105,29 +105,12 @@ $.fn.modal = function(parameters) { create: { dimmer: function() { - var - defaultSettings = { - debug : settings.debug, - dimmerName : 'modals', - duration : { - show : settings.duration, - hide : settings.duration - } - }, - dimmerSettings = $.extend(true, defaultSettings, settings.dimmerSettings) - ; - if(settings.inverted) { - dimmerSettings.variation = (dimmerSettings.variation !== undefined) - ? dimmerSettings.variation + ' inverted' - : 'inverted' - ; - } if($.fn.dimmer === undefined) { module.error(error.dimmer); return; } - module.debug('Creating dimmer with settings', dimmerSettings); - $dimmable = $context.dimmer(dimmerSettings); + module.debug('Creating dimmer'); + $dimmable = $context.dimmer({}); if(settings.detachable) { module.verbose('Modal is detachable, moving content into dimmer'); $dimmable.dimmer('add content', $module); @@ -135,9 +118,6 @@ $.fn.modal = function(parameters) { else { module.set.undetached(); } - if(settings.blurring) { - $dimmable.addClass(className.blurring); - } $dimmer = $dimmable.dimmer('get dimmer'); }, id: function() { @@ -311,6 +291,7 @@ $.fn.modal = function(parameters) { : function(){} ; module.refreshModals(); + module.set.dimmerSettings(); module.showModal(callback); }, @@ -604,6 +585,42 @@ $.fn.modal = function(parameters) { ; } }, + dimmerSettings: function() { + if($.fn.dimmer === undefined) { + module.error(error.dimmer); + return; + } + var + defaultSettings = { + debug : settings.debug, + dimmerName : 'modals', + variation : false, + closable : 'auto', + duration : { + show : settings.duration, + hide : settings.duration + } + }, + dimmerSettings = $.extend(true, defaultSettings, settings.dimmerSettings) + ; + if(settings.inverted) { + dimmerSettings.variation = (dimmerSettings.variation !== undefined) + ? dimmerSettings.variation + ' inverted' + : 'inverted' + ; + $dimmer.addClass(className.inverted); + } + else { + $dimmer.removeClass(className.inverted); + } + if(settings.blurring) { + $dimmable.addClass(className.blurring); + } + else { + $dimmable.removeClass(className.blurring); + } + $context.dimmer('setting', dimmerSettings); + }, screenHeight: function() { if( module.can.fit() ) { $body.css('height', ''); @@ -912,6 +929,7 @@ $.fn.modal.settings = { active : 'active', animating : 'animating', blurring : 'blurring', + inverted : 'inverted', scrolling : 'scrolling', undetached : 'undetached' }