Use screenfull.js for fullscreen support
Marcin Kulik
12 years ago
parent
2c02297792
commit
c55b77488d
@ -1,145 +0,0 @@
|
||||
/**
|
||||
* @name jQuery FullScreen Plugin
|
||||
* @author Martin Angelov
|
||||
* @version 1.0
|
||||
* @url http://tutorialzine.com/2012/02/enhance-your-website-fullscreen-api/
|
||||
* @license MIT License
|
||||
*/
|
||||
|
||||
(function($){
|
||||
|
||||
// Adding a new test to the jQuery support object
|
||||
$.support.fullscreen = supportFullScreen();
|
||||
|
||||
// Creating the plugin
|
||||
$.fn.fullScreen = function(props){
|
||||
|
||||
if(!$.support.fullscreen || this.length != 1){
|
||||
|
||||
// The plugin can be called only
|
||||
// on one element at a time
|
||||
|
||||
return this;
|
||||
}
|
||||
|
||||
if(fullScreenStatus()){
|
||||
// if we are already in fullscreen, exit
|
||||
cancelFullScreen();
|
||||
return this;
|
||||
}
|
||||
|
||||
// You can potentially pas two arguments a color
|
||||
// for the background and a callback function
|
||||
|
||||
var options = $.extend({
|
||||
'background' : '#111',
|
||||
'callback' : function(){}
|
||||
}, props);
|
||||
|
||||
// This temporary div is the element that is
|
||||
// actually going to be enlarged in full screen
|
||||
|
||||
var fs = $('<div>',{
|
||||
'css' : {
|
||||
'overflow-y' : 'auto',
|
||||
'background' : options.background,
|
||||
'width' : '100%',
|
||||
'height' : '100%'
|
||||
}
|
||||
});
|
||||
|
||||
var elem = this;
|
||||
|
||||
// You can use the .fullScreen class to
|
||||
// apply styling to your element
|
||||
elem.addClass('fullScreen');
|
||||
|
||||
// Inserting our element in the temporary
|
||||
// div, after which we zoom it in fullscreen
|
||||
fs.insertBefore(elem);
|
||||
fs.append(elem);
|
||||
requestFullScreen(fs.get(0));
|
||||
|
||||
fs.click(function(e){
|
||||
if(e.target == this){
|
||||
// If the black bar was clicked
|
||||
cancelFullScreen();
|
||||
}
|
||||
});
|
||||
|
||||
elem.cancel = function(){
|
||||
cancelFullScreen();
|
||||
return elem;
|
||||
};
|
||||
|
||||
onFullScreenEvent(function(fullScreen){
|
||||
|
||||
if(!fullScreen){
|
||||
|
||||
// We have exited full screen.
|
||||
// Remove the class and destroy
|
||||
// the temporary div
|
||||
|
||||
elem.removeClass('fullScreen').insertBefore(fs);
|
||||
fs.remove();
|
||||
}
|
||||
|
||||
// Calling the user supplied callback
|
||||
options.callback(fullScreen);
|
||||
});
|
||||
|
||||
return elem;
|
||||
};
|
||||
|
||||
|
||||
// These helper functions available only to our plugin scope.
|
||||
|
||||
|
||||
function supportFullScreen(){
|
||||
var doc = document.documentElement;
|
||||
|
||||
return ('requestFullscreen' in doc) ||
|
||||
('mozRequestFullScreen' in doc && document.mozFullScreenEnabled) ||
|
||||
('webkitRequestFullScreen' in doc);
|
||||
}
|
||||
|
||||
function requestFullScreen(elem){
|
||||
|
||||
if (elem.requestFullscreen) {
|
||||
elem.requestFullscreen();
|
||||
}
|
||||
else if (elem.mozRequestFullScreen) {
|
||||
elem.mozRequestFullScreen();
|
||||
}
|
||||
else if (elem.webkitRequestFullScreen) {
|
||||
elem.webkitRequestFullScreen();
|
||||
}
|
||||
}
|
||||
|
||||
function fullScreenStatus(){
|
||||
return document.fullscreen ||
|
||||
document.mozFullScreen ||
|
||||
document.webkitIsFullScreen;
|
||||
}
|
||||
|
||||
function cancelFullScreen(){
|
||||
if (document.exitFullscreen) {
|
||||
document.exitFullscreen();
|
||||
}
|
||||
else if (document.mozCancelFullScreen) {
|
||||
document.mozCancelFullScreen();
|
||||
}
|
||||
else if (document.webkitCancelFullScreen) {
|
||||
document.webkitCancelFullScreen();
|
||||
}
|
||||
}
|
||||
|
||||
function onFullScreenEvent(callback){
|
||||
$(document).on("fullscreenchange mozfullscreenchange webkitfullscreenchange", function(){
|
||||
// The full screen status is automatically
|
||||
// passed to our callback as an argument.
|
||||
callback(fullScreenStatus());
|
||||
});
|
||||
}
|
||||
|
||||
})(jQuery);
|
||||
@ -0,0 +1,103 @@
|
||||
/*global Element */
|
||||
(function( window, document ) {
|
||||
'use strict';
|
||||
|
||||
var keyboardAllowed = typeof Element !== 'undefined' && 'ALLOW_KEYBOARD_INPUT' in Element, // IE6 throws without typeof check
|
||||
|
||||
fn = (function() {
|
||||
var fnMap = [
|
||||
[
|
||||
'requestFullscreen',
|
||||
'exitFullscreen',
|
||||
'fullscreenchange',
|
||||
'fullscreen',
|
||||
'fullscreenElement',
|
||||
'fullscreenerror'
|
||||
],
|
||||
[
|
||||
'webkitRequestFullScreen',
|
||||
'webkitCancelFullScreen',
|
||||
'webkitfullscreenchange',
|
||||
'webkitIsFullScreen',
|
||||
'webkitCurrentFullScreenElement',
|
||||
'webkitfullscreenerror'
|
||||
|
||||
],
|
||||
[
|
||||
'mozRequestFullScreen',
|
||||
'mozCancelFullScreen',
|
||||
'mozfullscreenchange',
|
||||
'mozFullScreen',
|
||||
'mozFullScreenElement',
|
||||
'mozfullscreenerror'
|
||||
]
|
||||
],
|
||||
i = 0,
|
||||
l = fnMap.length,
|
||||
ret = {},
|
||||
val,
|
||||
valLength;
|
||||
|
||||
for ( ; i < l; i++ ) {
|
||||
val = fnMap[ i ];
|
||||
if ( val && val[1] in document ) {
|
||||
for ( i = 0, valLength = val.length; i < valLength; i++ ) {
|
||||
ret[ fnMap[0][ i ] ] = val[ i ];
|
||||
}
|
||||
return ret;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
})(),
|
||||
|
||||
screenfull = {
|
||||
isFullscreen: document[ fn.fullscreen ],
|
||||
element: document[ fn.fullscreenElement ],
|
||||
|
||||
request: function( elem ) {
|
||||
var request = fn.requestFullscreen;
|
||||
|
||||
elem = elem || document.documentElement;
|
||||
elem[ request ]( keyboardAllowed && Element.ALLOW_KEYBOARD_INPUT );
|
||||
|
||||
// Work around Safari 5.1 bug: reports support for
|
||||
// keyboard in fullscreen even though it doesn't.
|
||||
if ( !document.isFullscreen ) {
|
||||
elem[ request ]();
|
||||
}
|
||||
},
|
||||
|
||||
exit: function() {
|
||||
document[ fn.exitFullscreen ]();
|
||||
},
|
||||
|
||||
toggle: function( elem ) {
|
||||
if ( this.isFullscreen ) {
|
||||
this.exit();
|
||||
} else {
|
||||
this.request( elem );
|
||||
}
|
||||
},
|
||||
|
||||
onchange: function() {},
|
||||
onerror: function() {}
|
||||
};
|
||||
|
||||
if ( !fn ) {
|
||||
window.screenfull = null;
|
||||
return;
|
||||
}
|
||||
|
||||
document.addEventListener( fn.fullscreenchange, function( e ) {
|
||||
screenfull.isFullscreen = document[ fn.fullscreen ];
|
||||
screenfull.element = document[ fn.fullscreenElement ];
|
||||
screenfull.onchange.call( screenfull, e );
|
||||
});
|
||||
|
||||
document.addEventListener( fn.fullscreenerror, function( e ) {
|
||||
screenfull.onerror.call( screenfull, e );
|
||||
});
|
||||
|
||||
window.screenfull = screenfull;
|
||||
|
||||
})( window, document );
|
||||
Loading…
Reference in New Issue