mirror of
https://github.com/Findus23/RainbowRoad.git
synced 2024-09-18 14:53:51 +02:00
add Accept All Modal
This commit is contained in:
parent
d55bd40b3e
commit
843a7dd00c
GPG key ID:
54DE4D798D244853
8 changed files with 895 additions and 6 deletions
1
src/accept-all/LICENSE
Normal file
1
src/accept-all/LICENSE
Normal file
|
|
@ -0,0 +1 @@
|
|||
Please check ./README.md
|
||||
9
src/accept-all/README.md
Normal file
9
src/accept-all/README.md
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
# [Accept All](https://www.accept.lgbt/)
|
||||
|
||||
I stumbled across https://www.accept.lgbt/, thought it was a really fun idea and wanted to add it to the site.
|
||||
|
||||
But I didn't like the thought of linking an external script and wanted to slightly adapt it, so that the modal is only shown when the user clicks a button.
|
||||
|
||||
So I took the [banner-2024.js](https://github.com/accept-all/cdn/blob/8a09bf0d978ef6feb443a28c173bbbd86230f0fd/banner-2024.js) and manually reversed the minified code, slightly tweaked the code and adapted it to TypeScript.
|
||||
|
||||
All credit for the creation of this module goes to [kraftwerk Agentur für neue Kommunikation](https://www.kraftwerk.co.at/) and I hope they are fine with me using a variant of their code here.
|
||||
418
src/accept-all/accept-all.css
Normal file
418
src/accept-all/accept-all.css
Normal file
|
|
@ -0,0 +1,418 @@
|
|||
:root {
|
||||
--paddingBorderFrom: 14px;
|
||||
--paddingBorderTo: 10px;
|
||||
--paddingBorder: 16px
|
||||
}
|
||||
|
||||
@media screen and (min-width: 2440px) {
|
||||
:root {
|
||||
--paddingBorderFrom: 33px;
|
||||
--paddingBorderTo: 27px;
|
||||
--paddingBorder: 35px
|
||||
}
|
||||
}
|
||||
|
||||
#kwAcceptAllcookiePopup {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
z-index: 999999;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
transition: opacity .6s ease-out, visibility .6s ease-out
|
||||
}
|
||||
|
||||
#kwAcceptAllcookiePopup.kwAcceptAllshow {
|
||||
opacity: 1;
|
||||
visibility: visible
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 45.5em) {
|
||||
#kwAcceptAllcookiePopup.kwAcceptAllshow {
|
||||
bottom: 0;
|
||||
right: 0
|
||||
}
|
||||
}
|
||||
|
||||
#kwAcceptAllcookieWrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center
|
||||
}
|
||||
|
||||
#kwAcceptAllcookieBackground {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: #000000c0;
|
||||
transition: transform .6s ease-out, opacity .6s ease-out, visibility .6s ease-out
|
||||
}
|
||||
|
||||
#kwAcceptAllcookieBackground img {
|
||||
all: unset;
|
||||
position: absolute;
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
min-width: 100%;
|
||||
height: auto
|
||||
}
|
||||
|
||||
#kwAcceptAllcookieContent {
|
||||
all: unset;
|
||||
display: flex;
|
||||
background-color: #fff;
|
||||
color: #000;
|
||||
position: absolute;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 30px 25px 20px;
|
||||
border-radius: 40px;
|
||||
transition: transform .8s ease-out, opacity .8s ease-out, visibility .6s ease-out;
|
||||
font-family: Helvetica, sans-serif;
|
||||
margin: 0 16px
|
||||
}
|
||||
|
||||
@media (min-width: 430px) {
|
||||
#kwAcceptAllcookieContent {
|
||||
padding: 30px 35px 20px
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
#kwAcceptAllcookieContent {
|
||||
padding: 50px 35px 30px
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 2440px) {
|
||||
#kwAcceptAllcookieContent {
|
||||
padding: 80px 50px 50px
|
||||
}
|
||||
}
|
||||
|
||||
#kwAcceptAllcookieContent h2 {
|
||||
all: unset;
|
||||
color: #000;
|
||||
font-size: 1.5em;
|
||||
width: 100%;
|
||||
font-weight: 400;
|
||||
line-height: 1.3;
|
||||
text-align: center
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
#kwAcceptAllcookieContent h2 {
|
||||
width: 80%;
|
||||
font-size: 2em
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 2440px) {
|
||||
#kwAcceptAllcookieContent h2 {
|
||||
font-size: 2.75em
|
||||
}
|
||||
}
|
||||
|
||||
#kwAcceptAllcookieContent h2 span, #kwAcceptAllcookieContent h2 strong {
|
||||
all: unset;
|
||||
font-weight: 800
|
||||
}
|
||||
|
||||
#kwAcceptAllcookieContent p {
|
||||
all: unset;
|
||||
color: #000;
|
||||
font-size: 1em;
|
||||
line-height: 1.175;
|
||||
padding: 24px 0;
|
||||
width: 100%;
|
||||
text-align: center
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
#kwAcceptAllcookieContent p {
|
||||
padding: 32px 0
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
#kwAcceptAllcookieContent p {
|
||||
width: 80%;
|
||||
font-size: 1.2em
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 2440px) {
|
||||
#kwAcceptAllcookieContent p {
|
||||
font-size: 1.5em
|
||||
}
|
||||
}
|
||||
|
||||
#kwAcceptAllcookieContent button {
|
||||
all: initial;
|
||||
font-family: Helvetica, sans-serif;
|
||||
font-weight: 800;
|
||||
font-size: 1.2em;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border: none;
|
||||
padding: 25px;
|
||||
border-radius: 70px;
|
||||
border: 2px solid transparent;
|
||||
position: relative
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
#kwAcceptAllcookieContent button {
|
||||
font-size: 1.4em
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 2440px) {
|
||||
#kwAcceptAllcookieContent button {
|
||||
font-size: 1.875em;
|
||||
padding: 45px
|
||||
}
|
||||
}
|
||||
|
||||
#kwAcceptAllcookieContent button:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
--width: calc(100% / 11);
|
||||
background-image: linear-gradient(to right, #ec1d23 var(--width), #f59121 var(--width), #f59121 calc(var(--width) * 2), #fddb0f calc(var(--width) * 2), #fddb0f calc(var(--width) * 3), #029246 calc(var(--width) * 3), #029246 calc(var(--width) * 4), #242262 calc(var(--width) * 4), #242262 calc(var(--width) * 5), #804194 calc(var(--width) * 5), #804194 calc(var(--width) * 6), #60cdf5 calc(var(--width) * 6), #60cdf5 calc(var(--width) * 7), #fff calc(var(--width) * 7), #fff calc(var(--width) * 8), #f7a9b8 calc(var(--width) * 8), #f7a9b8 calc(var(--width) * 9), #000 calc(var(--width) * 9), #000 calc(var(--width) * 10), #785121 calc(var(--width) * 10), #785121 calc(var(--width) * 11));
|
||||
border-radius: 70px;
|
||||
box-shadow: 0 0 50px #0000002e;
|
||||
margin: var(--paddingBorderFrom);
|
||||
transition: margin .3s ease-in-out;
|
||||
animation: pulse 1.3s infinite
|
||||
}
|
||||
|
||||
#kwAcceptAllcookieContent button:focus, #kwAcceptAllcookieContent button:focus-visible {
|
||||
border: 2px solid #000
|
||||
}
|
||||
|
||||
#kwAcceptAllcookieContent button .sr-only {
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
margin: -1px;
|
||||
clip: rect(0, 0, 0, 0)
|
||||
}
|
||||
|
||||
#kwAcceptAllcookieContent button .sr-only:not(caption) {
|
||||
position: absolute
|
||||
}
|
||||
|
||||
#kwAcceptAllcookieContent button .kwAcceptAll__buttonText {
|
||||
background-color: #fff;
|
||||
color: #000;
|
||||
padding: 15px 50px;
|
||||
border-radius: 70px;
|
||||
z-index: 2
|
||||
}
|
||||
|
||||
@media (min-width: 2440px) {
|
||||
#kwAcceptAllcookieContent button .kwAcceptAll__buttonText {
|
||||
padding: 20px 60px 22px
|
||||
}
|
||||
}
|
||||
|
||||
#kwAcceptAllcookieContent button:hover {
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
#kwAcceptAllcookieContent button:hover:before {
|
||||
animation: hoverAnim .3s ease-in forwards
|
||||
}
|
||||
|
||||
#kwAcceptAllcookieContent a {
|
||||
all: unset;
|
||||
color: #000;
|
||||
font-size: .875em;
|
||||
background-color: transparent;
|
||||
border-radius: 20px;
|
||||
border: 1px solid transparent;
|
||||
margin-top: 16px;
|
||||
padding: 8px 16px;
|
||||
font-weight: 700;
|
||||
text-decoration: underline
|
||||
}
|
||||
|
||||
#kwAcceptAllcookieContent a:focus, #kwAcceptAllcookieContent a:focus-visible {
|
||||
border: 1px solid #000
|
||||
}
|
||||
|
||||
#kwAcceptAllcookieContent a:hover {
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
#kwAcceptAllButtonWrapper {
|
||||
display: flex;
|
||||
align-items: center
|
||||
}
|
||||
|
||||
#kwAcceptAllbgImage {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%
|
||||
}
|
||||
|
||||
#kwAcceptAllbgImage .kwAcceptAllColumn {
|
||||
display: initial;
|
||||
width: 9.0909090909%;
|
||||
max-height: 100vh;
|
||||
transition: transform 1s linear;
|
||||
transform-origin: bottom
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
#kwAcceptAllbgImage .kwAcceptAllColumn {
|
||||
max-height: none
|
||||
}
|
||||
}
|
||||
|
||||
#kwAcceptAllbgImage .kwAcceptAllColumn-0 {
|
||||
transform: translateY(100%)
|
||||
}
|
||||
|
||||
.kwAcceptAllTranslateIn #kwAcceptAllbgImage .kwAcceptAllColumn-0 {
|
||||
transform: translateY(13%)
|
||||
}
|
||||
|
||||
.kwAcceptAllTranslateOut #kwAcceptAllbgImage .kwAcceptAllColumn-0 {
|
||||
transform: translateY(-100%)
|
||||
}
|
||||
|
||||
#kwAcceptAllbgImage .kwAcceptAllColumn-1 {
|
||||
transform: translateY(100%)
|
||||
}
|
||||
|
||||
.kwAcceptAllTranslateIn #kwAcceptAllbgImage .kwAcceptAllColumn-1 {
|
||||
transform: translateY(18%)
|
||||
}
|
||||
|
||||
.kwAcceptAllTranslateOut #kwAcceptAllbgImage .kwAcceptAllColumn-1 {
|
||||
transform: translateY(100%)
|
||||
}
|
||||
|
||||
#kwAcceptAllbgImage .kwAcceptAllColumn-2 {
|
||||
transform: translateY(-100%)
|
||||
}
|
||||
|
||||
.kwAcceptAllTranslateIn #kwAcceptAllbgImage .kwAcceptAllColumn-2 {
|
||||
transform: translateY(8%)
|
||||
}
|
||||
|
||||
.kwAcceptAllTranslateOut #kwAcceptAllbgImage .kwAcceptAllColumn-2 {
|
||||
transform: translateY(-100%)
|
||||
}
|
||||
|
||||
#kwAcceptAllbgImage .kwAcceptAllColumn-3 {
|
||||
transform-origin: 0 0;
|
||||
transform: translateY(-100%)
|
||||
}
|
||||
|
||||
.kwAcceptAllTranslateIn #kwAcceptAllbgImage .kwAcceptAllColumn-3 {
|
||||
transform: translateY(-57%)
|
||||
}
|
||||
|
||||
.kwAcceptAllTranslateOut #kwAcceptAllbgImage .kwAcceptAllColumn-3, #kwAcceptAllbgImage .kwAcceptAllColumn-4 {
|
||||
transform: translateY(100%)
|
||||
}
|
||||
|
||||
.kwAcceptAllTranslateIn #kwAcceptAllbgImage .kwAcceptAllColumn-4 {
|
||||
transform: translateY(5%)
|
||||
}
|
||||
|
||||
.kwAcceptAllTranslateOut #kwAcceptAllbgImage .kwAcceptAllColumn-4 {
|
||||
transform: translateY(-100%)
|
||||
}
|
||||
|
||||
#kwAcceptAllbgImage .kwAcceptAllColumn-5 {
|
||||
transform: translateY(100%)
|
||||
}
|
||||
|
||||
.kwAcceptAllTranslateIn #kwAcceptAllbgImage .kwAcceptAllColumn-5 {
|
||||
transform: translateY(1.5%)
|
||||
}
|
||||
|
||||
.kwAcceptAllTranslateOut #kwAcceptAllbgImage .kwAcceptAllColumn-5, #kwAcceptAllbgImage .kwAcceptAllColumn-6 {
|
||||
transform: translateY(100%)
|
||||
}
|
||||
|
||||
.kwAcceptAllTranslateIn #kwAcceptAllbgImage .kwAcceptAllColumn-6 {
|
||||
transform: translateY(18%)
|
||||
}
|
||||
|
||||
.kwAcceptAllTranslateOut #kwAcceptAllbgImage .kwAcceptAllColumn-6, #kwAcceptAllbgImage .kwAcceptAllColumn-7 {
|
||||
transform: translateY(100%)
|
||||
}
|
||||
|
||||
.kwAcceptAllTranslateIn #kwAcceptAllbgImage .kwAcceptAllColumn-7 {
|
||||
transform: translateY(38.5%)
|
||||
}
|
||||
|
||||
.kwAcceptAllTranslateOut #kwAcceptAllbgImage .kwAcceptAllColumn-7 {
|
||||
transform: translateY(-100%)
|
||||
}
|
||||
|
||||
#kwAcceptAllbgImage .kwAcceptAllColumn-8 {
|
||||
transform-origin: 0 0;
|
||||
transform: translateY(-100%)
|
||||
}
|
||||
|
||||
.kwAcceptAllTranslateIn #kwAcceptAllbgImage .kwAcceptAllColumn-8 {
|
||||
transform: translateY(-45%)
|
||||
}
|
||||
|
||||
.kwAcceptAllTranslateOut #kwAcceptAllbgImage .kwAcceptAllColumn-8, #kwAcceptAllbgImage .kwAcceptAllColumn-9 {
|
||||
transform: translateY(100%)
|
||||
}
|
||||
|
||||
.kwAcceptAllTranslateIn #kwAcceptAllbgImage .kwAcceptAllColumn-9 {
|
||||
transform: translateY(17%)
|
||||
}
|
||||
|
||||
.kwAcceptAllTranslateOut #kwAcceptAllbgImage .kwAcceptAllColumn-9 {
|
||||
transform: translateY(-100%)
|
||||
}
|
||||
|
||||
#kwAcceptAllbgImage .kwAcceptAllColumn-10 {
|
||||
transform-origin: 0 0;
|
||||
transform: translateY(-100%)
|
||||
}
|
||||
|
||||
.kwAcceptAllTranslateIn #kwAcceptAllbgImage .kwAcceptAllColumn-10 {
|
||||
transform: translateY(-64%)
|
||||
}
|
||||
|
||||
.kwAcceptAllTranslateOut #kwAcceptAllbgImage .kwAcceptAllColumn-10 {
|
||||
transform: translateY(100%)
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, to {
|
||||
margin: var(--paddingBorderTo, 15px);
|
||||
animation-timing-function: ease-in-out
|
||||
}
|
||||
50% {
|
||||
margin: var(--paddingBorderFrom, 10px);
|
||||
animation-timing-function: ease-in-out
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes hoverAnim {
|
||||
to {
|
||||
margin: var(--paddingBorder, 20px)
|
||||
}
|
||||
}
|
||||
428
src/accept-all/accept-all.ts
Normal file
428
src/accept-all/accept-all.ts
Normal file
|
|
@ -0,0 +1,428 @@
|
|||
/*!
|
||||
|
||||
*/
|
||||
import "./accept-all.css"
|
||||
import MicroModal, {MicroModalConfig} from "micromodal";
|
||||
|
||||
interface Translation {
|
||||
language: string,
|
||||
buttonText: string,
|
||||
buttonSpan: string,
|
||||
linkText: string,
|
||||
title: string,
|
||||
text: string
|
||||
}
|
||||
|
||||
const colors = ["#ec1d23", "#f59121", "#fddb0f", "#029246", "#242262", "#804194", "#60cdf5", "#fff", "#f7a9b8", "#000", "#785121"]
|
||||
const translations: Translation[] = [{
|
||||
language: "de",
|
||||
buttonText: "Alle Akzeptieren",
|
||||
buttonSpan: " und Fenster schliessen",
|
||||
linkText: "Hier geht's zur Aktionsseite",
|
||||
title: "Das sind <strong>KEINE Cookie-Einstellungen.</strong>",
|
||||
text: "Das ist unsere Einstellung zu Menschenrechten, Vielfalt und Respekt."
|
||||
}, {
|
||||
language: "bg",
|
||||
buttonText: "Приемане на всички",
|
||||
buttonSpan: "и затваряне на прозореца.",
|
||||
linkText: "Към страницата на акцията",
|
||||
title: "Това <strong>НЕ са настройки на бисквитките.</strong>",
|
||||
text: "Това е нашата позиция спрямо човешките права, многообразието и уважението."
|
||||
}, {
|
||||
language: "bs",
|
||||
buttonText: "Prihvatite sve",
|
||||
buttonSpan: "i zatvorite prozor.",
|
||||
linkText: "Ovuda se ide do stranice s kampanjom",
|
||||
title: "To <strong>NISU postavke kolačića.</strong>",
|
||||
text: "To je naš stav o ljudskim pravima, raznolikosti i poštovanju."
|
||||
}, {
|
||||
language: "da",
|
||||
buttonText: "Accepter alle",
|
||||
buttonSpan: "og luk vinduet.",
|
||||
linkText: "Her kommer du til kampagne-webstedet",
|
||||
title: "Dette er <strong>IKKE cookie-indstillinger.</strong>",
|
||||
text: "Dette er vores holdning til menneskerettigheder, diversitet og respekt."
|
||||
}, {
|
||||
language: "el",
|
||||
buttonText: "Αποδοχή όλων",
|
||||
buttonSpan: "και κλείσιμο παραθύρου.",
|
||||
linkText: "Κάντε κλικ εδώ για τη σελίδα της εκστρατείας",
|
||||
title: "Αυτές <strong>ΔΕΝ είναι ρυθμίσεις για τα cookies.</strong>",
|
||||
text: "Είναι η θέση μας για τα ανθρώπινα δικαιώματα, τη διαφορετικότητα και το σεβασμό."
|
||||
}, {
|
||||
language: "en",
|
||||
buttonText: "Accept all",
|
||||
buttonSpan: "and close the window.",
|
||||
linkText: "Click here to go to the campaign page",
|
||||
title: "These are <strong>NO cookie settings.</strong>",
|
||||
text: "This is our attitude towards human rights, diversity and respect."
|
||||
}, {
|
||||
language: "es",
|
||||
buttonText: "Aceptar todo",
|
||||
buttonSpan: "y cerrar la ventana.",
|
||||
linkText: "Ir a la página de la iniciativa",
|
||||
title: "Esto <strong>NO es una declaración sobre cookies.</strong>",
|
||||
text: "Esta es nuestra declaración sobre los derechos humanos, la diversidad y el respeto."
|
||||
}, {
|
||||
language: "et",
|
||||
buttonText: "Aktsepteeri kõiki",
|
||||
buttonSpan: "ja sulge aken.",
|
||||
linkText: "Ava kampaania leht",
|
||||
title: "Tegu <strong>EI OLE küpsiste seadistustega.</strong>",
|
||||
text: "See on meie hoiak inimõiguste, mitmekesisuse ja austuse suhtes."
|
||||
}, {
|
||||
language: "fi",
|
||||
buttonText: "Hyväksy kaikki",
|
||||
buttonSpan: "ja sulje ikkuna.",
|
||||
linkText: "Siirry kampanjasivulle tästä",
|
||||
title: "Nämä <strong>EIVÄT OLE evästeasetuksia.</strong>",
|
||||
text: "Nämä asetukset koskevat ihmisoikeuksia, moniarvoisuutta ja kunnioitusta."
|
||||
}, {
|
||||
language: "fr",
|
||||
buttonText: "Tout accepter",
|
||||
buttonSpan: "et fermer les fenêtres.",
|
||||
linkText: "Cliquez ici pour accéder à la page de l'action",
|
||||
title: "Ce ne sont <strong>PAS des paramètres de cookies.</strong>",
|
||||
text: "C'est notre approche des droits de l'homme, de la diversité et du respect."
|
||||
}, {
|
||||
language: "hr",
|
||||
buttonText: "Prihvati sve",
|
||||
buttonSpan: "i zatvori prozorčiće.",
|
||||
linkText: "Kliknite ovdje kako biste otišli na stranicu kampanje",
|
||||
title: "Ovo <strong>NISU postavke kolačića.</strong>",
|
||||
text: "Ovo je naš stav prema ljudskim pravima, različitosti i poštovanju."
|
||||
}, {
|
||||
language: "hu",
|
||||
buttonText: "Az összes elfogadása",
|
||||
buttonSpan: "és az ablak bezárása.",
|
||||
linkText: "Kattintson ide a kampány oldalának megnyitásához",
|
||||
title: '"Ezek <strong>NEM sütibeállítások.</strong>"',
|
||||
text: "Ez a mi hozzáállásunk az emberi jogokhoz, a sokszínűséghez és a tisztelethez."
|
||||
}, {
|
||||
language: "it",
|
||||
buttonText: "Accettare tutto",
|
||||
buttonSpan: "e chiudere la finestra.",
|
||||
linkText: "Cliccare qui per aprire la pagina della campagna",
|
||||
title: "<strong>NON sono impostazioni dei cookie.</strong>",
|
||||
text: "È il nostro atteggiamento nei confronti dei diritti umani, della diversità e del rispetto."
|
||||
}, {
|
||||
language: "lt",
|
||||
buttonText: "Priimkite visus",
|
||||
buttonSpan: "ir uždarykite langą.",
|
||||
linkText: "Spustelėkite čia, kad peržiūrėtumėte kampanijos puslapį",
|
||||
title: "Tai <strong>NE slapukų nustatymai.</strong>",
|
||||
text: "Tai mūsų pozicija dėl žmogaus teisių, įvairovės ir pagarbos."
|
||||
}, {
|
||||
language: "lv",
|
||||
buttonText: "Piekrist visam",
|
||||
buttonSpan: "un aizvērt logu.",
|
||||
linkText: "Uz akcijas lapu",
|
||||
title: "Tie <strong>NAV sīkfailu iestatījumi.</strong>",
|
||||
text: "Tā ir mūsu attieksme pret cilvēktiesībām, dažādību un cieņu."
|
||||
}, {
|
||||
language: "nl",
|
||||
buttonText: "Alles accepteren",
|
||||
buttonSpan: "en venster sluiten.",
|
||||
linkText: "Naar de actiepagina",
|
||||
title: "Dat zijn <strong>GEEN cookie-instellingen.</strong>",
|
||||
text: "Dit is onze houding ten opzichte van mensenrechten, diversiteit en respect."
|
||||
}, {
|
||||
language: "no",
|
||||
buttonText: "Godta alle",
|
||||
buttonSpan: "og lukk vinduet.",
|
||||
linkText: "Her kommer du til kampanjesiden",
|
||||
title: "Dette er <strong>IKKE cookie-innstillinger.</strong>",
|
||||
text: "Det er vår innstilling til menneskerettigheter, mangfold og respekt."
|
||||
}, {
|
||||
language: "pl",
|
||||
buttonText: "Zaakceptuj wszystko",
|
||||
buttonSpan: "i zamknij okno.",
|
||||
linkText: "Kliknij tutaj, aby przejść na stronę kampanii",
|
||||
title: "To <strong>NIE są ustawienia plików cookie.</strong>",
|
||||
text: "To jest nasze nastawienie do różnorodności, praw człowieka i ich poszanowania."
|
||||
}, {
|
||||
language: "pt",
|
||||
buttonText: "Aceitar tudo",
|
||||
buttonSpan: "e fechar a janela.",
|
||||
linkText: "Clique aqui para aceder à página da campanha",
|
||||
title: "Estas <strong>NÃO são definições de cookies.</strong>",
|
||||
text: "Esta é a nossa posição sobre direitos humanos, diversidade e respeito."
|
||||
}, {
|
||||
language: "ro",
|
||||
buttonText: "Acceptă-le pe toate",
|
||||
buttonSpan: "și închide fereastra.",
|
||||
linkText: "Descoperă aici pagina campaniei",
|
||||
title: "Acestea <strong>NU sunt setări cookie.</strong>",
|
||||
text: "Aceasta este viziunea noastră cu privire la drepturile omului, diversitate și respect."
|
||||
}, {
|
||||
language: "ru",
|
||||
buttonText: "Принять всех",
|
||||
buttonSpan: "и закрыть окно.",
|
||||
linkText: "Перейти на страницу акции",
|
||||
title: "Это <strong>НЕ настройки файлов Cookie.</strong>",
|
||||
text: "Это наше отношение к правам человека, разнообразию и уважению."
|
||||
}, {
|
||||
language: "sk",
|
||||
buttonText: "Akceptovať všetky",
|
||||
buttonSpan: "a zatvoriť okno.",
|
||||
linkText: "Tadeto sa dostanete na stránku s akciami",
|
||||
title: "Toto <strong>NIE SÚ ŽIADNE nastavenia cookies.</strong>",
|
||||
text: "To je náš postoj týkajúci sa ľudských práv, rôznorodosti, rozmanitosti a rešpektu."
|
||||
}, {
|
||||
language: "sl",
|
||||
buttonText: "Sprejmi vse",
|
||||
buttonSpan: "in zapri okno.",
|
||||
linkText: "Tukaj greš na kampanjsko stran",
|
||||
title: "To <strong>NISO nastavitve piškotkov.</strong>",
|
||||
text: "To je naše stališče do človekovih pravic, raznolikosti in spoštovanja."
|
||||
}, {
|
||||
language: "sr",
|
||||
buttonText: "Prihvatiti sve",
|
||||
buttonSpan: "i zatvoriti prozor.",
|
||||
linkText: "Ovde možete da pristupite stranici kampanje",
|
||||
title: "Ovo <strong>NIJE PODEŠAVANJE KOLAČIĆA.</strong>",
|
||||
text: "Ovo je naš stav o ljudskim pravima, raznolikosti i poštovanju."
|
||||
}, {
|
||||
language: "sv",
|
||||
buttonText: "Tillåt alla",
|
||||
buttonSpan: "och stäng fönstret.",
|
||||
linkText: "Här kommer du till webbsidan för initiativet",
|
||||
title: "Det är <strong>INGA cookie-inställningar.</strong>",
|
||||
text: "Det är vår inställning till mänskliga rättigheter, mångfald och respekt."
|
||||
}, {
|
||||
language: "tr",
|
||||
buttonText: "Tümünü kabul et",
|
||||
buttonSpan: "ve pencereyi kapat.",
|
||||
linkText: "İşlem sayfasına buradan ulaşabilirsiniz",
|
||||
title: "Bunlar <strong>çerez ayarları DEĞİLDİR.</strong>",
|
||||
text: "İnsan hakları, çeşitlilik ve saygı konusundaki tutumumuz budur."
|
||||
}, {
|
||||
language: "uk",
|
||||
buttonText: "Прийняти всіх",
|
||||
buttonSpan: "і закрити вікно.",
|
||||
linkText: "Перейти на сторінку акції",
|
||||
title: "Це <strong>НЕ налаштування файлів Cookie.</strong>",
|
||||
text: "Це наше ставлення до прав людини, різноманіття та поваги."
|
||||
}];
|
||||
|
||||
function createBgImageBar(color: string, index: number): SVGSVGElement {
|
||||
const svgEl = document.createElementNS("http://www.w3.org/2000/svg", "svg");
|
||||
svgEl.setAttribute("aria-hidden", "true")
|
||||
svgEl.setAttribute("class", `kwAcceptAllColumn kwAcceptAllColumn-${index}`)
|
||||
svgEl.setAttributeNS(null, "viewbox", "0 0 173 2221")
|
||||
svgEl.setAttributeNS(null, "width", "173")
|
||||
svgEl.setAttributeNS(null, "height", "2221")
|
||||
svgEl.setAttributeNS(null, "preserveAspectRatio", "none")
|
||||
const rectEl = document.createElementNS("http://www.w3.org/2000/svg", "rect")
|
||||
rectEl.setAttributeNS(null, "rx", "50%")
|
||||
rectEl.setAttributeNS(null, "width", "100%")
|
||||
rectEl.setAttributeNS(null, "height", "100%")
|
||||
rectEl.setAttributeNS(null, "fill", color)
|
||||
svgEl.appendChild(rectEl)
|
||||
return svgEl
|
||||
}
|
||||
|
||||
export class AcceptAll {
|
||||
private cookiePopup: HTMLDivElement | undefined
|
||||
private cookieBackground: HTMLDivElement | undefined;
|
||||
private cookieContent: HTMLDivElement | undefined;
|
||||
private cookiePopupId: string = "kwAcceptAllcookiePopup";
|
||||
private readonly showOnlyOnce: boolean;
|
||||
private modalOptions: MicroModalConfig = {
|
||||
onShow: t => this.showModalEvent(t),
|
||||
onClose: t => this.closeModalEvent(t),
|
||||
disableScroll: true,
|
||||
disableFocus: true,
|
||||
awaitOpenAnimation: true,
|
||||
awaitCloseAnimation: true,
|
||||
debugMode: false
|
||||
};
|
||||
private language = "en"
|
||||
private translations: Translation | undefined
|
||||
|
||||
constructor(showOnlyOnce: boolean = false) {
|
||||
this.showOnlyOnce = showOnlyOnce
|
||||
this.checkLanguage()
|
||||
this.initModal()
|
||||
this.createModal()
|
||||
}
|
||||
|
||||
checkLanguage() {
|
||||
const languages: string[] = [];
|
||||
if (navigator.languages) {
|
||||
navigator.languages.forEach(lang => {
|
||||
languages.push(lang.split("-")[0])
|
||||
});
|
||||
}
|
||||
let foundFittingTranslation = false;
|
||||
for (let i = 0; i < languages.length; i++) {
|
||||
this.translations = translations.find(t => t.language === languages[i])
|
||||
if (this.translations) {
|
||||
foundFittingTranslation = true
|
||||
this.language = languages[i];
|
||||
break
|
||||
}
|
||||
}
|
||||
if (!foundFittingTranslation) {
|
||||
this.translations = translations.find(t => t.language === this.language)
|
||||
}
|
||||
}
|
||||
|
||||
createBackground() {
|
||||
this.cookieBackground = document.createElement("div")
|
||||
this.cookieBackground.id = "kwAcceptAllcookieBackground";
|
||||
const bgImageDiv = document.createElement("div");
|
||||
bgImageDiv.id = "kwAcceptAllbgImage"
|
||||
colors.forEach((color, index) => {
|
||||
const bgImageBar = createBgImageBar(color, index);
|
||||
bgImageDiv.appendChild(bgImageBar)
|
||||
})
|
||||
this.cookieBackground.appendChild(bgImageDiv)
|
||||
this.cookieBackground.addEventListener("click", () => this.close())
|
||||
}
|
||||
|
||||
createContent() {
|
||||
this.cookieContent = document.createElement("div")
|
||||
this.cookieContent.id = "kwAcceptAllcookieContent"
|
||||
this.cookieContent.setAttribute("role", "dialog")
|
||||
this.cookieContent.setAttribute("aria-modal", "true")
|
||||
this.cookieContent.setAttribute("aria-labelledby", "kwAcceptAllModalTitle")
|
||||
}
|
||||
|
||||
createText() {
|
||||
if (!this.translations || !this.cookieContent) {
|
||||
return
|
||||
}
|
||||
const h2El = document.createElement("h2");
|
||||
h2El.id = "kwAcceptAllModalTitle"
|
||||
h2El.innerHTML = this.translations.title;
|
||||
const pEl = document.createElement("p");
|
||||
pEl.textContent = this.translations.text
|
||||
this.cookieContent.appendChild(h2El)
|
||||
this.cookieContent.appendChild(pEl)
|
||||
this.createButton()
|
||||
this.createLink()
|
||||
}
|
||||
|
||||
createButton() {
|
||||
if (!this.translations || !this.cookieContent) {
|
||||
return
|
||||
}
|
||||
|
||||
const e = document.createElement("div");
|
||||
e.id = "kwAcceptAllButtonWrapper";
|
||||
const buttonEl = document.createElement("button");
|
||||
buttonEl.id = "kwAcceptAllacceptCookie"
|
||||
buttonEl.innerHTML = `<span class="kwAcceptAll__buttonText">${this.translations.buttonText}<span class="sr-only"> ${this.translations.buttonSpan}</span>.</span>`
|
||||
buttonEl.setAttribute("data-micromodal-close", "")
|
||||
e.appendChild(buttonEl)
|
||||
this.cookieContent.appendChild(e)
|
||||
}
|
||||
|
||||
createLink() {
|
||||
if (!this.translations || !this.cookieContent) {
|
||||
return
|
||||
}
|
||||
|
||||
const e = document.createElement("a");
|
||||
e.id = "kwAcceptAlllink"
|
||||
e.textContent = this.translations.linkText
|
||||
e.target = "_blank"
|
||||
e.rel = "noopener"
|
||||
e.href = "https://www.accept.lgbt/"
|
||||
this.cookieContent.appendChild(e)
|
||||
}
|
||||
|
||||
createWrapper() {
|
||||
if (!this.translations || !this.cookieContent || !this.cookieBackground || !this.cookiePopup) {
|
||||
return
|
||||
}
|
||||
const e = document.createElement("div");
|
||||
e.id = "kwAcceptAllcookieWrapper"
|
||||
e.setAttribute("tabindex", "-1")
|
||||
e.appendChild(this.cookieBackground)
|
||||
e.appendChild(this.cookieContent)
|
||||
this.cookiePopup.appendChild(e)
|
||||
}
|
||||
|
||||
createModal() {
|
||||
this.cookiePopup = document.createElement("div")
|
||||
this.cookiePopup.id = "kwAcceptAllcookiePopup"
|
||||
this.cookiePopup.setAttribute("aria-hidden", "")
|
||||
this.cookiePopup.setAttribute("lang", this.language)
|
||||
this.createBackground()
|
||||
this.createContent()
|
||||
this.createText()
|
||||
this.createWrapper()
|
||||
document.body.appendChild(this.cookiePopup)
|
||||
}
|
||||
|
||||
initModal() {
|
||||
MicroModal.init(this.modalOptions)
|
||||
}
|
||||
|
||||
showModalEvent(modal?: HTMLElement) {
|
||||
setTimeout(() => {
|
||||
if (!modal || !this.cookieBackground) {
|
||||
return
|
||||
}
|
||||
modal.classList.add("kwAcceptAllshow")
|
||||
this.cookieBackground.classList.add("kwAcceptAllTranslateIn")
|
||||
}, 200)
|
||||
}
|
||||
|
||||
closeModalEvent(modal?: HTMLElement) {
|
||||
if (!this.cookieBackground) {
|
||||
return
|
||||
}
|
||||
|
||||
const o = this.showOnlyOnce ? 24 * 60 * 60 * 1000 : 1
|
||||
const t = Date.now();
|
||||
localStorage.setItem("kwAcceptAll_popup", `${t + o}`)
|
||||
this.cookieBackground.classList.remove("kwAcceptAllTranslateIn")
|
||||
this.cookieBackground.classList.add("kwAcceptAllTranslateOut");
|
||||
|
||||
function delay(ms: number) {
|
||||
return new Promise(resolve => {
|
||||
setTimeout(resolve, ms)
|
||||
});
|
||||
}
|
||||
|
||||
async function close() {
|
||||
if (!modal) {
|
||||
return
|
||||
}
|
||||
await delay(900)
|
||||
modal.classList.remove("kwAcceptAllshow")
|
||||
await delay(600)
|
||||
document.getElementById("kwAcceptAllcookiePopup")!.style.display = "none"
|
||||
}
|
||||
|
||||
close()
|
||||
}
|
||||
|
||||
show() {
|
||||
MicroModal.show(this.cookiePopupId, this.modalOptions)
|
||||
}
|
||||
|
||||
close() {
|
||||
MicroModal.close(this.cookiePopupId)
|
||||
}
|
||||
}
|
||||
|
||||
export function immediateInit() {
|
||||
const i = localStorage.getItem("kwAcceptAll_popup")
|
||||
const e = Date.now();
|
||||
if (i === null || Number(i) < e) {
|
||||
new AcceptAll().show()
|
||||
}
|
||||
}
|
||||
|
||||
export function init() {
|
||||
if (document.readyState === "loading") {
|
||||
document.addEventListener("DOMContentLoaded", immediateInit);
|
||||
} else {
|
||||
immediateInit();
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -6,3 +6,4 @@ import {initMatomo} from "./matomo";
|
|||
import "./map"
|
||||
|
||||
initMatomo()
|
||||
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ import {router} from "./router";
|
|||
import {transform, transformExtent} from "ol/proj";
|
||||
import {defaults as defaultControls} from 'ol/control';
|
||||
import {InfoButton} from "./info";
|
||||
import {BasemapControl, OrthophotoControl} from "./toggle";
|
||||
import {AcceptAllControl, BasemapControl, OrthophotoControl} from "./toggle";
|
||||
import {retina} from "./utils";
|
||||
|
||||
|
||||
|
|
@ -62,7 +62,12 @@ const map = new Map({
|
|||
}),
|
||||
],
|
||||
view: viewFromArea(Wien),
|
||||
controls: defaultControls().extend([new InfoButton({}), new OrthophotoControl(), new BasemapControl()])
|
||||
controls: defaultControls().extend([
|
||||
new InfoButton({}),
|
||||
new OrthophotoControl(),
|
||||
new BasemapControl(),
|
||||
new AcceptAllControl()
|
||||
])
|
||||
});
|
||||
|
||||
const vectorSource = new VectorSource({
|
||||
|
|
|
|||
|
|
@ -131,20 +131,25 @@ p {
|
|||
.ol-touch .ol-control.info-button a {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
.ol-control {
|
||||
&.ortho-button, &.basemap-button {
|
||||
&.ortho-button, &.basemap-button, &.accept-all-button {
|
||||
bottom: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.ol-control.ortho-button {
|
||||
left: 1.875rem+0.5rem;
|
||||
|
||||
}
|
||||
|
||||
.ol-control.basemap-button {
|
||||
left: 1.875rem*2+0.5rem;
|
||||
}
|
||||
|
||||
.ol-control.accept-all-button {
|
||||
left: 1.875rem*3+0.5rem;
|
||||
}
|
||||
|
||||
|
||||
#overlay {
|
||||
pointer-events: none;
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ import {Control} from "ol/control";
|
|||
import {Options} from "ol/control/Control";
|
||||
import {createElement} from "./domutils";
|
||||
import {router} from "./router";
|
||||
import {AcceptAll} from "./accept-all/accept-all";
|
||||
|
||||
interface CustomOptions extends Options {
|
||||
buttonLetter: string
|
||||
|
|
@ -44,6 +45,7 @@ abstract class MapButton extends Control {
|
|||
|
||||
export class OrthophotoControl extends MapButton {
|
||||
showingOrtho = false
|
||||
|
||||
constructor() {
|
||||
super({
|
||||
buttonLetter: "o",
|
||||
|
|
@ -60,7 +62,6 @@ export class OrthophotoControl extends MapButton {
|
|||
orthoLayer.setVisible(this.showingOrtho)
|
||||
zebraLayer.setOpacity(this.showingOrtho ? 0.2 : 1)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export class BasemapControl extends MapButton {
|
||||
|
|
@ -72,6 +73,7 @@ export class BasemapControl extends MapButton {
|
|||
buttonClass: "basemap-button"
|
||||
});
|
||||
}
|
||||
|
||||
handleToggle() {
|
||||
const {osmLayer, basemapLayer, orthoLayer, zebraLayer} = this.mapLayers();
|
||||
|
||||
|
|
@ -79,7 +81,27 @@ export class BasemapControl extends MapButton {
|
|||
osmLayer.setVisible(!this.showingBasemap)
|
||||
orthoLayer.setVisible(false)
|
||||
basemapLayer.setVisible(this.showingBasemap)
|
||||
zebraLayer.setOpacity( 1)
|
||||
zebraLayer.setOpacity(1)
|
||||
}
|
||||
}
|
||||
|
||||
export class AcceptAllControl extends MapButton {
|
||||
private acceptall: any;
|
||||
|
||||
constructor() {
|
||||
super({
|
||||
buttonLetter: "a",
|
||||
buttonClass: "accept-all-button"
|
||||
});
|
||||
}
|
||||
|
||||
handleToggle() {
|
||||
import("./accept-all/accept-all").then(module => {
|
||||
if (typeof this.acceptall === "undefined") {
|
||||
console.log("sfdds")
|
||||
this.acceptall = new module.AcceptAll()
|
||||
}
|
||||
this.acceptall.show();
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue