Public theme print & javascript

[luku]

UPDATE

Obviously premature issue, it's actually possible to solve it all with print stylesheet and !important override, so no need to add anything into Omeka core. Perhaps, could be useful for someone looking for print tweaks, but feel free to close it.

Hi, this issue is related to themes in general (even admin themes for some), that's why I decided to create new issue in main Omeka repo, but feel free to move it if you think otherwise. The problem occurs everytime you want to print a theme, and there is javascript manipulating the style attribute. With manipulating I mean for example:

• style="overflow:hidden" (image carousel/slideshow, ..) so only one image can be printed, and usually croppped, text overlaps, ...
• style="height: XXpx; width: XXpx" - (read more/less, accordion, ..) - JS powered hidding of too long texts or blocks, causing text in print overlap each other
• absolute positioning - causing gaps in print or overlaps

There may be more examples, these I encountered so far. I have been searching for ways to disable javascript when printing, or at least check if I'm printing and decide which JS code should be executed (because some changes made by JS in print may be desired). I found 3 main approaches:

1. Listen to print-related events in javascript

There is very good article with solution from TJ VanToll. I tested on latest Chrome, FF, IE11, IE edge and it works fine, except from afterPrint, which is not really fired consistently in different browsers. Anyway, beforePrint is what is important for us now and we could add

var beforePrint = function() {
  $(document).trigger('omeka.print.before');
};

And then just listen to this event in JS code that we want to do something in print.

2. Use dummy HTML element

with zero width x height and hidden in print CSS

@media print{
  #print-checker {
    display:none;
  }
}

Then in Javascript we could add:

function isPrinting() {
  return !$('#print-checker:visible').length;
};

3. CSS !important

It seems that using !important in print stylesheet can override inline styles created by JS. So if we are using only one stylesheet for print, this is the least painful way. However, fixing overflow and positioned elements inside carousel/slideshow is almost impossible.

If you know about other ways of achieving this, feel free to comment.

Summary

I think option 1 is better, because it doesn't force us to prepare preview pages using the CSS for print. It also offers way to detect user prints, for stats or so... Option 2 is smaller and doesn't need som much extra JS code, but it doesn't work if you have already rendered page in screen media and then want to print.

What do you think? Is it something that Omeka should have in core, or should I simply use own plugin for this? Sorry for such a long issue:)