Going Fullscreen with Angular Directives

I recently ran across a very nice post on the HTML5 Fullscreen API on David Walsh's Blog and saw an opportunity for incorporating this functionality into an Angular app, utilizing the notion of directive controllers and child directives. Considering David's post does such an excellent job explaining how the Fullscreen API works, please read it first if you're not familiar with this API.

"Parent" Directive and its Controller

The first thing we need to understand is our strategy in using this API and why a directive (or set of directives, in this case) may be a good fit.

Angular directives are very powerful - they can add functionality to an existing scope, create their own isolated scope, and even communicate with each other by requiring each others' controller. For more detailed information on how this works, check out the Angular docs on directives; near the bottom of the page you'll see the section on "Creating Directives that Communicate".

Considering that we can create our directives in such a way that they can communicate with each other, one strategy we could use for incorporating the Fullscreen API is to apply a "parent" directive to the outer-most element of a particular section that should be able to go fullscreen, and have another element inside of that element that has a "child" directive applied to it for toggling fullscreen state. The parent directive will expose a function on its controller to initiate the fullscreen state, which the child directive will use when the toggle is activated. There will also be an event handler exposed from the parent directive so that the child directive can react whenever the container's fullscreen status changes.

Note: It's not necessary to break these up into two separate directives. But, it is simple enough functionality that it makes for a good example to show how this works.

"Child" Directive and Requiring the "Parent"

Now that we have the directive that will take care of implementing how we toggle the fullscreen state on the DOM element, we need something that triggers when this happens. This is going to be a super simple directive, as it only does two things: 1) invoke the fullscreen state and 2) react when the fullscreen state changes.

As I mentioned earlier, it isn't necessary to use two separate directives for this functionality. However, one benefit would be that you could potentially have multiple triggers that are simple to implement and just require the same parent directive. Maybe one piece of content is made fullscreen by a click, while another is made fullscreen by a specific key command, and another by pinch/zoom gestures on a touch device.

One other small detail I wanted to mention is with regards to styling the elements when they are in fullscreen state. This can be done with the following pseudo-selectors: :-webkit-full-screen, :-moz-full-screen, :-ms-fullscreen, :full-screen, and :fullscreen. One thing I found odd when styling these elements is that the styles wouldn't work if I comma-separated the selectors into a single CSS rule - I had to use them individually for them to work properly. Other than that, seems to work pretty nicely in modern browsers!