From 04a5b32ee568cf4b0321f57a779561e99511b1c1 Mon Sep 17 00:00:00 2001 From: Henk Verlinde Date: Fri, 14 Jan 2022 12:14:35 +0100 Subject: [PATCH] feat: changeable global alert + fix: cumulative layout shift --- assets/js/alert-init.js | 5 +++++ assets/js/alert.js | 23 ++++++++++++---------- assets/scss/components/_alerts.scss | 10 +++++----- config/_default/params.toml | 2 +- config/postcss.config.js | 1 + layouts/index.headers | 2 +- layouts/partials/footer/script-footer.html | 2 +- layouts/partials/head/script-header.html | 6 +++++- layouts/partials/header/alert.html | 6 +++--- 9 files changed, 35 insertions(+), 22 deletions(-) create mode 100644 assets/js/alert-init.js diff --git a/assets/js/alert-init.js b/assets/js/alert-init.js new file mode 100644 index 0000000..af3ac32 --- /dev/null +++ b/assets/js/alert-init.js @@ -0,0 +1,5 @@ +Object.keys(localStorage).forEach(function(key) { + if (/^global-alert-/.test(key)) { + document.documentElement.setAttribute('data-global-alert', 'closed'); + } +}); \ No newline at end of file diff --git a/assets/js/alert.js b/assets/js/alert.js index 0fb2864..1956103 100644 --- a/assets/js/alert.js +++ b/assets/js/alert.js @@ -2,16 +2,19 @@ var announcement = document.getElementById('announcement'); if (announcement !== null) { - if (localStorage.getItem('announcement') === null ) { - - announcement.classList.remove('d-none'); - - } - - announcement.addEventListener('closed.bs.alert', () => { - - localStorage.setItem('announcement', 'closed'); + var id = announcement.dataset.id; + Object.keys(localStorage).forEach(function(key) { + if (/^global-alert-/.test(key)) { + if (key !== id ) { + localStorage.removeItem(key); + document.documentElement.removeAttribute('data-global-alert'); + } + } }); -} + announcement.addEventListener('closed.bs.alert', () => { + localStorage.setItem(id, 'closed'); + }); + +} \ No newline at end of file diff --git a/assets/scss/components/_alerts.scss b/assets/scss/components/_alerts.scss index bce819d..d292339 100644 --- a/assets/scss/components/_alerts.scss +++ b/assets/scss/components/_alerts.scss @@ -64,15 +64,11 @@ .alert-dismissible .btn-close { position: absolute; - - /* top: 50%; transform: translateY(-50%); - */ - top: 0.75rem; right: 1rem; z-index: 2; - padding: 0.625rem; + padding: 0.5rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-x'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E"); background-size: 1.5rem; filter: invert(1) grayscale(100%) brightness(200%); @@ -84,6 +80,10 @@ } } +[data-global-alert="closed"] #announcement { + display: none; +} + .alert code { background: darken($beige, 5%); color: $black; diff --git a/config/_default/params.toml b/config/_default/params.toml index f08e676..9e0a316 100644 --- a/config/_default/params.toml +++ b/config/_default/params.toml @@ -60,7 +60,7 @@ footer = "Powered by Netlify, Check out Doks v0.2" alertText = "Introducing the Doks child theme, several DX + UX updates, and more! Check out Doks v0.2" diff --git a/config/postcss.config.js b/config/postcss.config.js index b6891e2..cc53868 100644 --- a/config/postcss.config.js +++ b/config/postcss.config.js @@ -21,6 +21,7 @@ module.exports = { 'h5', 'alert-link', ...whitelister([ + './assets/scss/components/_alerts.scss', './assets/scss/components/_buttons.scss', './assets/scss/components/_code.scss', './assets/scss/components/_diagrams.scss', diff --git a/layouts/index.headers b/layouts/index.headers index 8926db5..f1be3fb 100644 --- a/layouts/index.headers +++ b/layouts/index.headers @@ -2,7 +2,7 @@ Strict-Transport-Security: max-age=31536000; includeSubDomains; preload X-Content-Type-Options: nosniff X-XSS-Protection: 1; mode=block - Content-Security-Policy: default-src 'self'; frame-ancestors https://jamstackthemes.dev; manifest-src 'self' https://*.netlify.app; connect-src 'self' https://*.netlify.app; font-src 'self' https://*.netlify.app; img-src 'self' https://*.netlify.app data:; script-src 'self' https://*.netlify.app 'sha512-RBYr6Ld4w1yVqaACrgrBLQfPgGhj/1jyacA74WxJ1KM6KVcSWymwrdDwb3HDcdpwiNJ5yssot1He0U9vXoQVlg=='; style-src 'self' https://*.netlify.app 'unsafe-inline' + Content-Security-Policy: default-src 'self'; frame-ancestors https://jamstackthemes.dev; manifest-src 'self' https://*.netlify.app; connect-src 'self' https://*.netlify.app; font-src 'self' https://*.netlify.app; img-src 'self' https://*.netlify.app data:; script-src 'self' https://*.netlify.app 'sha512-RBYr6Ld4w1yVqaACrgrBLQfPgGhj/1jyacA74WxJ1KM6KVcSWymwrdDwb3HDcdpwiNJ5yssot1He0U9vXoQVlg==' 'sha256-aWZ3y/RxbBYKHXH0z8+8ljrHG1mSBvyzSfxSMjBSaXk='; style-src 'self' https://*.netlify.app 'unsafe-inline' X-Frame-Options: SAMEORIGIN Referrer-Policy: strict-origin Feature-Policy: geolocation 'self' diff --git a/layouts/partials/footer/script-footer.html b/layouts/partials/footer/script-footer.html index 159ad3f..9e4104e 100644 --- a/layouts/partials/footer/script-footer.html +++ b/layouts/partials/footer/script-footer.html @@ -45,7 +45,7 @@ {{ $slice = $slice | append $darkMode -}} {{ end -}} -{{ if .Site.Params.alertDismissable -}} +{{ if and (.Site.Params.alert) (.Site.Params.alertDismissable) -}} {{ $alert := resources.Get "js/alert.js" -}} {{ $alert := $alert | js.Build -}} {{ $slice = $slice | append $alert -}} diff --git a/layouts/partials/head/script-header.html b/layouts/partials/head/script-header.html index 0155989..38e5b5b 100644 --- a/layouts/partials/head/script-header.html +++ b/layouts/partials/head/script-header.html @@ -1,4 +1,8 @@ {{ if .Site.Params.options.darkMode -}} {{ $darkModeInit := resources.Get "js/darkmode-init.js" | js.Build | minify -}} -{{ end -}} \ No newline at end of file +{{ end -}} +{{- if and (.Site.Params.alert) (.Site.Params.alertDismissable) -}} + {{ $alertInit := resources.Get "js/alert-init.js" | js.Build | minify -}} + +{{- end -}} \ No newline at end of file diff --git a/layouts/partials/header/alert.html b/layouts/partials/header/alert.html index fd5970b..7944ae9 100644 --- a/layouts/partials/header/alert.html +++ b/layouts/partials/header/alert.html @@ -1,10 +1,10 @@ {{ if .Site.Params.alertDismissable -}} -