diff --git a/www/js/app.js b/www/js/app.js index 7a5823bb..713c5681 100644 --- a/www/js/app.js +++ b/www/js/app.js @@ -675,7 +675,12 @@ define(['jquery', 'zimArchiveLoader', 'util', 'uiUtil', 'cookies','abstractFiles * @param {Event} event * @returns {Boolean} */ - function handleTitleClick(event) { + function handleTitleClick(event) { + + //TESTING// + console.log("Initiating HTML load..."); + console.time("Time to HTML load"); + var dirEntryId = event.target.getAttribute("dirEntryId"); $("#articleList").empty(); $('#articleListHeaderMessage').empty(); @@ -785,6 +790,12 @@ define(['jquery', 'zimArchiveLoader', 'util', 'uiUtil', 'cookies','abstractFiles function displayArticleInForm(dirEntry, htmlArticle) { // Display the article inside the web page. + //TESTING + console.log("** HTML received **"); + console.timeEnd("Time to HTML load"); + console.log("Loading stylesheets..."); + console.time("Time to First Paint"); + //Fast-replace img src with data-kiwixsrc and hide image [kiwix-js #272] htmlArticle = htmlArticle.replace(/(]*\b)src(\s*=)/ig, "$1style=\"display: none;\" onload=\"this.style.display='inline'\" data-kiwixsrc$2"); @@ -823,7 +834,7 @@ define(['jquery', 'zimArchiveLoader', 'util', 'uiUtil', 'cookies','abstractFiles selectedArchive.getDirEntryByTitle(title).then( function (dirEntry) { selectedArchive.readBinaryFile(dirEntry, function (readableTitle, content) { - //var cssContent = util.uintToString(content); //Uncomment this line and break on next to capture cssContent for local filesystem cache + var cssContent = util.uintToString(content); //Uncomment this line and break on next to capture cssContent for local filesystem cache var cssBlob = new Blob([content], { type: 'text/css' }, { oneTimeOnly: true }); var newURL = URL.createObjectURL(cssBlob); //blobArray[index] = newURL; //Don't bother with "index" -- you don't need to track the order of the blobs TODO: delete this logic @@ -843,6 +854,7 @@ define(['jquery', 'zimArchiveLoader', 'util', 'uiUtil', 'cookies','abstractFiles cssArray[i] = cssArray[i].replace(/(href\s*=\s*["'])([^"']+)/i, "$1" + blobArray[i]); //DEV note: do not attempt to add onload="URL.revokeObjectURL...)": see [kiwix.js #284] } + htmlArticle = htmlArticle.replace(regexpSheetHref, ""); //Void existing stylesheets var cssArray$ = "\r\n" + cssArray.join("\r\n") + "\r\n"; if (cssSource == "mobile") { //If user has selected mobile display mode... @@ -933,6 +945,11 @@ define(['jquery', 'zimArchiveLoader', 'util', 'uiUtil', 'cookies','abstractFiles }); // Load images + + //TESTING + console.log("** First Paint complete **"); + console.timeEnd("Time to First Paint"); + $('#articleContent').contents().find('body').find('img').each(function () { var image = $(this); // It's a standard image contained in the ZIM file diff --git a/www/js/lib/transformStyles.js b/www/js/lib/transformStyles.js index fdbb4bb6..1a867ea0 100644 --- a/www/js/lib/transformStyles.js +++ b/www/js/lib/transformStyles.js @@ -87,7 +87,7 @@ define([], function () { //Add styling to image captions that is hard-coded in Wikipedia mobile html = html.replace(/class\s*=\s*["']\s*thumbcaption\s*["']\s*/ig, 'style="margin: 0.5em 0 0.5em; font-size: 0.8em; line-height: 1.5; padding: 0 !important; color: #54595d; width: auto !important;"'); //If it's in desktop position, move info-box below lead paragraph like on Wikipedia mobile - html = /<\/p>[\s\S]*?]*(?:infobox|vertical-navbox)/i.test(html) ? html : html.replace(/(]*(?:infobox|vertical-navbox))[\s\S]+?<\/table>[^<]*)((?:\s*)?]*>(?:(?=([^<]+))\3|<(?!p\b[^>]*>))*?<\/p>(?:)?)/i, "$2\r\n$1"); + html = zim == "desktop" ? /<\/p>[\s\S]*?]*(?:infobox|vertical-navbox)/i.test(html) ? html : html.replace(/(]*(?:infobox|vertical-navbox))[\s\S]+?<\/table>[^<]*)((?:\s*)?]*>(?:(?=([^<]+))\3|<(?!p\b[^>]*>))*?<\/p>(?:)?)/i, "$2\r\n$1") : html; //Set infobox styling hard-coded in Wikipedia mobile html = html.replace(/(table\s+(?=[^>]*class\s*=\s*["'][^"']*infobox)[^>]*style\s*=\s*["'][^"']+[^;'"]);?\s*["']/ig, '$1; position: relative; border: 1px solid #eaecf0; text-align: left; background-color: #f8f9fa;"'); //Wrap

tags in
to control bottom border width if there's an infobox @@ -98,10 +98,10 @@ define([], function () { function toDesktopCSS(html, zim, cc, cs, css) { if (cc || (zim == "mobile")) { //If user requested cached styles OR the ZIM does not contain desktop styles - console.log(zim == "mobile" ? "Transforming display style to desktop..." : "Optimizing cached styhles for desktop display..."); + console.log(zim == "mobile" ? "Transforming display style to desktop..." : "Optimizing cached styles for desktop display..."); //If it's in mobile position, move info-box above lead paragraph like on Wikipedia desktop //html = html.replace(/((?:\s*)?]*>(?:(?=([^<]+))\2|<(?!p\b[^>]*>))*?<\/p>(?:<\/span\s*>)?[^<]*)([\s\S]*?)(]*infobox)[\s\S]+?<\/table>)/i, "$4$3$1"); - html = html.replace(/((?:\s*)?]*(?:infobox|vertical-navbox))[\s\S]+?<\/table>)/i, "$2\r\n$1"); + html = zim == "mobile" ? html.replace(/((?:\s*)?]*(?:infobox|vertical-navbox))[\s\S]+?<\/table>)/i, "$2\r\n$1") : html; //Ensure white background colour html = html.replace(/class\s*=\s*["']\s*mw-body\s*["']\s*/ig, 'style="background-color: white; padding: 1em; border-width: 0px; max-width: 55.8em; margin: 0 auto 0 auto;"'); //Void empty header title