Of all the APIs that we'll discuss in this chapter, fullscreen is the simplest to understand and use. As you might have guessed, what this API allows you to do is set an HTML element node that can be presented in the fullscreen mode.
Note that, although the first Editor's Draft (the maturation level that comes before a recommended standard becomes a Working Draft) for the fullscreen mode was published in October 2011, the specification is still in its early drafting stages. (refer to the following article for more information: Using fullscreen mode, (July 2014). https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode).
As for the current browser support, you will find that it is pretty safe to use the API in all modern browsers, although today there are subtle differences in implementation as well as how you should enable the fullscreen mode.
The main thing to keep in mind when using fullscreen is that you must set a single element to the fullscreen mode. This element can indeed have a subtree of element nodes, but you will still need to enable the fullscreen mode on a particular element. In the context of game development, you will most likely set the main canvas element to fullscreen, but this is not a hard requirement. You could just as well request that the browser make the entire document fullscreen by calling the requetFullscreen() method on the body element.
There are two methods that are involved in setting an element in the fullscreen mode, and removing an element from the fullscreen mode. The methods are requestFullscreen and exitFullscreen respectively. Note that as of this writing, all major browsers implement these methods under their individual vendor prefix.
In addition, remember that the fullscreen mode cannot be enabled unless a user-initiated event makes the request to the browser. In other words, you cannot simply attempt to change the body element to fullscreen as soon as your DOM has loaded. Likewise, you cannot programmatically fire a DOM event (such as triggering a fake click on the page or using JavaScript to scroll the page, thus firing an onScroll event) and use the event handler callback to trick the browser into thinking that it was the user that initiated the action.
<!doctype html>
<html>
<head>
<title> Fullscreen</title>
<!-- [some custom CSS here, left out for brevity] -->
</head>
<body>
<ul>
<li>
<span>1</span>
</li>
<li>
<span>O</span>
</li>
<li>
<span>O</span>
</li>
<li>
<span>1</span>
</li>
</ul>
<script>
var list = document.querySelector('ul'),
list.addEventListener('click', function (event) {
var block = event.target;
block.requestFullscreen();
});
</script>
</body>
</html>The preceding code demonstrates how to set an element to the fullscreen mode after that element receives a click. In this case, you may have noticed that we assume that whatever browser executes that code will have dropped their vendor support, and we can simply call requestFullscreen() as it was intended.
A better way to go about this today, since browsers have not yet implemented the specification without a vendor prefixing the API, is to use a polyfill or helper function that detects whether a vendor prefix is needed and does what is needed to make it work.
var reqFullscreen = (function () {
var method = (function () {
var el = document.createElement('div'),
var supported = '';
var variations = [
'requestFullscreen',
'msRequestFullscreen',
'mozRequestFullScreen',
'webkitRequestFullscreen'
];
variations.some(function (method) {
supported = method;
return el[method] instanceof Function;
});
return supported;
}());
return function (element) {
element[method]();
};
}());
var list = document.querySelector('ul'),
list.addEventListener('click', function (event) {
var block = event.target;
reqFullscreen(block);
});The preceding sample code creates a function called reqFullscreen, which does the heavy lifting for us by determining if a vendor prefix is needed; it then remembers which version of the fullscreen request needs to be made. We then call that function when we want the element to go the fullscreen mode, by passing it within the element.
Note
It seems that the makers of browsers have the goal to make experimental APIs as confusing as possible for end users. In the case of fullscreen, note that the specification names the interface functions as requestFullscreen and exitFullscreen (where the word Fullscreen only capitalizes the first letter).
Every vendor prefix, except for Mozilla Firefox, follows the specification with regards to the function names—that is, webkitRequestFullscreen and msRequestFullscreen. Mozilla Firefox differs because it implements mozRequestFullScreen, which differs from the other vendors since it spells FullScreen as two words in the camel case. As a final detail, the folks at Webkit decided to please both the sides of the crowd by implementing both the versions: webkitRequestFullscreen and webkitRequestFullScreen.
In the previous image, our page is not in the the fullscreen mode. However, when you click on one of the elements, that element is presented in the fullscreen mode:
You may observe that the only requirement that the browser imposes is that a user action must initiate the request to enable fullscreen. This does not mean that the action must be on the same element that is set to fullscreen, as shown in the following example:
var list = document.querySelector('ul'),
var btn = document.querySelector('button'),
btn.addEventListener('click', function (event) {
// Somehow determine what element to use
var firstBlock = list.children[0].children[0];
reqFullscreen(firstBlock);
});The preceding example binds to a button element. then add a click handler that sets some other element to enable in fullscreen mode.
We can check whether a specific element is in the fullscreen mode by looking up an automatically updated property of the document object.
var element = document.webkitFullscreenElement;
When you run the previous statement, it will return a reference to any element that's currently in the fullscreen mode; otherwise, it will return a null value.
We can also query the document to test whether the document can be enabled as fullscreen.
var canFullscreen = document.webkitFullscreenEnabled; // => bool
Finally, there is a special CSS pseudo selector that allows us to target the element in fullscreen. Again, this selector is also vendor prefixed as of this moment.
full-screen,
:-moz-full-screen,
:-moz-full-screen-ancestor,
:-webkit-full-screen {
font-size: 50vw;
line-height: 1.25;
/* … */
}Note that the selector targets the very element that called requestFullscreen. In the preceding example, the styles specified before apply to the ul li span.