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();
+ })
+ }
}