From 92ea01139472d5f886f1e80724aa8afc3b616b13 Mon Sep 17 00:00:00 2001 From: Brian Teeman Date: Mon, 16 Sep 2019 11:56:55 +0100 Subject: [PATCH 1/3] auto-dismiss This allows us to have auto-dismiss with and without the manual dismiss x Thanks @C-Lodder --- src/js/alert/alert.js | 56 ++++++++++++++++++++++--------------------- 1 file changed, 29 insertions(+), 27 deletions(-) diff --git a/src/js/alert/alert.js b/src/js/alert/alert.js index 88300495..909415e1 100644 --- a/src/js/alert/alert.js +++ b/src/js/alert/alert.js @@ -1,40 +1,39 @@ (() => { class JoomlaAlertElement extends HTMLElement { /* Attributes to monitor */ - static get observedAttributes() { return ['type', 'role', 'dismiss', 'acknowledge', 'href']; } + static get observedAttributes() { return ['type', 'dismiss', 'auto-dismiss', 'acknowledge', 'href']; } get type() { return this.getAttribute('type'); } set type(value) { return this.setAttribute('type', value); } - get role() { return this.getAttribute('role'); } - - set role(value) { return this.setAttribute('role', value); } - get dismiss() { return this.getAttribute('dismiss'); } + get autodismiss() { return this.getAttribute('auto-dismiss'); } + get acknowledge() { return this.getAttribute('acknowledge'); } get href() { return this.getAttribute('href'); } /* Lifecycle, element appended to the DOM */ connectedCallback() { + this.setAttribute('role', 'alertdialog'); this.classList.add('joomla-alert--show'); // Default to info if (!this.type || ['info', 'warning', 'danger', 'success'].indexOf(this.type) === -1) { this.setAttribute('type', 'info'); } - // Default to alert - if (!this.role || ['alert', 'alertdialog'].indexOf(this.role) === -1) { - this.setAttribute('role', 'alert'); - } // Append button if ((this.hasAttribute('dismiss') || this.hasAttribute('acknowledge')) || ((this.hasAttribute('href') && this.getAttribute('href') !== '') && !this.querySelector('button.joomla-alert--close') && !this.querySelector('button.joomla-alert-button--close'))) { this.appendCloseButton(); } + if (this.hasAttribute('auto-dismiss')) { + this.autoDismiss(); + } + this.dispatchCustomEvent('joomla.alert.show'); } @@ -57,11 +56,6 @@ this.type = 'info'; } break; - case 'role': - if (!newValue || (newValue && ['alert', 'alertdialog'].indexOf(newValue) === -1)) { - this.role = 'alert'; - } - break; case 'dismiss': case 'acknowledge': if (!newValue || newValue === 'true') { @@ -70,6 +64,9 @@ this.removeCloseButton(); } break; + case 'auto-dismiss': + this.autoDismiss(); + break; case 'href': if (!newValue || newValue === '') { this.removeCloseButton(); @@ -83,11 +80,15 @@ } /* Method to close the alert */ - close() { + close(element = null) { this.dispatchCustomEvent('joomla.alert.close'); this.addEventListener('transitionend', () => { this.dispatchCustomEvent('joomla.alert.closed'); - this.parentNode.removeChild(this); + if (element) { + element.remove(); + } else { + this.remove(); + } }, false); this.classList.remove('joomla-alert--show'); } @@ -148,17 +149,18 @@ }); } } + } - if (this.hasAttribute('auto-dismiss')) { - setTimeout(() => { - self.dispatchCustomEvent('joomla.alert.buttonClicked'); - if (self.hasAttribute('data-callback')) { - window[self.getAttribute('data-callback')](); - } else { - self.close(); - } - }, parseInt(self.getAttribute('auto-dismiss'), 10) ? self.getAttribute('auto-dismiss') : 3000); - } + autoDismiss() { + const self = this; + setTimeout(() => { + self.dispatchCustomEvent('joomla.alert.buttonClicked'); + if (self.hasAttribute('data-callback')) { + window[self.getAttribute('data-callback')](); + } else { + self.close(self); + } + }, parseInt(self.getAttribute('auto-dismiss'), 10) ? self.getAttribute('auto-dismiss') : 3000); } /* Method to remove the close button */ @@ -166,7 +168,7 @@ const button = this.querySelector('button'); if (button) { button.removeEventListener('click', this); - button.parentNode.removeChild(button); + button.remove(); } } From a4f6f5b3a44e2e676a70f39e986997f3f167162a Mon Sep 17 00:00:00 2001 From: Brian Teeman Date: Tue, 17 Sep 2019 21:40:00 +0100 Subject: [PATCH 2/3] put back role --- src/js/alert/alert.js | 21 +++++++++++++++++---- 1 file changed, 17 insertions(+), 4 deletions(-) diff --git a/src/js/alert/alert.js b/src/js/alert/alert.js index 909415e1..96d04a50 100644 --- a/src/js/alert/alert.js +++ b/src/js/alert/alert.js @@ -1,12 +1,16 @@ (() => { class JoomlaAlertElement extends HTMLElement { /* Attributes to monitor */ - static get observedAttributes() { return ['type', 'dismiss', 'auto-dismiss', 'acknowledge', 'href']; } + static get observedAttributes() { return ['type', 'role', 'dismiss', 'acknowledge', 'href']; } get type() { return this.getAttribute('type'); } set type(value) { return this.setAttribute('type', value); } + get role() { return this.getAttribute('role'); } + + set role(value) { return this.setAttribute('role', value); } + get dismiss() { return this.getAttribute('dismiss'); } get autodismiss() { return this.getAttribute('auto-dismiss'); } @@ -17,22 +21,25 @@ /* Lifecycle, element appended to the DOM */ connectedCallback() { - this.setAttribute('role', 'alertdialog'); this.classList.add('joomla-alert--show'); // Default to info if (!this.type || ['info', 'warning', 'danger', 'success'].indexOf(this.type) === -1) { this.setAttribute('type', 'info'); } + // Default to alert + if (!this.role || ['alert', 'alertdialog'].indexOf(this.role) === -1) { + this.setAttribute('role', 'alert'); + } // Append button if ((this.hasAttribute('dismiss') || this.hasAttribute('acknowledge')) || ((this.hasAttribute('href') && this.getAttribute('href') !== '') && !this.querySelector('button.joomla-alert--close') && !this.querySelector('button.joomla-alert-button--close'))) { this.appendCloseButton(); } - + if (this.hasAttribute('auto-dismiss')) { this.autoDismiss(); - } + } this.dispatchCustomEvent('joomla.alert.show'); } @@ -56,6 +63,11 @@ this.type = 'info'; } break; + case 'role': + if (!newValue || (newValue && ['alert', 'alertdialog'].indexOf(newValue) === -1)) { + this.role = 'alert'; + } + break; case 'dismiss': case 'acknowledge': if (!newValue || newValue === 'true') { @@ -151,6 +163,7 @@ } } + /* Method to auto-dismiss */ autoDismiss() { const self = this; setTimeout(() => { From 2a882aba61960c9250c8d01732560a4b7a5d2004 Mon Sep 17 00:00:00 2001 From: Brian Teeman Date: Wed, 18 Sep 2019 11:19:34 +0100 Subject: [PATCH 3/3] codestyle --- src/js/alert/alert.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/js/alert/alert.js b/src/js/alert/alert.js index 96d04a50..da0613ed 100644 --- a/src/js/alert/alert.js +++ b/src/js/alert/alert.js @@ -36,7 +36,7 @@ && !this.querySelector('button.joomla-alert--close') && !this.querySelector('button.joomla-alert-button--close'))) { this.appendCloseButton(); } - + if (this.hasAttribute('auto-dismiss')) { this.autoDismiss(); } @@ -96,11 +96,11 @@ this.dispatchCustomEvent('joomla.alert.close'); this.addEventListener('transitionend', () => { this.dispatchCustomEvent('joomla.alert.closed'); - if (element) { - element.remove(); - } else { - this.remove(); - } + if (element) { + element.remove(); + } else { + this.remove(); + } }, false); this.classList.remove('joomla-alert--show'); }