' +
'×' +
'Unable to display active content: To use Archive Index type a space in the box above, or else ' +
'switch to Service Worker mode ' +
'if your platform supports it. [Permanently hide]' +
'
';
if (params.contentInjectionMode === 'serviceworker' && (params.manipulateImages || params.displayHiddenBlockElements || params.allowHTMLExtraction)) {
alertHTML =
'' +
'×' +
'Active content may be disrupted: 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. [Permanently hide]' +
'
';
}
if (type === 'zimit') {
alertHTML =
'' +
'×' +
'' + (params.contentInjectionMode === 'jquery' ? 'Limited Zimit' : 'Experimental') + ' support: ' +
(params.contentInjectionMode === 'jquery' ? 'Please switch to Service Worker mode if your platform supports it. ' :
'Support for Zimit ZIMs is preliminary. Some content (e.g. audio/video) may fail. ') +
'
Search for your content above. Start your search with .* to match part of a title, ' + 'or type a space to use the Archive Index. ' + '[Permanently hide]' + '
';
}
var alertBoxHeader = document.getElementById('alertBoxHeader');
alertBoxHeader.innerHTML = alertHTML;
alertBoxHeader.style.display = 'block';
['swModeLink', '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 === 'imModeLink' ? 'manipulateImagesCheck' : 'displayHiddenBlockElementsCheck';
var thisLabel = document.getElementById(elementID).parentNode;
thisLabel.style.borderColor = 'red';
thisLabel.style.borderStyle = 'solid';
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 =
'Search for your content above. Start your search with .* to match part of a title, ' + 'or type a space to use the Archive Index. ' + '[Permanently hide]' + '
' +
' ×' +
' ' +
'
';
// 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;
// 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|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' :
/\/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);
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) {
// If the click fails, user may be able to download by manually clicking the link
// But 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();
});
} else {
// 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 + ' 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.innerHTML = 'Decompressor API: ' + params.decompressorAPI.errorStatus;
decompAPI.className = 'apiBroken';
document.getElementById('apiStatusDiv').className = 'panel panel-danger';
}
/**
* 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) {
if (event) {
event.preventDefault();
event.stopPropagation();
}
if (!clickedAnchor) clickedAnchor = event.target;
var target = clickedAnchor.target;
var href = clickedAnchor.protocol ? clickedAnchor.href : 'http://' + clickedAnchor.href;
var message = 'Do you want to open this external link?'; if (!target || target === '_blank') { message += ' (in a new tab)'; } message += '
' + clickedAnchor.href + '
'; if (params.openExternalLinksInNewTabs) { systemAlert(message, 'Opening external link', true).then(function (response) { if (response) { if (!target) target = '_blank'; window.open(href, target); } }); } else { if (!target) target = '_blank'; window.open(href, target); } } /** * Finds the closest or enclosing tag of an element. * Returns undefined if there isn't any. * * @param {Element} element The element to test * @returns {Element} closest enclosing anchor tag (if any) */ function closestAnchorEnclosingElement(element) { if (Element.prototype.closest) { // Recent browsers support that natively. See https://developer.mozilla.org/en-US/docs/Web/API/Element/closest return element.closest('a,area'); } else { // For other browsers, notably IE, we do that by hand (we did not manage to make polyfills work on IE11) var currentElement = element; while (currentElement.tagName !== 'A' && currentElement.tagName !== 'AREA') { // If there is no parent Element, we did not find any enclosing A tag if (!currentElement.parentElement) { return; } else { // Else we try the next parent Element currentElement = currentElement.parentElement; } } // If we reach this line, it means the currentElement is the enclosing Anchor we're looking for return currentElement; } } // If global variable webpMachine is true (set in init.js), then we need to initialize the WebP Polyfill if (webpMachine) webpMachine = new webpHero.WebpMachine(); /** * Functions and classes exposed by this module */ return { systemAlert: systemAlert, showUpgradeReady: showUpgradeReady, feedNodeWithBlob: feedNodeWithBlob, deriveZimUrlFromRelativeUrl: deriveZimUrlFromRelativeUrl, getClosestMatchForTagname: getClosestMatchForTagname, removeUrlParameters: removeUrlParameters, toc: TableOfContents, isElementInView: isElementInView, makeReturnLink: makeReturnLink, pollSpinner: pollSpinner, clearSpinner: clearSpinner, XHR: XHR, printCustomElements: printCustomElements, downloadBlobUWP: downloadBlobUWP, displayActiveContentWarning: displayActiveContentWarning, displayFileDownloadAlert: displayFileDownloadAlert, insertBreakoutLink: insertBreakoutLink, extractHTML: extractHTML, checkServerIsAccessible: checkServerIsAccessible, initTouchZoom: initTouchZoom, reportAssemblerErrorToAPIStatusPanel: reportAssemblerErrorToAPIStatusPanel, warnAndOpenExternalLinkInNewTab: warnAndOpenExternalLinkInNewTab, closestAnchorEnclosingElement: closestAnchorEnclosingElement }; });