WIP: overlay toggle improvements and enabling drawing #8

acidflow-noita · May 16, 2024 · 3291196 · 3291196
1 parent d622253
commit 3291196
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 11 deletions.
diff --git a/public/css/style.css b/public/css/style.css
@@ -54,7 +54,7 @@ html {
   margin-left: auto;
   margin-right: 2vw;
 }
-#overlayVisibilityToggleButton {
+#overlayVisibilityToggle {
   margin-left: auto;
   margin-right: 2vw;
 }
@@ -157,7 +157,7 @@ html {
     transform: rotate(360deg);
   }
 }
-body.toggle-hidden a#overlayVisibilityToggleButton {
+body.toggle-hidden div:has(> #overlayVisibilityToggle) {
   visibility: hidden;
 }
 body.toggle-hidden div.osOverlayHighlight {

diff --git a/public/index.html b/public/index.html
@@ -44,8 +44,22 @@
       <a id="goToMainWebsiteButton" tabindex="0" href="https://runfast.stream" target="\_blank"
         class="btn btn-outline-warning text-nowrap" data-bs-trigger="focus" role="button"><i
           class="icon-runfast"></i></a>
-      <a id="overlayVisibilityToggleButton" tabindex="0" class="btn btn-outline-info text-nowrap"
-        data-bs-trigger="focus" role="button"><i class="bi bi-layers"></i> Toggle overlays</a>
+      <span id="overlaySpan" class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" data-bs-title="">
+        <div class="form-check form-switch">
+          <input class="form-check-input" type="checkbox" role="switch" id="overlayVisibilityToggle">
+          <label class="form-check-label" for="overlayVisibilityToggle"><i class="bi bi-layers"></i> Show
+            overlays</label>
+        </div>
+      </span>
+
+      <!-- TODO: add drawing -->
+      <!-- <div class="form-check form-switch"> -->
+      <!--   <input class="form-check-input" type="checkbox" role="switch" id="drawingToggleSwitch"> -->
+      <!--   <label class="form-check-label" for="drawingToggleSwitch"><i class="bi bi-brush"></i> Draw</label> -->
+      <!-- </div> -->
+      <!-- <a id="eraseAnnotationDrawingsButton" tabindex="0" class="btn btn-outline-info text-nowrap"
+        data-bs-trigger="focus" role="button" onclick="eraseDrawings()"><i class="bi bi-eraser"></i></a> -->
+
       <a id="shareButton" tabindex="0" class="btn btn-outline-success text-nowrap" data-bs-trigger="focus"
         data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Copied!"
         role="button" onclick="getShareUrl();"><i class="bi bi-copy"></i> Copy to clipboard</a>

diff --git a/public/js/script.js b/public/js/script.js
@@ -1,8 +1,5 @@
 // TODO: Add annotations
 // annotations plugin
-// const annotations = new OpenSeadragon.Annotations({ viewer });
-
-// os.initializeAnnotations();
 
 "use strict";
 
@@ -351,15 +348,27 @@ const changeMap = (() => {
     // modify the DOM to show the current map name based on the contents of the link
     // to activate that map
     document.getElementById("currentMapName").innerHTML = currentMapLink.innerHTML;
-
+    const mytooltip = bootstrap.Tooltip.getInstance("#overlaySpan");
     // Quick hack to fix toggle overlays button
+    const overlaySpan = document.querySelector("#overlaySpan");
     switch (mapName) {
       case "regular-main-branch":
       case "regular-beta":
-        document.body.classList.remove("toggle-hidden");
+        // document.body.classList.remove("toggle-hidden");
+        document.querySelector("#overlayVisibilityToggle").disabled = false;
+        // overlaySpan.dataset["bsToggle"] = "tooltip";
+        // overlaySpan.dataset["bsPlacement"] = "bottom";
+        // overlaySpan.innerText = "";
+        mytooltip.disable();
         break;
       default:
-        document.body.classList.add("toggle-hidden");
+        // document.body.classList.add("toggle-hidden");
+
+        document.querySelector("#overlayVisibilityToggle").disabled = true;
+        mytooltip.enable();
+        overlaySpan.dataset["bsToggle"] = "tooltip";
+        overlaySpan.dataset["bsPlacement"] = "bottom";
+        overlaySpan.dataset["bsTitle"] = "Overlays are not available for this map";
     }
 
     // update url to refer to the map we just selected
@@ -502,7 +511,7 @@ const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]
 const popoverList = [...popoverTriggerList].map((popoverTriggerEl) => new bootstrap.Popover(popoverTriggerEl));
 
 let allOverlays = document.getElementsByClassName("osOverlayHighlight");
-document.querySelector("#overlayVisibilityToggleButton").addEventListener("click", function () {
+document.querySelector("#overlayVisibilityToggle").addEventListener("click", function () {
   const updatedUrlParamsFromOverlaysToggle = new URLSearchParams(window.location.search);
   const currentMapURLFromOverlaysToggle = String(updatedUrlParamsFromOverlaysToggle.get("map"));
   if (overlaysState) {
@@ -605,3 +614,20 @@ function addTooltips() {
   const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
   const tooltipList = [...tooltipTriggerList].map((tooltipTriggerEl) => new bootstrap.Tooltip(tooltipTriggerEl));
 }
+
+const drawingToggleSwitch = document.getElementById("drawingToggleSwitch");
+
+function eraseDrawings() {
+  os.annotations.clean();
+  console.log("cleared");
+}
+
+drawingToggleSwitch.addEventListener("change", (event) => {
+  if (event.currentTarget.checked && os.areAnnotationsActive() == false) {
+    os.initializeAnnotations();
+    console.log("checked");
+  } else {
+    os.shutdownAnnotations();
+    console.log("not checked");
+  }
+});