chore: Define devtool tooltips data here

hopsoft · Apr 19, 2023 · c375a84 · c375a84
1 parent 6a643c5
commit c375a84
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 31 deletions.
diff --git a/app/assets/builds/@turbo-boost/elements.js b/app/assets/builds/@turbo-boost/elements.js
diff --git a/app/assets/builds/@turbo-boost/elements.js.map b/app/assets/builds/@turbo-boost/elements.js.map
diff --git a/app/javascript/elements/toggle_elements/trigger_element/index.js b/app/javascript/elements/toggle_elements/trigger_element/index.js
@@ -204,4 +204,55 @@ export default class ToggleTriggerElement extends ToggleElement {
     if (!this.controls) return null
     return document.getElementById(this.controls)
   }
+
+  get triggerTooltipData () {
+    let content = this.triggerElement.viewStack
+      .reverse()
+      .map((view, index) => {
+        return this.triggerElement.sharedViews.includes(view)
+          ? `<div slot="content">${index + 1}. ${view}</div>`
+          : `<div slot="content-bottom">${index + 1}. ${view}</div>`
+      }, this)
+      .join('')
+
+    return {
+      subtitle: `
+      <b>id</b>: ${this.triggerElement.id}<br>
+      <b>aria-controls</b>: ${this.triggerElement.controls}<br>
+      <b>aria-expanded</b>: ${this.triggerElement.expanded}<br>
+      <b>remember</b>: ${this.triggerElement.remember}<br>
+    `,
+      content: `
+      <div slot="content-top">
+        <svg xmlns="http://www.w3.org/2000/svg" style="display:inline-block;" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 2 7 12 12 22 7 12 2"></polygon><polyline points="2 17 12 22 22 17"></polyline><polyline points="2 12 12 17 22 12"></polyline></svg>
+        <b>View Stack</b>
+      </div>
+      ${content}
+    `
+    }
+  }
+
+  get targetTooltipData () {
+    let content = this.targetElement.viewStack
+      .reverse()
+      .map((view, index) => {
+        return this.triggerElement.sharedViews.includes(view)
+          ? `<div slot="content">${index + 1}. ${view}</div>`
+          : `<div slot="content-bottom">${index + 1}. ${view}</div>`
+      }, this)
+      .join('')
+
+    return {
+      subtitle: `<b>id</b>: ${this.targetElement.id}<br>
+      <b>aria-labeled-by</b>: ${this.targetElement.labeledBy}<br>
+`,
+      content: `
+      <div slot="content-top">
+        <svg xmlns="http://www.w3.org/2000/svg" style="display:inline-block;" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 2 7 12 12 22 7 12 2"></polygon><polyline points="2 17 12 22 22 17"></polyline><polyline points="2 12 12 17 22 12"></polyline></svg>
+        <b>View Stack</b>
+      </div>
+      ${content}
+    `
+    }
+  }
 }