Print.js: Point me in the right direction: adding media print support

[r3wt]

I want to use print js and i want it to detect and use my @media print{} style block. point me in the right direction for adding this support, so i can get a PR open and merged and hopefully you can crank out a new version asap. i need this bad, so bad i will do the PR myself. just need a bit of a push in the right direction. i'm not super familiar with typescript but i did work on a few angular2/4 projects so i know enough to probably get it done.

[crabbly]

Hi Garrett,
The library itself doesn't use typescript. We just have an interface to be used when imported into a project written with typescript.
The library is written in plain javascript, with ES6 modules. Take a look into the source files.

I have been planing to add CSS media queries support, but couldn't get to it yet. That said, I haven't though about how to deal with it, but most probably just grab all stylesheets that are attached to the current document, and then attach them to the iframe used to print the html data.

One thing to keep in mind, is that the library, currently, process any style applied to each html element being printed. When adding the stylesheets to the iframe, we should not longer process the elements that way, and instead, just leave the styling to stylesheets.

This should then support media queries that are available in the stylesheets. For ex.: @media print

Lastly, if the document has style tags with css written in the document file, we would have to import that into the iframe as well, or just choose to not support it.

If you want to put a PR together, please create a new branch in your forked repo, this way, I can try to help if any changes should be made before merging it into master.
Once merged, I'll publish to npm right away.

Thank you.

[zikk]

Hi,
Why wouldn't you add a parameter to pass a string containing the users CSS like this library does ?
I can't see it being hard to implement.

Edit: tried my hand at it here, please check it out

[crabbly]

Garrett , we merged the PR submitted by Zakaria, which adds a new parameter to pass a css file url. This should add support for CSS media queries, as long the queries are set in the css file passed in.

[zikk]

Actually, you pass a string containing your written string css

[crabbly]

@zikkAbdelaziz Thanks for the update, I got that wrong when merging the PR. I will change it to a use a css url instead. Would it make sense to keep both options?

[r3wt]

@crabbly First, i'd like to thank the crabbly team for their work on this matter. Second, i'd like to think the author of the PR, @zikkAbdelaziz . Thank you Zakaria. Thank you Crabbly Team. I got busy and ended up just bailing on the PR in favor of the path of least resistance, which was just rolling my own using @media print and window.print(). In the future, i'll probably take a look at migrating to this library if it makes sense. Thank you all again for your hard work, i appreciate it, and i'm sure there will be others that will come along to appreciate your hard work as well. Have a blessed day.
Garrett

[zikk]

@r3wt You're welcome
@crabbly Check out #168

[crabbly]

After merging #168 we can now pass custom styles using the style and css properties.
The first will accept a string with custom styles and the later will accept one or more css files urls.
This should complete full support for css media queries.