Vuejs directive, have floating window (eg custom dropdown) always be visible on the page.

directives.ts

import Vue from 'vue'


let handleWindowResize

export function moveFromWindowLeft(el, binding) {

  const showElement = binding.value

  if (!showElement) {
    el.style.display = "none"
    return
  }
  
  el.style.display = ""

  var buffer = 20

  if (el.getBoundingClientRect().width != 0) {

    var parentRect = el.parentElement.getBoundingClientRect();


    var rect = el.getBoundingClientRect(),
    scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,
    scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    var pos =  { top: rect.top + scrollTop, left: rect.left + scrollLeft }

    var offset = window.innerWidth - (rect.left + rect.width)

    var buffer = 10

    var absoluteXOffset = window.innerWidth - (rect.width + buffer)

    var offset = absoluteXOffset - parentRect.left;
    // console.log("offset ",offset)

    var rightStyle = "right: unset"

    if (offset < 0) {
      el.style.right = "unset !important"
      var leftStyle = "left: "+Math.round(offset)+"px"

      var styleString = [rightStyle, leftStyle].join("; ")+";"
      el.setAttribute("style", styleString);
    } else {
      el.setAttribute("style","")
    }


  }

}

Vue.directive('always-show', {

  componentUpdated(el, binding, vnode) {
    // console.log('componentUpdated')
    moveFromWindowLeft(el,binding)
  },

  update(el, binding, vnode) {
    // console.log('update')
    moveFromWindowLeft(el,binding)
  },

  inserted(el, binding, vnode) {
    // console.log('inserted')
    moveFromWindowLeft(el,binding)

  },

  bind(el, binding, vnode) {
    // console.log('bind')

    handleWindowResize = (e) => {
      moveFromWindowLeft(el,binding)
    }

    window.addEventListener('resize', handleWindowResize)
  },
  unbind(el, binding, vnode) {
    // console.log('unbind')

    window.removeEventListener('resize', handleWindowResize)
  }
})

example.html

<div v-always-show="someShowVariable"></div>

The function of this code would be to takeover a v-show dropdown menu that could possibly go on the right side of the screen, and always make it fully visible with a buffer. I didn't know of an existing Vuejs directive so I wrote this one.