maz-ui/dist/components/MazReadingProgressBar.js

A standalone components library for Vue.Js 3 & Nuxt.Js 3

import { defineComponent, computed, ref, watch, onMounted, onBeforeUnmount, createBlock, openBlock, Teleport, createElementVNode, mergeProps, normalizeStyle, normalizeClass, nextTick } from "vue";
import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper.B--vMWp3.js";
import '../assets/MazReadingProgressBar.DZrZisC2.css';function i(e, a) {
  let l = !1, n, t;
  return function(...o) {
    l ? (clearTimeout(n), n = setTimeout(() => {
      Date.now() - t >= a && (e.apply(this, o), t = Date.now());
    }, Math.max(a - (Date.now() - t), 0))) : (e.apply(this, o), t = Date.now(), l = !0);
  };
}
const _sfc_main = /* @__PURE__ */ defineComponent({
  inheritAttrs: !1,
  __name: "MazReadingProgressBar",
  props: {
    height: { default: "4px" },
    color: { default: "primary" },
    teleportSelector: { default: "body" },
    contentSelector: { default: "body" },
    offset: { default: 0 },
    barClass: { default: void 0 },
    distance: { default: void 0 }
  },
  emits: ["begin", "complete"],
  setup(__props, { emit: __emit }) {
    const props = __props, emits = __emit, barColor = computed(() => `hsl(var(--maz-${props.color}))`), progressBarWidth = ref(), elementHeight = ref(0);
    watch(
      () => props.distance,
      (value) => {
        value && (elementHeight.value = value);
      },
      {
        immediate: !0
      }
    );
    const handleScroll = i(() => {
      const scrollPosition = window.scrollY;
      if (scrollPosition >= 0 && scrollPosition <= elementHeight.value) {
        const progress = scrollPosition / elementHeight.value * 100;
        progressBarWidth.value = `${progress}%`;
      } else scrollPosition <= 0 ? (progressBarWidth.value = "0%", emits("begin")) : scrollPosition > elementHeight.value ? (progressBarWidth.value = "100%", emits("complete")) : progressBarWidth.value = "0%";
    }, 15);
    async function setupScroll() {
      if (elementHeight.value === 0) {
        const element = document.querySelector(props.contentSelector);
        if (!element) {
          console.error(`HTML Element with selector "${props.contentSelector}" not found.`);
          return;
        }
        await nextTick(), elementHeight.value = element.offsetHeight + element.offsetTop + props.offset - window.innerHeight;
      }
      window.addEventListener("scroll", handleScroll, {
        passive: !0
      });
    }
    return onMounted(() => {
      setupScroll();
    }), onBeforeUnmount(() => {
      window.removeEventListener("scroll", handleScroll);
    }), (_ctx, _cache) => (openBlock(), createBlock(Teleport, { to: _ctx.teleportSelector }, [
      createElementVNode("div", mergeProps({ class: "m-reading-progress-bar m-reset-css" }, _ctx.$attrs), [
        createElementVNode("div", {
          class: normalizeClass(_ctx.barClass),
          style: normalizeStyle({
            width: progressBarWidth.value ?? "0px",
            height: _ctx.height,
            backgroundColor: barColor.value
          })
        }, null, 6)
      ], 16)
    ], 8, ["to"]));
  }
}), MazReadingProgressBar = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-c66f1489"]]);
export {
  MazReadingProgressBar as default
};