ResiLien
/
portails
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: changeable global alert + fix: cumulative layout shift

This commit is contained in:
Henk Verlinde 2022-01-14 12:14:35 +01:00
parent 7123e6dfae
commit 04a5b32ee5
9 changed files with 35 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
assets/js/alert-init.js Normal file
View File

@ -0,0 +1,5 @@
Object.keys(localStorage).forEach(function(key) {
if (/^global-alert-/.test(key)) {
document.documentElement.setAttribute('data-global-alert', 'closed');
}
});

23
assets/js/alert.js
View File

@ -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');
});
}

10
assets/scss/components/_alerts.scss
View File

@ -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;

2
config/_default/params.toml
View File

@ -60,7 +60,7 @@ footer = "Powered by <a href=\"https://www.netlify.com/\">Netlify</a>, <a href=\
copyRight = "Copyright (c) 2020-2021 Henk Verlinde"
# Alert
alert = false
alert = true
alertDismissable = true
# alertText = "Introducing the Doks child theme, several DX + UX updates, and more! <a class=\"alert-link stretched-link\" href=\"https://getdoks.org/blog/doks-v0.2/\" target=\"_blank\" rel=\"noopener\">Check out Doks v0.2</a>"
alertText = "Introducing the Doks child theme, several DX + UX updates, and more! <a class=\"alert-link stretched-link\" href=\"https://getdoks.org/blog/doks-v0.2/\">Check out Doks v0.2</a>"

1
config/postcss.config.js
View File

@ -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',

2
layouts/index.headers
View File

@ -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'

2
layouts/partials/footer/script-footer.html
View File

@ -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 -}}

6
layouts/partials/head/script-header.html
View File

@ -1,4 +1,8 @@
{{ if .Site.Params.options.darkMode -}}
{{ $darkModeInit := resources.Get "js/darkmode-init.js" | js.Build | minify -}}
<script>{{ $darkModeInit.Content | safeJS }}</script>
{{ end -}}
{{ end -}}
{{- if and (.Site.Params.alert) (.Site.Params.alertDismissable) -}}
{{ $alertInit := resources.Get "js/alert-init.js" | js.Build | minify -}}
<script>{{ $alertInit.Content | safeJS }}</script>
{{- end -}}

6
layouts/partials/header/alert.html
View File

@ -1,10 +1,10 @@
{{ if .Site.Params.alertDismissable -}}
<div id="announcement" class="alert alert-primary alert-dismissible fade show d-none text-lg-center" role="alert">
<div id="announcement" data-id="global-alert-{{ md5 .Site.Params.alertText }}" class="alert alert-primary alert-dismissible fade show text-lg-center" role="alert">
{{ .Site.Params.alertText | safeHTML }}
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
{{ else -}}
<div class="alert alert-primary text-center" role="alert">
<div class="alert alert-primary text-lg-center" role="alert">
{{ .Site.Params.alertText | safeHTML }}
</div>
{{ end -}}
{{ end -}}