[markerDeleteButton] Fixes delete button display (#714)

plugins/markerDeleteButton/README.md

@@ -1,3 +1,5 @@
 # Marker Delete Button
 
-https://discourse.stashapp.cc/t/marker-delete-button/1381
+https://discourse.stashapp.cc/t/marker-delete-button/1381
+
+Allows for quickly deleting a Marker by adding a delete button to Marker preview tile on Markers page and Scene page's Marker tab.

plugins/markerDeleteButton/markerDeleteButton.css

@@ -1,4 +1,8 @@
-.wall-item-container:hover .marker-delete-button {
+div.marker-delete-wrapper {
+  position: relative;
+}
+
+.wall-item:hover .marker-delete-button {
   display: block;
 }
 

plugins/markerDeleteButton/markerDeleteButton.js

@@ -4,91 +4,31 @@
 
   async function setupMarkerDeleteButtonForMarkersWall() {
     document
-      .querySelectorAll("div.wall-item-container")
+      .querySelectorAll("div.wall-item")
       .forEach(function (node) {
         // Insert delete button.
         var deleteButton = document.createElement("div");
+        deleteButton.classList.add('marker-delete-wrapper');
         deleteButton.innerHTML = markerDeleteButton;
         node.prepend(deleteButton);
 
         // Parse marker ID.
         var markerImg = node
-          .querySelector(".wall-item-media")
+          .querySelector("video")
           .getAttribute("src");
         var markerID = markerImg.split("/")[6];
 
         // Register click handler.
-        deleteButton.addEventListener("click", async () => {
+        deleteButton.addEventListener("click", async (e) => {
+          e.stopPropagation();
           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);
+          if (window.location.href.indexOf("/scenes/markers") > -1)
+          {
+            window.location.reload();
+          } else {
+            node.remove();
           }
-
-          // 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();
-            }
-          });
-        }
+        });
       });
   }
 
@@ -102,13 +42,13 @@
   // PathElementListener is from cs-ui-lib.js
   csLib.PathElementListener(
     "/scenes/markers",
-    "div.wall",
+    "div.marker-wall",
     setupMarkerDeleteButtonForMarkersWall
   );
 
   csLib.PathElementListener(
     "/scenes/",
     "div.scene-markers-panel",
-    setupMarkerDeleteButtonForScenePage
+    setupMarkerDeleteButtonForMarkersWall
   );
 })();

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 and on the Scene page.
-version: 0.2
+version: 0.3
 url: https://discourse.stashapp.cc/t/marker-delete-button/1381
 ui:
   requires: