Skip to content

Instantly share code, notes, and snippets.

@lmiller1990
Created December 7, 2019 08:45
Show Gist options
  • Save lmiller1990/dc2d06a903ffe4e2feeeadd4628e857e to your computer and use it in GitHub Desktop.
Save lmiller1990/dc2d06a903ffe4e2feeeadd4628e857e to your computer and use it in GitHub Desktop.
<script lang="ts">
import Vue from 'vue'
import { getScrollPercentage, updateCircle } from './progress'
interface IData {
percent: number
scrollEvent: ((this: Window, ev: Event) => void) | null
}
export default Vue.extend({
name: 'Progress',
data(): IData {
return {
percent: 0,
scrollEvent: null,
}
},
mounted() {
const circle = this.$el.querySelector<SVGCircleElement>("circle")
const progressStartMarker = document.querySelector<HTMLElement>('#progress-marker-start')
const progressEndMarker = document.querySelector<HTMLElement>('#progress-marker-end')
if (!progressStartMarker || !progressEndMarker || !circle) {
throw Error('Progress markers not found')
}
window.addEventListener('scroll', () => {
const percent = getScrollPercentage(progressStartMarker, progressEndMarker)
updateCircle(circle, percent)
})
},
destroyed() {
if (!this.scrollEvent) {
return
}
window.removeEventListener('scroll', this.scrollEvent)
},
})
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment