Merge pull request #613 from h-enk/global-alert
feat: changeable global alert + fix: cumulative layout shift
This commit is contained in:
commit
aaef8824d7
|
@ -0,0 +1,5 @@
|
|||
Object.keys(localStorage).forEach(function(key) {
|
||||
if (/^global-alert-/.test(key)) {
|
||||
document.documentElement.setAttribute('data-global-alert', 'closed');
|
||||
}
|
||||
});
|
|
@ -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');
|
||||
});
|
||||
|
||||
}
|
|
@ -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;
|
||||
|
|
|
@ -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,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'
|
||||
|
|
|
@ -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 -}}
|
||||
|
|
|
@ -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 -}}
|
|
@ -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 -}}
|
Loading…
Reference in New Issue