@newlogic-digital/ui 3.0.1 → 3.1.0

package/src/scripts/Components/CookieConsent.js

@@ -1,80 +1,82 @@
-import {LibStimulus, Controller} from "../Libraries/Stimulus.js";
-import LibCookieConsent from "../Libraries/CookieConsent.js";
+import { LibStimulus, Controller } from '../Libraries/Stimulus.js'
+import LibCookieConsent from '../Libraries/CookieConsent.js'
 
-LibCookieConsent.init();
-
-LibStimulus.register("c-cookieconsent", class extends Controller {
+LibStimulus.register('c-cookieconsent', class extends Controller {
     connect() {
-        const selector = this.element;
+        const selector = this.element
+
+        if (document.querySelector('.c-form-cookieconsent') !== null) {
+            return
+        }
 
-        if (localStorage.getItem('cookieconsent') === null) {
+        if (localStorage.getItem('lib-cookieconsent') === null || parseInt(localStorage.getItem('lib-cookieconsent-expire')) < Date.now()) {
             setTimeout(() => {
-                selector._addDataValue("state", "active");
-                selector.classList.add("is-animate");
-            },1500);
+                selector._addDataValue('state', 'active')
+                selector.classList.add('is-animate')
+            }, 1500)
         }
 
-        selector.addEventListener("click", () => {
-            selector.classList.add("is-mobile-show");
-        });
-
-        selector.querySelector("[data-lib-cookieconsent-approve]").addEventListener("click", () => {
-            LibCookieConsent.set("approve");
-            selector.classList.remove("is-animate");
-
-            setTimeout(function(){
-                selector._removeDataValue("state", "active");
-                selector.remove();
-            },500);
-        });
-
-        selector.querySelector("[data-lib-cookieconsent-decline]").addEventListener("click", () => {
-            LibCookieConsent.set("performance");
-            selector.classList.remove("is-animate");
-
-            setTimeout(function(){
-                selector._removeDataValue("state", "active");
-                selector.remove();
-            },500);
-        });
+        selector._hasDataValue('type', 'closable') &&
+        selector.addEventListener('click', e => {
+            if (e.target.closest('.c-cookieconsent > .wrp') === null) {
+                this.hide([])
+            }
+        })
+
+        selector.querySelector('[data-lib-cookieconsent-approve]').addEventListener('click', () => {
+            this.hide(['performance', 'marketing'])
+        })
+    }
+
+    hide(type) {
+        LibCookieConsent.set(type)
+        this.element.classList.remove('is-animate')
+
+        setTimeout(() => {
+            this.element._removeDataValue('state', 'active')
+            this.element.remove()
+        }, 500)
     }
-});
+})
 
