quasar 15.10 plugin for responsive screen reactive properties

screen.js

import VueObject from 'vue'

var resizeManager = (function () {
  var callbacks = [],
    running = false

  function resize() {
    if (!running) {
      running = true

      if (window.requestAnimationFrame) {
        window.requestAnimationFrame(runCallbacks)
      } else {
        setTimeout(runCallbacks, 66)
      }
    }
  }

  function runCallbacks() {
    callbacks.forEach(function (callback) {
      callback()
    })
    running = false
  }

  function addCallback(callback) {
    if (callback) {
      callbacks.push(callback)
    }
  }

  return {
    add: function (callback) {
      if (!callbacks.length) {
        window.addEventListener('resize', resize)
      }
      addCallback(callback)
    }
  }
})()

let $xs = 576
let $sm = 768
let $md = 992
let $lg = 1200

let vm = new VueObject({
  data: {
    width: 0,
    height: 0,
    eq: {
      xs: false,
      sm: false,
      md: false,
      lg: false,
      xl: false
    },
    lt: {
      xs: false,
      sm: false,
      md: false,
      lg: false,
      xl: false
    },
    lte: {
      xs: false,
      sm: false,
      md: false,
      lg: false,
      xl: false
    },
    gt: {
      xs: false,
      sm: false,
      md: false,
      lg: false,
      xl: false
    },
    gte: {
      xs: false,
      sm: false,
      md: false,
      lg: false,
      xl: false
    }
  },
  methods: {
    refresh() {
      this.width = window.innerWidth
      this.height = window.innerHeight
      let w = this.width

      this.eq.xs = w <= $xs
      this.eq.sm = w > $xs && w <= $sm
      this.eq.md = w > $sm && w <= $md
      this.eq.lg = w > $md && w <= $lg
      this.eq.xl = w > $lg
      this.gt.xs = w > $xs
      this.gt.sm = w > $sm
      this.gt.md = w > $md
      this.gt.lg = w > $lg
      this.gt.xl = false
      this.gte.xs = true
      this.gte.sm = w > $xs
      this.gte.md = w > $sm
      this.gte.lg = w > $md
      this.gte.xl = w > $lg
      this.lt.xs = false
      this.lt.sm = w <= $xs
      this.lt.md = w <= $sm
      this.lt.lg = w <= $md
      this.lt.xl = w <= $lg
      this.lte.xs = w <= $xs
      this.lte.sm = w <= $sm
      this.lte.md = w <= $md
      this.lte.lg = w <= $lg
      this.lte.xl = true

      //console.log(JSON.stringify(this._data, null, 2))
    }
  },
  created() {
    this.refresh()
    resizeManager.add(this.refresh)
  }
})

export default ({
  Vue
}) => {
  Vue.prototype.$screen = vm._data
}