Add some dynamic positioning to the ui/toggletip component

solidusio · Oct 24, 2023 · 2a631bc · 2a631bc
1 parent e03ae00
commit 2a631bc
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 8 deletions.
diff --git a/admin/app/components/solidus_admin/ui/toggletip/component.html.erb b/admin/app/components/solidus_admin/ui/toggletip/component.html.erb
@@ -3,7 +3,6 @@
   <%= tag.attributes(**@attributes) %>
 >
   <summary
-    type="button"
     class="
       block
       w-[1rem]
@@ -12,9 +11,8 @@
       [&::marker]:hidden
       [&::-webkit-details-marker]:hidden
     "
-    data-<%= stimulus_id %>-target="button"
     data-action="
-      click:prevent-><%= stimulus_id %>#toggle
+      click-><%= stimulus_id %>#toggle
       keydown.esc@window-><%= stimulus_id %>#close
     "
     aria-label="<%= t('.get_help') %>"
@@ -52,7 +50,6 @@
         before:bg-inherit
         <%= POSITIONS.fetch(@position)[:arrow] %>
       "
-      data-<%= stimulus_id %>-target="content"
     >
       <%= @text %>
     </span>

diff --git a/admin/app/components/solidus_admin/ui/toggletip/component.js b/admin/app/components/solidus_admin/ui/toggletip/component.js
@@ -2,25 +2,43 @@ import { Controller } from '@hotwired/stimulus'
 import { useClickOutside } from 'stimulus-use'
 
 export default class extends Controller {
-  static targets = ['button', 'bubble', 'content']
+  static targets = ['bubble']
 
   connect () {
     useClickOutside(this)
+    this.open = false
   }
 
   clickOutside () {
     this.close()
   }
 
   toggle (e) {
-    this.element.open = !this.element.open
+    e.preventDefault()
+    this.open = !this.open
+    this.render()
   }
 
   open () {
-    this.element.open = true
+    this.open = true
+    this.render()
   }
 
   close () {
-    this.element.open = false
+    this.open = false
+    this.render()
+  }
+
+  render() {
+    const needsPositioning = this.open && !this.element.open
+    this.element.open = this.open
+
+    if (needsPositioning) {
+      const bubbleRect = this.bubbleTarget.getBoundingClientRect()
+      if (bubbleRect.right  > window.innerWidth) this.bubbleTarget.style.left = `${window.innerWidth - bubbleRect.width}px`
+      if (bubbleRect.bottom > window.innerHeight) this.bubbleTarget.style.top = `${window.innerHeight - bubbleRect.height}px`
+      if (bubbleRect.left < 0) this.bubbleTarget.style.left = '0px'
+      if (bubbleRect.top < 0) this.bubbleTarget.style.top = '0px'
+    }
   }
 }