Fullscreen API class

about.md

This is a wrapper class for the fullscreen API. It should make it easier to use.

It is supported in the latest versions of Chrome and Safari. It will be supported in Firefox in version 10 (which is released tomorrow).

All calls to activate fullscreen have to be made from a user action. So a button click for example.

Here are some useful links. To run the example it has to be run on its own page, not an iframe. So I have linked to where the iframe points in jsFiddle.

• MDN post
• Example of this class (jsFiddle iframe output)
• Example of this class (jsFiddle page)

fullscreen.js

(function(exports) {
	'use strict';
	
	/**
	 * Class for handling fullscreen calls across modern browsers
	 * 
	 * @param {Element} target Optional element to make fullscreen, defaults to the whole document
	 */
	function Fullscreen(target) {
		// Store the target
		// Default to the whole document
		this.target = target || document.documentElement;
	}
	
	/**
	 * Requests the browser to enter fullscreen mode
	 */
	Fullscreen.prototype.request = function() {
		// Initialise variables
		var doc = this.target;
		
		// Request full screen
		if(doc.requestFullscreen) {
			doc.requestFullscreen();
		}
		else if(doc.mozRequestFullScreen) {
			doc.mozRequestFullScreen();
		}
		else if(doc.webkitRequestFullScreen) {
			doc.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
		}
	};
	
	/**
	 * Exits fullscreen mode
	 */
	Fullscreen.prototype.exit = function() {
		// Initialise variables
		var doc = document;
		
		// Exit full screen
		if(doc.exitFullscreen) {
			doc.exitFullscreen();
		}
		else if(doc.mozCancelFullScreen) {
			doc.mozCancelFullScreen();
		}
		else if(doc.webkitCancelFullScreen) {
			doc.webkitCancelFullScreen();
		}
	};
	
	// Expose the class
	exports.Fullscreen = Fullscreen;
}(this));

fullscreen.min.js

(function(a){function b(a){this.target=a||document.documentElement}"use strict",b.prototype.request=function(){var a=this.target;a.requestFullscreen?a.requestFullscreen():a.mozRequestFullScreen?a.mozRequestFullScreen():a.webkitRequestFullScreen&&a.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT)},b.prototype.exit=function(){var a=document;a.exitFullscreen?a.exitFullscreen():a.mozCancelFullScreen?a.mozCancelFullScreen():a.webkitCancelFullScreen&&a.webkitCancelFullScreen()},a.Fullscreen=b})(this)

Maybe let the Fullscreen() accept a DOM element?

Oh, I did not realise that was even possible. I thought using document.documentElement was a little strange. Will do! Thanks.

@sindresorhus Okay, done. Just updated Firefox to v10 and it now supports it too.