From e11af90ed1e7ce99a7a3364b8ae20d6fd134fef9 Mon Sep 17 00:00:00 2001
From: Edward Tombre <edward.tombre@gmail.com>
Date: Wed, 1 Mar 2023 18:35:10 +0100
Subject: [PATCH 1/5] Use a callback to make sure we have scrolled to the top
 of the page before scrolling to the chapter

---
 src/mixins/reader.js | 24 +++++++++++++++---------
 1 file changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/mixins/reader.js b/src/mixins/reader.js
index 6931210..2b62719 100644
--- a/src/mixins/reader.js
+++ b/src/mixins/reader.js
@@ -1,4 +1,3 @@
-import Vue from 'vue';
 export default {
     methods: {
         async loadTop() {
@@ -50,18 +49,25 @@ export default {
             if(!article) return null;
             return `chapter-element-${article.chapterId}`;
         },
-        scrollToChapter(chapterId, offset = -100) {
+        scrollToChapter(chapterId, offset = -70) {
             let article = this.articles.find((a) => a.chapterId === chapterId);
             if (!article) return false;
             var self = this;
-            window.scrollTo(0,0);
-            if (chapterId >= 2) {
-                Vue.nextTick()
-                    .then(() => {
-                        let chapterElementRect = document.querySelector('#'+self.getElementName(article)).getBoundingClientRect();
-                        window.scrollTo(0, chapterElementRect.top + offset);
-                    });
+            const fireCallbackOnTopHit = function() {
+                if (window.scrollY == 0)  {
+                    window.removeEventListener('scroll', fireCallbackOnTopHit)
+                    if (chapterId >= 2) {
+                        self.$nextTick()
+                            .then(() => {
+                                let chapterElementRect = document.querySelector('#'+self.getElementName(article)).getBoundingClientRect();
+                                window.scrollTo(0, chapterElementRect.top + offset);
+                            });
+                    }
+                }
             }
+            window.addEventListener('scroll', fireCallbackOnTopHit)
+            fireCallbackOnTopHit()
+            window.scrollTo(0,0);
         },
         setCurrentChapter(chapterId) {
             if (this.isPublication)

From da6618475df8a62d353441de0694f38968faa723 Mon Sep 17 00:00:00 2001
From: Edward Tombre <edward.tombre@gmail.com>
Date: Wed, 1 Mar 2023 18:35:29 +0100
Subject: [PATCH 2/5] Fix numbering of chapter in sidebar

---
 src/components/layout/app-sidebar.vue | 1 +
 src/styles/style.scss                 | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/layout/app-sidebar.vue b/src/components/layout/app-sidebar.vue
index c0990ac..13ce229 100644
--- a/src/components/layout/app-sidebar.vue
+++ b/src/components/layout/app-sidebar.vue
@@ -10,6 +10,7 @@
                 <ol class="chapters">
                     <li v-for="chapter in chapters.sort((a, b) => parseInt(a.id) - parseInt(b.id))" 
                         :key="chapter.id"
+                        :chapter="chapter.id"
                         :class="['chapter', { 'current-chapter': chapter.id == selectedChapter }]" 
                         @click="$emit('chapterChanged', chapter.id)">
                         <a v-bind:alt="chapter.title"><h5>{{chapter.title}}</h5></a>
diff --git a/src/styles/style.scss b/src/styles/style.scss
index d4af9eb..0705726 100644
--- a/src/styles/style.scss
+++ b/src/styles/style.scss
@@ -550,7 +550,7 @@ ol.chapters{
 		}
 
 		&:before{
-			content: counter(li);
+			content: attr(chapter);
 			display: inline-block;
 			position: absolute;
 

From c2fe58e727288c7c03e1a45447b511422ff45f1a Mon Sep 17 00:00:00 2001
From: Edward Tombre <edward.tombre@gmail.com>
Date: Wed, 1 Mar 2023 18:35:49 +0100
Subject: [PATCH 3/5] Use this instead of Vue on nextTick call

---
 src/components/reader/article-scroller.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/reader/article-scroller.vue b/src/components/reader/article-scroller.vue
index ef0dc8f..8443dbd 100644
--- a/src/components/reader/article-scroller.vue
+++ b/src/components/reader/article-scroller.vue
@@ -8,7 +8,6 @@
 </template>
 
 <script>
-import Vue from 'vue';
 import LoadingSpinner from 'components/loading-spinner';
 
 export default {
@@ -39,7 +38,7 @@ export default {
     },
     methods: {
         addScrollHandler() {
-            Vue.nextTick(() => {
+            this.$nextTick(() => {
                 window.addEventListener('scroll', this.scrollHandler);
             });
         },

From a7101345e5526f74012f3ab0a471270f434cca98 Mon Sep 17 00:00:00 2001
From: Edward Tombre <edward.tombre@gmail.com>
Date: Fri, 3 Mar 2023 15:09:41 +0100
Subject: [PATCH 4/5] Improve solution to account for the header on both mobile
 and desktop

---
 src/mixins/reader.js | 20 ++++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/mixins/reader.js b/src/mixins/reader.js
index 2b62719..5923076 100644
--- a/src/mixins/reader.js
+++ b/src/mixins/reader.js
@@ -49,25 +49,33 @@ export default {
             if(!article) return null;
             return `chapter-element-${article.chapterId}`;
         },
-        scrollToChapter(chapterId, offset = -70) {
+        scrollToChapter(chapterId, offset = -105) {
             let article = this.articles.find((a) => a.chapterId === chapterId);
             if (!article) return false;
             var self = this;
-            const fireCallbackOnTopHit = function() {
+            var targetY = null;
+            const fireCallbackOnTargetHit = function(event) {
+                // When we reach the top of the document, we can scroll to the chapter
                 if (window.scrollY == 0)  {
-                    window.removeEventListener('scroll', fireCallbackOnTopHit)
                     if (chapterId >= 2) {
                         self.$nextTick()
                             .then(() => {
                                 let chapterElementRect = document.querySelector('#'+self.getElementName(article)).getBoundingClientRect();
-                                window.scrollTo(0, chapterElementRect.top + offset);
+                                targetY = Math.round(chapterElementRect.top)
+                                window.scrollTo(0, targetY);
                             });
                     }
                 }
+                // When we have reached the target chapter, we can remove the callback and scroll by an offset to account for the header
+                else if (window.scrollY == targetY) {
+                    window.removeEventListener('scroll', fireCallbackOnTargetHit)
+                    window.scrollBy(0, offset)
+                }
             }
-            window.addEventListener('scroll', fireCallbackOnTopHit)
-            fireCallbackOnTopHit()
+            window.addEventListener('scroll', fireCallbackOnTargetHit)
             window.scrollTo(0,0);
+            // We fire the callback manually to ensure we catch it even if the user is already at the top of the page
+            fireCallbackOnTargetHit()
         },
         setCurrentChapter(chapterId) {
             if (this.isPublication)

From 5190c677dc4f8643e3625c2c4cc2c828e9eeb977 Mon Sep 17 00:00:00 2001
From: Edward Tombre <edward.tombre@gmail.com>
Date: Fri, 3 Mar 2023 15:23:50 +0100
Subject: [PATCH 5/5] Add missing chapter attribute on list elements

---
 src/components/books/book-chapters-list.vue | 2 +-
 src/components/not-found.vue                | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/books/book-chapters-list.vue b/src/components/books/book-chapters-list.vue
index 10492aa..32a1096 100644
--- a/src/components/books/book-chapters-list.vue
+++ b/src/components/books/book-chapters-list.vue
@@ -1,7 +1,7 @@
 <template>
     <section class="list">
         <ol class="chapters">
-            <li v-for="(chapter, index) in chapters" :key="index">
+            <li v-for="(chapter, index) in chapters" :key="index" :chapter="chapter.id">
                 <router-link 
                 :to="`${chapter.id}`"
                 append
diff --git a/src/components/not-found.vue b/src/components/not-found.vue
index 1f0b9c0..400ff13 100644
--- a/src/components/not-found.vue
+++ b/src/components/not-found.vue
@@ -9,7 +9,7 @@
                 <section class="list">
                     <h4>{{$t('not-found.suggestions')}}</h4>
                     <ol class="chapters">
-                        <li v-for="(translation, index) in translations" :key="index">
+                        <li v-for="(translation, index) in translations" :key="index" :chapter="index+1">
                             <a @click="changeBookLanguage(translation.language)">
                                 <h5>
                                     <img class="flag" width="16" height="16"