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

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

import {
  h,
  ref,
  computed,
  watch,
  onBeforeUnmount,
  getCurrentInstance,
  Transition
} from 'vue'

import usePageSticky, {
  usePageStickyProps
} from '../page-sticky/use-page-sticky.js'
import {
  getScrollTarget,
  setVerticalScrollPosition
} from '../../utils/scroll/scroll.js'

import { createComponent } from '../../utils/private.create/create.js'

export default createComponent({
  name: 'QPageScroller',

  props: {
    ...usePageStickyProps,

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

    reverse: Boolean,

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

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

  emits: ['click'],

  setup(props, { slots, emit }) {
    const {
      proxy: { $q }
    } = getCurrentInstance()
    const { $layout, getStickyContent } = usePageSticky()
    const rootRef = ref(null)

    let heightWatcher

    const scrollHeight = computed(
      () =>
        $layout.height.value -
        ($layout.isContainer.value === true
          ? $layout.containerHeight.value
          : $q.screen.height)
    )

    function isVisible() {
      return props.reverse === true
        ? scrollHeight.value - $layout.scroll.value.position >
            props.scrollOffset
        : $layout.scroll.value.position > props.scrollOffset
    }

    const showing = ref(isVisible())

    function updateVisibility() {
      const newVal = isVisible()
      if (showing.value !== newVal) {
        showing.value = newVal
      }
    }

    function updateReverse() {
      if (props.reverse === true) {
        if (heightWatcher === void 0) {
          heightWatcher = watch(scrollHeight, updateVisibility)
        }
      } else {
        cleanup()
      }
    }

    watch($layout.scroll, updateVisibility)
    watch(() => props.reverse, updateReverse)

    function cleanup() {
      if (heightWatcher !== void 0) {
        heightWatcher()
        heightWatcher = void 0
      }
    }

    function onClick(e) {
      const target = getScrollTarget(
        $layout.isContainer.value === true
          ? rootRef.value
          : $layout.rootRef.value
      )

      setVerticalScrollPosition(
        target,
        props.reverse === true ? $layout.height.value : 0,
        props.duration
      )

      emit('click', e)
    }

    function getContent() {
      return showing.value === true
        ? h(
            'div',
            {
              ref: rootRef,
              class: 'q-page-scroller',
              onClick
            },
            getStickyContent(slots)
          )
        : null
    }

    updateReverse()

    onBeforeUnmount(cleanup)

    return () => h(Transition, { name: 'q-transition--fade' }, getContent)
  }
})