-LibStimulus.register("c-form-cookieconsent", class extends Controller {
+LibStimulus.register('c-form-cookieconsent', class extends Controller {
     connect() {
-        const selector = this.element;
-
-        if (localStorage.getItem('cookieconsent') !== null) {
-            if (localStorage.getItem('cookieconsent') === "approve") {
-                let type = localStorage.getItem('cookieconsent_type');
-                if (type !== null) {
-                    if (type === "performance") {
-                        selector.querySelector(`input[value="performance"]`).checked = true;
-                    } else {
-                        selector.querySelector(`input[value="approve"]`).checked = true;
-                    }
-                } else {
-                    selector.querySelector(`input[value="approve"]`).checked = true;
+        const selector = this.element
+        const type = localStorage.getItem('lib-cookieconsent')
+
+        document.querySelector('.c-cookieconsent').classList.remove('is-animate')
+        document.querySelector('.c-cookieconsent')._removeDataValue('state', 'active')
+
+        if (type !== null) {
+            this.element.querySelectorAll('input:not([disabled])').forEach(input => {
+                input.checked = false
+            })
+
+            JSON.parse(type).forEach(type => {
+                if (selector.querySelector(`input[value="${type}"]`) !== null) {
+                    selector.querySelector(`input[value="${type}"]`).checked = true
                 }
-            } else if (localStorage.getItem('cookieconsent') === "decline") {
-                selector.querySelector(`input[value="decline"]`).checked = true;
-            }
+            })
         }
 
-        selector.addEventListener("submit", (e) => {
-            e.preventDefault();
+        selector.addEventListener('submit', e => {
+            e.preventDefault()
 
-            let value = (new FormData(e.target)).get("cookies");
+            const type = []
 
-            if (value === "approve") {
-                LibCookieConsent.set("marketing");
-                location.reload();
-            } else if (value === "performance") {
-                LibCookieConsent.set("performance");
-                location.reload();
-            } else if (value === "decline") {
-                LibCookieConsent.set("decline", () => location.reload());
-            }
+            this.element.querySelectorAll('input:not([disabled])').forEach(input => {
+                input.checked && type.push(input.value)
+            })
+
+            LibCookieConsent.set(type)
+            location.reload()
         })
     }
-});
+
+    disconnect() {
+        if (localStorage.getItem('lib-cookieconsent') === null || parseInt(localStorage.getItem('lib-cookieconsent-expire')) < Date.now()) {
+            document.querySelector('.c-cookieconsent')._addDataValue('state', 'active')
+            document.querySelector('.c-cookieconsent').classList.add('is-animate')
+        }
+    }
+})

package/src/scripts/Components/Form.js

@@ -1,26 +1,33 @@
-import {LibStimulus, Controller} from "../Libraries/Stimulus.js";
+import { LibStimulus, Controller, getController } from '../Libraries/Stimulus.js'
 
-LibStimulus.register("c-form", class extends Controller {
-    connect() {
-        let element = this.element;
+LibStimulus.register('c-form', class extends Controller {
+    validate(element, e) {
+        if (element.reportValidity() === false) {
+            e.preventDefault()
+            e.stopPropagation()
+        }
 
-        if (typeof HTMLFormElement.prototype.reportValidity !== "undefined") {
-            element.setAttribute("novalidate","");
-            element.addEventListener('submit', (event) => {
-                if (element.reportValidity() === false) {
-                    event.preventDefault();
-                    event.stopPropagation();
-                }
+        element.querySelectorAll('.ui-input').forEach(element => {
+            getController(element, 'ui-input').validate(element, true)
+        })
 
-                [...element.querySelectorAll(".ui-input")].map((element) => {
-                    console.log(element);
-                    LibStimulus.getController(element, "ui-input").validateInput(element, true)
-                });
+        element.querySelectorAll('.ui-select:not([data-state*="active"]) select[required]').forEach(select => {
+            getController(select.parentNode, 'ui-select').validate(select.parentNode, select)
+        })
 
-                [...element.querySelectorAll(`.ui-select:not([data-state*="active"]) select[required]`)].map((element) => {
-                    element.parentNode._addDataValue("state", "invalid");
-                });
-            }, false);
-        }
+        element.querySelectorAll('[data-controller="ui-checkbox"] input:not([type="hidden"])').forEach(input => {
+            input.parentNode._removeDataValue('state', 'valid invalid')
+
+            if (input.checkValidity()) {
+                input.parentNode._addDataValue('state', 'valid')
+            } else {
+                input.parentNode._addDataValue('state', 'invalid')
+            }
+        })
+    }
+
+    connect() {
+        this.element.setAttribute('novalidate', '')
+        this.element.addEventListener('submit', e => this.validate(this.element, e))
     }
-});
+})

package/src/scripts/Layout/+.js

@@ -1 +1,2 @@
-import './Main.js';
+import './Header.js'
+import './Main.js'

package/src/scripts/Layout/Header.js

@@ -0,0 +1,18 @@
+import { LibStimulus, Controller, getController } from '../Libraries/Stimulus.js'
+
+LibStimulus.register('l-header', class extends Controller {
+    connect() {
+        if (document.querySelector('#l-nav') === null) {
+            this.element.insertAdjacentHTML('afterend', '<div id="l-nav" class="lib-drawer" data-lib-drawer-target="nav" data-action="scroll->lib-drawer#scroll"><div class="wrp_nav"><div class="wrp_nav_head"></div><div class="wrp_nav_body"></div></div></div>')
+
+            getController(document.body, 'lib-drawer').init()
+
+            const layoutNav = document.querySelector('#l-nav')
+            const logo = this.element.querySelector('.elm_header_logo').outerHTML
+            const nav = this.element.querySelector('.elm_header_nav').outerHTML
+
+            layoutNav.querySelector('.wrp_nav_head').insertAdjacentHTML('beforeend', logo)
+            layoutNav.querySelector('.wrp_nav_body').insertAdjacentHTML('beforeend', nav)
+        }
+    }
+})

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