Provide option to display hidden block elements

Former-commit-id: 6cd279c6f39ce9a96f17f60fb5302a0b93039547 [formerly ea48d92d2f9462d1dada53682fed210c14dbf638] [formerly 9e7d84c62dd9c98a5e8ec45ff220c0e8d5b28537] [formerly bc7e0c86312f90dc80cc2cf22d7a6c39099a35aa [formerly 3309bc08afce46aecda8a45b0c681d7dff6a505a [formerly 2462301fee8aae6d92f0eaf9dbc80353d0529483]]]
Former-commit-id: aff33996ec9f4a35729cbca379184d293bebf355 [formerly 5da63c4762a5a5405b5367f40576615e4870e945 [formerly c398066f3d6521813530f14fbe7546788383124f]]
Former-commit-id: 58c977c63531525a658eceea9b121b6891150b2e [formerly 1e3b3c8759ba5b53b322a117dcab0366f6ae67aa]
Former-commit-id: 8f7058f43b431f657b9611ca566eeb3149d9b64e

www/index.html

@@ -772,13 +772,18 @@
                                         <label class="checkbox" title="This speeds up the display of articles for some ZIM types by using our own copies of common stylesheets. Note that our copies may not be 100% correct for all languages. We also do some optimizations that may result in minor infidelities. If you want to use the ZIM's own styles for full fidelity, turn this off.">
                                             <input type="checkbox" name="cssCacheMode" id="cssCacheModeCheck">
                                             <span class="checkmark"></span>
-                                            <b>Use locally cached display styles</b> (<i>recommended</i> for Wikipedia ZIM)
+                                            <b>Use locally cached display styles</b> (<i>recommended</i> for Wikipedia ZIMs)
                                         </label>
                                         <label class="checkbox" title="Tap three times for always | auto | never. This is only relevant when you maximize the app window (e.g. on a PC). It ensures the article uses the full screen width.">
                                             <input name="pageMaxWidth" id="removePageMaxWidthCheck" type="checkbox" value="false">
                                             <span class="checkmark"></span>
                                             <b>Remove max page width restriction</b>: [ <b><span id="pageMaxWidthState"></span></b> ] (useful for recent Wikipedia archives)
                                         </label>
+                                        <label class="checkbox" title="Show navboxes, tables and other elements that tend to be hidden in Wikipedia mobile style. Not needed if you select Desktop display style.">
+                                            <input name="displayHiddenBlockElements" id="displayHiddenBlockElementsCheck" type="checkbox" value="false">
+                                            <span class="checkmark"></span>
+                                            <b>Display hidden block elements</b> (<i>for Wikipedia ZIMs</i>: shows elements that are hidden in mobile style)
+                                        </label>
                                     </div>
                                 </div>
                                 <div class="panel panel-info" id="otherSettingsDiv">

www/js/app.js

@@ -1549,6 +1549,13 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'util', 'cache', 'images', 'sett
             settingsStore.setItem('removePageMaxWidth', params.removePageMaxWidth, Infinity);
             removePageMaxWidth();
         });
+        document.getElementById('displayHiddenBlockElementsCheck').addEventListener('click', function () {
+            params.displayHiddenBlockElements = this.checked;
+            settingsStore.setItem('displayHiddenBlockElements', params.displayHiddenBlockElements, Infinity);
+            if (this.checked) displayHiddenBlockElements();
+            // Forces page reload if user no longer wants to display these elements
+            else params.themeChanged = true;
+        });
 
         /**
          * Removes the WikiMedia max-page-width restrictions either by operating on an HTML string, or by using
@@ -4104,6 +4111,11 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'util', 'cache', 'images', 'sett
                     if (!('MSBlobBuilder' in window)) htmlArticle = htmlArticle.replace(/(<body\b[^>]*)/i, '$1 hidden');
                 }
 
+                // Display any hidden block elements, with a timeout, so as not to interfere with image loading
+                setTimeout(function() {
+                    if (params.displayHiddenBlockElements) displayHiddenBlockElements();
+                }, 800);
+
                 // Calculate the current article's encoded ZIM baseUrl to use when processing relative links (also needed for SW mode when params.windowOpener is set)
                 params.baseURL = (dirEntry.namespace + '/' + dirEntry.url.replace(/[^/]+$/, ''))
                     // URI-encode anything that is not a '/'
@@ -4504,6 +4516,18 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'util', 'cache', 'images', 'sett
             });
         }
 
+        /**
+         * Unhides all hidden divs or tables, for use in Wikimedia mobile display style, which hides some crucial
+         * elements that users want optionally to be able to access
+         */
+        function displayHiddenBlockElements() {
+            Array.prototype.slice.call(articleDocument.querySelectorAll('table, div')).forEach(function (element) {
+                if (articleWindow.getComputedStyle(element).display === 'none') {
+                    element.style.setProperty('display', 'block', 'important');
+                }
+            });
+        }
+
         function setupTableOfContents() {
             //var iframe = window.frames[0].frameElement;
             var iframe = document.getElementById('articleContent');

www/js/init.js

@@ -74,6 +74,7 @@ params['relativeFontSize'] = ~~(getSetting('relativeFontSize') || 100); //Sets t
 params['relativeUIFontSize'] = ~~(getSetting('relativeUIFontSize') || 100); //Sets the initial font size for UI (as a percentage) - user can adjust using slider in Config
 params['cssSource'] = getSetting('cssSource') || "auto"; //Set default to "auto", "desktop" or "mobile"
 params['removePageMaxWidth'] = getSetting('removePageMaxWidth') != null ? getSetting('removePageMaxWidth') : "auto"; //Set default for removing max-width restriction on Wikimedia pages ("auto" = removed in desktop, not in mobile; true = always remove; false = never remove)
+params['displayHiddenBlockElements'] = getSetting('displayHiddenBlockElements') !== null ? getSetting('displayHiddenBlockElements') : false; //Set default for displaying hidden block elements
 params['openAllSections'] = getSetting('openAllSections') != null ? getSetting('openAllSections') : true; //Set default for opening all sections in ZIMs that have collapsible sections and headings ("auto" = let CSS decide according to screen width; true = always open until clicked by user; false = always closed until clicked by user)
 params['cssCache'] = getSetting('cssCache') != null ? getSetting('cssCache') : true; //Set default to true to use cached CSS, false to use Zim only
 params['cssTheme'] = getSetting('cssTheme') || 'light'; //Set default to 'auto', 'light', 'dark' or 'invert' to use respective themes for articles
@@ -206,6 +207,7 @@ document.getElementById('removePageMaxWidthCheck').checked = params.removePageMa
 document.getElementById('removePageMaxWidthCheck').indeterminate = params.removePageMaxWidth == "auto";
 document.getElementById('removePageMaxWidthCheck').readOnly = params.removePageMaxWidth == "auto";
 document.getElementById('pageMaxWidthState').innerHTML = (params.removePageMaxWidth == "auto" ? "auto" : params.removePageMaxWidth ? "always" : "never");
+document.getElementById('displayHiddenBlockElementsCheck').checked = params.displayHiddenBlockElements;
 document.getElementById('openAllSectionsCheck').checked = params.openAllSections;
 document.getElementById('useOSMCheck').checked = /openstreetmap/.test(params.mapsURI);
 document.getElementById('cssUIDarkThemeCheck').checked = params.cssUITheme == "dark"; // Will be true, or false if light or auto