kiwix/kiwix-js-pwa
1
0
Fork 0
mirror of https://github.com/kiwix/kiwix-js-pwa.git synced 2025-08-03 11:28:21 -04:00
Code Issues Packages Projects Releases Wiki Activity

Fix opening and closing of Wikipedia headers #744 (#745)

Browse Source 
* Fix opening and closing of Wikipedia headers

* Only make sections closeable in mobile styles

* Fix misplaced hatnote in mobile style
This commit is contained in:
Jaifroid 2025-08-03 07:01:09 +03:00 committed by GitHub
parent 0b2246eee0
commit b3307395f2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 30 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
www/-/mw/skins.vector.styles.css
View File

@ -293,6 +293,21 @@ figure[typeof~='mw:File/Thumb'] > figcaption:empty {
vertical-align: text-bottom
}
summary.section-heading {
display: list-item !important;
cursor: pointer;
}
.section-heading > h1,
.section-heading > h2,
.section-heading > h3,
.section-heading > h4,
.section-heading > h5,
.section-heading > h6 {
display: inline;
border: none;
}
@media screen {
div.thumbinner {
border: 1px solid var(--border-color-subtle,#c8ccd1);

17
www/js/app.js
View File

@ -6355,8 +6355,9 @@ function displayArticleContentInContainer (dirEntry, htmlArticle) {
htmlArticle = htmlArticle.replace(/(<img\s[^>]+(?:min-width:\s*|width=['"]))(\d+px)([^>]+>\s*<div\b[^>]+style=['"])/ig, '$1$2$3max-width: $2; ');
// Remove reference to unusued pcs scripts (onBodyStart and onBodyEnd) in mobile-html endpoint ZIMs (causes unhandled type error)
htmlArticle = htmlArticle.replace(/<script[^>]*>[^<]*pcs\.c1\.Page\.onBody[^<]+<\/script>\s*/ig, '');
if (!params.isLandingPage) {
// Convert section tags to details tags (we have to loop because regex only matches innermost <section>...</section>)
// Convert section tags to details tags if we're not on the landing page and if the ZIM style is mobile
if (!params.isLandingPage && (appstate.zimThemeType === 'mobile' || params.cssSource === 'mobile') && /<section\b[^>]*data-mw-section-id=["'][1-9]/i.test(htmlArticle)) {
// We have to loop because regex only matches innermost <section>...</section>
for (i = 5; i--;) {
htmlArticle = htmlArticle.replace(/<section\b([^>]*data-mw-section-id=["'][1-9][^>]*)>((?:(?=([^<]+))\3|<(?!section\b[^>]*>))*?)<\/section>/ig, function (m0, m1, m2) {
var summary = m2.replace(/(?:<div\s+class=["'](?:pcs-edit|mw-heading)[^>]+>)?(<(h[2-9])\b[^>]*>(?:[^<]|<(?!\2))+?<\/\2>)(?:<\/div>)?/i, '<summary class="section-heading collapsible-heading">$1</summary>');
@ -6380,12 +6381,6 @@ function displayArticleContentInContainer (dirEntry, htmlArticle) {
// Gutenberg ZIMs try to initialize before all assets are fully loaded. Affect UWP app.
htmlArticle = htmlArticle.replace(/(<body\s[^<]*onload=(['"]))([^'"]*init\([^'"]+showBooks\([^'"]+)\2/i, '$1setTimeout(function () {$3}, 300);$2');
// Put misplaced disambiguation header back in its correct position @TODO remove this when fixed in mw-offliner
var noexcerpt = htmlArticle.match(/<h1\b(?:[^<]|<(?!h2))+?(<dl\b(?:[^<]|<(?!\/dl>)){1,50}?(?:For\sother\s.{5,20}\swith\s|Not\sto\sbe\sconfused\swith|mw-redirect[^<]+travel\stopic|This\sarticle\sis\sa|See\salso:)(?:[^<]|<(?!\/dl>))+<\/dl>\s*)/i);
if (noexcerpt && noexcerpt[1] && noexcerpt[1].length) {
htmlArticle = htmlArticle.replace(noexcerpt[1], '');
htmlArticle = htmlArticle.replace(/(<\/h1>\s*)/i, '$1' + noexcerpt[1]);
}
if (appstate.zimThemeType === 'mobile') {
// Put misplaced hatnote headers inside <h1> block back in correct position @TODO remove this when fixed in mw-offliner
var hatnote;
@ -6406,6 +6401,12 @@ function displayArticleContentInContainer (dirEntry, htmlArticle) {
for (i = hatnotes.length; i--;) {
htmlArticle = htmlArticle.replace(/(<\/h1>\s*)/i, '$1' + hatnotes[i].replace(/(<div\s+)/i, '$1style="padding-top:10px;" '));
}
// Put misplaced disambiguation header back in its correct position @TODO remove this when fixed in mw-offliner
var noexcerpt = htmlArticle.match(/<h1\b(?:[^<]|<(?!h2))+?(<dl\b(?:[^<]|<(?!\/dl>)){1,50}?(?:For\sother\s.{5,20}\swith\s|Not\sto\sbe\sconfused\swith|mw-redirect[^<]+travel\stopic|This\sarticle\sis\sa|See\salso:)(?:[^<]|<(?!\/dl>))+<\/dl>\s*)/i);
if (noexcerpt && noexcerpt[1] && noexcerpt[1].length) {
htmlArticle = htmlArticle.replace(noexcerpt[1], '');
htmlArticle = htmlArticle.replace(/(<\/h1>\s*)/i, '$1' + noexcerpt[1]);
}
}
// Remove white background colour (causes flashes in dark mode)
htmlArticle = htmlArticle.replace(/(<body\b[^>]+style=["'][^"']*)background-color\s*:\s*[^;]+;\s*/i, '$1');

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

@ -178,15 +178,17 @@ function toMobileCSS (html, zim, cc, cs, css) {
// We already deleted the table above
html = '';
// First try to move the lead paragraph
/* NOTE CODE BELOW CAUSES HATNOTES TO GET SWAPPED TOO, so we will only use the simple swap method instead
html = temphtml.replace(/(<div\s+[^>]*?\bid\s*=\s*["']mw-content-text\s*[^>]*>\s*)/i, '$1\r\n' + paras[g].replace(/(<p\s+)/i, '$1data-kiwix-id="lead" ') + '\r\n');
if (html) { // Looks like we succeeded so clean up
html = html.replace(paras[g], '');
html = html.replace('<!-- @@@kiwixmarker@@@ -->', infobox[0]);
} else {
// So there was no match, let's try just swapping para and infobox
html = temphtml.replace(paras[g], paras[g].replace(/(<p\s+)/i, '$1data-kiwix-id="lead" ') + '\r\n' + infobox[0]);
html = html.replace('<!-- @@@kiwixmarker@@@ -->', '');
}
*/
// So there was no match, let's try just swapping para and infobox
html = temphtml.replace(paras[g], paras[g].replace(/(<p\s+)/i, '$1data-kiwix-id="lead" ') + '\r\n' + infobox[0]);
html = html.replace('<!-- @@@kiwixmarker@@@ -->', '');
// } // End of commented else block
}
}
}