version switch: turn into a custom element #104778

Tobias Heinke · 2024-04-28T14:25:29+02:00

Tobias Heinke commented

2024-04-28 14:25:29 +02:00

store single state as class
to be then replaced by upcoming custom states
https://html.spec.whatwg.org/multipage/custom-elements.html#custom-state-pseudo-class
remove function name prefix no longer confusable with JQuery
move animation to css
transition requires visibility instead of display
not toggle/ replace event listeners
no class properties
split toggle function
css: use tagnames instead of class if not div
rename class selected -> current
mark previously selected with a class

store single state as class to be then replaced by upcoming custom states https://html.spec.whatwg.org/multipage/custom-elements.html#custom-state-pseudo-class remove function name prefix no longer confusable with JQuery move animation to css transition requires visibility instead of display not toggle/ replace event listeners no class properties split toggle function css: use tagnames instead of class if not div rename class selected -> current mark previously selected with a class

Tobias Heinke commented

2024-04-28 14:30:23 +02:00

multiple states? like a deactivated attr
minimize var names?
rename to "variant selector" better in a separate commit

multiple states? like a deactivated attr minimize var names? rename to "variant selector" better in a separate commit

Tobias Heinke requested review from Aaron Carlisle 2024-04-28 14:32:38 +02:00

Tobias Heinke changed title from ~~WIP: version switch: turn into a custom element~~ to version switch: turn into a custom element

2024-05-06 00:53:05 +02:00

Tobias Heinke force-pushed switcher-two from 77febf6234 to 7409670ef6

2024-05-06 01:15:11 +02:00

Compare

Aaron Carlisle commented

2024-05-15 02:51:00 +02:00

What is the advatage of using a custom element? Seems like this can be done with pure HTML. Refactoring out the dropdown to a small JS library might make more sense... Or is there an existing library we could use?

Tobias Heinke commented

2024-05-15 10:22:52 +02:00

It has no disadvantages and it's the current way of implementing custom widgets so it's better comparable.
Also this points to the element instead of having two with this.menu.
A small lib is a security issue and the main bulk of work on this is done.

It has no disadvantages and it's the current way of implementing custom widgets so it's better comparable. Also `this` points to the element instead of having two with `this.menu`. A small lib is a security issue and the main bulk of work on this is done.

Tobias Heinke added 1 commit 2024-05-24 05:48:25 +02:00

declare type as attr instead of id beb88b5ced