diff options
| author | Akshay Nair <phenax5@gmail.com> | 2023-08-11 21:21:31 +0530 |
|---|---|---|
| committer | Akshay Nair <phenax5@gmail.com> | 2023-08-11 21:23:36 +0530 |
| commit | 5a9942fde65787b35d4eb8e3441af6fe68819612 (patch) | |
| tree | 011e8087b200a793e154b6e6bbf96e8e1b1c8c20 | |
| parent | e0cc82460c0fec4336037996c23947ab39ba4015 (diff) | |
| download | css-everything-5a9942fde65787b35d4eb8e3441af6fe68819612.tar.gz css-everything-5a9942fde65787b35d4eb8e3441af6fe68819612.zip | |
feat: adds text and inner html properties
| -rw-r--r-- | TODO.norg | 2 | ||||
| -rw-r--r-- | examples/form/index.html | 2 | ||||
| -rw-r--r-- | examples/form/signup.css | 14 | ||||
| -rw-r--r-- | src/index.ts | 16 |
4 files changed, 26 insertions, 8 deletions
@@ -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 @@ <!DOCTYPE html> <html lang="en"> <head> - <title>Counter example</title> + <title>Register to this awesome website</title> <meta charset="UTF-8"> <link href="./style.css" rel="stylesheet"> </head> 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: <h1 class="form-title">Sign-<b>Up</b></h1>; + --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 = |