cheetah-framework/js/framework/plugins/dataLossPreventator.js

Cheetah Framework JS used in all our applications

/* global cheetahApp */
let shouldWatchRouteChange = false
let watchAPI = null

export default {
  install: function (Vue) {
    Vue.mixin({
      computed: {
        defaultMessage () {
          return this.$t('sure_want_to_leave')
        }
      },

      beforeRouteLeave (to, from, next) {
        if (shouldWatchRouteChange) {
          Alert.confirm(this.$t('sure_want_to_leave'), this.$t('sure_want_to_leave_long')).then(() => {
            shouldWatchRouteChange = false
            removeWatchPageChange()
            next()
          }).catch(() => {
            next(false)
          })

          return
        }

        shouldWatchRouteChange = false
        removeWatchPageChange()
        next()
      },

      methods: {
        startWatching (key, deep = true) {
          setTimeout(() => {
            watchAPI = this.$watch(key, {
              handler: noticeRouteChange,
              deep
            })
          }, 1)
        },
        stopWatching () {
          stopWatching()
        }
      }
    })
  }
}

function noticeRouteChange () {
  stopWatching()
  addWatchPageChange()
  shouldWatchRouteChange = true
}

function stopWatching () {
  watchAPI && watchAPI()
  shouldWatchRouteChange = false
  removeWatchPageChange()
}

function addWatchPageChange () {
  window.addEventListener('beforeunload', watchPageChange)
}

function removeWatchPageChange () {
  window.removeEventListener('beforeunload', watchPageChange)
}

function watchPageChange (e) {
  const message = `${cheetahApp.$t('sure_want_to_leave')} \n${cheetahApp.$t('sure_want_to_leave_long')}`
  const eventObj = e || window.event

  eventObj.returnValue = message // Gecko + IE
  return message // Gecko + Webkit, Safari, Chrome etc.
}