' +
'×' +
'Unable to display active content: To use Archive Index type a space, or for URL Index type ' +
'space / , or else switch to Service Worker mode ' +
'if your platform supports it. [Permanently hide]' +
'
';
} else if (params.contentInjectionMode === 'serviceworker' && type === 'legacy') {
alertHTML = '' +
'×' +
'Legacy ZIM type! To display content correctly from this historical ZIM, ' +
'please switch to the legacy JQuery mode. ' +
'You may need to increase font size with zoom buttons at bottom of screen. [Permanently hide]' +
'
';
} else if (params.contentInjectionMode === 'serviceworker' && (params.manipulateImages || params.displayHiddenBlockElements || params.allowHTMLExtraction)) {
alertHTML =
'' +
'×' +
'Active content may not work correctly: Please ' + (params.displayHiddenBlockElements ?
'disable Display hidden block elements ' :
params.manipulateImages ? 'disable Image manipulation ' : '') +
(params.allowHTMLExtraction ? (params.displayHiddenBlockElements || params.manipulateImages ? 'and ' : '') +
'disable Breakout link ' : '') + 'for this content to work properly. To use Archive Index type a space ' +
'in the box above, or space / for URL Index. [Permanently hide]' +
'
';
}
if (type === 'zimit') {
alertHTML =
'' +
'×' +
// '' + (params.contentInjectionMode === 'jquery' ? 'Limited Zimit' : 'Experimental') + ' support: ' +
(params.contentInjectionMode === 'jquery' ? 'Limited Zimit support! Please switch to Service Worker mode if your platform supports it. ' :
'Support for Zimit archives is experimental. Some content (e.g. audio/video) may fail. ') +
'You can search for content above' + (appstate.selectedArchive._file.fullTextIndex ? ' using full-text search if your app supports it, ' +
'or s' : '. S') + 'tart your search with .* to match part of a title. Type a space for the ZIM Archive Index, or ' +
'space / for the URL Index. [Permanently hide]' +
'
';
}
var alertBoxHeader = document.getElementById('alertBoxHeader');
alertBoxHeader.innerHTML = alertHTML;
alertBoxHeader.style.display = 'block';
['swModeLink', 'jqModeLink', 'imModeLink', 'hbeModeLink', 'stop'].forEach(function(id) {
// Define event listeners for both hyperlinks in alert box: these take the user to the Config tab and highlight
// the options that the user needs to select
var modeLink = document.getElementById(id);
if (modeLink) modeLink.addEventListener('click', function () {
var elementID = id === 'stop' ? 'hideActiveContentWarningCheck' :
id === 'swModeLink' ? 'serviceworkerModeRadio' :
id === 'jqModeLink' ? 'jQueryModeRadio' :
id === 'imModeLink' ? 'manipulateImagesCheck' : 'displayHiddenBlockElementsCheck';
var thisLabel = document.getElementById(elementID).parentNode;
thisLabel.style.borderColor = 'red';
thisLabel.style.borderStyle = 'solid';
// Make sure the container is visible
var container = thisLabel.parentNode;
if (!/panel-body/.test(container.className)) {
container = container.parentNode;
}
container.style.display = 'block';
container.previousElementSibling.innerHTML = container.previousElementSibling.innerHTML.replace(/▶/, '▼');
var btnHome = document.getElementById('btnHome');
[thisLabel, btnHome].forEach(function (ele) {
// Define event listeners to cancel the highlighting both on the highlighted element and on the Home tab
ele.addEventListener('mousedown', function () {
thisLabel.style.borderColor = '';
thisLabel.style.borderStyle = '';
});
});
alertBoxHeader.style.display = 'none';
document.getElementById('btnConfigure').click();
});
});
}
/**
* Displays a Bootstrap alert box at the foot of the page to enable saving the content of the given title to the device's filesystem
* and initiates download/save process if this is supported by the OS or Browser
*
* @param {String} title The path and filename to the file to be extracted
* @param {Boolean|String} download A Bolean value that will trigger download of title, or the filename that should
* be used to save the file in local FS
* @param {String} contentType The mimetype of the downloadable file, if known
* @param {Uint8Array} content The binary-format content of the downloadable file
* @param {Boolean} autoDismiss If true, dismiss the alert programmatically
*/
function displayFileDownloadAlert(title, download, contentType, content, autoDismiss) {
// We have to create the alert box in code, because Bootstrap removes it completely from the DOM when the user dismisses it
document.getElementById('alertBoxFooter').innerHTML =
'' +
' ×' +
' ' +
'
';
// Download code adapted from https://stackoverflow.com/a/19230668/9727685
if (!contentType || /application.download/i.test(contentType)) {
// DEV: Add more contentTypes here for downloadable files
contentType =
/\.epub([?#]|$)/i.test(title) ? 'application/epub+zip' :
/\.pdf([?#]|$)/i.test(title) ? 'application/pdf' :
/\.zip([?#]|$)/i.test(title) ? 'application/zip' :
/\.png([?#]|$)/i.test(title) ? 'image/png' :
/\.jpe?g([?#]|$)/i.test(title) ? 'image/jpeg' :
/\.webp([?#]|$)/i.test(title) ? 'image/webp' :
/\.svg([?#]|$)/i.test(title) ? 'image/svg+xml' :
/\.gif([?#]|$)/i.test(title) ? 'image/gif' :
/\.tiff([?#]|$)/i.test(title) ? 'image/tiff' :
/\.mp4([?#]|$)/i.test(title) ? 'video/mp4' :
/\.(webm)([?#]|$)/i.test(title) ? 'video/webm' :
/\.mpeg([?#]|$)/i.test(title) ? 'video/mpeg' :
/\.mp3([?#]|$)/i.test(title) ? 'audio/mpeg' :
// Default contentType if no match:
'application/octet-stream';
}
var a = document.createElement('a');
var blob = new Blob([content], { 'type': contentType });
// If the filename to use for saving has not been specified, construct it from title
var filename = download === true ? title.replace(/^.*\/([^\\/?#&]*).*$/, '$1') : download;
// If not match was possible from the title, give it a generic name
if (filename === title || !filename) filename = 'downloadfile';
// Make filename safe
filename = filename.replace(/[\/\\:*?"<>|#&]/g, '_');
// If the file doesn't have an extension, add one for compatibility with older browsers
if (!/\.(epub|pdf|odt|zip|png|jpe?g|webp|svg|gif|tiff|mp4|webm|mpe?g|mp3)([?#]|$)/i.test(filename)) {
var extension =
/epub/i.test(contentType) ? '.epub' :
/pdf/i.test(contentType) ? '.pdf' :
/opendument/i.test(contentType) ? '.odt' :
/\/zip$/i.test(contentType) ? '.zip' :
/png/i.test(contentType) ? '.png' :
/jpeg/i.test(contentType) ? '.jpeg' :
/webp/i.test(contentType) ? '.webp' :
/svg/i.test(contentType) ? '.svg' :
/gif/i.test(contentType) ? '.gif' :
/tiff/i.test(contentType) ? '.tiff' :
/mp4/i.test(contentType) ? '.mp4' :
/webm/i.test(contentType) ? '.webm' :
/mpeg/i.test(contentType) ? '.mpeg' :
/mp3/i.test(contentType) ? '.mp3' : '';
filename = filename.replace(/^(.*?)([#?]|$)/, '$1' + extension);
}
a.href = window.URL.createObjectURL(blob);
a.target = '_blank';
a.type = contentType;
a.classList.add('alert-link');
a.innerHTML = filename;
var alertMessage = document.getElementById('alertMessage');
alertMessage.innerHTML = 'Download If the download does not start, please tap the following link: ';
// We have to add the anchor to a UI element for Firefox to be able to click it programmatically: see https://stackoverflow.com/a/27280611/9727685
alertMessage.appendChild(a);
// For IE11 we need to force use of the saveBlob method with the onclick event
if (window.navigator && window.navigator.msSaveBlob) {
a.addEventListener('click', function (e) {
window.navigator.msSaveBlob(blob, filename);
e.preventDefault();
});
}
try {
a.click();
// Following line should run only if there was no error, leaving the alert showing in case of error
if (autoDismiss) $('#downloadAlert').alert('close');
return;
}
catch (err) {
// Edge will error out unless there is a download added but Chrome works better without the attribute
a.download = filename;
}
try {
a.click();
// Following line should run only if there was no error, leaving the alert showing in case of error
if (autoDismiss) $('#downloadAlert').alert('close');
}
catch (err) {
// And try to launch through UWP download
if (Windows && Windows.Storage) {
downloadBlobUWP(blob, filename, alertMessage);
if (autoDismiss) $('#downloadAlert').alert('close');
} else {
// Last gasp attempt to open automatically
window.open(a.href);
}
}
}
/**
* Initiates XMLHttpRequest
* Can be used for loading local files; CSP may restrict access to remote files due to CORS
*
* @param {URL} url The Uniform Resource Locator to be read
* @param {String} responseType The response type to return (arraybuffer|blob|document|json|text);
* (passing an empty or null string defaults to text)
* @param {Function} callback The function to call with the result: data, mimetype, and status or error code
*/
function XHR(url, responseType, callback) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function (e) {
if (this.readyState == 4) {
callback(this.response, this.response.type, this.status);
}
};
var err = false;
try {
xhr.open('GET', url, true);
if (responseType) xhr.responseType = responseType;
}
catch (e) {
console.log("Exception during GET request: " + e);
err = true;
}
if (!err) {
xhr.send();
} else {
callback("Error", null, 500);
}
}
/**
* Inserts a link to break the article out to a new browser tab
*
* @param {String} mode The app mode to use for the breakoutLink icon (light|dark)
*/
function insertBreakoutLink(mode) {
var desc = "Open article in new tab or window";
var iframe = document.getElementById('articleContent').contentDocument;
// This code provides an absolute link, removing the file and any query string from href (we need this because of SW mode)
var prefix = (window.location.protocol + '//' + window.location.host + window.location.pathname).replace(/\/[^/]*$/, '');
var div = document.createElement('div');
div.style.cssText = 'top: 10px; right: 25px; position: relative; z-index: 2; float: right;';
div.id = "openInTab";
div.innerHTML = ' + ' "' + desc + '"){kind=icon}
';
iframe.body.insertBefore(div, iframe.body.firstChild);
var openInTab = iframe.getElementById('openInTab');
// Have to use jQuery here becasue e.preventDefault is not working properly in some browsers
$(openInTab).on('click', function() {
itemsCount = false;
params.preloadingAllImages = false;
extractHTML();
return false;
});
}
/**
* Extracts self-contained HTML from the iframe DOM, transforming BLOB references to dataURIs
*/
function extractHTML() {
if (params.preloadingAllImages !== true) {
params.preloadAllImages();
return;
}
var iframe = document.getElementById('articleContent').contentDocument;
// Store the html for the head section, to restore later (in SW mode, stylesheets will be transformed to dataURI links,
// which only work from file:/// URL, due to CORS, so they have to be restored)
var headHtml = iframe.head.innerHTML;
var title = iframe.title;
if (itemsCount === false) {
// Establish the source items that need to be extracted to self-contained URIs
// DEV: Add any further sources to the querySelector below
var items = iframe.querySelectorAll('img[src],link[href][rel="stylesheet"]');
itemsCount = items.length;
Array.prototype.slice.call(items).forEach(function (item) {
// Extract the BLOB itself from the URL (even if it's a blob: URL)
var itemUrl = item.href || item.src;
XHR(itemUrl, 'blob', function (response, mimetype, status) {
if (status == 500) {
itemsCount--;
return;
}
// Pure SVG images may be missing the mimetype
if (!mimetype) mimetype = /\.svg$/i.test(itemUrl) ? 'image/svg+xml' : '';
// Now read the data from the extracted blob
var myReader = new FileReader();
myReader.addEventListener("loadend", function () {
if (myReader.result) {
var dataURL = myReader.result.replace(/data:;/, 'data:' + mimetype + ';');
if (item.href) {
try { item.href = dataURL; }
catch (err) { null; }
}
if (item.src) {
try { item.src = dataURL; }
catch (err) { null; }
}
}
itemsCount--;
if (itemsCount === 0) extractHTML();
});
//Start the reading process.
myReader.readAsDataURL(response);
});
});
}
if (itemsCount > 0) return; //Ensures function stops if we are still extracting images or css
// Construct filename (forbidden characters will be removed in the download function)
var filename = title.replace(/(\.html?)*$/i, '.html');
var html = iframe.documentElement.outerHTML;
// Remove openInTab div (we can't do this using DOM methods because it aborts code spawned from onclick event)
html = html.replace(/\n' +
' ×\n' +
' \n' +
'
\n';
document.getElementById('persistentMessage').innerHTML = 'Version ' + ver +
(url ? ' is available to ' + type + '! Go to ' + url + ''
: ' is ready to ' + type + '! (Re-launch app to ' + type + '.)');
}
/**
* Checks if a server is accessible by attempting to load a test image from the server
*
* @param {String} imageSrc The full URI of the image
* @param {any} onSuccess A function to call if the image can be loaded
* @param {any} onError A function to call if the image cannot be loaded
*/
function checkServerIsAccessible(imageSrc, onSuccess, onError) {
var image = new Image();
image.onload = onSuccess;
image.onerror = onError;
image.src = imageSrc;
}
/**
* Checks whether an element is partially or fully inside the current viewport, and adds the rect.top value to element.top
*
* @param {Window} area The Window to check
* @param {Element} el The DOM element for which to check visibility
* @param {Boolean} fully If true, checks that the entire element is inside the viewport
* @param {Integer} offset An additional bottom (+) or top (-) margin to include in the search window
* @returns {Boolean} True if the element is fully or partially inside the current viewport
*/
function isElementInView(area, el, fully, offset) {
offset = offset || 0;
var rect = el.getBoundingClientRect();
el.top = rect.top;
//console.log(el.dataset.kiwixurl + ': ' + rect.top);
if (fully)
return rect.top > 0 + (offset < 0 ? offset : 0) && rect.bottom < area.innerHeight + (offset > 0 ? offset : 0) && rect.left > 0 && rect.right < area.innerWidth;
else
return rect.top < area.innerHeight + (offset > 0 ? offset : 0) && rect.bottom > 0 + (offset < 0 ? offset : 0) && rect.left < area.innerWidth && rect.right > 0;
}
/**
* Initiates pointer touch events on the given element in order to set the zoom level
*
* @param {Element} element The element to which the pointer events should be attached
* @param {Node} container The node to which the pointer events should be applied, if different
*/
function initTouchZoom(element, container) {
container = container || element;
// Global vars to cache event state
appstate.evCache = new Array();
appstate.prevDiff = -1;
// Set initial element transforms
var contentWin = element.ownerDocument.defaultView || element.ownerDocument.parentWindow;
container.style.transformOrigin = 'left top'; // DEV: To support RTL languages, this should be 'right top'
appstate.windowScale = 1;
appstate.sessionScale = 1;
appstate.startVector = null;
// Install event handlers for the pointer target
element.onpointerdown = pointerdown_handler;
element.onpointermove = function(event) {
pointermove_handler(event, container, contentWin);
};
// Use same handler for pointer{up,cancel,out,leave} events since
// the semantics for these events - in this app - are the same.
element.onpointerup = pointerup_handler;
element.onpointercancel = pointerup_handler;
element.onpointerout = pointerup_handler;
element.onpointerleave = pointerup_handler;
}
function pointerdown_handler(ev) {
// The pointerdown event signals the start of a touch interaction.
// This event is cached to support 2-finger gestures
appstate.evCache.push(ev);
// console.debug('pointerDown', ev);
}
function pointermove_handler(ev, cont, win) {
// This function implements a 2-pointer horizontal pinch/zoom gesture.
// console.debug('pointerMove', ev);
// Find this event in the cache and update its record with this event
for (var i = 0; i < appstate.evCache.length; i++) {
if (ev.pointerId == appstate.evCache[i].pointerId) {
appstate.evCache[i] = ev;
break;
}
}
// If two pointers are down, check for pinch gestures
if (appstate.evCache.length == 2) {
ev.preventDefault();
// Calculate the distance between the two pointers
var x0 = appstate.evCache[0].clientX;
var y0 = appstate.evCache[0].clientY;
var x1 = appstate.evCache[1].clientX;
var y1 = appstate.evCache[1].clientY;
var curDiff = Math.abs(Math.sqrt(Math.pow(x1 - x0, 2) + Math.pow(y1 - y0, 2)));
// console.debug('Current difference: ' + curDiff);
if (appstate.prevDiff > 0) {
if (appstate.startVector === null) {
appstate.startVector = curDiff;
appstate.scrollXStart = win.scrollX / appstate.windowScale;
appstate.scrollYStart = win.scrollY / appstate.windowScale;
// console.debug('scrollXStart: ' + appstate.scrollXStart);
}
appstate.windowScale = appstate.sessionScale * curDiff / appstate.startVector;
// console.debug('winScrollY: ' + win.scrollY);
// console.debug('winScrollX: ' + win.scrollX);
// console.debug('x0x1 mean: ' + (x0 + x1)/2);
// console.debug('y0y1 mean: ' + (y0 + y1)/2);
cont.style.transform = 'scale(' + appstate.windowScale + ')';
win.scrollTo(appstate.scrollXStart * appstate.windowScale, appstate.scrollYStart * appstate.windowScale);
}
// Cache the distance for the next move event
appstate.prevDiff = curDiff;
}
}
function pointerup_handler(ev) {
// console.debug(ev.type, ev);
// Remove this pointer from the cache
remove_event(ev);
// If the number of pointers down is less than two then reset diff tracker
if (appstate.evCache.length < 2) {
appstate.prevDiff = -1;
}
}
function remove_event(ev) {
// Remove this event from the target's cache
for (var i = 0; i < appstate.evCache.length; i++) {
if (appstate.evCache[i].pointerId == ev.pointerId) {
appstate.evCache.splice(i, 1);
break;
}
}
appstate.startVector = null;
appstate.sessionScale = appstate.windowScale;
}
// Reports an error in loading one of the ASM or WASM machines to the UI API Status Panel
// This can't be done in app.js because the error occurs after the API panel is first displayed
function reportAssemblerErrorToAPIStatusPanel(decoderType, error, assemblerMachineType) {
console.error('Could not instantiate any ' + decoderType + ' decoder!', error);
params.decompressorAPI.assemblerMachineType = assemblerMachineType;
params.decompressorAPI.errorStatus = 'Error loading ' + decoderType + ' decompressor!';
var decompAPI = document.getElementById('decompressorAPIStatus');
decompAPI.textContent = 'Decompressor API: ' + params.decompressorAPI.errorStatus;
decompAPI.className = 'apiBroken';
document.getElementById('apiStatusDiv').className = 'panel panel-danger';
}
// Reports the search provider to the API Status Panel
function reportSearchProviderToAPIStatusPanel(provider) {
var providerAPI = document.getElementById('searchProviderStatus');
if (providerAPI) { // NB we need this so that tests don't fail
providerAPI.textContent = 'Search Provider: ' + (/^fulltext/.test(provider) ? 'Title + Xapian [' + provider + ']' :
/^title/.test(provider) ? 'Title only [' + provider + ']' : 'Not initialized');
providerAPI.className = /^fulltext/.test(provider) ? 'apiAvailable' : !/ERROR/.test(provider) ? 'apiUnavailable' : 'apiBroken';
}
}
/**
* Warn the user that he/she clicked on an external link, and open it in a new tab
*
* @param {Event} event The click event (on an anchor) to handle
* @param {Element} clickedAnchor The DOM anchor that has been clicked (optional, defaults to event.target)
*/
function warnAndOpenExternalLinkInNewTab(event, clickedAnchor, message) {
if (event) {
event.preventDefault();
event.stopPropagation();
}
if (!clickedAnchor) clickedAnchor = event.target;
var target = clickedAnchor.target;
var href = clickedAnchor.protocol ? clickedAnchor.href : 'http://' + clickedAnchor.href;
clickedAnchor.type = clickedAnchor.type || (/https:\/\/www.openstreetmap.*?mlat/.test(href) ? 'map' : 'link');
var message = message || 'Click the link to open this external ' + clickedAnchor.type; if (!target || target === '_blank') { target = '_blank'; message += ' (in a new tab)'; } var anchor = '' + clickedAnchor.href + ''; message += ':
' + anchor; var opener = function (response) { if (response) { window.open(href, target); } }; if (params.openExternalLinksInNewTabs) { systemAlert(message, 'Opening external ' + clickedAnchor.type, false, null, null, 'Close'); // Close dialog box if user clicks the link document.getElementById('kiwixExternalLink').addEventListener('click', function (e) { if (/https:\/\/www.openstreetmap.*?mlat/.test(href)) { e.preventDefault(); e.stopPropagation(); window.open(href, target); } document.getElementById('closeMessage').click(); }); } else { opener(true); } } /** * Set up toggles to make Configuration headings collapsible */ function setupConfigurationToggles() { var configHeadings = document.querySelectorAll('.panel-heading'); Array.prototype.slice.call(configHeadings).forEach(function (panelHeading) { var headingText = panelHeading.innerHTML; var panelBody = panelHeading.nextElementSibling; var panelParent = panelHeading.parentElement; var panelPrevious = panelParent ? panelParent.previousElementSibling : null; if (panelPrevious && !/panel\s/.test(panelPrevious.className)) panelPrevious = null; var panelPreviousHeading = panelPrevious ? panelPrevious.querySelector('.panel-heading') : null; var panelNext = panelParent ? panelParent.nextElementSibling : null; if (panelNext && !/panel\s/.test(panelNext.className)) panelPrevious = null; var panelNextHeading = panelNext ? panelNext.querySelector('.panel-heading') : null; panelHeading.addEventListener('click', function () { if (/▶/.test(panelHeading.innerHTML)) { panelHeading.innerHTML = panelHeading.innerHTML.replace(/([▼▶]\s)?/, '▼ '); panelBody.style.display = 'block'; // We're opening, so separate from previous and next if (panelPrevious) panelPrevious.style.marginBottom = null; if (panelParent) panelParent.style.marginBottom = panelNext ? null : 0; // Close all other panels Array.prototype.slice.call(configHeadings).forEach(function (head) { var text = head.innerHTML; if (/▶/.test(text)) return; // Don't close panel for certain cases if (panelHeading === head || /API\sStatus/.test(text + headingText) ||!params.appCache && /Troubleshooting/.test(text)) return; head.click(); }); } else { panelHeading.innerHTML = panelHeading.innerHTML.replace(/([▼▶]\s)?/, '▶ '); panelBody.style.display = 'none'; if (panelPrevious) panelPrevious.style.marginBottom = panelPreviousHeading && /▼/.test(panelPreviousHeading.innerHTML) ? null: 0; if (panelNext) panelParent.style.marginBottom = panelNextHeading && /▼/.test(panelNextHeading.innerHTML) ? null : 0; } }); // Close each heading to begin with, except the first and specials var exceptionTest = function (testStr) { return /Display\ssize|API\sStatus/i.test(testStr) || /Troubleshooting/i.test(testStr) && !params.appCache; } if (panelNext) panelNextHeading.innerHTML = (exceptionTest(panelNextHeading.innerHTML) ? '▼ ' : '▶ ') + panelNextHeading.innerHTML; var icon = exceptionTest(headingText) ? '▼ ' : '▶ '; panelHeading.innerHTML = panelHeading.innerHTML.replace(/([▼▶]\s)?/, icon); if (panelBody && !exceptionTest(headingText)) panelBody.style.display = 'none'; var marginBottom = 0; marginBottom = /▼/.test(panelHeading.innerHTML) ? null : marginBottom; if (panelNext) panelParent.style.marginBottom = /▼/.test(panelNextHeading.innerHTML) ? null : marginBottom; else panelParent.style.marginBottom = 0; }); // Programme the button to toggle all settings document.getElementById('btnToggleSettings').addEventListener('mousedown', function (e) { e.preventDefault(); var open = /Open/.test(e.target.innerHTML); Array.prototype.slice.call(configHeadings).forEach(function (panelHeading) { if (!open && /API\sStatus/.test(panelHeading.innerHTML)) return; if (!open && /▼\sTroubleshooting/.test(panelHeading.innerHTML)) { panelHeading.click(); return; } var panelBody = panelHeading.nextElementSibling; panelHeading.innerHTML = open ? panelHeading.innerHTML.replace(/▶/, '▼') : panelHeading.innerHTML.replace(/▼/, '▶'); panelBody.style.display = open ? 'block' : 'none'; var panelParent = panelHeading.parentElement; if (panelParent) panelParent.style.marginBottom = open ? null: 0; }); if (open) e.target.innerHTML = e.target.innerHTML.replace(/▶\sOpen/, '▼ Close'); else e.target.innerHTML = e.target.innerHTML.replace(/▼\sClose/, '▶ Open'); }); } /** * A function to test whether the app is in full-screen mode * @returns {Boolean} True if the app is in full-screen mode, false otherwise */ function appIsFullScreen() { return !!(document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement); } /** * Puts the requested element into full-screen mode, or cancels full-screen mode if no element is provided * @param {Element} el The element to put into full-screen mode. If not provided, the function will cancel any full-screen mode * @returns {Promise