Active-CSS / active-css

The epic event-driven browser language for UI with functionality in one-liner CSS. Over 100 incredible CSS commands for DOM manipulation, ajax, reactive variables, single-page application routing, and lots more. Could CSS be the JavaScript framework of the future?
https://activecss.org
Other
42 stars 7 forks source link

click-on-next-cycle needs to be able to work on non-focusable elements #143

Closed bob2517 closed 3 years ago

bob2517 commented 3 years ago

I'm preparing a modal gallery with next and previous buttons to showcase the new bookmarkable hash pages for the 2.5.1 SPA upgrade.

It makes the most intuitive sense to make use of the click-on-next-cycle and click-on-previous-cycle commands to cycle through the images from the underlying image grid to popup the next and previous images in the overlaying modal.

To move to the next/previous image, I was going to focus on the image just clicked on, and trigger the next modal popup in the image sequence. The thing is, which I didn't know until today, was that you can't focus on an element that is hidden behind other elements, ie. can't receive user interaction. So that completely busts the command and stops it working intuitively for the developer.

In the core itself I could remember the set when it is first used and just remember what the last focused item was in the set, but I can see that leading to performance issues. What happens if you have just built a spreadsheet and there's a thousand items in the vertical set for ".column-1"? Like when do you clean up the set? When you leave the page? When the commands that reference the set are removed? It's pretty messy doing it like that, from a core point of view. Plus it's a bit messy to have to manually set a focus once something else on the page has got it, which would be the case for popping up a modal window.

So... to get around this I'm going to upgrade the click-on-next-cycle command to accept a starting point selector.

It's easy enough to store a reference (from an attribute in the list image itself) to the currently popped up image in a variable and use that as a starting point selector.

This will be a backward compatible upgrade, and will look like this.

img[data-pop-img]:click {
    var: modalImage "{@data-hash}";
    ... etc. pop stuff up.
}

.spa-modal-right-button:click {
    click-on-next-cycle: img[data-pop-img] starting-from(img[data-hash="{modalImage}"]);
}

and the same will go for the click-on-next, click-on-previous and click-on-previous-cycle commands.

I'm supposed to be packing today for moving house, but will try and squeeze it in this evening and do a commit if all goes well.

bob2517 commented 3 years ago

This is done offline. I've also added a new command replace-hash for this to work properly, to complement add-hash and remove-hash.

Works well, bar one little thing which is more to do with internal SPA handling. So I'll sort that out before committing. For some reason it's working great with the production docs site version, but not for the offline admin area or standalone docs sites.

bob2517 commented 3 years ago

Back onto core work now. Hopefully only one thing left to sort out and then I'll do a commit.

bob2517 commented 3 years ago

This is done and thrash tested to buggery offline on all versions of the docs including the offline one. Will commit once I've removed the thousand console logs and cleaned things up a bit. Then hopefully just the docs to update and 2.5.1 can finally get released...

bob2517 commented 3 years ago

On latest branch. Closing.