From 563bb618149c54f501f93007d7fbb7df64f69b5b Mon Sep 17 00:00:00 2001
From: Gregor Lasnibat <gregor@scinote.net>
Date: Thu, 9 Nov 2023 15:48:11 +0100
Subject: [PATCH 1/2] Item card inner navigation behavior improvement
 [SCI-9649]

---
 .../RepositoryItemSidebar.vue                 |  19 +-
 .../repository_values/ScrollSpy.vue           | 237 ++++++++++--------
 2 files changed, 142 insertions(+), 114 deletions(-)

diff --git a/app/javascript/vue/repository_item_sidebar/RepositoryItemSidebar.vue b/app/javascript/vue/repository_item_sidebar/RepositoryItemSidebar.vue
index 4e791f9d9..fcb8fffb1 100644
--- a/app/javascript/vue/repository_item_sidebar/RepositoryItemSidebar.vue
+++ b/app/javascript/vue/repository_item_sidebar/RepositoryItemSidebar.vue
@@ -1,17 +1,13 @@
 <template>
-  <transition
-    enter-class="translate-x-full w-0"
-    enter-active-class="transition-all ease-sharp duration-[588ms]"
-
-    leave-class="translate-x-0 w-[565px]"
-    leave-active-class="transition-all ease-sharp duration-[588ms]"
+  <transition enter-class="translate-x-full w-0" enter-active-class="transition-all ease-sharp duration-[588ms]"
+    leave-class="translate-x-0 w-[565px]" leave-active-class="transition-all ease-sharp duration-[588ms]"
     leave-to-class="translate-x-full w-0">
     <div ref="wrapper" v-show="isShowing" id="repository-item-sidebar-wrapper"
       class='items-sidebar-wrapper bg-white gap-2.5 self-stretch rounded-tl-4 rounded-bl-4 shadow-lg h-full'>
 
       <div id="repository-item-sidebar" class="w-full h-full pl-6 bg-white flex flex-col">
-
-        <div ref="stickyHeaderRef" id="sticky-header-wrapper" class="sticky top-0 right-0 bg-white flex z-50 flex-col h-[78px] pt-6">
+        <div ref="stickyHeaderRef" id="sticky-header-wrapper"
+          class="sticky top-0 right-0 bg-white flex z-50 flex-col h-[78px] pt-6">
           <div class="header flex w-full h-[30px] pr-6">
             <repository-item-sidebar-title v-if="defaultColumns"
               :editable="permissions?.can_manage && !defaultColumns?.archived" :name="defaultColumns.name"
@@ -151,7 +147,8 @@
                       <div class="text-sn-dark-grey">{{ i18n.t('repositories.item_card.assigned.private',
                         { count: privateModuleSize() }) }}
                       </div>
-                      <div class="sci-divider" :class="{ 'hidden': assignedModules?.viewable_modules?.length == 0 }"></div>
+                      <div class="sci-divider" :class="{ 'hidden': assignedModules?.viewable_modules?.length == 0 }">
+                      </div>
                     </div>
                     <div v-for="(assigned, index) in assignedModules.viewable_modules" :key="`assigned_module_${index}`"
                       class="flex flex-col w-[350px] h-auto gap-4">
@@ -195,7 +192,7 @@
                 { id: 'highlight-item-2', textId: 'text-item-2', labelAlias: 'custom_columns_label', label: 'custom-columns-label', sectionId: 'custom-columns-section' },
                 { id: 'highlight-item-3', textId: 'text-item-3', labelAlias: 'assigned_label', label: 'assigned-label', sectionId: 'assigned-section' },
                 { id: 'highlight-item-4', textId: 'text-item-4', labelAlias: 'QR_label', label: 'QR-label', sectionId: 'qr-section' }
-              ]" :stickyHeaderHeightPx="102" :cardTopPaddingPx="null" :targetAreaMargin="30" v-show="isShowing">
+              ]" v-show="isShowing">
               </scroll-spy>
             </div>
           </div>
@@ -368,7 +365,7 @@ export default {
         },
       }).done((response) => {
         for (const [id, customColumn] of Object.entries(response)) {
-           this.customColumns[id - 1]["value"] = customColumn.value;
+          this.customColumns[id - 1]["value"] = customColumn.value;
         }
         RepositoryDatatable.reload();
       });
