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

* Fix opening and closing of Wikipedia headers

* Only make sections closeable in mobile styles

* Fix misplaced hatnote in mobile style

www/-/mw/skins.vector.styles.css

@@ -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);

www/js/app.js

@@ -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 if we're not on the landing page and if the ZIM style is mobile
-                // Convert section tags to details tags (we have to loop because regex only matches innermost <section>...</section>)
+            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');

www/js/lib/transformStyles.js

@@ -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]);
+                        // So there was no match, let's try just swapping para and infobox
-                            html = html.replace('<!-- @@@kiwixmarker@@@ -->', '');
+                        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
                     }
                 }
             }