add custom events

DonovanDMC · DonovanDMC · commit 53cf76a28063 · 2024-09-08T01:01:20.000-05:00
diff --git a/index.html b/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8">
     <title>E621 OpenAPI Documentation</title>
-    <script defer data-domain="e621.wiki" src="https://plausible.furry.computer/js/script.js"></script>
+    <script defer data-domain="e621.wiki" src="https://plausible.furry.computer/js/script.tagged-events.js"></script>
   </head>
 
   <body>
diff --git a/package.json b/package.json
@@ -22,6 +22,7 @@
     "clean-webpack-plugin": "^4.0.0",
     "favicons-webpack-plugin": "^6.0.1",
     "html-webpack-plugin": "^5.6.0",
+    "jquery": "^3.7.1",
     "swagger-themes": "^1.4.3",
     "swagger-ui": "^5.17.14"
   },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/index.ts b/src/index.ts
@@ -1,9 +1,27 @@
 import SwaggerUI from "swagger-ui";
 import "swagger-ui/dist/swagger-ui.css";
 import "swagger-themes/themes/dark.css";
+import "jquery";
+
+function addEvent(selector: string, event: string, properties: (element: Element) => Record<string, string>): void {
+    const items = Array.from(document.querySelectorAll(selector));
+    for (const item of items) {
+        const props = properties(item);
+        item.classList.add(`plausible-event-name=${event.replaceAll(" ", "+")}`);
+        for (const [key, value] of Object.entries(props)) {
+            item.classList.add(`plausible-event-${key}=${value.replaceAll(" ", "+")}`);
+        }
+    }
+}
 
 SwaggerUI({
     // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, unicorn/prefer-module
     spec:   require("../openapi.yaml"),
-    dom_id: "#swagger-ui"
+    dom_id: "#swagger-ui",
+    onComplete() {
+        addEvent("button.opblock-summary-control", "Open Endpoint", element => ({ endpoint: element.querySelector(".opblock-summary-description")!.textContent! }));
+        addEvent(".btn.authorize ", "Open Authorize", () => ({}));
+        addEvent(".json-schema-2020-12-accordion", "Toggle Schema", element => ({ schema: element.querySelector(".json-schema-2020-12__title")!.textContent! }));
+        addEvent(".json-schema-2020-12-expand-deep-button", "Toggle Schema", element => ({ schema: element.parentNode!.querySelector(".json-schema-2020-12__title")!.textContent! }));
+    }
 });
