From 5a9942fde65787b35d4eb8e3441af6fe68819612 Mon Sep 17 00:00:00 2001 From: Akshay Nair Date: Fri, 11 Aug 2023 21:21:31 +0530 Subject: feat: adds text and inner html properties --- TODO.norg | 2 +- examples/form/index.html | 2 +- examples/form/signup.css | 14 ++++++++++---- src/index.ts | 16 ++++++++++++++-- 4 files changed, 26 insertions(+), 8 deletions(-) diff --git a/TODO.norg b/TODO.norg index 31a0413..90a13d5 100644 --- a/TODO.norg +++ b/TODO.norg @@ -6,7 +6,7 @@ - (x) Use css units for `delay` function - (x) Specify node type - `button(id)` or `button#id` - (x) attributes - - ( ) `--cssx-text` (and maybe `--cssx-html`?) + - (x) `--cssx-text` (and maybe `--cssx-html`?) - ( ) Improve error messages - ( ) Evaluate `calc`? - ( ) `list` & `tuple` data structures? diff --git a/examples/form/index.html b/examples/form/index.html index 158ee16..1d55241 100644 --- a/examples/form/index.html +++ b/examples/form/index.html @@ -1,7 +1,7 @@ - Counter example + Register to this awesome website diff --git a/examples/form/signup.css b/examples/form/signup.css index c5970c7..96b9ac1 100644 --- a/examples/form/signup.css +++ b/examples/form/signup.css @@ -5,15 +5,21 @@ max-width: 700px; margin: 1rem auto; + --cssx-disgustingly-set-innerhtml:

Sign-Up

; + --cssx-children: form#form; --count: '0'; } -#signup-page-content::before { - content: "Sign-Up"; - display: block; +.form-title { font-size: 2rem; + padding: 0; border-bottom: 1px solid gray; + font-weight: normal; + color: gray; +} +.form-title b { + font-weight: bold; color: black; } #form { @@ -22,7 +28,7 @@ --cssx-on-submit: prevent-default() add-class(form, 'submitting') - request('https://httpbin.org/post', POST) + request('/examples/') remove-class(form, 'submitting') add-class(form, 'submitted') ; diff --git a/src/index.ts b/src/index.ts index 88347df..b48b1d8 100644 --- a/src/index.ts +++ b/src/index.ts @@ -9,6 +9,12 @@ const EVENT_HANDLERS = { submit: '--cssx-on-submit', } +const PROPERTIES = [ + '--cssx-children', + '--cssx-text', + '--cssx-disgustingly-set-innerhtml' +] + const injectStyles = () => { const STYLE_TAG_CLASS = 'cssx-style-root' if (document.querySelector(`.${STYLE_TAG_CLASS}`)) return @@ -16,7 +22,7 @@ const injectStyles = () => { const $style = document.createElement('style') $style.className = STYLE_TAG_CLASS - const properties = ['--cssx-children', ...Object.values(EVENT_HANDLERS)] + const properties = [...PROPERTIES, ...Object.values(EVENT_HANDLERS)] $style.textContent = `.cssx-layer { ${properties.map((p) => `${p}: ${UNSET_PROPERTY_VALUE};`).join(' ')} @@ -105,8 +111,14 @@ const manageElement = async ($element: Element, isNewElement: boolean = false) = if (nodeCount++ > 100) return // NOTE: Temporary. To prevent infinite rec await handleEvents($element, isNewElement) - const childrenIds = getChildrenIds($element) + const text = getPropertyValue($element, '--cssx-text') + if (text) $element.textContent = text + + const html = getPropertyValue($element, '--cssx-disgustingly-set-innerhtml') + if (html) $element.innerHTML = html + + const childrenIds = getChildrenIds($element) if (childrenIds.length > 0) { const LAYER_CLASS = 'cssx-layer' const $childrenRoot = -- cgit v1.3.1