cheetah-framework/js/framework/directives/sticky.js

Cheetah Framework JS used in all our applications

import StickySidebar from 'sticky-sidebar'

class StickyModule {
  constructor (el, options) {
    this.stickyInstance = new StickySidebar(el, options)
    this.eventBus = options.eventBus || Bus

    this.prepareBindings()
    this.bindEvents()
  }

  prepareBindings () {
    this.bindings = {
      update: this.update.bind(this)
    }
  }

  bindEvents () {
    this.eventBus.$on('sticky:update', this.bindings.update)
  }

  unbindEvents () {
    this.eventBus.$off('sticky:update', this.bindings.update)
  }

  update () {
    this.stickyInstance.updateSticky()
  }

  destroy () {
    this.stickyInstance.destroy()
    this.unbindEvents()
  }
}

const instancesById = {}

export default {
  inserted (el, binding, vnode) {
    Vue.nextTick(() => {
      if (!instancesById[vnode.context._uid]) {
        instancesById[vnode.context._uid] = new StickyModule(el, binding.value)
      } else {
        instancesById[vnode.context._uid].update()
      }
    })
  },

  componentUpdated (el, binding, vnode) {
    instancesById[vnode.context._uid].update()
  },

  unbind (el, binding, vnode) {
    instancesById[vnode.context._uid].destroy()
  }
}