JSON template for Bricks Pointer Tracker

pointer-tracker.json

{"content":[{"id":"pqqtzn","name":"section","parent":0,"children":["fdayxr","mixfao"],"settings":{},"label":"Code"},{"id":"fdayxr","name":"code","parent":"pqqtzn","children":[],"settings":{"code":"<script>\n/* Use this script to track status of any scripts\nThis is to ensure we don't ruun multiple times when code\nis run from Bricks Code Elements \nIdeally, all code shoule be moved to a Code Manager. By doing\nso, this control is not needed.\n*/\n((d) => {\n    if (undefined === d.bbStatus) {\n        let bbStatus = {};\n        /* If flag is already set, return false\n        Otherwise, set the flag and return true */\n        const setStatus = (flag, value) => {\n            if (undefined !== bbStatus[flag]) {\n                return false;\n            } else {\n                bbStatus[flag] = value;\n                return true;\n            }\n        }\n        const getStatus = flag => {\n            return bbStatus[flag];\n        }\n        const clearStatus = flag => {\n            delete bbStatus[flag];\n        }\n        const debounce = (func, delay) => {\n            let timeoutId;\n            return (...args) => {\n                clearTimeout(timeoutId);\n                timeoutId = setTimeout(() => {\n                    func(...args);\n                }, delay);\n            };\n        };\n\n        d.bbStatus = {\n            'setStatus': setStatus,\n            'getStatus': getStatus,\n            'clearStatus': clearStatus,\n            'debounce': debounce\n        }\n    }\n})(document);\n\n\n/* \nPointer Tracker \nNote: only enable this is $enable-pointer-tracker is true in BB Framework SASS\n*/\n((w, d) => {\n\n    /* If we are not using d.bbStatus, or if we are able to set 'pointerTrackerInit' (meaning it has not already been set) */\n    if (undefined === d.bbStatus || d.bbStatus.setStatus('pointerTrackerInit', true) === true) {\n        const size_change_selector = '[class*=\"bb-pointer-tracker-size\"]';\n        const initTracker = () => {\n            /* Get or add tracker to the DOM */\n            let trackerElement = document.getElementById('bb-pointer-tracker');\n\n            if (!trackerElement) {\n                trackerElement = document.createElement('div');\n                trackerElement.id = 'bb-pointer-tracker';\n                document.body.appendChild(trackerElement);\n            }\n\n            /* Get the width of the tracker */\n            const constraint = trackerElement.offsetWidth / 2;\n\n            const handlePointerMove = e => {\n                const { clientX, clientY } = e;\n                trackerElement.style.left = clientX + 'px';\n                trackerElement.style.top = clientY + 'px';\n\n                const trackerRect = trackerElement.getBoundingClientRect();\n                const vp_width = window.innerWidth;\n                const isOutsideViewport = trackerRect.left < 0 || (constraint + trackerRect.right) > vp_width;\n\n                if (isOutsideViewport) {\n                    document.body.classList.add('tracker-outside-vp');\n                } else {\n                    document.body.classList.remove('tracker-outside-vp');\n                }\n            }\n\n\n\n            /* track the location of the tracker */\n            d.addEventListener('pointermove', handlePointerMove);\n\n            const getSizeClass = el => {\n                const partialName = 'bb-pointer-tracker-size';\n                const foundClass = Array.from(el.classList).find(className => className.includes(partialName));\n                return foundClass;\n            }\n            /*classes to set size on mouseover*/\n            d.querySelectorAll(size_change_selector).forEach(el => {\n                el.addEventListener('mouseenter', e => {\n                    const { currentTarget } = e;\n                    document.body.classList.add(getSizeClass(currentTarget));\n                });\n\n                el.addEventListener('mouseleave', e => {\n                    const { currentTarget } = e;\n                    document.body.classList.remove(getSizeClass(currentTarget));\n                });\n            })\n        }\n\n        /* Comment out to disable */\n        /* Comment out to disable */\n        w.addEventListener('DOMContentLoaded', ()=>{\n            if(d.body.classList.contains('bricks-is-frontend')){\n                initTracker();\n            }\n        });\n    }\n})(window, document);\n</script>","executeCode":true,"noRoot":true},"label":"Pointer Tracker JS"},{"id":"mixfao","name":"code","parent":"pqqtzn","children":[],"settings":{"code":"<style>\n:root {\n  --pointer-tracker-width: 2rem;\n  --pointer-tracker-background: #3333ff44;\n  --pointer-tracker-transition: all 0.4s ease-out;\n    \n   --pointer-tracker-size-s: 1rem;\n   --pointer-tracker-size-m : 4rem;\n   --pointer-tracker-size-l : 10rem;\n}\n#bb-pointer-tracker {\n  transition: var(--pointer-tracker-transition);\n  position: fixed;\n  top: -10000;\n  z-index: 99999;\n  width: var(--pointer-tracker-width);\n  height: var(--pointer-tracker-width);\n  background: var(--pointer-tracker-background);\n  border-radius: 50%;\n  transform: translate(-50%, -50%);\n  pointer-events: none;\n}\nbody.tracker-outside-vp #bb-pointer-tracker {\n  width: 0;\n  height: 0;\n}\n.bb-pointer-tracker-size-s {\n  --pointer-tracker-width: var(--pointer-tracker-size-s);\n}\n.bb-pointer-tracker-size-m {\n  --pointer-tracker-width: var(--pointer-tracker-size-m);\n}\n.bb-pointer-tracker-size-l {\n  --pointer-tracker-width: var(--pointer-tracker-size-l);\n}\n</style>","executeCode":true,"noRoot":true},"label":"Pointer Tracker CSS"}],"source":"bricksCopiedElements","sourceUrl":"https://wordpress-bricks-only.local","version":"1.9.4","globalClasses":[],"globalElements":[]}