From e0138230f2bdeb5a1c0e47b8c7adca4767e47b58 Mon Sep 17 00:00:00 2001
From: Jaifroid <egk10@cam.ac.uk>
Date: Tue, 31 Aug 2021 11:47:28 +0100
Subject: [PATCH] Added warning for dynamic content when image manipulation is
 on

Former-commit-id: efbacd820723ce40542ce0d57d1431443e6f555c [formerly daea0d11f6e370632b824ae364237173d99da052 [formerly ad4df05cdb68810f6773df3d004e33c8dd49e8dc]]
Former-commit-id: 773c8507c715ecd4e17ed902ff8bd93db2162486
Former-commit-id: d6ca3fb4c3a91bea2494a16850921a99934b2233
---
 www/index.html       | 13 ++++---------
 www/js/app.js        |  3 ++-
 www/js/lib/uiUtil.js | 16 +++++++++++++---
 3 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/www/index.html b/www/index.html
index a9f09dda..d063af52 100644
--- a/www/index.html
+++ b/www/index.html
@@ -118,18 +118,13 @@
                     <div id="update" class="update">
                         <h3 style="margin-top:0;">Changes in version <span class="version">1.0</span></h3>
                         <ul style="padding-left: 15px;">
-                            <li>New dropdown in Download Library allows filtering the list of archives by subject (for wikimedia, stackexchange, TED)</li>
-                            <li>You can now sort the Download Library list by clicking on the Size / Last modified / Name headers</li>
                             <li>Added refresh button for picked folder in Configuration</li>
                             <li>Added some extra directories of useful ZIM archives to Donwload library</li>
-                            <li>Sample ZIM updated to wikipedia_en_100_maxi_2021-07.zim</li>
+                            <li>Sample ZIM updated to wikipedia_en_100_maxi_2021-08.zim</li>
                             <li>Added more diagnostic APIs to the API panel in Configuration</li>
-                            <li>The app can now take advantage of native Promises, speeding up intensive searches considerably</li>
-                            <li>Decompressors now loaded as fast binary WASM modules if the brower supports WebAssembly</li>
-                            <li>Intalled PWA can now be opened offline when double-clicking ZIM archive (depends on File Handling API)</li>
-                            <li>More displaced hatnotes are now corrected</li>
+                            <li>Provide option for image manipulation (saving to disk or opening in new tab via right-click)</li>
+                            <li>New option to change single right click to double right click for opening new window or tab</li>
                             <li>Fixed issues with toolbars getting stuck on after searching for text in article</li>
-                            <li>Fixed style injection code that would (rarely) cause an exception on some ZIM types</li>
                             <li>Better replication of infobox mobile and desktop styles</li>
                         </ul>
                         <p><a href="https://github.com/kiwix/kiwix-js-windows/blob/master/CHANGELOG.md" target="_blank">Full changelog...<img src="I/s/Icon_External_Link.png"></a></p>
@@ -754,7 +749,7 @@
                                                     <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">
+                                            <div class="col-sm-6" id="imageManipulationDiv">
                                                 <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>
diff --git a/www/js/app.js b/www/js/app.js
index 1701d6cd..482328f2 100644
--- a/www/js/app.js
+++ b/www/js/app.js
@@ -1145,6 +1145,7 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'util', 'cache', 'images', 'sett
         document.getElementById('manipulateImagesCheck').addEventListener('click', function () {
             params.manipulateImages = this.checked;
             settingsStore.setItem('manipulateImages', params.manipulateImages, Infinity);
+            params.themeChanged = true;
         });
         $('input:checkbox[name=hideActiveContentWarning]').on('change', function () {
             params.hideActiveContentWarning = this.checked ? true : false;
@@ -3482,7 +3483,7 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'util', 'cache', 'images', 'sett
             console.log("Loading stylesheets...");
             
             // Display Bootstrap warning alert if the landing page contains active content
-            if (!params.hideActiveContentWarning && params.isLandingPage && params.contentInjectionMode === 'jquery') {
+            if (!params.hideActiveContentWarning && params.isLandingPage && (params.contentInjectionMode === 'jquery' || params.manipulateImages)) {
                 if (regexpActiveContent.test(htmlArticle)) uiUtil.displayActiveContentWarning();
             }
 
diff --git a/www/js/lib/uiUtil.js b/www/js/lib/uiUtil.js
index a75963ae..4260ce06 100644
--- a/www/js/lib/uiUtil.js
+++ b/www/js/lib/uiUtil.js
@@ -321,14 +321,24 @@ define(rqDef, function() {
                 '<a id="swModeLink" href="#contentInjectionModeDiv" class="alert-link">switch to Service Worker mode</a> ' +
                 'if your platform supports it. &nbsp;[<a id="stop" href="#otherSettingsDiv" class="alert-link">Permanently hide</a>]' +
             '</div>';
+        if (params.contentInjectionMode === 'serviceworker' && params.manipulateImages) {
+            alertHTML =
+            '<div id="activeContent" class="alert alert-warning alert-dismissible fade in" style="margin-bottom: 0;">' +
+                '<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>' +
+                '<strong>Active content may be disrupted:</strong> To use Archive Index <b><i>type a space</b></i> in the box above, and you may need to ' +
+                '<a id="imModeLink" href="#imageManipulationDiv" class="alert-link">disable Image manipulation</a>.' +
+                '&nbsp;[<a id="stop" href="#otherSettingsDiv" class="alert-link">Permanently hide</a>]' +
+            '</div>';
+        }
         var alertBoxHeader = document.getElementById('alertBoxHeader');
         alertBoxHeader.innerHTML = alertHTML;
         alertBoxHeader.style.display = 'block';
-        ['swModeLink', 'stop'].forEach(function(id) {
+        ['swModeLink', 'imModeLink', 'stop'].forEach(function(id) {
             // Define event listeners for both hyperlinks in alert box: these take the user to the Config tab and highlight
             // the options that the user needs to select
-            document.getElementById(id).addEventListener('click', function () {
-                var elementID = id === 'stop' ? 'hideActiveContentWarningCheck' : 'serviceworkerModeRadio';
+            var modeLink = document.getElementById(id);
+            if (modeLink) modeLink.addEventListener('click', function () {
+                var elementID = id === 'stop' ? 'hideActiveContentWarningCheck' : id === 'swModeLink' ? 'serviceworkerModeRadio' : 'manipulateImagesCheck';
                 var thisLabel = document.getElementById(elementID).parentNode;
                 thisLabel.style.borderColor = 'red';
                 thisLabel.style.borderStyle = 'solid';