JSFiddle - React, Tailwind, and code Playground
by darcyclarke
JavaScript
//
// FullScreen Plugin
//
// Adds:
// $.support.fullscreen (a boolean for RequestFullScreen support)
// :fullscreen pseudo selector & filter (.is .find .filter)
// $(el).bind("fullscreenchange",fn)
// $(el).trigger("openFullScreen", fn) or $(el).openFullScreen(fn)
// $(el).trigger("closeFullScreen", fn) or $(el).closeFullScreen(fn)
//
// Uses:
// :-webkit-full-screen and :-moz-fullscreen (no fallback)
// webkitfullscreenchange, mozfullscreenchange and falls back to load / unload events with popup
//
//
(function($){
//
// Helpers
//
$.fullscreen = $.fs = {};
// Settings
$.fs.callback = function(cb){
if(!$.fs.loaded){
$.fs.loaded = true;
cb.call($.fs.window_handler);
}
};
$.fs.timeout = 50;
$.fs.loaded = false;
$.fs.fallback = true;
$.fs.window_handler = window;
$.fs.window_name = 'fullscreen';
$.fs.window_url = '';
$.fs.window_settings = {
height: window.screen.height,
width: window.screen.width,
directories: 0,
location: 0,
menubar: 0,
resizable: 0,
status: 0,
toolbar: 0,
scrollbars: 0
};
// Vendor Prefixes
$.fs.prefixes = '-webkit- -moz- -o- -ms- -khtml- '.split(' ');
$.fs.domPrefixes = 'Webkit Moz O ms Khtml '.split(' '),
// Events to Bind/Unbind
$.fs.change = 'fullscreenchange'.split(' ');
$.fs.request = 'requestFullScreen RequestFullScreen RequestFullscreen'.split(' ');
$.fs.cancel = 'cancelFullScreen CancelFullScreen ExitFullscreen'.split(' ');
// Pseudo Selector
$.fs.selectors = 'full-screen';
// Element we use to test against
$.fs.Elem = document.createElement('div');
// Supports Event
$.fs.isEventSupported = function(eventName) {
var el = $.fs.Elem;
eventName = eventName;
var isSupported = (eventName in el);
...