wip; Refactor collections based components #917

kalisio · Aug 29, 2024 · ee53d51 · ee53d51
1 parent 68c3be6
commit ee53d51
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 13 deletions.
diff --git a/core/client/components/collection/KGrid.vue b/core/client/components/collection/KGrid.vue
@@ -26,6 +26,7 @@
                 <div :class="rendererClass">
                   <component
                     :id="item._id"
+                    :ref="onItemRendered"
                     :service="service"
                     :item="item"
                     :contextId="contextId"
@@ -211,6 +212,9 @@ const rendererClass = computed(() => {
 watch(items, onCollectionRefreshed)
 
 // Functions
+function onItemRendered (instance) {
+  if (instance) onScroll()
+}
 function scrollDownRefCreated (instance) {
   scrollDownRef.value = instance
   if (instance) instance.refresh()
@@ -243,9 +247,6 @@ function onCollectionRefreshed () {
   if (loadDoneFunction.value) {
     loadDoneFunction.value(items.value.length === nbTotalItems.value)
     loadDoneFunction.value = null
-    // refresh scroll elements
-    if (scrollDownRef.value) scrollDownRef.value.refresh()
-    if (scrollToTopRef.value) scrollToTopRef.value.refresh()
   }
 }
 

diff --git a/core/client/components/collection/KScrollDown.vue b/core/client/components/collection/KScrollDown.vue
@@ -16,6 +16,7 @@
 </template>
 
 <script setup>
+import _ from 'lodash'
 import logger from 'loglevel'
 import { ref, watch } from 'vue'
 import { useQuasar, scroll as qScrollUtils } from 'quasar'
@@ -59,31 +60,33 @@ watch(() => [$q.screen.width, $q.screen.height], () => {
 })
 
 // Functions
-function refresh () {
+const refresh = _.debounce(() => {
   const targetElement = document.getElementById(props.target)
   if (!targetElement) {
     logger.error('[KDK] Cannot find target element')
     return
   }
   const containerHeight = targetElement.offsetHeight
   const scrollHeight = qScrollUtils.getScrollHeight(targetElement)
-  console.log(scrollHeight, containerHeight)
   const diff = scrollHeight - containerHeight
   if (diff <= 0) isVisible.value = false
   else {
     const ratio = clamp(qScrollUtils.getVerticalScrollPosition(targetElement) / diff, 0, 1)
     const percent = Math.round(ratio * 10000) / 10000
     isVisible.value = percent < 1
   }
-}
+  logger.trace(`[KDK] (KScrollDown) Refreshed with visibility: ${isVisible.value}`)
+}, 100)
 function scrollOnce () {
   const targetElement = document.getElementById(props.target)
   if (!targetElement) {
     logger.error('[KDK] Cannot find target element')
     return
   }
   const position = qScrollUtils.getVerticalScrollPosition(targetElement)
-  qScrollUtils.setVerticalScrollPosition(targetElement, position + targetElement.offsetHeight * 0.75, props.duration)
+  const offset = targetElement.offsetHeight * 0.75
+  qScrollUtils.setVerticalScrollPosition(targetElement, position + offset, props.duration)
+  logger.trace(`[KDK] (KScrollDown) Scrolled down with offset: ${offset}`)
   refresh()
 }
 

diff --git a/core/client/components/collection/KScrollToTop.vue b/core/client/components/collection/KScrollToTop.vue
@@ -14,6 +14,7 @@
 </template>
 
 <script setup>
+import _ from 'lodash'
 import logger from 'loglevel'
 import { ref, watch } from 'vue'
 import { useQuasar, scroll as qScrollUtils } from 'quasar'
@@ -43,7 +44,7 @@ const props = defineProps({
   },
   zIndex: {
     type: Number,
-    default: () => { return DefaultZIndex.stickies }
+    default: () => { return DefaultZIndex.fab }
   }
 })
 
@@ -57,21 +58,23 @@ watch(() => [$q.screen.width, $q.screen.height], () => {
 })
 
 // Functions
-function refresh () {
+const refresh = _.debounce(() => {
   const targetElement = document.getElementById(props.target)
   if (!targetElement) {
     logger.error('[KDK] Cannot find target element')
     return
   }
   isVisible.value = qScrollUtils.getVerticalScrollPosition(targetElement) > 0
-}
+  logger.trace(`[KDK] (KScrollToTop) Refreshed with visibility: ${isVisible.value}`)
+}, 100)
 function scrollToTop () {
   const targetElement = document.getElementById(props.target)
   if (!targetElement) {
     logger.error('[KDK] Cannot find target element')
     return
   }
   qScrollUtils.setVerticalScrollPosition(targetElement, 0, props.duration)
+  logger.trace(`[KDK] (KScrollToTop) Scrolled to top`)
   refresh()
 }
 

diff --git a/core/client/components/collection/KTimeLine.vue b/core/client/components/collection/KTimeLine.vue
@@ -78,6 +78,7 @@
                 <component
                   v-if="bodyRenderer" :class="bodyRendererClass"
                   :id="item._id"
+                  :ref="onBodyRendered"
                   :service="service"
                   :item="item"
                   :contextId="contextId"
@@ -265,6 +266,10 @@ const comfortPadding = computed(() => {
 watch(items, onCollectionRefreshed)
 
 // Functions
+function onBodyRendered (instance) {
+  // Force the scroll components to be refreshed 
+  if (instance) onScroll()
+}
 function scrollDownRefCreated (instance) {
   scrollDownRef.value = instance
   if (instance) instance.refresh()
@@ -328,9 +333,6 @@ function onCollectionRefreshed () {
   if (loadDoneFunction.value) {
     loadDoneFunction.value(items.value.length === nbTotalItems.value)
     loadDoneFunction.value = null
-    // refresh scroll elements
-    if (scrollDownRef.value) scrollDownRef.value.refresh()
-    if (scrollToTopRef.value) scrollToTopRef.value.refresh()
   }
 }