From 5a659a47c6e4823c2e29dd03eb8988270157de43 Mon Sep 17 00:00:00 2001 From: Akshay Nair Date: Wed, 9 Aug 2023 22:48:19 +0530 Subject: chore: init commit is the shit that makes me want to quit --- src/index.ts | 47 +++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 47 insertions(+) create mode 100644 src/index.ts (limited to 'src') diff --git a/src/index.ts b/src/index.ts new file mode 100644 index 0000000..37693ba --- /dev/null +++ b/src/index.ts @@ -0,0 +1,47 @@ +const UNSET_PROPERTY_VALUE = ''; + +const getPropertyValue = ($element: HTMLElement, prop: string) => { + const value = `${getComputedStyle($element).getPropertyValue(prop)}`.trim() + return !value || value === UNSET_PROPERTY_VALUE ? '' : value; +}; + +const getChildrenIds = ($element: HTMLElement) => { + const value = getPropertyValue($element, '--cssx-children') + return value.split(/\s*,\s*/g).filter(Boolean) +} + +const handleEvents = ($element: HTMLElement) => { + const eventHandlers = { + click: '--cssx-on-click', + load: '--cssx-on-load', + } + + Object.entries(eventHandlers).forEach(([event, property]) => { + const handlerExpr = getPropertyValue($element, property); + if (handlerExpr) { + // TODO: Parse onclick + console.log($element.id, event, handlerExpr); + } + }); +}; + +let iters = 0; +const manageElement = ($element: HTMLElement) => { + if (iters++ > 100) return; // to prevent infinite rec + + handleEvents($element); + + const $childrenRoot = Object.assign(document.createElement('div'), { + className: 'cssx-layer', + }); + $element.appendChild($childrenRoot); + + const childrenIds = getChildrenIds($element); + for (const id of childrenIds) { + const $child = Object.assign(document.createElement('div'), { id }); + $childrenRoot.appendChild($child); + manageElement($child); + } +} + + -- cgit v1.3.1