github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-05-15 01:33:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

show indicator for current graph

Browse Source
This commit is contained in:
Peter Olu 2022-04-28 04:24:51 +01:00
parent 05312c72ea
commit c09f46f242
1 changed files with 4 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/FullVue.vue
View File

@ -17,9 +17,9 @@ limitations under the License. -->
<div v-if="items.length > 1" class="scroll-handler__wrapper"> <div v-if="items.length > 1" class="scroll-handler__wrapper">
<div <div
@click="scrollToGraph(item.i)" @click="scrollToGraph(item.i)"
v-for="item in items" v-for="(item, index) in items"
:key="item.i" :key="item.i"
:class="[currentItem === `item${item.i}` ? 'active' : '']" :class="[currentItem === index ? 'active' : '']"
class="full-scroll-to" class="full-scroll-to"
></div> ></div>
</div> </div>
@ -58,7 +58,7 @@ export default defineComponent({
const { t } = useI18n(); const { t } = useI18n();
const p = useRoute().params; const p = useRoute().params;
const arrayOfItems = ref<Element[]>([]); const arrayOfItems = ref<Element[]>([]);
const currentItem = ref<number>(6); const currentItem = ref<number>(0);
const scrollWrapRef = ref<any>(null); const scrollWrapRef = ref<any>(null);
const isScrolling = ref(false); const isScrolling = ref(false);
watch( watch(
@ -81,31 +81,25 @@ export default defineComponent({
}); });
}); });
document.querySelectorAll(".item").forEach((element, index) => { document.querySelectorAll(".item").forEach((element, index) => {
// console.log(element);
arrayOfItems.value.push(element); arrayOfItems.value.push(element);
observer.observe(element); observer.observe(element);
}); });
console.log(arrayOfItems.value[0]);
} }
function scrollTo(index: number) { function scrollTo(index: number) {
const item: Element = arrayOfItems.value[index]; const item: Element = arrayOfItems.value[index];
console.log(item);
arrayOfItems.value[index]?.scrollIntoView(); arrayOfItems.value[index]?.scrollIntoView();
if (isScrolling.value) { if (isScrolling.value) {
setTimeout(() => { setTimeout(() => {
console.log("Ran Timeout");
isScrolling.value = false; isScrolling.value = false;
}, 1020); }, 1020);
} }
} }
function scrollUp() { function scrollUp() {
if (currentItem.value > 0) { if (currentItem.value > 0) {
console.log("scrollUP");
currentItem.value--; currentItem.value--;
scrollTo(currentItem.value); scrollTo(currentItem.value);
} else if (currentItem.value === 0) { } else if (currentItem.value === 0) {
isScrolling.value = false; isScrolling.value = false;
console.log("At the top, cant scroll");
} }
} }
function scrollDown() { function scrollDown() {
@ -120,7 +114,6 @@ export default defineComponent({
} }
function initScroller() { function initScroller() {
scrollWrapRef?.value?.addEventListener("wheel", (e: WheelEvent) => { scrollWrapRef?.value?.addEventListener("wheel", (e: WheelEvent) => {
// console.log(isScrolling.value === false, e?.deltaY);
if (isScrolling.value === false) { if (isScrolling.value === false) {
isScrolling.value = true; isScrolling.value = true;
if (e.deltaY < 0) { if (e.deltaY < 0) {
@ -129,26 +122,13 @@ export default defineComponent({
} else { } else {
scrollDown(); scrollDown();
// scrollDown // scrollDown
console.log("Scroll Down");
} }
} }
// const isBottom =
// scrollWrapRef?.value?.offsetHeight + scrollWrapRef?.value?.scrollTop + 40 >
// scrollWrapRef?.value?.scrollHeight;
// if (isBottom) {
// scrollWrapRef?.value.scroll(0, 0);
// }
}); });
} }
onMounted(() => { onMounted(() => {
observeItems(); observeItems();
initScroller(); initScroller();
// console.log("ARRAY OF ITMS::", arrayOfItems.value);
// setTimeout(() => {
// console.log("Scroll");
// arrayOfItems.value[currentItem.value]?.scrollIntoView();
// },3000);
}); });
return { return {
t, t,