[markerDeleteButton] Delete buttons on Scene page next to Edit button (#416)

Author: MinasukiHikimuna

plugins/markerDeleteButton/markerDeleteButton.js

@@ -2,7 +2,7 @@
   const markerDeleteButton =
     '<button class="marker-delete-button btn btn-danger">Delete</button>';
 
-  async function setupMarkerDeleteButton() {
+  async function setupMarkerDeleteButtonForMarkersWall() {
     document
       .querySelectorAll("div.wall-item-container")
       .forEach(function (node) {
@@ -18,24 +18,97 @@
         var markerID = markerImg.split("/")[6];
 
         // Register click handler.
-        deleteButton.addEventListener("click", function (e) {
-          deleteMarker(markerID);
+        deleteButton.addEventListener("click", async () => {
+          await deleteMarker(markerID);
+          window.location.reload();
         });
       });
   }
 
+  async function setupMarkerDeleteButtonForScenePage() {
+    const markerMap = new Map();
+
+    // Build a map of marker identifiers based on the preview videos.
+    document
+      .querySelectorAll("div.wall-item-container")
+      .forEach(function (node) {
+        const markerTag = node.querySelector(".wall-tag").innerText;
+        const markerTime = node
+          .querySelector(".wall-item-text div")
+          .innerText.split(" - ")[1];
+        const markerImg = node
+          .querySelector(".wall-item-media")
+          .getAttribute("src");
+        const markerID = markerImg.split("/")[6];
+
+        // Use a combined key of tag and time to uniquely identify markers.
+        const markerKey = `${markerTag}_${markerTime}`;
+        markerMap.set(markerKey, markerID);
+      });
+
+    // Now, add the delete button to the appropriate markers.
+    document
+      .querySelectorAll("div.primary-card-body .row")
+      .forEach(function (node) {
+        // Insert delete button.
+        var deleteButton = document.createElement("button");
+        deleteButton.type = "button";
+        deleteButton.className = "btn btn-link ml-auto";
+        deleteButton.innerText = "Delete";
+
+        // Parse marker tag and time.
+        const markerTag = node.querySelector(".btn.btn-link").innerText;
+        const timeDiv = node.nextElementSibling;
+        const markerTime = timeDiv ? timeDiv.innerText : null;
+
+        // Generate the key to find the marker ID.
+        const markerKey = `${markerTag}_${markerTime}`;
+        const markerID = markerMap.get(markerKey);
+
+        if (markerID) {
+          // Insert the delete button next to the Edit button.
+          var editButton = node.querySelector(".btn.btn-link.ml-auto");
+          if (editButton) {
+            editButton.insertAdjacentElement("afterend", deleteButton);
+          }
+
+          // Register click handler with the correct marker ID.
+          deleteButton.addEventListener("click", async (e) => {
+            await deleteMarker(markerID);
+
+            var markerContainer = deleteButton.parentElement.parentElement;
+            var markersContainer = markerContainer.parentElement;
+            var markerTagContainer = markersContainer.parentElement;
+
+            // Remove the element for this marker.
+            deleteButton.parentElement.parentElement.remove();
+
+            // If there are no more markers for this tag, remove the marker tag container.
+            if (!markersContainer.hasChildNodes()) {
+              markerTagContainer.remove();
+            }
+          });
+        }
+      });
+  }
+
   async function deleteMarker(markerID) {
     const variables = { id: markerID };
     const query = `mutation SceneMarkerDestroy($id: ID!) {sceneMarkerDestroy(id: $id)}`;
-    await csLib.callGQL({ query, variables }).then(() => {
-      window.location.reload();
-    });
+    await csLib.callGQL({ query, variables });
   }
 
   // Wait for markers page to load.
+  // PathElementListener is from cs-ui-lib.js
   csLib.PathElementListener(
     "/scenes/markers",
     "div.wall",
-    setupMarkerDeleteButton
-  ); // PathElementListener is from cs-ui-lib.js
+    setupMarkerDeleteButtonForMarkersWall
+  );
+
+  csLib.PathElementListener(
+    "/scenes/",
+    "div.scene-markers-panel",
+    setupMarkerDeleteButtonForScenePage
+  );
 })();

plugins/markerDeleteButton/markerDeleteButton.yml

@@ -1,7 +1,7 @@
 name: Marker Delete Button
 # requires: CommunityScriptsUILibrary
-description: Adds a delete button to entries on the Markers page.
-version: 0.1
+description: Adds a delete button to entries on the Markers page and on the Scene page.
+version: 0.2
 ui:
   requires:
     - CommunityScriptsUILibrary