Sha256: c1a61781fc764789b95aa708a12a5d11130553876a579399a93b590629979d52
Contents?: true
Size: 1.06 KB
Versions: 5
Compression:
Stored size: 1.06 KB
Contents
import { Controller } from '@hotwired/stimulus'
import { useClickOutside } from 'stimulus-use'
export default class extends Controller {
static targets = ['bubble']
connect () {
useClickOutside(this)
this.open = false
}
clickOutside () {
this.close()
}
toggle (e) {
e.preventDefault()
this.open = !this.open
this.render()
}
open () {
this.open = true
this.render()
}
close () {
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'
}
}
}
Version data entries
5 entries across 5 versions & 1 rubygems