From 843a7dd00c66778db5f7c10a257fb705b6da28d9 Mon Sep 17 00:00:00 2001 From: Lukas Winkler Date: Sun, 12 May 2024 23:24:10 +0200 Subject: [PATCH] add Accept All Modal --- src/accept-all/LICENSE | 1 + src/accept-all/README.md | 9 + src/accept-all/accept-all.css | 418 +++++++++++++++++++++++++++++++++ src/accept-all/accept-all.ts | 428 ++++++++++++++++++++++++++++++++++ src/main.ts | 1 + src/map.ts | 9 +- src/style.scss | 9 +- src/toggle.ts | 26 ++- 8 files changed, 895 insertions(+), 6 deletions(-) create mode 100644 src/accept-all/LICENSE create mode 100644 src/accept-all/README.md create mode 100644 src/accept-all/accept-all.css create mode 100644 src/accept-all/accept-all.ts diff --git a/src/accept-all/LICENSE b/src/accept-all/LICENSE new file mode 100644 index 0000000..310bf04 --- /dev/null +++ b/src/accept-all/LICENSE @@ -0,0 +1 @@ +Please check ./README.md diff --git a/src/accept-all/README.md b/src/accept-all/README.md new file mode 100644 index 0000000..2acfe84 --- /dev/null +++ b/src/accept-all/README.md @@ -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. diff --git a/src/accept-all/accept-all.css b/src/accept-all/accept-all.css new file mode 100644 index 0000000..bfd1d81 --- /dev/null +++ b/src/accept-all/accept-all.css @@ -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) + } +} diff --git a/src/accept-all/accept-all.ts b/src/accept-all/accept-all.ts new file mode 100644 index 0000000..f067db7 --- /dev/null +++ b/src/accept-all/accept-all.ts @@ -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 KEINE Cookie-Einstellungen.", + text: "Das ist unsere Einstellung zu Menschenrechten, Vielfalt und Respekt." +}, { + language: "bg", + buttonText: "Приемане на всички", + buttonSpan: "и затваряне на прозореца.", + linkText: "Към страницата на акцията", + title: "Това НЕ са настройки на бисквитките.", + text: "Това е нашата позиция спрямо човешките права, многообразието и уважението." +}, { + language: "bs", + buttonText: "Prihvatite sve", + buttonSpan: "i zatvorite prozor.", + linkText: "Ovuda se ide do stranice s kampanjom", + title: "To NISU postavke kolačića.", + 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 IKKE cookie-indstillinger.", + text: "Dette er vores holdning til menneskerettigheder, diversitet og respekt." +}, { + language: "el", + buttonText: "Αποδοχή όλων", + buttonSpan: "και κλείσιμο παραθύρου.", + linkText: "Κάντε κλικ εδώ για τη σελίδα της εκστρατείας", + title: "Αυτές ΔΕΝ είναι ρυθμίσεις για τα cookies.", + text: "Είναι η θέση μας για τα ανθρώπινα δικαιώματα, τη διαφορετικότητα και το σεβασμό." +}, { + language: "en", + buttonText: "Accept all", + buttonSpan: "and close the window.", + linkText: "Click here to go to the campaign page", + title: "These are NO cookie settings.", + 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 NO es una declaración sobre cookies.", + 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 EI OLE küpsiste seadistustega.", + 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ä EIVÄT OLE evästeasetuksia.", + 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 PAS des paramètres de cookies.", + 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 NISU postavke kolačića.", + 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 NEM sütibeállítások."', + 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: "NON sono impostazioni dei cookie.", + 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 NE slapukų nustatymai.", + 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 NAV sīkfailu iestatījumi.", + 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 GEEN cookie-instellingen.", + 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 IKKE cookie-innstillinger.", + 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 NIE są ustawienia plików cookie.", + 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 NÃO são definições de cookies.", + 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 NU sunt setări cookie.", + text: "Aceasta este viziunea noastră cu privire la drepturile omului, diversitate și respect." +}, { + language: "ru", + buttonText: "Принять всех", + buttonSpan: "и закрыть окно.", + linkText: "Перейти на страницу акции", + title: "Это НЕ настройки файлов Cookie.", + text: "Это наше отношение к правам человека, разнообразию и уважению." +}, { + language: "sk", + buttonText: "Akceptovať všetky", + buttonSpan: "a zatvoriť okno.", + linkText: "Tadeto sa dostanete na stránku s akciami", + title: "Toto NIE SÚ ŽIADNE nastavenia cookies.", + 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 NISO nastavitve piškotkov.", + 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 NIJE PODEŠAVANJE KOLAČIĆA.", + 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 INGA cookie-inställningar.", + 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 çerez ayarları DEĞİLDİR.", + text: "İnsan hakları, çeşitlilik ve saygı konusundaki tutumumuz budur." +}, { + language: "uk", + buttonText: "Прийняти всіх", + buttonSpan: "і закрити вікно.", + linkText: "Перейти на сторінку акції", + title: "Це НЕ налаштування файлів Cookie.", + 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 = `${this.translations.buttonText} ${this.translations.buttonSpan}.` + 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(); + } +} + diff --git a/src/main.ts b/src/main.ts index 4cbc7ff..d60d156 100644 --- a/src/main.ts +++ b/src/main.ts @@ -6,3 +6,4 @@ import {initMatomo} from "./matomo"; import "./map" initMatomo() + diff --git a/src/map.ts b/src/map.ts index 5d2b661..7016b22 100644 --- a/src/map.ts +++ b/src/map.ts @@ -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({ diff --git a/src/style.scss b/src/style.scss index fbc0358..3a017f8 100644 --- a/src/style.scss +++ b/src/style.scss @@ -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; diff --git a/src/toggle.ts b/src/toggle.ts index 69ff0b9..33a02e9 100644 --- a/src/toggle.ts +++ b/src/toggle.ts @@ -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(); + }) + } }