73 lines
2.5 KiB
Vue
73 lines
2.5 KiB
Vue
<template>
|
|
<div>
|
|
<slot />
|
|
<div class="progress-wrap">
|
|
<svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
|
|
<path d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed, onMounted } from 'vue';
|
|
import { useHeroStore } from '@/stores/hero';
|
|
import { useSettingStore } from '@/stores/setting';
|
|
|
|
const heroStore = useHeroStore();
|
|
const settingStore = useSettingStore();
|
|
|
|
useHead(computed(() => {
|
|
const title = settingStore.settings?.title ?? heroStore.hero?.title ?? 'Blog details Sidebar Right || Avigo Multipurpose Theme';
|
|
const meta: Array<Record<string, string>> = [
|
|
{ charset: 'utf-8' },
|
|
{ name: 'viewport', content: 'width=device-width, initial-scale=1.0' },
|
|
];
|
|
if (settingStore.settings?.meta_description) {
|
|
meta.push({ name: 'description', content: settingStore.settings.meta_description });
|
|
}
|
|
|
|
return {
|
|
title,
|
|
meta
|
|
}
|
|
}));
|
|
|
|
onMounted(() => {
|
|
// page-progress
|
|
const progressPath = document.querySelector(".progress-wrap path") as SVGPathElement | null;
|
|
if (progressPath) {
|
|
const pathLength = progressPath.getTotalLength();
|
|
// use webkitTransition (lowercase) to satisfy TypeScript and cast style where needed
|
|
progressPath.style.transition = (progressPath.style as any).webkitTransition = "none";
|
|
progressPath.style.strokeDasharray = pathLength + " " + pathLength;
|
|
progressPath.style.strokeDashoffset = String(pathLength);
|
|
progressPath.getBoundingClientRect();
|
|
progressPath.style.transition = (progressPath.style as any).webkitTransition = "stroke-dashoffset 10ms linear";
|
|
const updateProgress = () => {
|
|
const scroll = $(window).scrollTop();
|
|
const height = $(document).height() - $(window).height();
|
|
const prog = pathLength - (scroll * pathLength) / height;
|
|
progressPath!.style.strokeDashoffset = String(prog);
|
|
};
|
|
updateProgress();
|
|
$(window).scroll(updateProgress);
|
|
const offset = 50;
|
|
const duration = 550;
|
|
jQuery(window).on("scroll", () => {
|
|
if (jQuery(window).scrollTop() > offset) {
|
|
jQuery(".progress-wrap").addClass("active-progress");
|
|
} else {
|
|
jQuery(".progress-wrap").removeClass("active-progress");
|
|
}
|
|
});
|
|
jQuery(".progress-wrap").on("click", (event: any) => {
|
|
event.preventDefault();
|
|
jQuery("html, body").animate({ scrollTop: 0 }, duration);
|
|
return false;
|
|
});
|
|
}
|
|
})
|
|
|
|
</script>
|