@newlogic-digital/ui 3.0.4 → 3.1.0

package/src/scripts/Layout/Main.js

@@ -1,76 +1,80 @@
-import {LibStimulus, Controller, loadStimulus} from "../Libraries/Stimulus.js";
-import {bodyLoaded, importScript} from "../Utils/Functions/+.js";
-import LibRipple from "../Libraries/Ripple.js";
-import LibAnchor from "../Libraries/Anchor.js";
-import LibDialog from "../Libraries/Dialog.js";
-import LibTabs from "../Libraries/Tabs.js";
-import LibNativeSlider from "../Libraries/NativeSlider.js";
-import cdn from "../Utils/cdn.js";
+import { LibStimulus, Controller, loadStimulus } from '../Libraries/Stimulus.js'
+import { importScript } from '../Utils/Functions/+.js'
+import LibRipple from '../Libraries/Ripple.js'
+import LibAnchor from '../Libraries/Anchor.js'
+import LibDialog from '../Libraries/Dialog.js'
+import LibTippy from '../Libraries/Tippy.js'
+import LibTabs from '../Libraries/Tabs.js'
+import LibNativeSlider from '../Libraries/NativeSlider.js'
+import cdn from '../Utils/cdn.js'
+
+LibStimulus.register('lib', class extends Controller {
+    connect() {
+        if (!('scrollBehavior' in document.documentElement.style)) {
+            importScript(cdn.seamless).then(() => window.seamless.polyfill())
+        }
+    }
 
-LibStimulus.register("lib", class extends Controller {
     ripple(e) {
-        LibRipple(e.currentTarget, e)
+        LibRipple(e)
     }
 
     anchor(e) {
-        e.preventDefault();
+        e.preventDefault()
         LibAnchor.action(e.currentTarget)
     }
 
-    darkMode(e) {
-        let currentTarget = e.currentTarget;
-
+    darkMode() {
         if (document.documentElement.classList.contains('dark')) {
-            localStorage.theme = 'light';
-            document.documentElement.classList.remove('dark');
-            currentTarget.classList.remove("icon-light");
+            localStorage.theme = 'light'
+            document.documentElement.classList.remove('dark')
         } else {
-            localStorage.theme = 'dark';
-            document.documentElement.classList.add('dark');
-            currentTarget.classList.add("icon-light");
+            localStorage.theme = 'dark'
+            document.documentElement.classList.add('dark')
         }
     }
-});
+})
 
-LibStimulus.register("lib-dialog", class extends Controller {
-    connect() {
-        let element = this.element;
-
-        if (typeof element.dataset.libDialogOpen !== "undefined") {
-            let url = element.getAttribute("data-action-url");
+LibStimulus.register('lib-dialog', class extends Controller {
+    async connect() {
+        if (this.element.getAttribute('data-lib-dialog-open')) {
+            const url = this.element.getAttribute('data-action-url')
 
             if (url) {
-                LibDialog.action(element, url, () => loadStimulus(document.querySelector(".lib-dialog")) );
+                await LibDialog.action(this.element, url, () => loadStimulus(document.querySelector('.lib-dialog')))
             } else {
-                LibDialog.show(document.querySelector(element.dataset.libDialogOpen).innerHTML, () => loadStimulus(document.querySelector(".lib-dialog")));
+                await LibDialog.show(document.querySelector(this.element.getAttribute('data-lib-dialog-open')).innerHTML, () => loadStimulus(document.querySelector('.lib-dialog')))
             }
         }
     }
 
-    show(e) {
-        let element = e.currentTarget;
-        let url = element.getAttribute("data-action-url");
+    async show({ currentTarget }) {
+        const url = currentTarget.getAttribute('data-action-url')
 
-        LibDialog.action(element, url, () => loadStimulus(document.querySelector(".lib-dialog")));
+        await LibDialog.action(currentTarget, url)
     }
 
-    hide() {
-        LibDialog.hide();
+    async hide() {
+        await LibDialog.hide()
     }
-});
+})
 
-LibStimulus.register("lib-tabs", class extends Controller {
+LibStimulus.register('lib-tabs', class extends Controller {
     connect() {
-        LibTabs(this.element);
+        LibTabs(this.element)
     }
-});
+})
 
-LibStimulus.register("lib-ns", class extends Controller {
+LibStimulus.register('lib-ns', class extends Controller {
     connect() {
-        if (!('scrollBehavior' in document.documentElement.style)) {
-            importScript(cdn.seamless).then(() => window.seamless.polyfill())
-        }
+        LibNativeSlider(this.element.querySelector('[data-lib-ns]'), this.element)
+    }
+})
+
+LibStimulus.register('lib-tippy', class extends Controller {
+    connect() {
+        const attributes = this.element.getAttribute('data-lib-tippy')
 
-        bodyLoaded(() => LibNativeSlider(this.element.querySelector("[data-lib-ns]"), this.element))
+        new LibTippy(this.element, attributes !== null ? attributes.replace(/\s/g, '').split(',') : undefined)
     }
-});
+})

package/src/scripts/Libraries/+.js

@@ -1,10 +1,12 @@
-export { default as Anchor } from './Anchor.js';
-export { default as CookieConsent } from './CookieConsent.js';
-export { default as Dialog } from './Dialog.js';
-import './Drawer.js';
-export { default as NativeSlider } from './NativeSlider.js';
-import './ReCaptcha.js';
-export { default as Ripple } from './Ripple.js';
-import './Stimulus.js';
-export { default as Swup } from './Swup.js';
-export { default as Tabs } from './Tabs.js';
+export { default as Anchor } from './Anchor.js'
+export { default as CookieConsent } from './CookieConsent.js'
+export { default as Dialog } from './Dialog.js'
+import './Drawer.js'
+import './Fetch.js'
+export { default as NativeSlider } from './NativeSlider.js'
+import './ReCaptcha.js'
+export { default as Ripple } from './Ripple.js'
+import './Stimulus.js'
+export { default as Swup } from './Swup.js'
+export { default as Tabs } from './Tabs.js'
+export { default as Tippy } from './Tippy.js'

package/src/scripts/Libraries/Anchor.js

@@ -1,60 +1,35 @@
 const LibAnchor = {
     animation: (element) => {
-        let offset;
-        let attr = "data-offset";
+        const offset = parseInt(window.getComputedStyle(document.documentElement).getPropertyValue('scroll-padding-top'))
 
-        if (window.innerWidth > 960) {
-            offset = 0;
-            if (element.getAttribute(attr) !== null) {
-                if (isNaN(parseInt(element.getAttribute(attr)))) {
-                    offset = document.querySelector(element.getAttribute(attr)).offsetHeight;
-                } else {
-                    offset = parseInt(element.getAttribute(attr));
-                }
-            }
-        }
-
-        document.documentElement.scroll({top: element.offsetTop - offset, behavior: "smooth"});
+        document.documentElement.scroll({ top: element.offsetTop - offset, behavior: 'smooth' })
     },
     action: (element) => {
-        let href = element.getAttribute("href");
-
-        if (href === null) {
-            href = element.getAttribute("data-action-href");
-        }
-
-        let id = document.querySelector("[id=" + href.replace('#', '') + "]");
-        let options = element.getAttribute("data-action-options");
+        const href = element.href ? element.getAttribute('href') : element.getAttribute('data-action-href')
+        const data = element.dataset.libAnhor ? element.dataset.libAnhor : ''
+        const target = document.querySelector(`[id="${href.replace('#', '')}"]`)
 
-        if (options === null) {
-            options = "";
-        }
-
-        if (id !== null) {
-            if (!(options.indexOf("mobile") > -1 && window.innerWidth > 960)) {
-
-                LibAnchor.animation(id);
+        if (target !== null) {
+            if (!(data.includes('mobile') && window.innerWidth > 960)) {
+                LibAnchor.animation(target)
+            }
 
-                if (options.indexOf("hash") > -1) {
-                    window.location.hash = id;
-                }
+            if (!data.includes('silent')) {
+                window.location.hash = target.id
             }
         }
     },
     init: () => {
-        let selector = [...document.querySelectorAll("[id]")];
+        const selector = document.querySelectorAll('[id]')
 
         if (selector[0] !== null) {
-
-            selector.forEach((element) => {
-                if (window.location.hash && element.getAttribute("id") === window.location.hash.replace('#', '')) {
-                    LibAnchor.animation(element);
+            selector.forEach(element => {
+                if (window.location.hash && element.getAttribute('id') === window.location.hash.replace('#', '')) {
+                    LibAnchor.animation(element)
                 }
-            });
+            })
         }
     }
-};
-
-LibAnchor.init();
+}
 
-export default LibAnchor;
+export default LibAnchor

package/src/scripts/Libraries/CookieConsent.js

@@ -1,82 +1,61 @@
 const LibCookieConsent = {
     init: () => {
-        if (localStorage.getItem('cookieconsent') === "approve") {
-            let type = localStorage.getItem('cookieconsent_type');
-            if (type !== null) {
-                if (type === "performance") {
-                    LibCookieConsent.append("performance");
-                } else if (type === "marketing") {
-                    LibCookieConsent.append("all");
-                }
-            } else {
-                LibCookieConsent.append("all");
-            }
-        } else if (localStorage.getItem('cookieconsent') === null) {
-            LibCookieConsent.append("all");
+        const type = localStorage.getItem('lib-cookieconsent')
+
+        if (type !== null) {
+            JSON.parse(type).forEach(type => LibCookieConsent.append(type))
         }
     },
-    set: (type, callback) => {
-        if (type === "approve") {
-            localStorage.setItem("cookieconsent", "approve");
-            LibCookieConsent.append("all");
-
-        } else if (type === "performance") {
-            localStorage.setItem("cookieconsent", "approve");
-            localStorage.setItem("cookieconsent_type", "performance");
-            LibCookieConsent.append("performance");
-
-        } else if (type === "marketing") {
-            localStorage.setItem("cookieconsent", "approve");
-            localStorage.setItem("cookieconsent_type", "marketing");
-            LibCookieConsent.append("all");
-
-        } else if (type === "decline") {
-            localStorage.setItem("cookieconsent", "decline");
-            localStorage.removeItem("cookieconsent_type");
-            LibCookieConsent.remove();
-
-            if (callback) {
-                callback();
-            }
+    set: (type) => {
+        localStorage.setItem('lib-cookieconsent', JSON.stringify(type))
+        localStorage.setItem('lib-cookieconsent-expire', (Date.now() + 31556926 * 1000).toString())
+
+        if (type.length > 0) {
+            type.forEach(type => LibCookieConsent.append(type))
+        } else {
+            localStorage.setItem('lib-cookieconsent', JSON.stringify([]))
+            LibCookieConsent.remove()
         }
     },
     remove: () => {
-        document.cookie.split(";").forEach(function(c) {
-            document.cookie = c.replace(/^ +/, "").replace(/=.*/, "=;expires=" + new Date().toUTCString() + ";path=/");
-        });
+        document.cookie.split(';').forEach(c => {
+            document.cookie = c.replace(/^ +/, '').replace(/=.*/, '=;expires=' + new Date().toUTCString() + ';path=/')
+        })
     },
     append: (type) => {
-        [...document.querySelectorAll("[data-lib-cookieconsent]")].map((elm) => {
-            if (type === "all" || elm.getAttribute("data-lib-cookieconsent") === type) {
-                let script = document.createElement("script");
-                let delay = 0;
+        document.querySelectorAll('[data-lib-cookieconsent]').forEach(elm => {
+            if (type === 'all' || elm.getAttribute('data-lib-cookieconsent') === type) {
+                const script = document.createElement('script')
+                let delay = 0
 
-                [...elm.attributes].forEach((attribute) => {
+                ;[...elm.attributes].forEach((attribute) => {
                     if (attribute.specified) {
-                        if (attribute.name.indexOf("data-lib-cookieconsent") === -1 && attribute.name.indexOf("type") === -1) {
-                            script.setAttribute(attribute.name, attribute.value);
+                        if (attribute.name.indexOf('data-lib-cookieconsent') === -1 && attribute.name.indexOf('type') === -1) {
+                            script.setAttribute(attribute.name, attribute.value)
                         }
                     }
-                });
+                })
 
-                script.innerHTML = elm.innerHTML;
+                script.innerHTML = elm.innerHTML
 
-                if (elm.getAttribute("data-lib-cookieconsent-delay")) {
-                    delay = parseInt(elm.getAttribute("data-lib-cookieconsent-delay"));
+                if (elm.getAttribute('data-lib-cookieconsent-delay')) {
+                    delay = parseInt(elm.getAttribute('data-lib-cookieconsent-delay'))
                 }
 
                 setTimeout(() => {
-                    if (elm.closest("body") !== null) {
-                        document.body.appendChild(script);
-                    } else if (elm.closest("head") !== null) {
-                        document.head.appendChild(script);
+                    if (elm.closest('body') !== null) {
+                        document.body.appendChild(script)
+                    } else if (elm.closest('head') !== null) {
+                        document.head.appendChild(script)
                     }
 
-                    elm.remove();
-                }, delay);
+                    elm.remove()
+                }, delay)
             }
         })
     }
-};
+}
+
+LibCookieConsent.init()
 
-export default LibCookieConsent;
+export default LibCookieConsent

package/src/scripts/Libraries/Dialog.js

@@ -1,74 +1,75 @@
+import { loadStimulus } from './Stimulus.js'
+
 const LibDialog = {
-    show: (content, callback) => {
-        if (document.querySelector(".lib-dialog > [class^='c-dialog']") !== null) {
-            document.querySelector(".lib-dialog > [class^='c-dialog']").remove();
-        }
+    show: async(content) => {
+        return new Promise(resolve => {
+            if (document.querySelector('.lib-dialog > [class^="c-dialog"]') !== null) {
+                document.querySelector('.lib-dialog > [class^="c-dialog"]').remove()
+            }
 
-        if (document.querySelector(".lib-dialog") === null) {
-            document.body.insertAdjacentHTML("beforeend", `<div class="lib-dialog"></div>`);
-        }
+            if (document.querySelector('.lib-dialog') === null) {
+                document.body.insertAdjacentHTML('beforeend', '<div class="lib-dialog"></div>')
+            }
 
-        document.querySelector(".lib-dialog").insertAdjacentHTML("beforeend", content);
-        document.querySelector(".lib-dialog").style["display"] = "flex";
+            document.querySelector('.lib-dialog').insertAdjacentHTML('beforeend', content)
+            document.querySelector('.lib-dialog').style.display = 'flex'
 
-        function outerHeight(el) {
-            return el.offsetHeight + parseInt(getComputedStyle(el).marginTop) + parseInt(getComputedStyle(el).marginBottom);
-        }
+            function outerHeight(el) {
+                return el.offsetHeight + parseInt(getComputedStyle(el).marginTop) + parseInt(getComputedStyle(el).marginBottom)
+            }
 
-        if (outerHeight(document.querySelector(".lib-dialog > [class^='c-dialog']")) > window.innerHeight) {
-            let offset = window.innerWidth - document.body.clientWidth;
+            if (outerHeight(document.querySelector('.lib-dialog > [class^="c-dialog"]')) > window.innerHeight) {
+                const offset = window.innerWidth - document.body.clientWidth
 
-            document.documentElement.style["padding-right"] = offset;
-            document.documentElement.classList.add("is-overflow-hidden");
+                document.documentElement.style.paddingRight = `${offset}px`
+                document.documentElement.classList.add('overflow-hidden')
 
-            if (document.querySelector("#l-header") !== null) {
-                document.querySelector("#l-header").style["right"] = offset;
+                if (document.querySelector('#l-header') !== null) {
+                    document.querySelector('#l-header').style.right = `${offset}px`
+                }
             }
-        }
 
-        if (callback) {
-            callback();
-        }
+            loadStimulus(document.querySelector('.lib-dialog'))
 
-        document.querySelector(".lib-dialog").addEventListener("mousedown", (e) => {
-            if (e.target.classList.contains("lib-dialog")) {
-                document.documentElement.addEventListener("mouseup", function e() {
-                    LibDialog.hide();
-                    document.documentElement.removeEventListener("mouseup", e);
-                });
-            }
-        }, true);
+            resolve()
+
+            document.querySelector('.lib-dialog').addEventListener('mousedown', e => {
+                if (e.target.classList.contains('lib-dialog')) {
+                    document.documentElement.addEventListener('mouseup', function e() {
+                        LibDialog.hide()
+                        document.documentElement.removeEventListener('mouseup', e)
+                    })
+                }
+            }, true)
+        })
     },
-    hide: (callback) => {
-        if (document.querySelector(".lib-dialog") !== null) {
-            document.querySelector(".lib-dialog")._addDataValue("state", "hiding");
-        }
+    hide: async() => {
+        return new Promise(resolve => {
+            if (document.querySelector('.lib-dialog') !== null) {
+                document.querySelector('.lib-dialog')._addDataValue('state', 'hiding')
+            }
 
-        setTimeout(function () {
-            if (document.querySelector(".lib-dialog") !== null) {
-                document.querySelector(".lib-dialog").style["display"] = "none";
-                document.documentElement.classList.remove("is-overflow-hidden");
+            setTimeout(() => {
+                if (document.querySelector('.lib-dialog') !== null) {
+                    document.querySelector('.lib-dialog').style.display = 'none'
+                    document.documentElement.classList.remove('overflow-hidden')
 
-                if (document.querySelector("#l-header") !== null) {
-                    document.querySelector("#l-header").style["right"] = "";
-                }
+                    if (document.querySelector('#l-header') !== null) {
+                        document.querySelector('#l-header').style.right = ''
+                    }
 
-                document.querySelector(".lib-dialog").remove();
-            }
+                    document.querySelector('.lib-dialog').remove()
+                }
 
-            if (callback) {
-                callback();
-            }
-        }, 300);
+                resolve()
+            }, 300)
+        })
     },
-    action: (element, url, callback) => {
-        fetch(url, {headers: {'X-Requested-With': 'XMLHttpRequest'}}).then((response) => {
-            return response.json();
+    action: async(element, url) => {
+        fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest' } }).then(response => response.json()).then(({ dialog }) => {
+            LibDialog.show(dialog)
         })
-        .then((data) => {
-            LibDialog.show(data["dialog"], callback);
-        });
     }
-};
+}
 
-export default LibDialog;
+export default LibDialog

package/src/scripts/Libraries/Drawer.js

@@ -1,39 +1,39 @@
-import { LibStimulus, Controller } from "./Stimulus.js";
+import { LibStimulus, Controller } from './Stimulus.js'
 
-LibStimulus.register("lib-drawer", class extends Controller {
+LibStimulus.register('lib-drawer', class extends Controller {
     init() {
-        setTimeout(() => this.queryTarget("nav").classList.add("is-transition"), 50);
-        this.queryTarget("nav").addEventListener("click", (e) => {
-            if (e.target === this.queryTarget("nav")) {
-                this.hide();
+        setTimeout(() => this.queryTarget('nav').classList.add('is-transition'), 50)
+        this.queryTarget('nav').addEventListener('click', ({ target }) => {
+            if (target === this.queryTarget('nav')) {
+                this.hide()
             }
         })
     }
 
     show() {
-        this.queryTarget("nav").scrollLeft = 0;
-        this.queryTarget("nav").style.setProperty('--drawerOpacity', `1`);
-        this.queryTarget("nav").classList.add("is-opacity");
-        this.queryTarget("nav")._addDataValue("state", "active");
-        document.documentElement.classList.add("is-lib-drawer-active");
+        this.queryTarget('nav').scrollLeft = 0
+        this.queryTarget('nav').style.setProperty('--lib-drawer-opacity', '1')
+        this.queryTarget('nav').classList.add('is-opacity')
+        this.queryTarget('nav')._addDataValue('state', 'active')
+        document.documentElement.classList.add('overflow-hidden')
     }
 
     hide() {
-        this.queryTarget("nav")._removeDataValue("state", "active");
-        this.queryTarget("nav").classList.add("is-opacity");
-        this.queryTarget("nav").style.setProperty('--drawerOpacity', `0`);
-        document.documentElement.classList.remove("is-lib-drawer-active");
+        this.queryTarget('nav')._removeDataValue('state', 'active')
+        this.queryTarget('nav').classList.add('is-opacity')
+        this.queryTarget('nav').style.setProperty('--lib-drawer-opacity', '0')
+        document.documentElement.classList.remove('overflow-hidden')
     }
 
-    scroll(e) {
-        if (e.target.scrollLeft > 1) {
-            this.queryTarget("nav").classList.remove("is-opacity");
-            this.queryTarget("nav").style.setProperty('--drawerOpacity', `${Math.abs((e.target.scrollLeft / this.queryTarget("nav").children[0].clientWidth) - 1)}`);
+    scroll({ target }) {
+        if (target.scrollLeft > 1) {
+            this.queryTarget('nav').classList.remove('is-opacity')
+            this.queryTarget('nav').style.setProperty('--lib-drawer-opacity', `${Math.abs((target.scrollLeft / this.queryTarget('nav').children[0].clientWidth) - 1)}`)
         }
 
-        if (e.target.scrollLeft === this.queryTarget("nav").children[0].clientWidth) {
-            this.queryTarget("nav")._removeDataValue("state", "active");
-            document.documentElement.classList.remove("is-lib-drawer-active");
+        if (target.scrollLeft === this.queryTarget('nav').children[0].clientWidth) {
+            this.queryTarget('nav')._removeDataValue('state', 'active')
+            document.documentElement.classList.remove('overflow-hidden')
         }
     }
-});
+})