Merge pull request #393 from Shared-Reality-Lab/button-toggle

fix: toggle buttons options

src/_locales/en/messages.json

@@ -198,6 +198,10 @@
         "message": "Developer Mode",
         "description": "Header for developer mode options in extension preferences."
     },
+    "buttonsToggle": {
+        "message": "Add invisible IMAGE button after each photograph",
+        "description": "Étiquette pour basculer le bouton invisible dans les préférences de l'extension."
+    },
     "errorMessage": {
         "message": "An error occurred while trying to connect to the IMAGE server. Please try again later. If this error persists, please contact the IMAGE team by email at ",
         "description": "Error message when server is unreachable."

src/_locales/fr/messages.json

@@ -198,6 +198,10 @@
         "message": "Mode développeur",
         "description": "Étiquette pour le mode développeur"
     },
+    "buttonsToggle": {
+        "message": "Ajouter un bouton IMAGE invisible après chaque photo",
+        "description": "Header for toggle invisible button in extension preferences."
+    },
     "errorMessage": {
         "message": "Une erreur s'est produite lors de la connexion au serveur IMAGE. Veuillez réessayer plus tard. Si cette erreur persiste, veuillez contacter l'équipe IMAGE par courriel à ",
         "description": "Message d'erreur lorsque le serveur est inaccessible."

src/background.ts

@@ -296,12 +296,29 @@ browser.runtime.onMessage.addListener(msg => {
   if (msg.keepAlive) console.log('keepAlive');
 });
 
+
 async function updateDebugContextMenu() {
   let items = await getAllStorageSyncData();
+  //console.log("Saved Items", items);
   showDebugOptions = items["developerMode"];
   previousToggleState = items["previousToggleState"];
+  displayInvisibleButtons = items["displayInvisibleButtons"];
   let tabs = browser.tabs.query({})
+  //console.log("inside Background new code", displayInvisibleButtons)
 
+  // let tabs = browser.tabs.query({ active: true, currentWindow: true });
+  tabs.then(async function (tabs) {
+    for (var i = 0; i < tabs.length; i++) {
+      if (tabs[i].url && !tabs[i].url?.startsWith("chrome://") && tabs[i].id) {
+        let tabId = tabs[i].id || 0;  
+        ports[tabId].postMessage({
+          "type": "handleInvisibleButton",
+          "displayInvisibleButtons": displayInvisibleButtons
+        });
+      }
+    }
+  });
+
   if (showDebugOptions) {
     tabs.then(function (tabs) {
       for (var i = 0; i < tabs.length; i++) {
@@ -415,6 +432,14 @@ function disableContextMenu() {
 function handleUpdated(tabId: any, changeInfo: any) {
   if (changeInfo.status == "complete") {
     enableContextMenu();
+    //console.log("Handle Updated function", displayInvisibleButtons);
+    // send message 
+    if(ports[tabId]){
+      ports[tabId].postMessage({
+        "type": "handleInvisibleButton",
+        "displayInvisibleButtons": displayInvisibleButtons
+      });
+    } 
   } else if (changeInfo.status == "unloaded" || changeInfo.status == "loading") {
     disableContextMenu();
   }
@@ -449,9 +474,12 @@ var showDebugOptions: Boolean;
 
 var previousToggleState: Boolean;
 
+var displayInvisibleButtons : Boolean;
+
 getAllStorageSyncData().then((items) => {
   showDebugOptions = items["developerMode"];
   previousToggleState = items["previousToggleState"];
+  displayInvisibleButtons = items["displayInvisibleButtons"];
   console.debug("debug value inside storage sync data", showDebugOptions);
   if (showDebugOptions) {
     browser.contextMenus.create({

src/buttons.js

@@ -90,6 +90,7 @@ function processGraphics() {
     let button = document.createElement("button");
     button.type = "button";
     button.innerText = "Interpret graphic with IMAGE";
+    button.classList.add("sr-button");
     /* Make the button hidden depending on the config */
     if (!buttons) {
       button.classList.add("sr-only");
@@ -106,14 +107,14 @@ function processGraphics() {
     })
     // add inline css for sr-only class to handle print display
     // this is because some sites do not apply external stylesheet when using window.print and buttons were visible in PDF 
-    button.style.position = "absolute";
-    button.style.width= "1px";
-    button.style.height = "1px";
-    button.style.padding = "0px";
-    button.style.margin = "-1px";
-    button.style.overflow = "hidden";
-    button.style.clip = "rect(0, 0, 0, 0)";
-    button.style.border = "0";
+    // button.style.position = "absolute";
+    // button.style.width= "1px";
+    // button.style.height = "1px";
+    // button.style.padding = "0px";
+    // button.style.margin = "-1px";
+    // button.style.overflow = "hidden";
+    // button.style.clip = "rect(0, 0, 0, 0)";
+    // button.style.border = "0";
 
     image.parentNode.insertBefore(button, image.nextSibling);
   }

src/content.ts

@@ -23,12 +23,18 @@ var selectedElement: HTMLElement | null = null;
 
 let port = browser.runtime.connect();
 var extVersion = process.env.NODE_ENV || "";
+let showInvisibleButtons = true;
 //console.debug("Extension Version", extVersion);
 
-var versionDiv = document.createElement("div");
-versionDiv.id = "version-div";
-versionDiv.setAttribute("ext-version", extVersion);
-(document.head || document.documentElement).appendChild(versionDiv);
+// var versionDiv = document.createElement("div");
+// versionDiv.id = "version-div";
+// versionDiv.setAttribute("ext-version", extVersion);
+
+var styleDiv = document.createElement("style");
+//versionDiv.id = "version-div";
+styleDiv.textContent = ".sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0;}";
+styleDiv.textContent += ".display-none{ display: none; !important}";
+(document.head || document.documentElement).appendChild(styleDiv);
 
 var script = document.createElement('script');
 script.src = browser.runtime.getURL('buttons.js');
@@ -67,10 +73,40 @@ document.addEventListener("contextmenu", (evt: Event) => {
     selectedElement = evt.target as HTMLElement;
     //console.debug(selectedElement.id);
 });
+function displayInvisibleButtons(){
+    //console.log("DisplayInvisibleButtons");
+    showInvisibleButtons = true;
+    document.querySelectorAll(".sr-button").forEach((element)=>{
+        var button = element as HTMLButtonElement
+        button.classList.add("sr-only");
+        button.classList.remove("display-none");
+        //button.style.display = "none";
+    })
+}
+
+function hideInvisibleButtons(){
+    //console.log("hideInvisibleButtons");
+    showInvisibleButtons = false;
+    document.querySelectorAll(".sr-button").forEach((element)=>{
+        var button = element as HTMLButtonElement
+        button.classList.remove("sr-only");
+        button.classList.add("display-none");
+    })
+}
+
 port.onMessage.addListener(async message => {
     const serializer = new XMLSerializer();
     let imageElement: HTMLImageElement;
     if(message && message.status == "ping" ) return;
+    if(message["type"] === "handleInvisibleButton"){
+        if(message["displayInvisibleButtons"]){
+            displayInvisibleButtons();
+        } else {
+            hideInvisibleButtons();
+        }
+        //console.log("message received inside content script", message["displayInvisibleButtons"]);
+        return;
+    }
     if (selectedElement instanceof HTMLImageElement) {
         imageElement = selectedElement;
     } else {
@@ -186,6 +222,11 @@ document.onreadystatechange = function () {
             // Process maps on page
             processMaps(document, port, extVersion);
             processMAPImages(document, port, extVersion);
+            if (showInvisibleButtons){
+                displayInvisibleButtons();
+            } else {
+                hideInvisibleButtons();
+            }
         }
     }, 1500)
 }

src/options/options.css

@@ -46,10 +46,14 @@ button:hover {
   overflow:auto;
 }
 
-#developer-mode{
+#developer-mode, #sr-button-toggle{
   display: flex;
 }
 
+#sr-button-toggle {
+  margin-top: 1rem;
+}
+
 #developer-mode-text{
   color: black;
   font-size: x-large;
@@ -60,6 +64,11 @@ button:hover {
   margin-top: 17px;
   left: 10px;
 }
+
+#toggle-button {
+  left: 10px;
+}
+
 .toggle-container {
   position:relative;
   display: inline-block;
@@ -193,7 +202,7 @@ line-height: 20pt;
   gap: 1vw;
 }
 
-#languageSelectionLabel {
+#languageSelectionLabel , #buttonsToggle{
 color: black;
 font-size: medium;
 font-weight: 400;

src/options/options.html

@@ -26,6 +26,14 @@ <h1 class="localisation" id="renderingOptions"></h1>
             <label class="localisation" id="languageWarning"></label>
         </div>
 
+        <div id="sr-button-toggle">
+            <label class="localisation" id="buttonsToggle"></label>
+            <div id= "toggle-button" class="toggle-container">
+                <input type="checkbox" id="toggle-checkbox"/>
+                <div class="slider round"></div>
+            </div>
+        </div>
+
         <div id="wrapper-div">
             <h1 class="localisation" id="advancedOptions"></h1> 
             <h3 class="localisation" id="serverOptions"></h3>

src/options/options.ts

@@ -36,6 +36,7 @@ const haply2diy3genSetting =  <HTMLInputElement>(document.getElementById("haply-
 const audioRenderingsSetting =  <HTMLInputElement>(document.getElementById("audio-renderings"));
 const textRenderingsSetting = <HTMLInputElement>(document.getElementById("text-renderings"));
 const languageSetting = <HTMLInputElement>(document.getElementById("language-selection"));
+const displayInvisibleButtons = <HTMLInputElement>(document.getElementById("toggle-checkbox"));
 
 if (toggleButton) {
   toggleButton?.addEventListener("click", showDeveloperSettings);
@@ -95,7 +96,8 @@ function saveOptions() {
     haply2diy3gen: haply2diy3genSetting.checked,
     audio:audioRenderingsSetting.checked,
     text:textRenderingsSetting.checked,
-    language:languageSetting.value
+    language:languageSetting.value,
+    displayInvisibleButtons : displayInvisibleButtons.checked
   }),
     (function () {
       optionsCheck();
@@ -120,7 +122,8 @@ function restore_options() {
       haply2diy3gen: false,
       audio:true,
       text:true,
-      language: "auto"
+      language: "auto",
+      displayInvisibleButtons: true
     })
     .then((items) => {
       (<HTMLInputElement>document.getElementById("input-url")).value =
@@ -134,7 +137,7 @@ function restore_options() {
         audioRenderingsSetting.checked = items["audio"];
         textRenderingsSetting.checked = items["text"];
         languageSetting.value = items["language"];
-
+        displayInvisibleButtons.checked = items["displayInvisibleButtons"];
         if (toggleButton.checked &&  navigatorSerial !== undefined) {
           developerSettings.style.display = "block"; 
         }

src/styles.css

@@ -3,7 +3,7 @@
     margin-left: 5px;
 }
 
-.sr-only {
+/* .sr-only {
     position: absolute;
     width: 1px;
     height: 1px;
@@ -12,8 +12,11 @@
     overflow: hidden;
     clip: rect(0, 0, 0, 0);
     border: 0;
-}
+} */
 
+/* .display-none{
+    display: none;
+} */
 /** Safari */
 @media not all and (min-resolution: 0.001dpcm) {
     .sr-only{

src/utils.ts

@@ -26,7 +26,8 @@ export function getAllStorageSyncData() {
     processItem: "",
     requestItem: "",
     mweItem: "",
-    language: "auto"
+    language: "auto",
+    displayInvisibleButtons: true
   });
 };