2 * jQuery fullscreen plugin v2.0.0-git (9f8f97d127)
3 * https://github.com/theopolisme/jquery-fullscreen
5 * Copyright (c) 2013 Theopolisme <theopolismewiki@gmail.com>
7 * This program is free software; you can redistribute it and/or modify
8 * it under the terms of the GNU General Public License as published by
9 * the Free Software Foundation; either version 2 of the License, or
10 * (at your option) any later version.
12 * This program is distributed in the hope that it will be useful,
13 * but WITHOUT ANY WARRANTY; without even the implied warranty of
14 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
15 * GNU General Public License for more details.
17 * You should have received a copy of the GNU General Public License along
18 * with this program; if not, write to the Free Software Foundation, Inc.,
19 * 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.
23 fsClass = 'jq-fullscreened';
26 * On fullscreenchange, trigger a jq-fullscreen-change event
27 * The event is given an object, which contains the fullscreened DOM element (element), if any
28 * and a boolean value (fullscreen) indicating if we've entered or exited fullscreen mode
29 * Also remove the 'fullscreened' class from elements that are no longer fullscreen
31 function handleFullscreenChange () {
32 var fullscreenElement = document.fullscreenElement ||
33 document.mozFullScreenElement ||
34 document.webkitFullscreenElement ||
35 document.msFullscreenElement;
37 if ( !fullscreenElement ) {
38 $( '.' + fsClass ).data( 'isFullscreened', false ).removeClass( fsClass );
41 $( document ).trigger( $.Event( 'jq-fullscreen-change', { element: fullscreenElement, fullscreen: !!fullscreenElement } ) );
45 * Enters full screen with the "this" element in focus.
46 * Check the .data( 'isFullscreened' ) of the return value to check
47 * success or failure, if you're into that sort of thing.
51 function enterFullscreen () {
52 var element = this.get(0),
53 $element = this.first();
55 if ( element.requestFullscreen ) {
56 element.requestFullscreen();
57 } else if ( element.mozRequestFullScreen ) {
58 element.mozRequestFullScreen();
59 } else if ( element.webkitRequestFullscreen ) {
60 element.webkitRequestFullscreen();
61 } else if ( element.msRequestFullscreen ) {
62 element.msRequestFullscreen();
64 // Unable to make fullscreen
65 $element.data( 'isFullscreened', false );
68 // Add the fullscreen class and data attribute to `element`
69 $element.addClass( fsClass ).data( 'isFullscreened', true );
72 $element.data( 'isFullscreened', false );
78 * Brings the "this" element out of fullscreen.
79 * Check the .data( 'isFullscreened' ) of the return value to check
80 * success or failure, if you're into that sort of thing.
84 function exitFullscreen () {
85 var fullscreenElement = ( document.fullscreenElement ||
86 document.mozFullScreenElement ||
87 document.webkitFullscreenElement ||
88 document.msFullscreenElement );
90 // Ensure that we only exit fullscreen if exitFullscreen() is being called on the same element that is currently fullscreen
91 if ( fullscreenElement && this.get(0) === fullscreenElement ) {
92 if ( document.exitFullscreen ) {
93 document.exitFullscreen();
94 } else if ( document.mozCancelFullScreen ) {
95 document.mozCancelFullScreen();
96 } else if ( document.webkitCancelFullScreen ) {
97 document.webkitCancelFullScreen();
98 } else if ( document.msExitFullscreen ) {
99 document.msExitFullscreen();
101 // Unable to cancel fullscreen mode
104 // We don't need to remove the fullscreen class here,
105 // because it will be removed in handleFullscreenChange.
106 // But we should change the data on the element so the
107 // caller can check for success.
108 this.first().data( 'isFullscreened', false );
115 * Set up fullscreen handling and install necessary event handlers.
116 * Return false if fullscreen is not supported.
118 setupFullscreen = function () {
119 if ( $.support.fullscreen ) {
120 // When the fullscreen mode is changed, trigger the
121 // fullscreen events (and when exiting,
122 // also remove the fullscreen class)
123 $( document ).on( 'fullscreenchange webkitfullscreenchange mozfullscreenchange MSFullscreenChange', handleFullscreenChange);
124 // Convenience wrapper so that one only needs to listen for
125 // 'fullscreenerror', not all of the prefixed versions
126 $( document ).on( 'webkitfullscreenerror mozfullscreenerror MSFullscreenError', function () {
127 $( document ).trigger( $.Event( 'fullscreenerror' ) );
129 // Fullscreen has been set up, so always return true
130 setupFullscreen = function () { return true; };
133 // Always return false from now on, since fullscreen is not supported
134 setupFullscreen = function () { return false; };
140 * Set up fullscreen handling if necessary, then make the first element
141 * matching the given selector fullscreen
145 $.fn.enterFullscreen = function () {
146 if ( setupFullscreen() ) {
147 $.fn.enterFullscreen = enterFullscreen;
148 return this.enterFullscreen();
150 $.fn.enterFullscreen = function () { return this; };
156 * Set up fullscreen handling if necessary, then cancel fullscreen mode
157 * for the first element matching the given selector.
161 $.fn.exitFullscreen = function () {
162 if ( setupFullscreen() ) {
163 $.fn.exitFullscreen = exitFullscreen;
164 return this.exitFullscreen();
166 $.fn.exitFullscreen = function () { return this; };
171 $.support.fullscreen = document.fullscreenEnabled ||
172 document.webkitFullscreenEnabled ||
173 document.mozFullScreenEnabled ||
174 document.msFullscreenEnabled;