<template>
    <div class="h-8 flex items-center cursor-pointer" ref="slider">
        <div class="w-full h-1 bg-white-25 rounded-full">
            <div class="rounded-full h-1 bg-white-75" :style="'width: '+ progress +'%'"></div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'Slider',

    data: () => ({
        progress: 0,
        wrapperWidth: 0,
        seekOffsetLeft: 0,
    }),

    watch: {
        wrapperWidth() {
            this.seekOffsetLeft = 0
        },
    },

    mounted(){
        this.$refs.slider.addEventListener("click", this.getClickPosition, false)
        window.addEventListener('resize', e => this.wrapperWidth = this.$refs.slider.offsetWidth, false)
        this.$refs.slider.addEventListener("mousedown", this.detectMouseDown, false)
        this.$refs.slider.addEventListener("mousedown", this.detectMouseDown, false)
        document.addEventListener("mouseup", this.detectMouseUp, false)
    },

    methods: {
        getClickPosition(e) {
            if (e.target.nodeType === 3) e.target = e.target.parentNode // fix for a safari bug
            this.wrapperWidth = this.wrapperWidth || e.target.offsetWidth // set initial wrapper width
            let seekWidth = e.offsetX
            this.progress = (seekWidth / this.wrapperWidth) * 100
        },
        mouseMove(e) {
            if (e.target.nodeType === 3) e.target = e.target.parentNode // fix for a safari bug
            this.wrapperWidth = this.wrapperWidth || e.target.offsetWidth // set initial wrapper width
            if (!this.seekOffsetLeft) this.seekOffsetLeft = e.target.offsetLeft // set the offset left (document -> seek el left side)

            let x = e.pageX,
                seekRight = this.seekOffsetLeft + this.wrapperWidth,
                progress

            if (x < this.seekOffsetLeft) progress = 0
            else if (x > seekRight) progress = 100
            else progress = ((x - this.seekOffsetLeft) / this.wrapperWidth) * 100

            this.progress = progress
        },
        detectMouseDown(e) {
            e.preventDefault()
            document.addEventListener("mousemove", this.mouseMove, false)
        },
        detectMouseUp(e) {
            document.removeEventListener("mousemove", this.mouseMove, false)
        },
    },
}
</script>