suggestion on system to add interactivity to sites

KDF_graphics

Hi,

I have some suggestions for the Silex web editor.
I'd love to have some way to make containers that when i press them control other containers (very vague ik).

I have no idea how i am supposed to explain this but i'd like to, however, i dont have good formulation skills, so if it sounds confusing then that is probably my fault. I have no way of describing this feature suggestion in any shorter way.

If what i am describing allready exists on silex to some degree, then i am very sorry, but i didnt notice. i tried to find some representation of this in the documentationa nd on the platform, but i could not.

First of, the concept im trying to describe requires something i will here call "states" which can be applied to containers, styles, text contents, etc. these, in this theory, contain diffrent variations of a container's content. For example, if i have a Container X, i can make it have 2 states where for example in the first state, it could contain buttons, and in the second state, it contains a text field.

To use these states, other containers can send triggers to that container. in practice, i'd add this to the link type menu when selecting a link type (can you tell that i have very minor expirence in javascript and coding of html when it comes to this?). For example, i could map a link to an action, where it sends a trigger to a container that flips between 2 states when recieving said trigger.
(i have seen that on most websites, there will be a "#(something)" added to the domain. maybee something like this allready exists? if yes, i'd like to utilize it.)

This, in my imagination, would allow users of sliex to create interactive elements such at boxes with multiple tabs, or simple sidebars that can be hidden and shown again when pressing a button, which would make making websites still easy.

In code, i would imagine that the simplest solution would be to generate all variations of states on a site and then make code generate for the buttons to act on that, however, i am almost certain that this can be solved by using javascript, too.

I will probably comment on this post again to describe other things i would suggest as feature so that all my suggestions are collected in one place (that way i do not sound like some lunatic in every post and dont have to redescribe certain things, as this would confuse readers, i think).

Depending on where my neurodivergency will drift me today, i might try to recreate the silex editor in figma to make some samples on how this feature could look like in the UX/UI of the web editor, i imagine that that way, my idea can be made more easy to understand. Therefore, i would kindly request my post to not be locked, as that would make me very sad.

If anyone actually read this then thanks 🙂 ill try to respond to comments

lexoyo

Hi KDF_graphics welcome, and thanks for writing this up. No need to apologize, it is clear. What you describe is usually called "states" or "interactions" in other builders, and your examples (tabs, a sidebar you can show and hide) are the right use cases.

Good news: native HTML now covers a lot of this, no JavaScript needed. And since Silex is plain HTML/CSS, you can use it today: adding attributes to elements is a normal part of using Silex (Element settings, then the Attributes section, there is a walkthrough here in the new docs that I am working on). The native building blocks:

popover + popovertarget: a button that shows, hides or toggles any container
command + commandfor (very recent): a button triggering an action on another element
<details name="...">: collapsible blocks that form an exclusive accordion, one open at a time
<dialog>: native dialog boxes, including modals
:target: the "#something" you spotted, the classic way to do tabs with just CSS

A similar suggestion is here: an item for it on the public roadmap, you can vote and add your ideas in the comments, that is what gets looked at when features are prioritized. But I believe this one is more about adding javascript in a nocode way

A question for you: what would help most? Ready-made blocks in the editor for these native elements (feel free to open a new idea on the roadmap for that), or documentation and examples showing how to use them in Silex today? If it is the docs, you could even help write them, every page has an "Edit this page" button and contributions are very welcome.

Your Figma mockups are welcome too. And no worries, threads here do not get locked.

KDF_graphics

lexoyo Thanks for the response! Sorry for being a bit late with responding. Good to know this allready exists in some form, i will definitively take a look at it.

I think some official samples for these elements in editor so people can learn by looking at them and maybe a more intuitive ui solution would be good to have, especialy since this is a pretty essential thing to have.

Once i understand how this works, however i can, i will try to add some explanation to the documentation (however, i dont know exactly where this would be. I haven't written documentation before, so...)

KDF_graphics

lexoyo hi, i've tried to follow the "aria" documentation linked in your post which appears to describe accessibility related features, and i have tried to use the suggested things in this post, however, it appears as if the attributes section does only contain expressions for Filters, as the bold first line in the pupup menu implies-

it appears as if there is no dedicated function for popouts as the phrase itself is not mentioned and does not reference a filter (however the things below section filters also dont seem to be related to anything with filters), this appears to be either unintentional or incorrectly described.

I'd like for there to be a better and more simple way to use this feature as the current way it is used is very unintuitive and doesnt even appear to be accessible using the editor.

The same issues exist for the Visibility conditions and html contens, as they also only contian expressions under section filters. None of them mention popouts.

If the expressions ar elitteraly not in the expression menu but do exist then the feature is broken, and if the expressions are not existing in the words you used then the explanation was missleading.

As of now i am still not able to make registraction cards in UI. i would still like to do so but i am still not able to.

I hope my frustration on this issue and my confusion about is is understandable, thanks in advamce for any response.

lexoyo

Hi @KDF_graphics

Thanks for coming back with the details, and sorry for the slow answer

Nothing is broken, and you did not miss anything obvious. I made a short video that shows both the problem and the solution: https://video.silex.me/w/bFTVxqzbGaCtABMk9MpdAV

What happened: every attribute value has two modes, Fixed and Expression. You switch with the two small buttons on the right of the field. Fixed is a plain text field. Expression is for CMS data. You typed your text in Fixed, then switched to Expression. Your text became a "static text" token, and the menu next to it only lists what can follow a text value, which is a few filters. That is why the section looked like it was only about filters.

The popover attribute is documented here: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/popover

One limit you should know about. Each popover is a separate element, so ten cards means ten popovers, and you design each one. Symbols may help, since a symbol is reused in many places and edited in one place. I have not tested that combination, tell me if it works for you.

Two things I would like your help with, if you can:

First, the docs. You said you wanted to write some. I created an empty page about attributes, with a plan inside it. Nobody has written it yet, so it is yours if you want it: https://docs-66e101.gitlab.io/designer/structure/attributes/ You do not need experience. Write what you would have needed last week. I will review and fix the rest. You just went through the whole problem, so you know exactly where a reader gets lost.
Second, a question. Should we document popover at all? It works in recent versions of Chrome, Edge, Firefox and Safari, which is about 88 percent of users today. On an older browser the attribute is ignored, so the content stays visible instead of hidden. Tell me what you think, and maybe @ceubri @Jeaan-phi our power users