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

Allow print command to target container elements #220

Closed bob2517 closed 9 months ago

bob2517 commented 2 years ago

For some reason or another this morning I was asleep dreaming that I was coding a solution for this, so here's the issue for it before I forget all about it.

If would be good to be able to do this:

print: scope(#myContainer);

... and then have that container printed. Not the whole page - just the container.

This is usually a pain to do, as you have to create an iframe, include the styles and then print the iframe contents. Hiding elements you don't want printed via CSS as a solution would be a naive attempt at this, as that only works on simple pages, and it certainly couldn't be automated in a workable way - it needs to just work without wasting time on pointless setups. Popping up an actual window for printing is not sensible either as we're no longer in the eighties. So Iframe printing is the only sensible way to go.

To resolve styling issues, a stylesheet option could be added. Obviously, an element cloned into an iframe will no longer have its original parents, so the iframe CSS would need to not rely on parents of the container.

Otherwise though, I think this would be a good solution and save developers having to write manual alternatives.

For things like reports that need paging but have pagination already displayed on the front-end with full report data for printing missing, a template tag could be populated with results without the paging, via ajax, and then the print command could be run on that. When done, the template tag could be removed if it's worth it. That technique and also non-ajax printing would work with this command.

print: scope(#myContainer) stylesheet(/css/printstyle.css, /anotherStylesheet.css);

This isn't priority as I don't particularly need it immediately, but as I was coding this in my sleep it's a shame to waste the idea, and I can see a practical need coming up for it soon.

bob2517 commented 2 years ago

So in full, that would expand the existing syntax to:

print: (window | parent | iframe selector | scope(containerSelector) [stylesheet, stylesheet]);

bob2517 commented 9 months ago

Closing - may revisit this later.