SpeciesFileGroup/taxonworks

View on GitHub
app/javascript/vue/composables/useScroll.js

Summary

Maintainability
A
1 hr
Test Coverage
import { isRef, toRefs, reactive, onMounted, onUnmounted } from 'vue'

export function useScroll (elementRef) {
  const scroll = reactive({
    x: 0,
    y: 0
  })

  const updateScrollWithWindow = () => {
    ({ pageXOffset: scroll.x, pageYOffset: scroll.y } = window)
  }

  const updateScrollWithElement = _ => {
    ({ scrollLeft: scroll.x, scrollTop: scroll.y } = elementRef.value)
  }

  const handleScroll = _ => {
    if (elementRef === window) {
      updateScrollWithWindow()
    } else {
      updateScrollWithElement()
    }
  }

  onMounted(() => isRef(elementRef)
    ? elementRef.value.addEventListener('scroll', handleScroll)
    : elementRef.addEventListener('scroll', handleScroll)
  )
  onUnmounted(() => isRef(elementRef)
    ? elementRef.value.removeEventListener('scroll', handleScroll)
    : elementRef.removeEventListener('scroll', handleScroll)
  )
  return toRefs(scroll)
}