Add markerDeleteButton plugin. (#389)

Author: WeedLordVegeta420

plugins/markerDeleteButton/markerDeleteButton.css

@@ -0,0 +1,16 @@
+.wall-item-container:hover .marker-delete-button {
+  display: block;
+}
+
+.marker-delete-button {
+  display: none;
+  opacity: 0.25;
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  z-index: 999;
+}
+
+.marker-delete-button:hover {
+  opacity: 0.75;
+}

plugins/markerDeleteButton/markerDeleteButton.js

@@ -0,0 +1,41 @@
+(async () => {
+  const markerDeleteButton =
+    '<button class="marker-delete-button btn btn-danger">Delete</button>';
+
+  async function setupMarkerDeleteButton() {
+    document
+      .querySelectorAll("div.wall-item-container")
+      .forEach(function (node) {
+        // Insert delete button.
+        var deleteButton = document.createElement("div");
+        deleteButton.innerHTML = markerDeleteButton;
+        node.prepend(deleteButton);
+
+        // Parse marker ID.
+        var markerImg = node
+          .querySelector(".wall-item-media")
+          .getAttribute("src");
+        var markerID = markerImg.split("/")[6];
+
+        // Register click handler.
+        deleteButton.addEventListener("click", function (e) {
+          deleteMarker(markerID);
+        });
+      });
+  }
+
+  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();
+    });
+  }
+
+  // Wait for markers page to load.
+  csLib.PathElementListener(
+    "/scenes/markers",
+    "div.wall",
+    setupMarkerDeleteButton
+  ); // PathElementListener is from cs-ui-lib.js
+})();

plugins/markerDeleteButton/markerDeleteButton.yml

@@ -0,0 +1,11 @@
+name: Marker Delete Button
+# requires: CommunityScriptsUILibrary
+description: Adds a delete button to entries on the Markers page.
+version: 0.1
+ui:
+  requires:
+    - CommunityScriptsUILibrary
+  javascript:
+    - markerDeleteButton.js
+  css:
+    - markerDeleteButton.css