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

Support quickbar style infoboxes and new regex for matching infoboxes

Browse Source 
This needs testing across different ZIM types


Former-commit-id: 2e0512db320679188ac125acc168fcc331bb977a [formerly 520a9483b91820ea3f724589b2b83ab412cd7c99]
Former-commit-id: dc3ae991a1b4b9a876cfd62009eed06443d16581
This commit is contained in:
Jaifroid 2018-01-11 11:25:52 +00:00
parent 6afd699341
commit dcc570070a
1 changed files with 12 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -107,11 +107,11 @@ define(['util', 'uiUtil'], function (util, uiUtil) {
//var test = html.getElementById("qbRight") //var test = html.getElementById("qbRight")
if (zim == "desktop") { if (zim == "desktop") {
var infobox = []; var infobox = [];
if (/<table\b[^>]+(?:infobox|vertical-navbox|qbRight|wikitable)/i.test(html)) { if (/<table\b[^>]+(?:infobox|vertical-navbox|qbRight|wv-quickbar|wikitable)/i.test(html)) {
infobox = util.matchOuter(html, '<table\\b[^>]+(?:infobox|vertical-navbox|qbRight|wikitable)[^>]+>', '</table>', 'i'); infobox = util.matchOuter(html, '<table\\b[^>]+(?:infobox|vertical-navbox|qbRight|wv-quickbar|wikitable)[^>]+>', '</table>', 'i');
} else { } else {
if (/<div\b[^>]+(?:infobox|vertical-navbox|qbRight|wikitable)/i.test(html)) { if (/<div\b[^>]+(?:infobox|vertical-navbox|qbRight|wv-quickbar|wikitable)/i.test(html)) {
infobox = util.matchOuter(html, '<div\\b[^>]+(?:infobox|vertical-navbox|qbRight|wikitable)[^>]+>', '</div>', 'i'); infobox = util.matchOuter(html, '<div\\b[^>]+(?:infobox|vertical-navbox|qbRight|wv-quickbar|wikitable)[^>]+>', '</div>', 'i');
} }
} }
if (infobox.length) { if (infobox.length) {
@ -134,9 +134,9 @@ define(['util', 'uiUtil'], function (util, uiUtil) {
} }
//html = zim == "desktop" ? html.replace(/(<table\s+(?=[^>]*(?:infobox|vertical-navbox|qbRight))[\s\S]+?<\/table>[^<]*)((?:<span\s*>\s*)?<p\b[^>]*>(?:(?=([^<]+))\3|<(?!p\b[^>]*>))*?<\/p>(?:<span\s*>)?)/i, "$2\r\n$1") : html; //html = zim == "desktop" ? html.replace(/(<table\s+(?=[^>]*(?:infobox|vertical-navbox|qbRight))[\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 //Set infobox styling hard-coded in Wikipedia mobile
html = html.replace(/(table\s+(?=[^>]*class\s*=\s*["'][^"']*(?:infobox|vertical-navbox|qbRight|wikitable))[^>]*style\s*=\s*["'][^"']+[^;'"]);?\s*["']/ig, '$1; position: relative; border: 1px solid #eaecf0; text-align: left; background-color: #f8f9fa;"'); html = html.replace(/(table\s+(?=[^>]*class\s*=\s*["'][^"']*(?:infobox|vertical-navbox|qbRight|wv-quickbar|wikitable))[^>]*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 //Wrap <h2> tags in <div> to control bottom border width if there's an infobox
html = html.match(/table\s+(?=[^>]*class\s*=\s*["'][^"']*(?:infobox|vertical-navbox|qbRight|wikitable))/i) ? html.replace(/(<h2\s+[^<]*<\/h2>)/ig, '<div style="width: 60%;">$1</div>') : html; html = html.match(/table\s+(?=[^>]*class\s*=\s*["'][^"']*(?:infobox|vertical-navbox|qbRight|wv-quickbar|wikitable))/i) ? html.replace(/(<h2\s+[^<]*<\/h2>)/ig, '<div style="width: 60%;">$1</div>') : html;
} }
//Add dark theme if requested //Add dark theme if requested
css += (params.cssTheme == "dark") ? '<link href="../-/s/style-dark.css" rel="stylesheet" type="text/css">\r\n' : (params.cssTheme == "invert") ? '<link href="../-/s/style-dark-invert.css" rel="stylesheet" type="text/css">\r\n' :""; css += (params.cssTheme == "dark") ? '<link href="../-/s/style-dark.css" rel="stylesheet" type="text/css">\r\n' : (params.cssTheme == "invert") ? '<link href="../-/s/style-dark-invert.css" rel="stylesheet" type="text/css">\r\n' :"";
@ -158,17 +158,15 @@ define(['util', 'uiUtil'], function (util, uiUtil) {
console.log(zim == "mobile" ? "Transforming display style to desktop..." : "Optimizing cached styles for desktop display..."); console.log(zim == "mobile" ? "Transforming display style to desktop..." : "Optimizing cached styles for desktop display...");
uiUtil.poll("mobile" ? "Transforming display style to desktop..." : "Optimizing cached styles for desktop display..."); uiUtil.poll("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 //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");
if (zim == "mobile") { if (zim == "mobile") {
var tableBox = util.matchOuter(html, '<table\\b[^>]+?(?:infobox|vertical-navbox|qbRight|wikitable)[^>]+>', '</table>', 'i'); //Attempt to match div-style infobox first
if (!(tableBox && tableBox.length)) { var tableBox = util.matchOuter(html, '<div\\b[^>]+?(?:qbRight|wv-quickbar)[^>]+>', '</div>', 'i');
//If above failed we may have div style infobox //If above failed we may have traditional table-style infobox
tableBox = util.matchOuter(html, '<div\\b[^>]+?(?:qbRight)[^>]+>', '</div>', 'i'); tableBox = !(tableBox && tableBox.length) ? util.matchOuter(html, '<table\\b[^>]+?(?:infobox|vertical-navbox|qbRight|wikitable)[^>]+>', '</table>', 'i') : tableBox;
}
//html = tableBox && tableBox.length ? html.replace(tableBox, "@@@KiwixSep@@@") : html;
if (tableBox && tableBox.length) { if (tableBox && tableBox.length) {
html = html.replace(tableBox, "@@@KiwixSep@@@"); html = html.replace(tableBox, "@@@KiwixSep@@@");
html = html.replace(/((?:<span\s*>\s*)?<p\b[\s\S]+?)@@@KiwixSep@@@/i, tableBox + "\r\n$1"); //Fiendish regex to match only innermost <p...>...</p> followed by Kiwix separator or <span ...><p ...>...</p></span> followed by small skpped <p> containing no more than 40 characters (this happens in Wikivoyage English)
html = html.replace(/(<(?:(span\b)[^>]*>\s*<)?p\b[^>]*>(?:(?=([^<]+))\3|<(?!p\b))*?<\/p>\s*(?:<\/)?\2(?:>\s*)?(?:<p\b[\s\S]{1,40}<\/p>\s*)?)@@@KiwixSep@@@/i, tableBox + "\r\n$1");
//Do the replacement below just in case above regex failed //Do the replacement below just in case above regex failed
html = html.replace(/@@@KiwixSep@@@/, tableBox); html = html.replace(/@@@KiwixSep@@@/, tableBox);
} }