component.js in solidus_admin-0.1.0

- old
+ new

@@ -1,26 +1,44 @@
 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'
+    }
   }
 }