i-rubik/src/directives/dropdown.js

A Vue.js 2.0+ UI Components Framework

function dropdown (e, el, binding, bridge, hover) {
  e.preventDefault()

  const component = document.getElementById(binding.arg)

  if (!component.dataset.hover && hover) {
    return
  }

  let width = 0
  let height = 0

  if (component.clientWidth > el.clientWidth
      && Boolean(component.dataset.right)
  ) {
    width = component.clientWidth - el.clientWidth
  }

  if (component.dataset.bottom == true) {
    height = el.clientHeight
  }

  component.style.minWidth = `${el.clientWidth}px`
  component.style.left = `${el.offsetLeft - width}px`
  component.style.top = `${el.offsetTop + height}px`

  bridge.pub(`dropdown:open:${binding.arg}`)
}

function directive (el, binding, v) {
  el.dataset.dropdown = binding.arg

  // Directive binding happens before all components are rendered
  // When changing routes, dropdown element may not be ready
  // Do hover check within dropdown function
  el.onclick = e => dropdown(e, el, binding, v.context.$rubik.bridge, false)
  el.onmouseenter = e => dropdown(e, el, binding, v.context.$rubik.bridge, true)
}

export default {
  bind: directive,
  updated: directive,
  componentUpdated: directive,
  unbind (el) {
    el.removeAttribute('onclick')
    el.removeAttribute('onmouseenter')
    el.removeAttribute('onmouseleave')
    el.removeAttribute('data-dropdown')
  }
}