diff --git a/app/javascript/vue/repository_item_sidebar/repository_values/ScrollSpy.vue b/app/javascript/vue/repository_item_sidebar/repository_values/ScrollSpy.vue
index 815a5bedf..5111210ba 100644
--- a/app/javascript/vue/repository_item_sidebar/repository_values/ScrollSpy.vue
+++ b/app/javascript/vue/repository_item_sidebar/repository_values/ScrollSpy.vue
@@ -2,16 +2,19 @@
   <div class="flex gap-3">
     <div id="navigation-text"
       class="flex flex-col py-2 px-0 gap-3 self-stretch w-[130px] h-[130px] justify-center items-center">
-      <div v-for="navigationItem in itemsToCreate" :key="navigationItem.textId" @click="navigateToSection(navigationItem)"
-        class="nav-text-item flex flex-col w-[130px] h-[130px] justify-between text-right hover:cursor-pointer"
-        :class="{ 'text-sn-science-blue': selectedNavText === navigationItem.textId, 'text-sn-grey': selectedNavText !== navigationItem.textId }">
+      <div v-for="(navigationItem, index) in itemsToCreate" :key="navigationItem.textId"
+        @click="navigateToSection(navigationItem)"
+        class="text-sn-grey nav-text-item flex flex-col w-[130px] h-[130px] justify-between text-right hover:cursor-pointer"
+        :class="{ 'text-sn-science-blue': (arrOfThresholds[index]?.from <= scrollPosition && scrollPosition <= arrOfThresholds[index]?.to) }">
         {{ i18n.t(`repositories.highlight_component.${navigationItem.labelAlias}`) }}
       </div>
     </div>
 
     <div id="highlight-container" class="w-[1px] h-[130px] flex flex-col justify-evenly bg-sn-light-grey">
-      <div v-for="navigationItem in itemsToCreate" :key="navigationItem.id" class="w-[5px] h-[28px] rounded-[11px]"
-        :class="{ 'bg-sn-science-blue relative left-[-2px]': selectedNavIndicator === navigationItem.id }"></div>
+      <div v-for="(navigationItem, index) in itemsToCreate" :key="navigationItem.id"
+        class="w-[5px] h-[28px] rounded-[11px]"
+        :class="{ 'bg-sn-science-blue relative left-[-2px]': (arrOfThresholds[index]?.from <= scrollPosition && scrollPosition <= arrOfThresholds[index]?.to) }">
+      </div>
     </div>
   </div>
 </template>
@@ -19,50 +22,40 @@
 <script>
 export default {
   name: 'ScrollSpy',
+
   props: {
     itemsToCreate: Array,
-    stickyHeaderHeightPx: Number || null,
-    cardTopPaddingPx: Number || null,
-    targetAreaMargin: Number || null
   },
+
   data() {
     return {
       bodyContainerEl: null,
-      selectedNavText: null,
-      selectedNavIndicator: null,
       sections: [],
-      activeSection: null,
-      proximityThreshold: 60,
-      header: null,
-      previousScrollTop: 0,
+      sectionsWithHeight: [],
+      allSectionsCumulativeHeight: null,
+      arrOfThresholds: [],
+      scrollPosition: null,
+      centerOfScrollThumb: null,
     };
   },
 
-  computed: {
-    headerHeight() {
-      return this.header.getBoundingClientRect().height;
-    }
-  },
-
   mounted() {
     this.initializeComponent();
+    this.$nextTick(() => {
+      this.calculateAllSectionsCumulativeHeight()
+      this.calculateSectionsHeight();
+      this.constructThresholds()
+    });
   },
 
   beforeDestroy() {
     this.removeScrollListener();
   },
 
-  watch: {
-    activeSection: 'highlightSection'
-  },
-
   methods: {
     initializeComponent() {
-      this.header = this.$parent.$refs.stickyHeaderRef;
       this.bodyContainerEl = this.$parent.$refs.bodyWrapper;
       this.sections = Array.from(this.$parent.$refs.scrollSpyContent.querySelectorAll('section[id]'));
-      this.proximityThreshold = this.headerHeight;
-      this.highlightSection(this.sections[0]);
       this.addScrollListener();
     },
 
@@ -74,92 +67,130 @@ export default {
       this.bodyContainerEl?.removeEventListener('scroll', this.handleScroll);
     },
 
+    calculateAllSectionsCumulativeHeight() {
+      let totalHeight = 0
+
+      this.itemsToCreate.forEach((item) => {
+        const sectionEl = document.getElementById(item.sectionId);
+        totalHeight += sectionEl.offsetHeight
+      })
+      this.allSectionsCumulativeHeight = totalHeight
+    },
+
+    calculateSectionsHeight() {
+      // Initialize an array to store the height data for each section
+      this.sectionsWithHeight = this.itemsToCreate.map(item => {
+        // Find the DOM element for the section
+        const sectionEl = document.getElementById(item.sectionId);
+
+        // Calculate the height of the section as a percentage of the total scrollable height
+        const heightPx = sectionEl.offsetHeight;
+        const percentHeight = Math.round((heightPx / this.allSectionsCumulativeHeight) * 100);
+
+        // Return an object containing the section ID and its percentage height
+        return {
+          sectionId: item.sectionId,
+          heightPx: heightPx,
+          percentHeight: percentHeight
+        };
+      });
+    },
+
+    // Constructs and populates array of thresholds with threshold objects.
+    // Each object stores id, index, and threshold values (from/to) for a section, based
+    // on the % of vertical space of scrollable content that they occupy
+    constructThresholds() {
+      const scrollableArea = this.bodyContainerEl;
+      const deltaTravel = scrollableArea.scrollHeight - scrollableArea.clientHeight
+      const viewportHeight = scrollableArea.clientHeight;
+      const scrollableAreaHeight = scrollableArea.scrollHeight;
+      const scrollThumbHeight = Math.round(viewportHeight / scrollableAreaHeight * viewportHeight);
+      const scrollThumbCenter = Math.round(scrollThumbHeight / 2)
+      this.centerOfScrollThumb = scrollThumbCenter
+      this.scrollPosition = scrollThumbCenter
+
+      let prevThreshold = scrollThumbCenter
+
+      for (let i = 0; i < this.sectionsWithHeight.length; i++) {
+        // first section
+        if (i === 0) {
+          const from = prevThreshold
+          const to = Math.round(deltaTravel * this.sectionsWithHeight[i].percentHeight / 100) + prevThreshold
+          const id = this.sectionsWithHeight[i].sectionId
+          prevThreshold = to + 1
+          const thresholdObj = {
+            id,
+            index: i,
+            from,
+            to
+          }
+          this.arrOfThresholds[i] = thresholdObj
+        }
+        // last section
+        else if (i === this.sectionsWithHeight.length - 1) {
+          const from = prevThreshold
+          const to = scrollableArea.scrollHeight
+          const id = this.sectionsWithHeight[i].sectionId
+          const thresholdObj = {
+            id,
+            index: i,
+            from,
+            to
+          }
+          this.arrOfThresholds[i] = thresholdObj
+        }
+        else {
+          // other sections
+          const from = prevThreshold
+          const to = Math.round(deltaTravel * this.sectionsWithHeight[i].percentHeight / 100) + prevThreshold - 1
+          const id = this.sectionsWithHeight[i].sectionId
+          prevThreshold = to + 1
+          const thresholdObj = {
+            id,
+            index: i,
+            from,
+            to
+          }
+          this.arrOfThresholds[i] = thresholdObj
+        }
+      }
+    },
+
+    // Handling scroll event
     handleScroll() {
-      const currentScrollTop = this.bodyContainerEl.scrollTop;
-
-      if (currentScrollTop === 0) {
-        this.setActiveSection(this.sections[0]);
-        return;
-      }
-
-      // Determine the scroll direction (down or up)
-      if (currentScrollTop > this.previousScrollTop) {
-        this.handleScrollDown();
-      } else {
-        this.handleScrollUp();
-      }
-
-      this.previousScrollTop = currentScrollTop;
-    },
-
-    // scrolling from up -> down
-    // highlighting based on proximity to the header
-    handleScrollDown() {
-      const headerTop = this.getDistanceToTop(this.header);
-      const nearestSection = this.sections.reduce((acc, section) => {
-        const distance = Math.abs(headerTop - this.getDistanceToTop(section));
-        return distance < this.proximityThreshold ? section : acc;
-      }, null);
-
-      if (nearestSection) this.setActiveSection(nearestSection);
-    },
-
-    // scrolling from down -> up
-    // highlighting based on passing out of view
-    handleScrollUp() {
-      if (!this.activeSection) return;
-
-      const activeSectionRect = this.activeSection.getBoundingClientRect();
-      const containerRect = this.bodyContainerEl.getBoundingClientRect();
-
-      if (activeSectionRect.bottom < containerRect.top || activeSectionRect.top > containerRect.bottom) {
-        const previousSection = this.getPreviousSection(this.activeSection);
-        if (previousSection) this.setActiveSection(previousSection);
-      }
-    },
-
-    getPreviousSection(currentSection) {
-      const index = this.sections.indexOf(currentSection);
-      return index > 0 ? this.sections[index - 1] : null;
-    },
-
-    getDistanceToTop(el) {
-      return el.getBoundingClientRect().top;
-    },
-
-    setActiveSection(section) {
-      if (section !== this.activeSection) {
-        this.activeSection = section;
-        this.highlightSection(section);
-      }
-    },
-
-    highlightSection(section) {
-      const foundObj = this.itemsToCreate.find(obj => obj.sectionId === section.id);
-      if (foundObj) {
-        this.selectedNavText = foundObj.textId;
-        this.selectedNavIndicator = foundObj.id;
-      }
+      const scrollableArea = this.bodyContainerEl;
+      const scrollThumbsDistanceFromTop = scrollableArea.scrollTop + this.centerOfScrollThumb;
+      this.scrollPosition = scrollThumbsDistanceFromTop
     },
 
+    // Navigating (scrolling into view) via click
     navigateToSection(navigationItem) {
       if (!this.bodyContainerEl) return;
 
-      this.removeScrollListener();
-      this.activeSection = document.getElementById(navigationItem.sectionId);
-      this.selectedNavText = navigationItem.textId;
-      this.selectedNavIndicator = navigationItem.id;
+      const scrollableArea = this.bodyContainerEl;
+      const foundObj = this.arrOfThresholds.find((obj) => obj.id === navigationItem.sectionId)
 
       const domElToScrollTo = this.$parent.$refs[navigationItem.label];
-      const top = domElToScrollTo.offsetTop - (this.stickyHeaderHeightPx + this.cardTopPaddingPx);
-
-      this.bodyContainerEl.scrollTo({
-        top,
-        behavior: "auto"
-      });
 
+      if (foundObj.index === 0) {
+        // scroll to top
+        this.bodyContainerEl.scrollTo({
+          top: 0,
+          behavior: "auto"
+        });
+      }
+      else if (foundObj.index === this.arrOfThresholds.length - 1) {
+        // scroll to bottom
+        this.bodyContainerEl.scrollTo({
+          top: 99999,
+          behavior: "auto"
+        });
+      }
+      else {
+        // scroll to the start of a section's threshold, adjusted for the center thumb value (true center)
+        scrollableArea.scrollTop = foundObj.from - this.centerOfScrollThumb
+      }
       this.flashTitleColor(domElToScrollTo);
-      setTimeout(this.addScrollListener, 100);
     },
 
     flashTitleColor(domEl) {

From 2e7868ecd3c29c0e815b42091ddc4d4bcc3b2b1e Mon Sep 17 00:00:00 2001
From: Gregor Lasnibat <gregor@scinote.net>
Date: Fri, 10 Nov 2023 11:22:20 +0100
Subject: [PATCH 2/2] Removed duplicated header [SCI_9649]

---
 .../vue/repository_item_sidebar/RepositoryItemSidebar.vue        | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/javascript/vue/repository_item_sidebar/RepositoryItemSidebar.vue b/app/javascript/vue/repository_item_sidebar/RepositoryItemSidebar.vue
index fcb8fffb1..81ebde733 100644
--- a/app/javascript/vue/repository_item_sidebar/RepositoryItemSidebar.vue
+++ b/app/javascript/vue/repository_item_sidebar/RepositoryItemSidebar.vue
@@ -6,6 +6,7 @@
       class='items-sidebar-wrapper bg-white gap-2.5 self-stretch rounded-tl-4 rounded-bl-4 shadow-lg h-full'>
 
       <div id="repository-item-sidebar" class="w-full h-full pl-6 bg-white flex flex-col">
+
         <div ref="stickyHeaderRef" id="sticky-header-wrapper"
           class="sticky top-0 right-0 bg-white flex z-50 flex-col h-[78px] pt-6">
           <div class="header flex w-full h-[30px] pr-6">