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

still making progress on refactors

Browse Source
This commit is contained in:
Peter Olu 2022-04-28 03:15:55 +01:00
parent ce71a79b39
commit f96569a758
1 changed files with 43 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
src/components/FullVue.vue
View File

@ -31,6 +31,7 @@ limitations under the License. -->
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import * as $ from "jquery";
import { ref, watch, onMounted, defineComponent } from "vue"; import { ref, watch, onMounted, defineComponent } from "vue";
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
import { useRoute } from "vue-router"; import { useRoute } from "vue-router";
@ -38,8 +39,14 @@ import { useDashboardStore } from "@/store/modules/dashboard";
import Configuration from "../views/dashboard/configuration"; import Configuration from "../views/dashboard/configuration";
import controls from "../views/dashboard/controls/index"; import controls from "../views/dashboard/controls/index";
interface Item {
id: string,
index: number,
viewOffset: number
}
export default defineComponent({ export default defineComponent({
name: "Dashboard", name: "FullView",
props: { props: {
items: { items: {
type: Array, type: Array,
@ -51,9 +58,10 @@ export default defineComponent({
const dashboardStore = useDashboardStore(); const dashboardStore = useDashboardStore();
const { t } = useI18n(); const { t } = useI18n();
const p = useRoute().params; const p = useRoute().params;
const currentItem = ref(""); const arrayOfItems = ref<Item[]>([])
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(
() => dashboardStore.layout, () => dashboardStore.layout,
() => { () => {
@ -69,29 +77,51 @@ export default defineComponent({
const observer = new IntersectionObserver((entries) => { const observer = new IntersectionObserver((entries) => {
entries.forEach((element) => { entries.forEach((element) => {
if (element.intersectionRatio > 0) { if (element.intersectionRatio > 0) {
currentItem.value = element.target.id; // currentItem.value = element.target.id;
} }
}); });
}); });
document.querySelectorAll(".item").forEach((element) => { document.querySelectorAll(".item").forEach((element,index) => {
arrayOfItems.value.push({
id: element.id,
index: index,
viewOffset: element?.offsetTop
})
observer.observe(element); observer.observe(element);
}); });
console.log(arrayOfItems.value[0])
document.getElementById(`${arrayOfItems.value[0]}`)?.scrollIntoView()
}
function scrollUp(){
console.log("scrollUP")
} }
function initScroller() { function initScroller() {
scrollWrapRef?.value?.addEventListener("scroll", (e: Event) => { scrollWrapRef?.value?.addEventListener("wheel", (e: WheelEvent) => {
const isBottom = console.log(isScrolling.value === false, e?.deltaY );
scrollWrapRef?.value?.offsetHeight + scrollWrapRef?.value?.scrollTop + 40 > if (isScrolling.value === false) {
scrollWrapRef?.value?.scrollHeight; isScrolling.value = true;
if (e.deltaY < 0) {
if (isBottom) { scrollUp()
scrollWrapRef?.value.scroll(0, 0); // scrollUp
} else {
// 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(scrollWrapRef.value) console.log(arrayOfItems.value);
window.arrayOfItems = arrayOfItems.value
}); });
return { return {
t, t,