Provide option for image manipulation

Former-commit-id: 08e4e545991875be044e62dbbffe9f083bee1312 [formerly b95c473fd037b91c41cbb55cb255c5cca2ca4dc7] [formerly 0b79b831239fcf08664a677d151b8c2464bbd23b] [formerly 3605d43c47fc99691ddf5a93f0ac2970c4be69a8 [formerly ab014f7bf10652ac96a8844e4fef21f7a889b9a5 [formerly 1c425febbe676b36b692c9a15e706ab34c353c8e]]]
Former-commit-id: 3fcbcd4be482f3bbe576c4801bcd738291fb5d37 [formerly 9c059f397038344bc00367a77eb976173c564695 [formerly 62bb3ce23aecb6712eae31b510061c83dd40783f]]
Former-commit-id: 6a95d290e32352a21a4a56ea2db2e0d0f1a87f33 [formerly 921f35f6ae0ed823a42d7a2fd8b23437b510c21f]
Former-commit-id: 3c2f11c11fc40c986fac1525594ef9826120a0f7

www/index.html

@@ -746,11 +746,22 @@
                                             <span class="checkmark"></span>
                                             <b>Move navigation buttons to top toolbar</b> (note that Kiwix icon acts as Home button)
                                         </label>
-                                        <label class="checkbox">
+                                        <div class="row">
+                                            <div class="col-sm-6">
+                                                <label class="checkbox" title="This is useful for very low-memory devices, or to increase page rendering speed.">
                                                     <input type="checkbox" name="imageDisplayMode" id="imageDisplayModeCheck">
                                                     <span class="checkmark"></span>
                                                     <b>Display images if any</b> (if hidden, tap the <span style="background-color:lightblue; color:black;">&nbsp;blue area&nbsp;</span> to display one-by-one)
                                                 </label>
+                                            </div>
+                                            <div class="col-sm-6">
+                                                <label class="checkbox" title="This allows saving images to disk (with right-click/long-press), or opening them in a new tab, but uses slightly more memory because images are stored in the document as dataURIs. WARNING: setting may interfere with dynamic content in non-Wikimedia ZIMs.">
+                                                    <input type="checkbox" name="manipulateImages" id="manipulateImagesCheck">
+                                                    <span class="checkmark"></span>
+                                                    <b>Allow image manipulation</b> (increases app memory usage and may interfere with dynamic content)
+                                                </label>
+                                            </div>
+                                        </div>
                                         <label class="checkbox">
                                             <input type="checkbox" name="hideActiveContentWarning" id="hideActiveContentWarningCheck">
                                             <span class="checkmark"></span>

www/js/app.js

@@ -1142,7 +1142,11 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'util', 'cache', 'images', 'sett
             params.themeChanged = params.imageDisplay; //Only reload page if user asked for all images to be displayed
             settingsStore.setItem('imageDisplay', params.imageDisplay, Infinity);
         });
