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

Prevent unnecessary transformations

Browse Source 
Former-commit-id: b17c9aeb961549868067a60c10bf4f0c759fb797 [formerly 27865b46191c1633970df0820651d69fde08ea24]
Former-commit-id: 113a7e5c0bf9816830e76944abc00cb48e3e110f
This commit is contained in:
Jaifroid 2017-07-16 16:00:35 +01:00
parent d06a3b9363
commit 8fa6691348
2 changed files with 22 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
www/js/app.js
View File

@ -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(/(<img\s+[^>]*\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

6
www/js/lib/transformStyles.js
View File

@ -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]*?<table\s+[^>]*(?:infobox|vertical-navbox)/i.test(html) ? html : html.replace(/(<table\s+(?=[^>]*(?:infobox|vertical-navbox))[\s\S]+?<\/table>[^<]*)((?:<span\s*>\s*)?<p\b[^>]*>(?:(?=([^<]+))\3|<(?!p\b[^>]*>))*?<\/p>(?:<span\s*>)?)/i, "$2\r\n$1");
html = zim == "desktop" ? /<\/p>[\s\S]*?<table\s+[^>]*(?:infobox|vertical-navbox)/i.test(html) ? html : html.replace(/(<table\s+(?=[^>]*(?:infobox|vertical-navbox))[\s\S]+?<\/table>[^<]*)((?:<span\s*>\s*)?<p\b[^>]*>(?:(?=([^<]+))\3|<(?!p\b[^>]*>))*?<\/p>(?:<span\s*>)?)/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 <h2> tags in <div> 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(/((?:<span\s*>\s*)?<p\b[^>]*>(?:(?=([^<]+))\2|<(?!p\b[^>]*>))*?<\/p>(?:<\/span\s*>)?[^<]*)([\s\S]*?)(<table\s*(?=[^>]*infobox)[\s\S]+?<\/table>)/i, "$4$3$1");
html = html.replace(/((?:<span\s*>\s*)?<p\b[\s\S]+?)(<table\s*(?=[^>]*(?:infobox|vertical-navbox))[\s\S]+?<\/table>)/i, "$2\r\n$1");
html = zim == "mobile" ? html.replace(/((?:<span\s*>\s*)?<p\b[\s\S]+?)(<table\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