diff options
| author | Akshay Nair <phenax5@gmail.com> | 2023-08-25 10:02:27 +0530 |
|---|---|---|
| committer | Akshay Nair <phenax5@gmail.com> | 2023-08-25 10:02:27 +0530 |
| commit | 2f99128e354e5c5334094f072767164c8e4fbd2f (patch) | |
| tree | 60d563381a9583b8c6f70728780132aa684bca98 | |
| parent | e5844314314709dfd2806019aa5d522189129497 (diff) | |
| download | css-everything-2f99128e354e5c5334094f072767164c8e4fbd2f.tar.gz css-everything-2f99128e354e5c5334094f072767164c8e4fbd2f.zip | |
feat: adds clock example
| -rw-r--r-- | TODO.norg | 11 | ||||
| -rw-r--r-- | examples/clock/index.html | 10 | ||||
| -rw-r--r-- | examples/clock/style.css | 98 | ||||
| -rw-r--r-- | examples/todo-list/style.css | 4 | ||||
| -rw-r--r-- | src/index.ts | 4 |
5 files changed, 117 insertions, 10 deletions
@@ -3,15 +3,14 @@ - (x) string concatenation/interpolation - (x) some way to de-quotify values? - (x) re-quotify value - - ( ) analog + digital clock example - - ( ) `--cssx-use-properties: --parent-prop;` to trigger nested property update - - ( ) Update `--cssx-text` on update - - ( ) FFI interface to declare functions + - (x) analog + digital clock example - ( ) `has-class` - ( ) `add-class` & `remove-class` should use self if id is not specified? + - ( ) Update `--cssx-text` on update + - ( ) fix invalid expr in functions error * Later - - ( ) Evaluate `calc` + - ( ) FFI interface to declare functions - ( ) `request` error handling - ( ) keyboard events - ( ) Code cleanup @@ -21,6 +20,8 @@ - ( ) filter for on update on specific properties * Maybe + - ( ) `--cssx-use-properties: --parent-prop;` to trigger nested property update + - ( ) Evaluate `calc` - ( ) *server-side css*? Why the fuck not!? * Done diff --git a/examples/clock/index.html b/examples/clock/index.html new file mode 100644 index 0000000..9c233df --- /dev/null +++ b/examples/clock/index.html @@ -0,0 +1,10 @@ +<!doctype html> +<html lang="en"> + <head> + <title>Clock</title> + <link href="./style.css" rel="stylesheet" /> + </head> + <body> + <script async defer src="../../dist/renderer/index.js"></script> + </body> +</html> diff --git a/examples/clock/style.css b/examples/clock/style.css new file mode 100644 index 0000000..a6f8349 --- /dev/null +++ b/examples/clock/style.css @@ -0,0 +1,98 @@ +:root { + --color-gray: #cccccc; + --color-accent: #5180e9; + + font-size: 16px; + font-family: sans-serif; + color: #555; + + --cssx-children: div#digital div#analog; +} + +body * { box-sizing: border-box; } + +#digital { + text-align: center; + padding: 1rem; + font-size: 1.5rem; + + --text: "hello"; + + --js-expr: + new Intl.DateTimeFormat('en-US', { + hour: 'numeric', + minute: 'numeric', + second: 'numeric', + }).format(new Date()); + --get-date: js-eval(get-var(--js-expr)); + + --cssx-on-mount: update(--text, call(--get-date)); + --cssx-on-update: delay(1s) update(--text, call(--get-date)); +} +#digital::after { content: var(--text); } + +#analog { + border: 1px solid red; + width: 200px; + height: 200px; + margin: 1rem auto; + border-radius: 50%; + position: relative; + + --date: ""; + --get-date: js-eval("new Date()"); + + --cssx-on-mount: update(--date, call(--get-date)); + --cssx-on-update: + update('[data-element=seconds]', --angle, js-eval("360 * new Date().getSeconds() / 60 - 90")) + update('[data-element=minutes]', --angle, js-eval("360 * new Date().getMinutes() / 60 - 90")) + update('[data-element=hours]', --angle, + js-eval("360 * (new Date().getHours() % 12) / 12 - 90 + (30 * new Date().getMinutes() / 60)") + ) + delay(1s) + update(--date, call(--get-date)); + + --cssx-children: + div#seconds.analog-clock-hand + div#minutes.analog-clock-hand + div#hours.analog-clock-hand + ; +} + +[data-element=seconds].analog-clock-hand { + --color: pink; + --size: 70px; +} +[data-element=minutes].analog-clock-hand { + --color: red; + --size: 60px; +} +[data-element=hours].analog-clock-hand { + --color: blue; + --size: 40px; + height: 4px; +} + +.analog-clock-hand { + --angle: 0; + --color: black; + --size: 80px; + + width: var(--size); + height: 2px; + position: absolute; + top: 50%; + left: 50%; + transform-origin: 0% 50%; + transform: rotate(0deg); + border-radius: 5px; + + --get-transform: string('rotate(', get-var(--angle), 'deg)'); + + --cssx-on-mount: + update(background-color, get-var(--color)) + update(transform, call(--get-transform)) + ; + --cssx-on-update: update(transform, call(--get-transform)); +} + diff --git a/examples/todo-list/style.css b/examples/todo-list/style.css index ed9875c..cda7003 100644 --- a/examples/todo-list/style.css +++ b/examples/todo-list/style.css @@ -18,10 +18,6 @@ body * { box-sizing: border-box; } border-radius: 5px; overflow: hidden; - --some-str: "Hello"; - - --cssx-on-mount: js-eval(string("alert('", quotify(get-var(--some-str)), "')")); - /* --my-func: */ /* js-eval(get-var(--js)) */ /* delay(1s) */ diff --git a/src/index.ts b/src/index.ts index 97bd000..e5803d2 100644 --- a/src/index.ts +++ b/src/index.ts @@ -193,7 +193,9 @@ const getEvalActions = ( const result = await evalExprInScope(exprs, getEvalActions(node, ctx)) - node.parentNode?.removeChild(node) + if (!$element.hasAttribute('data-debug-stack')) { + node.parentNode?.removeChild(node) + } return result }, |