Add fullscreen screenshots button

[thomas-ashcraft]

Simple button which activates fullscreen mode to comfortly view screenshots at store pages.

How it looks like:

Try out
You can try it by installing userscript from here:
https://gist.github.com/thomas-ashcraft/00e58a0141fda12199d5e1fdee821ecf
Code is completely the same.

Technical notes:

I have tested unpacked ES with that code in Chrome. Everything works perfecrly. The code in userscript also have been tested in Firefox. Also works perfect.

Buttons at the fullscreen mode visible only when footer is :hover.

"Previous" button also triggers by pressing left part of the screen.

There is 3 prefixes around: moz, webkit and ms. I didnt included ms because it only for IE, and ES are not supposed to work with it. In case ES eventually comes to Edge: it uses webkit prefix.

In perfect world there is should be a :fullscreen pseudo-class. But right now for a proper working, CSS should be written completely separately for every each prefix. Should not stack through comma to write one rule for a different prefixes. To avoid multiply CSS strings I used fullscreenchange event hook to add/remove custom es_fullscreen class which I basically used as :fullscreen pseudo. Like if it was finally properly implemented by all browsers.

There is one more trick: css hook which triggers JS code which applies button every time screenshot_popup_modal appears in DOM. Theoretically there is may be a way to apply this button only once if someone knows a way how to edit screenshot_popup_modal template at internal Steam's functions. But it's not a fact.

[Revadike]

Perhaps move this to Augmented Steam instead?

[thomas-ashcraft]

Perhaps move this to Augmented Steam instead?

A good idea. I will do it very soon. Perhaps partially from scratch, to make better code quality.

[thomas-ashcraft]

Looks like there was a lot of progress in fullscreen api support among major browsers for a last year. I will check all of this more detailly and try to make proper code for "AS" today.