Contents

import {controllerFactory} from '@utils/createController'
import {computePosition} from '@floating-ui/dom'

export default class PopoverController extends controllerFactory()({
  targets: {
    button: HTMLButtonElement,
    popover: HTMLElement,
  },
}) {
  connect() {
    this.popoverTarget.addEventListener('toggle', (event: ToggleEvent) => {
      const popover = event.target as HTMLElement
      const invoker = document.querySelector(`[popovertarget="${popover.getAttribute('id')}"`) as HTMLElement

      if (event.newState === 'open') {
        computePosition(invoker, popover, {placement: 'bottom-start'}).then(({x, y}) => {
          Object.assign(popover.style, {
            left: `${x}px`,
            top: `${y}px`,
          })
        })
      }
    })
  }
}

Version data entries

1 entries across 1 versions & 1 rubygems

Version	Path
ariadne_view_components-0.0.76	app/components/ariadne/ui/popover/component.ts