From 1cd343396aeada9b1f8056931105ed248b66f0ab Mon Sep 17 00:00:00 2001 From: Brendan Falkowski Date: Mon, 18 Feb 2019 16:11:32 -0800 Subject: [PATCH 01/15] =?UTF-8?q?Add=20=E2=80=9C$modal-close-icon-svg?= =?UTF-8?q?=E2=80=9D=20variable=20to=20SCSS?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/src/_modal.scss | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/css/src/_modal.scss b/css/src/_modal.scss index d349858..c4ede60 100644 --- a/css/src/_modal.scss +++ b/css/src/_modal.scss @@ -14,8 +14,9 @@ $modal-backdrop-opacity: 0.65 !default; $modal-backdrop-transition-duration: 300ms !default; -$modal-close-button-size: 28px !default; -$modal-close-icon-size: 24px !default; +$modal-close-button-size: 28px !default; +$modal-close-icon-size: 24px !default; +$modal-close-icon-svg: 'remove' !default; $modal-dialog-transition-duration: 500ms !default; $modal-dialog-translate-y: -250px !default; // Animate from this offset to final position @@ -216,7 +217,7 @@ $z-modal-dialog: 901 !default; } &::before { - @include svg (remove); + @include svg ($modal-close-icon-svg); content: ''; position: absolute; top: 50%; From 9daf779a54a47882acc79b885a5c6458089fca3a Mon Sep 17 00:00:00 2001 From: Brendan Falkowski Date: Thu, 21 Feb 2019 16:40:10 -0800 Subject: [PATCH 02/15] #4: close existing modals before creating a new modal --- js/src/modal.js | 28 ++++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) diff --git a/js/src/modal.js b/js/src/modal.js index 6de86a2..5d774bf 100644 --- a/js/src/modal.js +++ b/js/src/modal.js @@ -41,6 +41,7 @@ function Modal (config) { Modal.prototype = { init: function (element) { this.saveFocus(); + this.closeExistingModals(); this.createModal(); this.addEvents(); this.openModal(); @@ -79,6 +80,33 @@ Modal.prototype = { } }, + closeExistingModals: function () { + // Find modals except those closing or closed, but not yet removed from the DOM. + var modals = document.querySelectorAll('.modal:not([data-modal-state="closing"]):not([data-modal-state="closed"])'); + + for (var i = 0; i < modals.length; i++) { + var modal = modals[i]; + var closeButton = modal.querySelector('[data-modal-close]'); + + if (closeButton) { + // Close gracefully + closeButton.click(); + } else { + // Close by force + modal.setAttribute('data-modal-state', 'closing'); + + window.setTimeout(function () { + modal.setAttribute('data-modal-state', 'closed') + + var event = new CustomEvent('modal-closed', {'bubbles': true}); + modal.dispatchEvent(event); + + modal.parentNode.removeChild(modal); + }, this.config.transitionEndTime); + } + } + }, + closeModal: function () { var _this = this; From 925ac23fa47ac273f8275603b74881eeb359e544 Mon Sep 17 00:00:00 2001 From: Brendan Falkowski Date: Thu, 21 Feb 2019 16:41:20 -0800 Subject: [PATCH 03/15] Restore focus immediately on close (not waiting for close animations to finish) --- js/src/modal.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/js/src/modal.js b/js/src/modal.js index 5d774bf..a106b55 100644 --- a/js/src/modal.js +++ b/js/src/modal.js @@ -121,6 +121,8 @@ Modal.prototype = { _this.destroyModal(); }, this.config.transitionEndTime); + + this.restoreFocus(); }, createModal: function () { @@ -158,7 +160,6 @@ Modal.prototype = { destroyModal: function () { this.$modal.parentNode.removeChild(this.$modal); - this.restoreFocus(); }, openModal: function () { From 4b22ecdd676eec924a807a784a122a9d6f516ab3 Mon Sep 17 00:00:00 2001 From: Brendan Falkowski Date: Thu, 21 Feb 2019 16:42:58 -0800 Subject: [PATCH 04/15] =?UTF-8?q?Remove=20value=20from=20=E2=80=9Cdata-mod?= =?UTF-8?q?al-close=E2=80=9D=20attribute?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 2 +- js/src/modal.js | 5 ++--- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 642ad44..5a042ab 100644 --- a/README.md +++ b/README.md @@ -99,7 +99,7 @@ Add modal triggers and content to your HTML: Save - diff --git a/js/src/modal.js b/js/src/modal.js index a106b55..5ccdaf9 100644 --- a/js/src/modal.js +++ b/js/src/modal.js @@ -130,9 +130,8 @@ Modal.prototype = { var widthClass = 'modal_dialog--' + this.config.width; if (this.config.addCloseButton) { - // Add close button to markup closeButton = [ - '' ]; @@ -154,7 +153,7 @@ Modal.prototype = { this.$modal = document.getElementById(this.config.id); this.$backdrop = this.$modal.querySelector('.modal_backdrop'); - this.$closeButtons = this.$modal.querySelectorAll('[data-modal-close="true"]'); + this.$closeButtons = this.$modal.querySelectorAll('[data-modal-close]'); this.$dialog = this.$modal.querySelector('.modal_dialog'); }, From e8ba8babdc1958f4fd7cc1393599093753670f2b Mon Sep 17 00:00:00 2001 From: Brendan Falkowski Date: Thu, 21 Feb 2019 16:45:34 -0800 Subject: [PATCH 05/15] =?UTF-8?q?Remove=20event=20listener=20for=20click?= =?UTF-8?q?=20on=20=E2=80=9C.modal=5Fbackdrop=E2=80=9D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Use existing event listener for “data-modal-close” attribute --- js/src/modal.js | 26 ++++++++++---------------- 1 file changed, 10 insertions(+), 16 deletions(-) diff --git a/js/src/modal.js b/js/src/modal.js index 5ccdaf9..78d7136 100644 --- a/js/src/modal.js +++ b/js/src/modal.js @@ -28,7 +28,7 @@ function Modal (config) { // Selectors this.$backdrop = null; - this.$closeButtons = null; + this.$closeTriggers = null; this.$dialog = null; this.$modal = null; @@ -50,13 +50,6 @@ Modal.prototype = { addEvents: function () { var _this = this; - // Click on backdrop to close - if (this.config.allowBackdropClose) { - this.$backdrop.addEventListener('click', function (e) { - _this.closeModal(); - }); - } - if (this.config.allowEscapeClose) { document.addEventListener('keydown', function (e) { // Press "TAB" trap @@ -71,9 +64,9 @@ Modal.prototype = { }); } - // Click on "close buttons" to close - for (var i = 0; i < this.$closeButtons.length; i++) { - this.$closeButtons[i].addEventListener('click', function (e) { + // Click on "data-modal-close" elements to close + for (var i = 0; i < this.$closeTriggers.length; i++) { + this.$closeTriggers[i].addEventListener('click', function (e) { e.preventDefault(); _this.closeModal(); }); @@ -128,6 +121,7 @@ Modal.prototype = { createModal: function () { var closeButton = []; var widthClass = 'modal_dialog--' + this.config.width; + var backdropCloseAttribute = (this.config.allowBackdropClose) ? 'data-modal-close' : ''; if (this.config.addCloseButton) { closeButton = [ @@ -143,7 +137,7 @@ Modal.prototype = { this.config.content, closeButton.join(''), '', - '
', + '
', '
', '' ]; @@ -151,10 +145,10 @@ Modal.prototype = { var fragment = document.createRange().createContextualFragment(template.join('')); document.body.appendChild(fragment); - this.$modal = document.getElementById(this.config.id); - this.$backdrop = this.$modal.querySelector('.modal_backdrop'); - this.$closeButtons = this.$modal.querySelectorAll('[data-modal-close]'); - this.$dialog = this.$modal.querySelector('.modal_dialog'); + this.$modal = document.getElementById(this.config.id); + this.$backdrop = this.$modal.querySelector('.modal_backdrop'); + this.$closeTriggers = this.$modal.querySelectorAll('[data-modal-close]'); + this.$dialog = this.$modal.querySelector('.modal_dialog'); }, destroyModal: function () { From e9dacc188530e42804adca504424141db0afbf1b Mon Sep 17 00:00:00 2001 From: Brendan Falkowski Date: Thu, 21 Feb 2019 16:50:13 -0800 Subject: [PATCH 06/15] =?UTF-8?q?Add=20margin-bottom=20to=20=E2=80=9C.moda?= =?UTF-8?q?l=5Fdialog=E2=80=9D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit When the dialog is taller than the viewport and extends past the bottom of the window this provides spacing --- css/src/_modal.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/css/src/_modal.scss b/css/src/_modal.scss index c4ede60..1ae995d 100644 --- a/css/src/_modal.scss +++ b/css/src/_modal.scss @@ -44,6 +44,7 @@ $z-modal-dialog: 901 !default; z-index: $z-modal-dialog; right: $space-base; left: $space-base; + margin-bottom: $gap; border-radius: $radius-base; background: #FFF; box-shadow: 0 5px 15px 5px black(0.2); From c127edd47404a183c8c16dc97f7c57e88fd14b2e Mon Sep 17 00:00:00 2001 From: Brendan Falkowski Date: Fri, 22 Feb 2019 15:02:52 -0800 Subject: [PATCH 07/15] Update README to use delegated event listener to trigger modals --- README.md | 18 ++++++++---------- 1 file changed, 8 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index 5a042ab..eb17d3a 100644 --- a/README.md +++ b/README.md @@ -106,18 +106,16 @@ Add modal triggers and content to your HTML: ``` -Add event listeners to trigger each modal: +Add a delegated event listener to trigger each modal: ```javascript -var modalTriggers = document.querySelectorAll('[data-modal-trigger]'); - -for (var i = 0; i < modalTriggers.length; i++) { - modalTriggers[i].addEventListener('click', function (e) { - e.preventDefault(); +document.addEventListener('click', function (e) { + e.preventDefault(); + if (e.target && e.target.matches('[data-modal-trigger]')) { var config = {}; - var modal = this.getAttribute('data-modal-trigger'); - var width = this.getAttribute('data-modal-width'); + var modal = e.target.getAttribute('data-modal-trigger'); + var width = e.target.getAttribute('data-modal-width'); config.content = document.querySelector('[data-modal="' + modal + '"]').innerHTML; @@ -126,8 +124,8 @@ for (var i = 0; i < modalTriggers.length; i++) { } new Modal(config); - }); -} + } +}); ``` ## Documentation From 6b8340529d9a3e27bd5d61e1e2c3702d4b5206de Mon Sep 17 00:00:00 2001 From: Brendan Falkowski Date: Fri, 22 Feb 2019 15:21:09 -0800 Subject: [PATCH 08/15] Fix bug in README --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index eb17d3a..ec3cd9a 100644 --- a/README.md +++ b/README.md @@ -110,9 +110,9 @@ Add a delegated event listener to trigger each modal: ```javascript document.addEventListener('click', function (e) { - e.preventDefault(); - if (e.target && e.target.matches('[data-modal-trigger]')) { + e.preventDefault(); + var config = {}; var modal = e.target.getAttribute('data-modal-trigger'); var width = e.target.getAttribute('data-modal-width'); From d5c651d9c93fda0b4d3f965b4aa5a9ed4320e2fc Mon Sep 17 00:00:00 2001 From: Brendan Falkowski Date: Fri, 22 Feb 2019 15:32:24 -0800 Subject: [PATCH 09/15] Indentation --- js/src/modal.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/js/src/modal.js b/js/src/modal.js index 78d7136..232595d 100644 --- a/js/src/modal.js +++ b/js/src/modal.js @@ -27,10 +27,10 @@ function Modal (config) { this.config = Object.assign(this.config, config); // Selectors - this.$backdrop = null; + this.$backdrop = null; this.$closeTriggers = null; - this.$dialog = null; - this.$modal = null; + this.$dialog = null; + this.$modal = null; // The element with focus before the modal opened lastFocus = null; From bb39aff67d5fa585be42dc167c52a8158be64244 Mon Sep 17 00:00:00 2001 From: Brendan Falkowski Date: Fri, 12 Apr 2019 16:27:56 -0700 Subject: [PATCH 10/15] Standardize DocBlock --- css/src/_modal.scss | 4 ++-- js/src/modal.js | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/css/src/_modal.scss b/css/src/_modal.scss index 1ae995d..3c60072 100644 --- a/css/src/_modal.scss +++ b/css/src/_modal.scss @@ -2,8 +2,8 @@ * Gravity Department - Modal * https://github.com/gravitydepartment/modal * -* @author Brendan Falkowski -* @copyright 2018 Gravity Department. All rights reserved. +* @author Brendan Falkowski +* @copyright Gravity Department. All rights reserved. */ diff --git a/js/src/modal.js b/js/src/modal.js index 232595d..277e8a1 100644 --- a/js/src/modal.js +++ b/js/src/modal.js @@ -2,8 +2,8 @@ * Gravity Department - Modal * https://github.com/gravitydepartment/modal * -* @author Brendan Falkowski -* @copyright 2018 Gravity Department. All rights reserved. +* @author Brendan Falkowski +* @copyright Gravity Department. All rights reserved. */ From 9589c322751740f4dfa2aebd3e4ed1a8c7796c44 Mon Sep 17 00:00:00 2001 From: Brendan Falkowski Date: Mon, 29 Apr 2019 11:06:41 -0700 Subject: [PATCH 11/15] Fix logo in README --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index ec3cd9a..37ed3b0 100644 --- a/README.md +++ b/README.md @@ -1,9 +1,9 @@ +[![Gravity Department](https://cdn.gravitydept.com/github/repo-header.png)](http://gravitydept.com/) + # GravDept Modal Simple modals with useful options. -[![Gravity Department](http://gravitydept.com/_themes/gravdept/img/logo-footer.png)](http://gravitydept.com/) - ## Demo [todo] From 907fa754d39c1e65999d7f931585e891a6c30470 Mon Sep 17 00:00:00 2001 From: Brendan Falkowski Date: Mon, 29 Apr 2019 11:09:29 -0700 Subject: [PATCH 12/15] Use HTTPS in README --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 37ed3b0..cfb61e1 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -[![Gravity Department](https://cdn.gravitydept.com/github/repo-header.png)](http://gravitydept.com/) +[![Gravity Department](https://cdn.gravitydept.com/github/repo-header.png)](https://gravitydept.com/) # GravDept Modal From 78178b3efbe46f5310aa5b38111f10707e074227 Mon Sep 17 00:00:00 2001 From: Brendan Falkowski Date: Wed, 15 May 2019 20:32:52 -0700 Subject: [PATCH 13/15] Fix typo --- css/src/_modal.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css/src/_modal.scss b/css/src/_modal.scss index 3c60072..aaea8af 100644 --- a/css/src/_modal.scss +++ b/css/src/_modal.scss @@ -158,7 +158,7 @@ $z-modal-dialog: 901 !default; .modal_header h2, .modal_header h3, .modal_header h4, -.modal_header h5, { +.modal_header h5 { margin: 0; font-size: $font-size-xxl; font-style: normal; From 90aa3a79b054dcf73b772595ca82e3e324dfe03e Mon Sep 17 00:00:00 2001 From: Brendan Falkowski Date: Wed, 15 May 2019 20:33:11 -0700 Subject: [PATCH 14/15] =?UTF-8?q?Reduce=20font-size=20of=20=E2=80=9Cmodal?= =?UTF-8?q?=5Fheader=E2=80=9D=20title?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/src/_modal.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css/src/_modal.scss b/css/src/_modal.scss index aaea8af..a86d740 100644 --- a/css/src/_modal.scss +++ b/css/src/_modal.scss @@ -160,7 +160,7 @@ $z-modal-dialog: 901 !default; .modal_header h4, .modal_header h5 { margin: 0; - font-size: $font-size-xxl; + font-size: $font-size-xl; font-style: normal; font-weight: bold; line-height: $line-height-s; From dac4049847097a6a20d4ec30b281cd5737b3c5d4 Mon Sep 17 00:00:00 2001 From: Brendan Falkowski Date: Fri, 14 Jun 2019 16:27:51 -0700 Subject: [PATCH 15/15] Polyfill Element.closest() so triggers with child elements work --- README.md | 12 ++++++++---- js/src/polyfill-element-closest.js | 25 +++++++++++++++++++++++++ 2 files changed, 33 insertions(+), 4 deletions(-) create mode 100644 js/src/polyfill-element-closest.js diff --git a/README.md b/README.md index cfb61e1..f02c883 100644 --- a/README.md +++ b/README.md @@ -50,6 +50,7 @@ Include the script in your page (and polyfills for IE11): ```html + ``` @@ -110,12 +111,13 @@ Add a delegated event listener to trigger each modal: ```javascript document.addEventListener('click', function (e) { - if (e.target && e.target.matches('[data-modal-trigger]')) { + if (e.target && e.target.closest('[data-modal-trigger]')) { e.preventDefault(); - var config = {}; - var modal = e.target.getAttribute('data-modal-trigger'); - var width = e.target.getAttribute('data-modal-width'); + var trigger = e.target.closest('[data-modal-trigger]'); + var config = {}; + var modal = trigger.getAttribute('data-modal-trigger'); + var width = trigger.getAttribute('data-modal-width'); config.content = document.querySelector('[data-modal="' + modal + '"]').innerHTML; @@ -128,6 +130,8 @@ document.addEventListener('click', function (e) { }); ``` +Note: use `e.target.closest()` because the clickable element may contain child elements. Using `e.target.matches()` won't work in that case. + ## Documentation ### Configuration options diff --git a/js/src/polyfill-element-closest.js b/js/src/polyfill-element-closest.js new file mode 100644 index 0000000..0a6251a --- /dev/null +++ b/js/src/polyfill-element-closest.js @@ -0,0 +1,25 @@ +/** +* Polyfill: Element.closest() +* For: IE11 +* See: https://developer.mozilla.org/en-US/docs/Web/API/Element/closest +*/ + +if (!Element.prototype.matches) { + Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector; +} + +if (!Element.prototype.closest) { + Element.prototype.closest = function(s) { + var el = this; + + do { + if (el.matches(s)) { + return el; + } + + el = el.parentElement || el.parentNode; + } while (el !== null && el.nodeType === 1); + + return null; + }; +}