quasar/src/components/page-scroller/QPageScroller.js

Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time

import Vue from 'vue'

import QPageSticky from '../page-sticky/QPageSticky.js'
import { getScrollTarget, setScrollPosition } from '../../utils/scroll.js'

export default Vue.extend({
  name: 'QPageScroller',

  mixins: [ QPageSticky ],

  props: {
    scrollOffset: {
      type: Number,
      default: 1000
    },

    reverse: Boolean,

    duration: {
      type: Number,
      default: 300
    },

    offset: {
      default: () => [18, 18]
    }
  },

  inject: {
    layout: {
      default () {
        console.error('QPageScroller needs to be used within a QLayout')
      }
    }
  },

  data () {
    return {
      showing: this.__isVisible()
    }
  },

  computed: {
    scrollHeight () {
      return this.layout.height - (
        this.layout.container === true
          ? this.layout.containerHeight
          : this.$q.screen.height
      )
    },

    onEvents () {
      return {
        ...this.qListeners,
        click: this.__onClick
      }
    }
  },

  watch: {
    'layout.scroll.position' () {
      this.__updateVisibility()
    },

    reverse: {
      handler (val) {
        if (val === true) {
          if (this.heightWatcher === void 0) {
            this.heightWatcher = this.$watch('scrollHeight', this.__updateVisibility)
          }
        }
        else if (this.heightWatcher !== void 0) {
          this.__cleanup()
        }
      },
      immediate: true
    }
  },

  methods: {
    __isVisible () {
      return this.reverse === true
        ? this.scrollHeight - this.layout.scroll.position > this.scrollOffset
        : this.layout.scroll.position > this.scrollOffset
    },

    __onClick (e) {
      const target = getScrollTarget(this.layout.container === true ? this.$el : this.layout.$el)
      setScrollPosition(target, this.reverse === true ? this.layout.height : 0, this.duration)
      this.$emit('click', e)
    },

    __updateVisibility () {
      const newVal = this.__isVisible()
      if (this.showing !== newVal) {
        this.showing = newVal
      }
    },

    __cleanup () {
      this.heightWatcher()
      this.heightWatcher = void 0
    }
  },

  render (h) {
    return h('transition', {
      props: { name: 'q-transition--fade' }
    },
    this.showing === true
      ? [
        h('div', {
          staticClass: 'q-page-scroller',
          on: this.onEvents
        }, [
          QPageSticky.options.render.call(this, h)
        ])
      ]
      : null
    )
  },

  beforeDestroy () {
    this.heightWatcher !== void 0 && this.__cleanup()
  }
})