mirror of
https://github.com/amir20/dozzle.git
synced 2025-12-21 13:23:07 +01:00
c835f51cc4
* WIP for using json all the time * Updates to render * adds a new component for json * Updates styles * Adds nesting * Adds field list * Adds expanding * Adds new composable for event source * Creates an add button * Removes unused code * Adds and removes fields with defaults * Fixes jumping when adding new fields * Returns JSON correctly * Fixes little bugs * Fixes js tests * Adds vscode * Fixes json buffer error * Fixes extra line * Fixes tests * Fixes tests and adds support for search * Refactors visible payload keys to a composable * Fixes typescript errors and refactors * Fixes visible keys by ComputedRef<Ref> * Fixes search bugs * Updates tests * Fixes go tests * Fixes scroll view * Fixes vue tsc errors * Fixes EOF error * Fixes build error * Uses application/ld+json * Fixes arrays and records * Marks for json too
76 lines
1.6 KiB
Vue
76 lines
1.6 KiB
Vue
<template>
|
|
<div ref="root" class="infinte-loader">
|
|
<div class="spinner" v-show="isLoading">
|
|
<div class="bounce1"></div>
|
|
<div class="bounce2"></div>
|
|
<div class="bounce3"></div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref, onMounted, onUnmounted, nextTick } from "vue";
|
|
|
|
const props = defineProps({
|
|
onLoadMore: Function,
|
|
enabled: Boolean,
|
|
});
|
|
|
|
const isLoading = ref(false);
|
|
const root = ref<HTMLElement>();
|
|
|
|
const observer = new IntersectionObserver(async (entries) => {
|
|
if (entries[0].intersectionRatio <= 0) return;
|
|
if (props.onLoadMore && props.enabled) {
|
|
const scrollingParent = root.value?.closest("[data-scrolling]") || document.documentElement;
|
|
const previousHeight = scrollingParent.scrollHeight;
|
|
isLoading.value = true;
|
|
await props.onLoadMore();
|
|
isLoading.value = false;
|
|
await nextTick();
|
|
scrollingParent.scrollTop += scrollingParent.scrollHeight - previousHeight;
|
|
}
|
|
});
|
|
|
|
onMounted(() => observer.observe(root.value!));
|
|
onUnmounted(() => observer.disconnect());
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.infinte-loader {
|
|
min-height: 1px;
|
|
}
|
|
.spinner {
|
|
margin: 10px auto 0;
|
|
width: 70px;
|
|
text-align: center;
|
|
|
|
& > div {
|
|
width: 12px;
|
|
height: 12px;
|
|
background-color: var(--primary-color);
|
|
border-radius: 100%;
|
|
display: inline-block;
|
|
animation: sk-bouncedelay 0.8s infinite ease-in-out both;
|
|
}
|
|
& .bounce1 {
|
|
animation-delay: -0.32s;
|
|
}
|
|
|
|
& .bounce2 {
|
|
animation-delay: -0.16s;
|
|
}
|
|
}
|
|
|
|
@keyframes sk-bouncedelay {
|
|
0%,
|
|
80%,
|
|
100% {
|
|
transform: scale(0);
|
|
}
|
|
40% {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
</style>
|