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