Bricks Multi Getter

template-v1.json

{"content":[{"id":"pvgpqz","name":"block","parent":"qpveqx","children":["nplvpo","bnytfm"],"settings":{"_cssGlobalClasses":["vqsvry"]},"label":"Greeter"},{"id":"nplvpo","name":"block","parent":"pvgpqz","children":["krzjsc","pcvgqk","xkljep","bsbgde"],"settings":{"_cssGlobalClasses":["jygnpk"]},"label":"Message"},{"id":"bnytfm","name":"block","parent":"pvgpqz","children":["tayvfi"],"settings":{"_cssGlobalClasses":["ffvjmd"]},"label":"Triggers"},{"id":"krzjsc","name":"heading","parent":"nplvpo","children":[],"settings":{"text":"I am a heading","_cssGlobalClasses":["wfbmzt"]}},{"id":"pcvgqk","name":"text","parent":"nplvpo","children":[],"settings":{"text":"<p>Here goes your text ... Select any part of your text to access the formatting toolbar.</p>","_cssGlobalClasses":["cbatsv"]},"label":"Text"},{"id":"xkljep","name":"button","parent":"nplvpo","children":[],"settings":{"text":"I am a button","style":"primary","_cssGlobalClasses":["mkkvzf","kmdcmf"],"link":{"type":"external","url":"#"}},"label":"CTA"},{"id":"bynyia","name":"image","parent":"tayvfi","children":[],"settings":{"tag":"figure","caption":"none","image":{"id":99,"filename":"bkuwfp0bb_8.jpg","size":"thumbnail","full":"https://acss-at-based.local/wp-content/uploads/2023/10/bkuwfp0bb_8.jpg","url":"https://acss-at-based.local/wp-content/uploads/2023/10/bkuwfp0bb_8-150x150.jpg"},"_cssGlobalClasses":["sxbftj"]},"themeStyles":[],"label":"Avatar"},{"id":"tayvfi","name":"div","parent":"bnytfm","children":["bynyia"],"settings":{"_cssGlobalClasses":["lhcykw","acss_import_focus--action"],"tag":"custom","customTag":"button"},"label":"Button"},{"id":"cqfdyq","name":"code","parent":0,"children":[],"settings":{"executeCode":true,"noRoot":true,"code":"<script>\n(() => {\n    /* Define Selectors */\n    const rootBlockSelector = '.greeter';\n    const buttonSelector = rootBlockSelector + '__button';\n    const messageSelector = rootBlockSelector + '__message';\n    const closeButtonSelector = rootBlockSelector + '__close-button';\n    const openAttribute = 'data-greeter-open';\n    const focusableElements = 'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])';\n\n    //track the last button clicked for opening the greeter */\n    let greeterLastOpenerButton = null;\n\n    /* Wait for all DOM Elements to be available */\n    document.addEventListener('DOMContentLoaded', () => {\n        /* Get all Greeter blocks */\n        const blocks = document.querySelectorAll(rootBlockSelector);\n\n        /* inerate all blocks */\n        blocks.forEach(block => {\n            /* Get element references */\n            const button = block.querySelector(buttonSelector);\n            const message = block.querySelector(messageSelector);\n            const closeButton = block.querySelector(closeButtonSelector);\n\n            const focusables = message.querySelectorAll(focusableElements);\n            const firstFocusableElement = focusables[0];\n            const lastFocusableElement = focusables[focusables.length - 1];\n\n            /* Named functions */\n            const toggle = () => {\n                message.toggleAttribute(openAttribute);\n                if (isOpen()) {\n                    addOpenListeners();\n                } else {\n                    removeOpenListeners();\n                }\n            }\n\n            const close = () => {\n                message.removeAttribute(openAttribute);\n                removeOpenListeners();\n                setTimeout(() => { greeterLastOpenerButton.focus() });\n            }\n\n            const open = () => {\n                message.addAttribute(openAttribute);\n                addOpenListeners();\n            }\n            const isOpen = () => {\n                return message.hasAttribute(openAttribute);\n            }\n\n            const handleKeydown = event => {\n                const { key } = event;\n                if (key === 'Escape') {\n                    event.preventDefault();\n                    close();\n                }\n            }\n\n            const addOpenListeners = () => {\n                document.addEventListener('keydown', handleKeydown);\n                closeButton.addEventListener('click', close);\n                focusables.forEach(element => element.addEventListener('keydown', trapFocus));\n\n                /* \n                Put this here so it focuses on both toggle open and explicit open \n                Timeout to shft down the execution thread\n                */\n                setTimeout(() => { firstFocusableElement.focus() });\n            }\n\n            const removeOpenListeners = () => {\n                document.removeEventListener('keydown', handleKeydown);\n                closeButton.removeEventListener('click', close);\n                focusables.forEach(element => element.removeEventListener('keydown', trapFocus));\n            }\n\n            /* Focus Trap */\n            const trapFocus = event => {\n                if (event.key !== 'Tab') return;\n\n                // If Shift key is pressed with Tab, move backwards\n                if (event.shiftKey) {\n                    if (document.activeElement === firstFocusableElement) {\n                        lastFocusableElement.focus();\n                        event.preventDefault();\n                    }\n                } else {\n                    // If Tab is pressed without Shift, move forwards\n                    if (document.activeElement === lastFocusableElement) {\n                        firstFocusableElement.focus();\n                        event.preventDefault();\n                    }\n                }\n            };\n\n            /* Initialise button listener */\n            button.addEventListener('click', event => {\n                event.preventDefault();\n                greeterLastOpenerButton =  event.currentTarget;\n                toggle();\n            })\n\n        })\n    })\n})();\n</script>","signature":"ae10e719143e8d6a7e6d86e1363222d2","user_id":1,"time":1713125651}},{"id":"bsbgde","name":"button","parent":"nplvpo","children":[],"settings":{"text":"X","_cssGlobalClasses":["rmdbbi"],"tag":"button"},"label":"Close Button"},{"id":"fphxuj","name":"block","parent":0,"children":["smbsea"],"settings":{"_position":"fixed","_bottom":"var(--content-gap)","_right":"var(--content-gap)","_widthMax":"330px"},"label":"Fixed Bottom Right"},{"id":"smbsea","name":"block","parent":"fphxuj","children":["bnjegq","semiku"],"settings":{"_cssGlobalClasses":["vqsvry"]},"label":"Greeter"},{"id":"mqggon","name":"section","parent":0,"children":["kpednh"],"settings":[]},{"id":"kpednh","name":"container","parent":"mqggon","children":["yscxtu"],"settings":[]},{"id":"yscxtu","name":"block","parent":"kpednh","children":["qpveqx","tpmzno"],"settings":{"_display":"grid","_gridGap":"var(--grid-gap)","_gridTemplateColumns":"var(--grid-3)"},"label":"Grid"},{"id":"qpveqx","name":"block","parent":"yscxtu","children":["yktabo","qckwix","pvgpqz"],"settings":{"_rowGap":"calc(var(--content-gap) / 2)"},"label":"Cell"},{"id":"yktabo","name":"heading","parent":"qpveqx","children":[],"settings":{"text":"I am a heading"}},{"id":"qckwix","name":"text","parent":"qpveqx","children":[],"settings":{"text":"<p>Here goes your text ... Select any part of your text to access the formatting toolbar.</p><p>Here goes your text ... Select any part of your text to access the formatting toolbar.</p><p>Here goes your text ... Select any part of your text to access the formatting toolbar.</p>"}},{"id":"tpmzno","name":"block","parent":"yscxtu","children":["axoejy","pljbfu","vmehqt"],"settings":{"_rowGap":"calc(var(--content-gap) / 2)"},"label":"Cell"},{"id":"axoejy","name":"heading","parent":"tpmzno","children":[],"settings":{"text":"I am a heading"}},{"id":"pljbfu","name":"text","parent":"tpmzno","children":[],"settings":{"text":"<p>Here goes your text ... Select any part of your text to access the formatting toolbar.</p><p>Here goes your text ... Select any part of your text to access the formatting toolbar.</p><p>Here goes your text ... Select any part of your text to access the formatting toolbar.</p>"}},{"id":"vmehqt","name":"block","parent":"tpmzno","children":["urqbpv","sbudhb"],"settings":{"_cssGlobalClasses":["vqsvry"]},"label":"Greeter"},{"id":"urqbpv","name":"block","parent":"vmehqt","children":["vrjnpw","vbzqhe","bixajp","ezernm"],"settings":{"_cssGlobalClasses":["jygnpk"]},"label":"Message"},{"id":"sbudhb","name":"block","parent":"vmehqt","children":["bitbgx"],"settings":{"_cssGlobalClasses":["ffvjmd"]},"label":"Triggers"},{"id":"vrjnpw","name":"heading","parent":"urqbpv","children":[],"settings":{"text":"I am a heading","_cssGlobalClasses":["wfbmzt"]}},{"id":"vbzqhe","name":"text","parent":"urqbpv","children":[],"settings":{"text":"<p>Here goes your text ... Select any part of your text to access the formatting toolbar.</p>","_cssGlobalClasses":["cbatsv"]},"label":"Text"},{"id":"bixajp","name":"button","parent":"urqbpv","children":[],"settings":{"text":"I am a button","style":"primary","_cssGlobalClasses":["mkkvzf","kmdcmf"],"link":{"type":"external","url":"#"}},"label":"CTA"},{"id":"ezernm","name":"button","parent":"urqbpv","children":[],"settings":{"text":"X","_cssGlobalClasses":["rmdbbi"],"tag":"button"},"label":"Close Button"},{"id":"bitbgx","name":"div","parent":"sbudhb","children":["ondwrd"],"settings":{"_cssGlobalClasses":["lhcykw","acss_import_focus--action"],"tag":"custom","customTag":"button"},"label":"Button"},{"id":"ondwrd","name":"image","parent":"bitbgx","children":[],"settings":{"tag":"figure","caption":"none","image":{"id":590,"filename":"h6wpor9mjs.jpg","size":"thumbnail","full":"https://acss-at-based.local/wp-content/uploads/2024/04/h6wpor9mjs.jpg","url":"https://acss-at-based.local/wp-content/uploads/2024/04/h6wpor9mjs-300x300.jpg"},"_cssGlobalClasses":["sxbftj"]},"themeStyles":{},"label":"Avatar"},{"id":"bnjegq","name":"block","parent":"smbsea","children":["asrgtg","wmnxgx","brsdfd","dwawet"],"settings":{"_cssGlobalClasses":["jygnpk"]},"label":"Message"},{"id":"semiku","name":"block","parent":"smbsea","children":["rwejbn"],"settings":{"_cssGlobalClasses":["ffvjmd"]},"label":"Triggers"},{"id":"asrgtg","name":"heading","parent":"bnjegq","children":[],"settings":{"text":"I am a heading","_cssGlobalClasses":["wfbmzt"]}},{"id":"wmnxgx","name":"text","parent":"bnjegq","children":[],"settings":{"text":"<p>Here goes your text ... Select any part of your text to access the formatting toolbar.</p>","_cssGlobalClasses":["cbatsv"]},"label":"Text"},{"id":"brsdfd","name":"button","parent":"bnjegq","children":[],"settings":{"text":"I am a button","style":"primary","_cssGlobalClasses":["mkkvzf","kmdcmf"],"link":{"type":"external","url":"#"}},"label":"CTA"},{"id":"dwawet","name":"button","parent":"bnjegq","children":[],"settings":{"text":"X","_cssGlobalClasses":["rmdbbi"],"tag":"button"},"label":"Close Button"},{"id":"rwejbn","name":"div","parent":"semiku","children":["tfuhef"],"settings":{"_cssGlobalClasses":["lhcykw"],"tag":"custom","customTag":"button"},"label":"Button"},{"id":"tfuhef","name":"image","parent":"rwejbn","children":[],"settings":{"tag":"figure","caption":"none","image":{"id":595,"filename":"sb26holo0w0.jpg","size":"thumbnail","full":"https://acss-at-based.local/wp-content/uploads/2024/04/sb26holo0w0.jpg","url":"https://acss-at-based.local/wp-content/uploads/2024/04/sb26holo0w0-300x300.jpg"},"_cssGlobalClasses":["sxbftj"]},"themeStyles":[],"label":"Avatar"}],"source":"bricksCopiedElements","sourceUrl":"https://acss-at-based.local","version":"1.9.7.1","globalClasses":[{"id":"vqsvry","name":"greeter","settings":{"_direction":"column","_rowGap":"var(--content-gap)","_cssCustom":".greeter{\n\tposition: relative;\n}\n\n.greeter__message{\n  position: absolute;\n  bottom: calc(100% + var(--content-gap));\n    \n}\n\n.bricks-is-frontend .greeter__message:not([data-greeter-open]){\n\tdisplay: none;\n}\n\n.greeter__close-button {\n\tbackground: transparent;\n}\n.greeter__close-button{\n  \n}\n\n\n.greeter__heading{\n\t\n}\n\n.greeter__text{\n\t\n}\n\n.greeter__cta{\n\t\n}\n\n.greeter__triggers{\n\t\n}\n\n/* I have to append body.bricks-is-frontend so Bricks defauls don't override */\nbody.bricks-is-frontend .greeter__button{\n  transition: outline-offset 0.4s ease-out;\n\tbackground: transparent;\n  outline-color: var(--action);\n  outline-offset: 0.1rem;\n  outline-style: solid;\n  outline-width: 2px;\n}\nbody.bricks-is-frontend .greeter__button:is(:focus, :focus-visible){\n  outline-offset: 0.6rem;\n}\n\n.greeter__avatar{\n\t\n}\n\n"}},{"id":"jygnpk","name":"greeter__message","settings":{"_padding":{"top":"var(--space-m)","right":"var(--space-m)","bottom":"var(--space-m)","left":"var(--space-m)"},"_rowGap":"calc(var(--content-gap) / 2)","_border":{"width":{"top":"1","right":"1","bottom":"1","left":"1"},"style":"solid","color":{"raw":"var(--neutral-trans-20)"},"radius":{"top":"var(--radius-s)","right":"var(--radius-s)","bottom":"var(--radius-s)","left":"var(--radius-s)"}},"_background":{"color":{"id":"acss_import_white","name":"white","raw":"var(--white)"}},"_cssCustom":".greeter__message {\n\tbox-shadow: var(--box-shadow-m); \n}"}},{"id":"ffvjmd","name":"greeter__triggers","settings":{"_alignItems":"flex-end"}},{"id":"wfbmzt","name":"greeter__heading","settings":[]},{"id":"cbatsv","name":"greeter__text","settings":[]},{"id":"mkkvzf","name":"greeter__cta","settings":{"style":"primary"}},{"id":"kmdcmf","name":"btn--action","settings":[]},{"id":"sxbftj","name":"greeter__avatar","settings":{"_aspectRatio":"1","_width":"7rem","_border":{"radius":{"top":"var(--radius-circle)","right":"var(--radius-circle)","bottom":"var(--radius-circle)","left":"var(--radius-circle)"}}}},{"id":"lhcykw","name":"greeter__button","settings":{"_border":{"radius":{"top":"var(--radius-circle)","right":"var(--radius-circle)","bottom":"var(--radius-circle)","left":"var(--radius-circle)"}}}},{"id":"acss_import_focus--action","name":"focus--action","settings":[]},{"id":"rmdbbi","name":"greeter__close-button","settings":{"_padding":{"top":"var(--space-xs)","right":"var(--space-xs)","bottom":"var(--space-xs)","left":"var(--space-xs)"},"_position":"absolute","_top":"0","_right":"0"}}],"globalElements":[]}