kiwix/kiwix-js-pwa
1
0
Fork 0
mirror of https://github.com/kiwix/kiwix-js-pwa.git synced 2025-09-09 20:32:45 -04:00
Code Issues Packages Projects Releases Wiki Activity

ES Lint issues

Browse Source
This commit is contained in:
Jaifroid 2023-07-14 13:23:39 +01:00
parent 98e7409d95
commit e96c4fc3d8
3 changed files with 91 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
www/js/app.js
View File

@ -5855,8 +5855,10 @@ params.preloadAllImages = function () {
} }
}, 1000); }, 1000);
params.preloadingAllImages = true; params.preloadingAllImages = true;
if (params.imageDisplay) params.contentInjectionMode === 'jquery' if (params.imageDisplay) {
params.contentInjectionMode === 'jquery'
? images.prepareImagesJQuery(articleWindow, true) : images.prepareImagesServiceWorker(articleWindow, true); ? images.prepareImagesJQuery(articleWindow, true) : images.prepareImagesServiceWorker(articleWindow, true);
}
return; return;
} }
// All images should now be loaded, or else user did not request loading images // All images should now be loaded, or else user did not request loading images

169
www/js/lib/images.js
View File

@ -1,45 +1,48 @@
/** /**
* images.js : Functions for the processing of images * images.js : Functions for the processing of images
* *
* Copyright 2013-2019 Mossroy and contributors * Copyright 2013-2019 Mossroy and contributors
* License GPL v3: * License GPL v3:
* *
* This file is part of Kiwix. * This file is part of Kiwix.
* *
* Kiwix is free software: you can redistribute it and/or modify * Kiwix is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by * it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or * the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version. * (at your option) any later version.
* *
* Kiwix is distributed in the hope that it will be useful, * Kiwix is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of * but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details. * GNU General Public License for more details.
* *
* You should have received a copy of the GNU General Public License * You should have received a copy of the GNU General Public License
* along with Kiwix (file LICENSE-GPLv3.txt). If not, see <http://www.gnu.org/licenses/> * along with Kiwix (file LICENSE-GPLv3.txt). If not, see <http://www.gnu.org/licenses/>
*/ */
/** /**
* images.js : Functions for the processing of images * images.js : Functions for the processing of images
* *
* Copyright 2013-2019 Mossroy and contributors * Copyright 2013-2019 Mossroy and contributors
* License GPL v3: * License GPL v3:
* *
* This file is part of Kiwix. * This file is part of Kiwix.
* *
* Kiwix is free software: you can redistribute it and/or modify * Kiwix is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by * it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or * the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version. * (at your option) any later version.
* *
* Kiwix is distributed in the hope that it will be useful, * Kiwix is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of * but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details. * GNU General Public License for more details.
* *
* You should have received a copy of the GNU General Public License * You should have received a copy of the GNU General Public License
* along with Kiwix (file LICENSE-GPLv3.txt). If not, see <http://www.gnu.org/licenses/> * along with Kiwix (file LICENSE-GPLv3.txt). If not, see <http://www.gnu.org/licenses/>
*/ */
/* global params, appstate, Windows, articleContainer */
'use strict'; 'use strict';
import uiUtil from './uiUtil.js'; import uiUtil from './uiUtil.js';
@ -63,7 +66,7 @@ var abandon = false;
* A regular expression to find or transform image URLs in an article * A regular expression to find or transform image URLs in an article
* DEV: make sure list of file types here is the same as the list in Service Worker code * DEV: make sure list of file types here is the same as the list in Service Worker code
*/ */
var imageURLRegexp = /(^|\/).+\.(jpe?g|png|svg|gif|webp)($|[?#])/i; var imageURLRegexp = /(^|\/).+\.(jpe?g|png|svg|gif|webp)($|[?#])/i;
/** /**
* A regular expression to find MathTex in an image * A regular expression to find MathTex in an image
@ -73,11 +76,11 @@ var transformMathTextRegexp = /<img\s+(?=[^>]+?math-fallback-image)[^>]*?alt\s*=
/** /**
* Iterates over an array or collection of image nodes, extracting the image data from the ZIM * Iterates over an array or collection of image nodes, extracting the image data from the ZIM
* and inserting a BLOB URL to each image in the image's src attribute * and inserting a BLOB URL to each image in the image's src attribute
* *
* @param {Object} images An array or collection of DOM image nodes * @param {Object} images An array or collection of DOM image nodes
* @param {Function} callback An optional function to call when all requested images have been loaded * @param {Function} callback An optional function to call when all requested images have been loaded
*/ */
function extractImages(images, callback) { function extractImages (images, callback) {
var remaining = images.length; var remaining = images.length;
if (!remaining && callback) callback(); if (!remaining && callback) callback();
var checkBatch = function () { var checkBatch = function () {
@ -94,7 +97,7 @@ function extractImages(images, callback) {
var imageUrl = image.getAttribute('data-kiwixurl'); var imageUrl = image.getAttribute('data-kiwixurl');
if (!imageUrl) { remaining--; return; } if (!imageUrl) { remaining--; return; }
// Create data-kiwixsrc needed for stylesheets // Create data-kiwixsrc needed for stylesheets
else { image.setAttribute('data-kiwixsrc', imageUrl); } else { image.setAttribute('data-kiwixsrc', imageUrl); }
image.removeAttribute('data-kiwixurl'); image.removeAttribute('data-kiwixurl');
var title = decodeURIComponent(imageUrl); var title = decodeURIComponent(imageUrl);
extractorBusy++; extractorBusy++;
@ -145,15 +148,15 @@ function extractImages(images, callback) {
/** /**
* Iterates over an array or collection of image nodes, preparing each node for manual image * Iterates over an array or collection of image nodes, preparing each node for manual image
* extraction when user taps the indicated area * extraction when user taps the indicated area
* *
*/ */
function prepareManualExtraction(win) { function prepareManualExtraction (win) {
container = win; container = win;
var doc = container.document; var doc = container.document;
var documentImages = doc.querySelectorAll('img'); var documentImages = doc.querySelectorAll('img');
for (var i = 0, l = documentImages.length; i < l; i++) { for (var i = 0, l = documentImages.length; i < l; i++) {
var originalHeight = documentImages[i].getAttribute('height') || ''; var originalHeight = documentImages[i].getAttribute('height') || '';
//Ensure 36px clickable image height so user can request images by tapping // Ensure 36px clickable image height so user can request images by tapping
documentImages[i].height = '36'; documentImages[i].height = '36';
documentImages[i].style.background = 'lightblue'; documentImages[i].style.background = 'lightblue';
documentImages[i].style.opacity = '1'; documentImages[i].style.opacity = '1';
@ -169,11 +172,11 @@ function prepareManualExtraction(win) {
// DEV: Algorithm below doesn't queue webp images correctly, so for now we will extract images // DEV: Algorithm below doesn't queue webp images correctly, so for now we will extract images
// only one-by-one on image click // only one-by-one on image click
// var visibleImages = queueImages('poll', 0, function() { extractImages(visibleImages); }).visible; // var visibleImages = queueImages('poll', 0, function() { extractImages(visibleImages); }).visible;
// visibleImages.forEach(function (image) { // visibleImages.forEach(function (image) {
// image.style.opacity = '0'; // image.style.opacity = '0';
// if (image.dataset.kiwixheight) image.height = image.dataset.kiwixheight; // if (image.dataset.kiwixheight) image.height = image.dataset.kiwixheight;
// else image.removeAttribute('height'); // else image.removeAttribute('height');
//}); // });
thisImage.style.opacity = '0'; thisImage.style.opacity = '0';
if (thisImage.dataset.kiwixheight) thisImage.height = thisImage.dataset.kiwixheight; if (thisImage.dataset.kiwixheight) thisImage.height = thisImage.dataset.kiwixheight;
else thisImage.removeAttribute('height'); else thisImage.removeAttribute('height');
@ -187,21 +190,21 @@ var imageStore = [];
var maxImageBatch = 1; var maxImageBatch = 1;
/** /**
* Sorts an array or collection of image nodes, returning a list of those that are inside the visible viewport * Sorts an array or collection of image nodes, returning a list of those that are inside the visible viewport
* *
* @param {Array} docImgs The array of images to process * @param {Array} docImgs The array of images to process
* @param {String} action If null, imageStore only will be processed; if 'extract', documentImages in viewport will be * @param {String} action If null, imageStore only will be processed; if 'extract', documentImages in viewport will be
* extracted; if 'poll', will just return the visible and remaining image arrays * extracted; if 'poll', will just return the visible and remaining image arrays
* @param {Number} margin An extra margin to add to the top (-) or bottom (+) of windows.innerHeight * @param {Number} margin An extra margin to add to the top (-) or bottom (+) of windows.innerHeight
* @param {Function} callback Function to call when last image has been extracted (only called if <extract> is true) * @param {Function} callback Function to call when last image has been extracted (only called if <extract> is true)
* @returns {Object} An object with two arrays of images, visible and remaining * @returns {Object} An object with two arrays of images, visible and remaining
*/ */
function queueImages(docImgs, action, margin, callback) { function queueImages (docImgs, action, margin, callback) {
if (abandon) { if (abandon) {
for (var q = imageStore.length; q--;) { for (var q = imageStore.length; q--;) {
imageStore[q].queued = false; imageStore[q].queued = false;
} }
//console.log('User scrolled: abandoning image queue...') // console.log('User scrolled: abandoning image queue...')
imageStore = []; imageStore = [];
} }
if (imageStore.length && !extractorBusy) { if (imageStore.length && !extractorBusy) {
@ -212,7 +215,7 @@ function queueImages(docImgs, action, margin, callback) {
var visible = []; var visible = [];
var remaining = []; var remaining = [];
var batchCount = 0; var batchCount = 0;
//console.log('Images requested...'); // console.log('Images requested...');
for (var i = 0, l = docImgs.length; i < l; i++) { for (var i = 0, l = docImgs.length; i < l; i++) {
if (docImgs[i].queued || docImgs[i].tagName === 'IMG' && !docImgs[i].dataset.kiwixurl) continue; if (docImgs[i].queued || docImgs[i].tagName === 'IMG' && !docImgs[i].dataset.kiwixurl) continue;
if (uiUtil.isElementInView(container, docImgs[i], null, margin)) { if (uiUtil.isElementInView(container, docImgs[i], null, margin)) {
@ -232,18 +235,18 @@ function queueImages(docImgs, action, margin, callback) {
} }
} else { } else {
remaining.push(docImgs[i]); remaining.push(docImgs[i]);
} }
} }
// Callback has to be run inside a timeout because receiving function will expect the visible and remaining arrays to // Callback has to be run inside a timeout because receiving function will expect the visible and remaining arrays to
// have been returned before running callback code; NB if images have been scheduled for extraction, callback will be // have been returned before running callback code; NB if images have been scheduled for extraction, callback will be
// called above instead of here, but we still need this in case there are no immediately visible images // called above instead of here, but we still need this in case there are no immediately visible images
if (callback && !batchCount) setTimeout(callback); if (callback && !batchCount) setTimeout(callback);
return { 'visible': visible, 'remaining': remaining }; return { visible: visible, remaining: remaining };
} }
/** /**
* Prepares the article container in order to process the image nodes that have been disabled in Service Worker * Prepares the article container in order to process the image nodes that have been disabled in Service Worker
* *
* @param {Window} win The Window of the iframe tab that contains the document * @param {Window} win The Window of the iframe tab that contains the document
* @param {Boolean} forPrinting If true, extracts all images * @param {Boolean} forPrinting If true, extracts all images
*/ */
@ -252,12 +255,12 @@ function prepareImagesServiceWorker (win, forPrinting) {
var doc = container.document; var doc = container.document;
var documentImages = doc.querySelectorAll('img:not([src^="data:"])'); var documentImages = doc.querySelectorAll('img:not([src^="data:"])');
// Schedule loadMathJax here in case next line aborts this function // Schedule loadMathJax here in case next line aborts this function
setTimeout(function() { setTimeout(function () {
loadMathJax(); loadMathJax();
}, 1000); }, 1000);
if (!forPrinting && !documentImages.length) return; if (!forPrinting && !documentImages.length) return;
var imageHtml; var imageHtml;
var indexRoot = window.location.pathname.replace(/[^\/]+$/, '') + encodeURI(appstate.selectedArchive._file.name) + '/'; var indexRoot = window.location.pathname.replace(/[^/]+$/, '') + encodeURI(appstate.selectedArchive._file.name) + '/';
for (var i = 0, l = documentImages.length; i < l; i++) { for (var i = 0, l = documentImages.length; i < l; i++) {
// Process Wikimedia MathML, but not if we'll be using the jQuery routine later // Process Wikimedia MathML, but not if we'll be using the jQuery routine later
if (!(params.manipulateImages || params.allowHTMLExtraction)) { if (!(params.manipulateImages || params.allowHTMLExtraction)) {
@ -281,7 +284,7 @@ function prepareImagesServiceWorker (win, forPrinting) {
documentImages[i].style.opacity = '0'; documentImages[i].style.opacity = '0';
} }
if (params.manipulateImages || params.allowHTMLExtraction) { if (params.manipulateImages || params.allowHTMLExtraction) {
documentImages[i].outerHTML = documentImages[i].outerHTML.replace(params.regexpTagsWithZimUrl, function(match, blockStart, equals, quote, relAssetUrl, blockEnd) { documentImages[i].outerHTML = documentImages[i].outerHTML.replace(params.regexpTagsWithZimUrl, function (match, blockStart, equals, quote, relAssetUrl, blockEnd) {
var parameters = relAssetUrl.replace(/^[^?]+/, ''); var parameters = relAssetUrl.replace(/^[^?]+/, '');
var assetZIMUrlEnc; var assetZIMUrlEnc;
if (params.zimType === 'zimit' && !relAssetUrl.indexOf(indexRoot)) { if (params.zimType === 'zimit' && !relAssetUrl.indexOf(indexRoot)) {
@ -316,7 +319,7 @@ function prepareImagesServiceWorker (win, forPrinting) {
}, 0); }, 0);
} else { } else {
// We need to start detecting images after the hidden articleContent has been displayed (otherwise they are not detected) // We need to start detecting images after the hidden articleContent has been displayed (otherwise they are not detected)
setTimeout(function() { setTimeout(function () {
lazyLoad(documentImages); lazyLoad(documentImages);
}, 400); }, 400);
} }
@ -326,7 +329,7 @@ function prepareImagesServiceWorker (win, forPrinting) {
/** /**
* Prepares the article container in order to process the image nodes that have been disabled in the DOM * Prepares the article container in order to process the image nodes that have been disabled in the DOM
* *
* @param {Window} win The Window of the iframe or tab that contains the document * @param {Window} win The Window of the iframe or tab that contains the document
* @param {Boolean} forPrinting If true, extracts all images * @param {Boolean} forPrinting If true, extracts all images
*/ */
@ -334,12 +337,12 @@ function prepareImagesJQuery (win, forPrinting) {
container = win; container = win;
var doc = container.document; var doc = container.document;
var documentImages = doc.querySelectorAll('img[data-kiwixurl], video, audio'); var documentImages = doc.querySelectorAll('img[data-kiwixurl], video, audio');
var indexRoot = window.location.pathname.replace(/[^\/]+$/, '') + encodeURI(appstate.selectedArchive._file.name) + '/'; var indexRoot = window.location.pathname.replace(/[^/]+$/, '') + encodeURI(appstate.selectedArchive._file.name) + '/';
indexRoot = indexRoot.replace(/^\//, ''); indexRoot = indexRoot.replace(/^\//, '');
// Zimit ZIMs work better if all images are extracted // Zimit ZIMs work better if all images are extracted
if (params.zimType === 'zimit') forPrinting = true; if (params.zimType === 'zimit') forPrinting = true;
// In case there are no images in the doc, we need to schedule the loadMathJax function here // In case there are no images in the doc, we need to schedule the loadMathJax function here
setTimeout(function() { setTimeout(function () {
loadMathJax(); loadMathJax();
}, 1000); }, 1000);
if (!forPrinting && !documentImages.length) return; if (!forPrinting && !documentImages.length) return;
@ -352,7 +355,7 @@ function prepareImagesJQuery (win, forPrinting) {
image.src = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E"; image.src = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E";
image.style.opacity = '0'; image.style.opacity = '0';
// Set a minimum width to avoid some images not rendering in squashed hidden tables // Set a minimum width to avoid some images not rendering in squashed hidden tables
if (params.displayHiddenBlockElements && image.width && !image.style.minWidth && if (params.displayHiddenBlockElements && image.width && !image.style.minWidth &&
/wiki|wiktionary/i.test(appstate.selectedArchive._file.name)) { /wiki|wiktionary/i.test(appstate.selectedArchive._file.name)) {
var imgX = image.width + ''; var imgX = image.width + '';
imgX = imgX.replace(/(\d+)$/, '$1px'); imgX = imgX.replace(/(\d+)$/, '$1px');
@ -374,7 +377,7 @@ function prepareImagesJQuery (win, forPrinting) {
}, 0); }, 0);
} else { } else {
// We need to start detecting images after the hidden articleContent has been displayed (otherwise they are not detected) // We need to start detecting images after the hidden articleContent has been displayed (otherwise they are not detected)
setTimeout(function() { setTimeout(function () {
lazyLoad(documentImages); lazyLoad(documentImages);
}, 400); }, 400);
} }
@ -388,7 +391,7 @@ function prepareImagesJQuery (win, forPrinting) {
* Extracts media blobs in jQuery mode and offers to download them * Extracts media blobs in jQuery mode and offers to download them
* @param {Node} medium A DOM node representing a medium * @param {Node} medium A DOM node representing a medium
*/ */
function insertMediaBlobsJQuery(medium) { function insertMediaBlobsJQuery (medium) {
var trackBlob; var trackBlob;
var media = [medium]; var media = [medium];
// Ensure we have a source or sources // Ensure we have a source or sources
@ -406,9 +409,11 @@ function insertMediaBlobsJQuery(medium) {
// If the "controls" property is missing, we need to add it to ensure jQuery-only users can operate the video. See kiwix-js #760. // If the "controls" property is missing, we need to add it to ensure jQuery-only users can operate the video. See kiwix-js #760.
if (/audio|video/i.test(mediaElement.tagName) && !mediaElement.hasAttribute('controls')) mediaElement.setAttribute('controls', ''); if (/audio|video/i.test(mediaElement.tagName) && !mediaElement.hasAttribute('controls')) mediaElement.setAttribute('controls', '');
// Create custom subtitle / cc load menu if it doesn't already exist // Create custom subtitle / cc load menu if it doesn't already exist
if (!container.document.getElementById('kiwixCCMenu')) buildCustomCCMenu(container.document, mediaElement, function (ccBlob) { if (!container.document.getElementById('kiwixCCMenu')) {
trackBlob = ccBlob; buildCustomCCMenu(container.document, mediaElement, function (ccBlob) {
}); trackBlob = ccBlob;
});
}
// Load media file // Load media file
appstate.selectedArchive.getDirEntryByPath(decodeURIComponent(source)).then(function (dirEntry) { appstate.selectedArchive.getDirEntryByPath(decodeURIComponent(source)).then(function (dirEntry) {
return appstate.selectedArchive.readBinaryFile(dirEntry, function (fileDirEntry, mediaArray) { return appstate.selectedArchive.readBinaryFile(dirEntry, function (fileDirEntry, mediaArray) {
@ -430,16 +435,16 @@ function insertMediaBlobsJQuery(medium) {
' <span id="alertMessage"></span>\n' + ' <span id="alertMessage"></span>\n' +
'</div>\n'; '</div>\n';
var alertMessage = document.getElementById('alertMessage'); var alertMessage = document.getElementById('alertMessage');
var filename = iframe.title + '_' + dirEntry.url.replace(/^.*\/([^\/]+)$/, '$1'); var filename = iframe.title + '_' + dirEntry.url.replace(/^.*\/([^/]+)$/, '$1');
// Make filename safe // Make filename safe
filename = filename.replace(/[\/\\:*?"<>|]/g, '_'); filename = filename.replace(/[/\\:*?"<>|]/g, '_');
alertMessage.innerHTML = '<a href="#" class="alert-link" id="downloadMedia">Download this file</a> (and any selected subtitles) to play with another app'; alertMessage.innerHTML = '<a href="#" class="alert-link" id="downloadMedia">Download this file</a> (and any selected subtitles) to play with another app';
document.getElementById('downloadMedia').addEventListener('click', function () { document.getElementById('downloadMedia').addEventListener('click', function () {
var downloadFiles = []; var downloadFiles = [];
downloadFiles.push({ downloadFiles.push({
'blob': blob, blob: blob,
'filename': filename, filename: filename,
'src': mediaSource.src src: mediaSource.src
}); });
// Add any selected subtitle file to the download package // Add any selected subtitle file to the download package
var selTextTrack = iframe.getElementById('kiwixSelCC'); var selTextTrack = iframe.getElementById('kiwixSelCC');
@ -447,9 +452,9 @@ function insertMediaBlobsJQuery(medium) {
var selTextExt = selTextTrack.dataset.kiwixurl.replace(/^.*\.([^.]+)$/, '$1'); var selTextExt = selTextTrack.dataset.kiwixurl.replace(/^.*\.([^.]+)$/, '$1');
// Subtitle files should have same name as video + .es.vtt (for example) // Subtitle files should have same name as video + .es.vtt (for example)
downloadFiles.push({ downloadFiles.push({
'blob': trackBlob, blob: trackBlob,
'filename': filename.replace(/^(.*)\.[^.]+$/, '$1.' + selTextTrack.srclang + '.' + selTextExt), filename: filename.replace(/^(.*)\.[^.]+$/, '$1.' + selTextTrack.srclang + '.' + selTextExt),
'src': selTextTrack.src src: selTextTrack.src
}); });
} }
for (var j = downloadFiles.length; j--;) { for (var j = downloadFiles.length; j--;) {
@ -491,12 +496,12 @@ function insertMediaBlobsJQuery(medium) {
* Create a custom dropdown menu item beneath the given mediaElement (audio or video block) to allow the user to * Create a custom dropdown menu item beneath the given mediaElement (audio or video block) to allow the user to
* select the language of text tracks (subtitles/CC) to extract from the ZIM (this is necessary because there is * select the language of text tracks (subtitles/CC) to extract from the ZIM (this is necessary because there is
* no universal onchange event that fires for subtitle changes in the html5 video widget when the URL is invalid) * no universal onchange event that fires for subtitle changes in the html5 video widget when the URL is invalid)
* *
* @param {Document} doc The document in which the new menu will be placed (usually window.document or iframe) * @param {Document} doc The document in which the new menu will be placed (usually window.document or iframe)
* @param {Element} mediaElement The media element (usually audio or video block) which contains the text tracks * @param {Element} mediaElement The media element (usually audio or video block) which contains the text tracks
* @param {Function} callback The function to call wtih the blob * @param {Function} callback The function to call wtih the blob
*/ */
function buildCustomCCMenu(doc, mediaElement, callback) { function buildCustomCCMenu (doc, mediaElement, callback) {
var optionList = []; var optionList = [];
var langs = ''; var langs = '';
var src = ''; var src = '';
@ -548,11 +553,11 @@ function buildCustomCCMenu(doc, mediaElement, callback) {
/** /**
* Processes an array or collection of image nodes so that they will be lazy loaded (progressive extraction) * Processes an array or collection of image nodes so that they will be lazy loaded (progressive extraction)
* *
* @param {Object} documentImages An array or collection of DOM image nodes which will be processed for * @param {Object} documentImages An array or collection of DOM image nodes which will be processed for
* progressive image extraction * progressive image extraction
*/ */
function lazyLoad(documentImages) { function lazyLoad (documentImages) {
// The amount by which to offset the second reading of the viewport // The amount by which to offset the second reading of the viewport
var offset = window.innerHeight * 2; var offset = window.innerHeight * 2;
// Perform an immediate extraction of visible images so as not to disconcert the user // Perform an immediate extraction of visible images so as not to disconcert the user
@ -571,12 +576,12 @@ function lazyLoad(documentImages) {
abandon = true; abandon = true;
clearTimeout(timeout); clearTimeout(timeout);
var velo = container.pageYOffset - scrollPos; var velo = container.pageYOffset - scrollPos;
timeout = setTimeout(function() { timeout = setTimeout(function () {
// We have stopped scrolling // We have stopped scrolling
//console.log("Stopped scrolling; velo=" + velo); // console.log("Stopped scrolling; velo=" + velo);
queueImages(documentImages); queueImages(documentImages);
abandon = false; abandon = false;
queueImages(documentImages, 'extract', 0, function() { queueImages(documentImages, 'extract', 0, function () {
queueImages(documentImages, 'extract', velo >= 0 ? offset : -offset); queueImages(documentImages, 'extract', velo >= 0 ? offset : -offset);
}); });
}, rate); }, rate);
@ -586,11 +591,11 @@ function lazyLoad(documentImages) {
/** /**
* Attaches KaTeX scripts to the window of the document, if there is MathML to process * Attaches KaTeX scripts to the window of the document, if there is MathML to process
* *
* @param {Object} win The window that contains the document to be processed * @param {Object} win The window that contains the document to be processed
* @returns {Null} Returns null if the function was aborted * @returns {Null} Returns null if the function was aborted
*/ */
function loadMathJax(win) { function loadMathJax (win) {
if (!params.useMathJax) return; if (!params.useMathJax) return;
container = container || win; container = container || win;
var doc = container.document; var doc = container.document;
@ -601,35 +606,35 @@ function loadMathJax(win) {
} }
if (params.containsMathTexRaw || params.containsMathTex || params.containsMathSVG) { if (params.containsMathTexRaw || params.containsMathTex || params.containsMathSVG) {
var script1, script2, script3; var script1, script2, script3;
var link = doc.createElement("link"); var link = doc.createElement('link');
link.rel = "stylesheet"; link.rel = 'stylesheet';
link.href = prefix + "js/katex/katex.min.css"; link.href = prefix + 'js/katex/katex.min.css';
doc.head.appendChild(link); doc.head.appendChild(link);
script1 = doc.createElement("script"); script1 = doc.createElement('script');
script1.type = "text/javascript"; script1.type = 'text/javascript';
//script.src = "js/MathJax/MathJax.js?config=TeX-AMS_HTML-full"; // script.src = "js/MathJax/MathJax.js?config=TeX-AMS_HTML-full";
script1.src = prefix + "js/katex/katex.min.js"; script1.src = prefix + 'js/katex/katex.min.js';
if (params.containsMathTex) { if (params.containsMathTex) {
script2 = doc.createElement("script"); script2 = doc.createElement('script');
script2.type = "text/javascript"; script2.type = 'text/javascript';
script2.src = prefix + "js/katex/contrib/mathtex-script-type.min.js"; script2.src = prefix + 'js/katex/contrib/mathtex-script-type.min.js';
} }
if (params.containsMathTex || params.containsMathTexRaw) { if (params.containsMathTex || params.containsMathTexRaw) {
script3 = doc.createElement("script"); script3 = doc.createElement('script');
script3.type = "text/javascript"; script3.type = 'text/javascript';
script3.src = prefix + "js/katex/contrib/auto-render.min.js"; script3.src = prefix + 'js/katex/contrib/auto-render.min.js';
script3.onload = function() { script3.onload = function () {
container.renderMathInElement(doc.body, { container.renderMathInElement(doc.body, {
delimiters: [ delimiters: [
{left: "$$", right: "$$", display: true}, { left: '$$', right: '$$', display: true },
{left: "$", right: "$", display: false}, { left: '$', right: '$', display: false },
{left: "\\(", right: "\\)", display: false}, { left: '\\(', right: '\\)', display: false },
// {left: "\\begin{equation}", right: "\\end{equation}", display: true}, // {left: "\\begin{equation}", right: "\\end{equation}", display: true},
// {left: "\\begin{align}", right: "\\end{align}", display: true}, // {left: "\\begin{align}", right: "\\end{align}", display: true},
// {left: "\\begin{alignat}", right: "\\end{alignat}", display: true}, // {left: "\\begin{alignat}", right: "\\end{alignat}", display: true},
// {left: "\\begin{gather}", right: "\\end{gather}", display: true}, // {left: "\\begin{gather}", right: "\\end{gather}", display: true},
// {left: "\\begin{CD}", right: "\\end{CD}", display: true}, // {left: "\\begin{CD}", right: "\\end{CD}", display: true},
{left: "\\[", right: "\\]", display: true} { left: '\\[', right: '\\]', display: true }
], ],
globalGroup: true, globalGroup: true,
throwOnError: false throwOnError: false
@ -643,7 +648,7 @@ function loadMathJax(win) {
doc.body.appendChild(script1); doc.body.appendChild(script1);
// if (params.containsMathTex || params.containsMathTexRaw) script.innerHTML = 'MathJax.Hub.Queue(["Typeset", MathJax.Hub]); \ // if (params.containsMathTex || params.containsMathTexRaw) script.innerHTML = 'MathJax.Hub.Queue(["Typeset", MathJax.Hub]); \
// console.log("Typesetting maths with MathJax");'; // console.log("Typesetting maths with MathJax");';
params.containsMathTexRaw = false; //Prevents doing a second Typeset run on the same document params.containsMathTexRaw = false; // Prevents doing a second Typeset run on the same document
params.containsMathTex = false; params.containsMathTex = false;
} }
} }
@ -655,4 +660,4 @@ export default {
prepareImagesJQuery: prepareImagesJQuery, prepareImagesJQuery: prepareImagesJQuery,
lazyLoad: lazyLoad, lazyLoad: lazyLoad,
loadMathJax: loadMathJax loadMathJax: loadMathJax
}; };

2
www/js/lib/uiUtil.js
View File

@ -53,7 +53,7 @@ function feedNodeWithBlob (node, nodeAttribute, content, mimeType, makeDataURI,
content = util.dataURItoUint8Array(content); content = util.dataURItoUint8Array(content);
} }
// DEV: Note that webpMachine is single threaded and will reject an image if it is busy // DEV: Note that webpMachine is single threaded and will reject an image if it is busy
// However, the loadImagesJQuery() function in app.js is sequential (it waits for a callback // However, the prepareImagesJQuery() function in images.js is sequential (it waits for a callback
// before processing another image) so we do not need to queue WebP images here // before processing another image) so we do not need to queue WebP images here
webpMachine.decode(content).then(function (uri) { webpMachine.decode(content).then(function (uri) {
// DEV: WebpMachine.decode() returns a data: URI // DEV: WebpMachine.decode() returns a data: URI