-        $('input:checkbox[name=hideActiveContentWarning]').on('change', function (e) {
+        document.getElementById('manipulateImagesCheck').addEventListener('click', function () {
+            params.manipulateImages = this.checked;
+            settingsStore.setItem('manipulateImages', params.manipulateImages, Infinity);
+        });
+        $('input:checkbox[name=hideActiveContentWarning]').on('change', function () {
             params.hideActiveContentWarning = this.checked ? true : false;
             settingsStore.setItem('hideActiveContentWarning', params.hideActiveContentWarning, Infinity);
         });
@@ -3500,7 +3504,7 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'util', 'cache', 'images', 'sett
             // Replaces ZIM-style URLs of img, script, link and media tags with a data-kiwixurl to prevent 404 errors [kiwix-js #272 #376]
             // This replacement also processes the URL relative to the page's ZIM URL so that we can find the ZIM URL of the asset
             // with the correct namespace (this works for old-style -,I,J namespaces and for new-style C namespace)
-            if (params.contentInjectionMode == 'jquery') {
+            if (params.contentInjectionMode == 'jquery' || params.manipulateImages) {
                 htmlArticle = htmlArticle.replace(regexpTagsWithZimUrl, function(match, blockStart, equals, quote, relAssetUrl) {
                     var assetZIMUrl = uiUtil.deriveZimUrlFromRelativeUrl(relAssetUrl, baseUrl);
                     // DEV: Note that deriveZimUrlFromRelativeUrl produces a *decoded* URL (and incidentally would remove any URI component
@@ -4538,7 +4542,7 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'util', 'cache', 'images', 'sett
                     } else {
                         appstate.selectedArchive.readBinaryFile(dirEntry, function (fileDirEntry, content) {
                             // TODO : JavaScript support not yet functional [kiwix-js #152]
-                            uiUtil.feedNodeWithBlob(script, 'src', content, 'text/javascript', params.allowHTMLExtraction);
+                            uiUtil.feedNodeWithBlob(script, 'src', content, 'text/javascript', params.manipulateImages);
                         });
                     }
                 }).catch(function (e) {

www/js/init.js

@@ -79,6 +79,7 @@ params['cssCache'] = getSetting('cssCache') != null ? getSetting('cssCache') : t
 params['cssTheme'] = getSetting('cssTheme') || 'light'; //Set default to 'auto', 'light', 'dark' or 'invert' to use respective themes for articles
 params['cssUITheme'] = getSetting('cssUITheme') || 'light'; //Set default to 'auto', 'light' or 'dark' to use respective themes for UI
 params['imageDisplay'] = getSetting('imageDisplay') != null ? getSetting('imageDisplay') : true; //Set default to display images from Zim
+params['manipulateImages'] = getSetting('manipulateImages') != null ? getSetting('manipulateImages') : false; //Makes dataURIs by default instead of BLOB URIs for images
 params['hideToolbars'] = getSetting('hideToolbars') != null ? getSetting('hideToolbars') : true; //Set default to true (hides both), 'top' (hides top only), or false (no hiding)
 params['rememberLastPage'] = getSetting('rememberLastPage') != null ? getSetting('rememberLastPage') : true; //Set default option to remember the last visited page between sessions
 params['useMathJax'] = getSetting('useMathJax') != null ? getSetting('useMathJax') : true; //Set default to true to display math formulae with MathJax, false to use fallback SVG images only
@@ -199,6 +200,7 @@ if (getSetting('lastPageLoad') === 'failed') {
 document.getElementById('cssCacheModeCheck').checked = params.cssCache;
 document.getElementById('navButtonsPosCheck').checked = params.navButtonsPos === 'top';
 document.getElementById('imageDisplayModeCheck').checked = params.imageDisplay;
+document.getElementById('manipulateImagesCheck').checked = params.manipulateImages;
 document.getElementById('removePageMaxWidthCheck').checked = params.removePageMaxWidth === true; // Will be false if false or auto
 document.getElementById('removePageMaxWidthCheck').indeterminate = params.removePageMaxWidth == "auto";
 document.getElementById('removePageMaxWidthCheck').readOnly = params.removePageMaxWidth == "auto";

www/js/lib/images.js

@@ -67,7 +67,7 @@ define(['uiUtil'], function (uiUtil) {
             else { image.setAttribute('data-kiwixsrc', imageUrl); } 
             image.removeAttribute('data-kiwixurl');
             var title = decodeURIComponent(imageUrl);
-            if (params.contentInjectionMode === 'serviceworker') {
+            if (params.contentInjectionMode === 'serviceworker' && !params.manipulateImages) {
                 image.addEventListener('load', function () {
                     image.style.transition = 'opacity 0.5s ease-in';
                     image.style.opacity = '1';
@@ -83,7 +83,7 @@ define(['uiUtil'], function (uiUtil) {
                 return appstate.selectedArchive.readBinaryFile(dirEntry, function (fileDirEntry, content) {
                     image.style.background = '';
                     var mimetype = dirEntry.getMimetype();
-                    uiUtil.feedNodeWithBlob(image, 'src', content, mimetype, params.allowHTMLExtraction, function () {
+                    uiUtil.feedNodeWithBlob(image, 'src', content, mimetype, params.manipulateImages, function () {
                         checkBatch();
                     });
                     image.style.transition = 'opacity 0.5s ease-in';
@@ -205,6 +205,10 @@ define(['uiUtil'], function (uiUtil) {
      * @param {Boolean} forPrinting If true, extracts all images
      */
     function prepareImagesServiceWorker (win, forPrinting) {
+        if (params.manipulateImages) {
+            prepareImagesJQuery(win, forPrinting);
+            return;
+        }
         container = win;
         var doc = container.document;
         var documentImages = doc.querySelectorAll('img');
@@ -226,7 +230,7 @@ define(['uiUtil'], function (uiUtil) {
                 });
             }
             // DEV: make sure list of file types here is the same as the list in Service Worker code
-            if (/(^|\/)[IJ]\/.*\.(jpe?g|png|svg|gif|webp)($|[?#])/i.test(documentImages[i].src)) {
+            if (/(^|\/).+\.(jpe?g|png|svg|gif|webp)($|[?#])/i.test(documentImages[i].src)) {
                 documentImages[i].dataset.kiwixurl = documentImages[i].getAttribute('src');
                 if (params.imageDisplayMode === 'progressive') {
                     documentImages[i].style.opacity = '0';