From 9dd95b62a95aeea7b3c1ea705fca1acb7d8afed8 Mon Sep 17 00:00:00 2001
From: zadam <adam.zivner@gmail.com>
Date: Sat, 20 Mar 2021 19:44:43 +0100
Subject: [PATCH] added ScrollingContainer to guarantee scrolling to top when
 switching notes

---
 .../app/layouts/desktop_extra_window_layout.js | 16 +++++++++-------
 .../app/layouts/desktop_main_window_layout.js  | 16 +++++++++-------
 src/public/app/layouts/mobile_layout.js        | 16 +++++++++++-----
 src/public/app/widgets/scrolling_container.js  | 18 ++++++++++++++++++
 .../app/widgets/type_widgets/type_widget.js    | 10 ----------
 5 files changed, 47 insertions(+), 29 deletions(-)
 create mode 100644 src/public/app/widgets/scrolling_container.js

diff --git a/src/public/app/layouts/desktop_extra_window_layout.js b/src/public/app/layouts/desktop_extra_window_layout.js
index b89b976e4..ca85978bb 100644
--- a/src/public/app/layouts/desktop_extra_window_layout.js
+++ b/src/public/app/layouts/desktop_extra_window_layout.js
@@ -23,6 +23,7 @@ import NotePropertiesWidget from "../widgets/type_property_widgets/note_properti
 import NoteIconWidget from "../widgets/note_icon.js";
 import NotePathsWidget from "../widgets/note_paths.js";
 import SearchResultWidget from "../widgets/search_result.js";
+import ScrollingContainer from "../widgets/scrolling_container.js";
 
 export default class DesktopExtraWindowLayout {
     constructor(customWidgets) {
@@ -65,13 +66,14 @@ export default class DesktopExtraWindowLayout {
                             .child(new InheritedAttributesWidget())
                         )
                     )
-                    .child(new Container()
-                        .css('height: 100%; overflow: auto;')
-                        .child(new TabCachingWidget(() => new SqlTableSchemasWidget()))
-                        .child(new TabCachingWidget(() => new NoteDetailWidget()))
-                        .child(new TabCachingWidget(() => new NoteListWidget()))
-                        .child(new TabCachingWidget(() => new SearchResultWidget()))
-                        .child(new TabCachingWidget(() => new SqlResultWidget()))
+                    .child(
+                        new TabCachingWidget(() => new ScrollingContainer()
+                            .child(new SqlTableSchemasWidget())
+                            .child(new NoteDetailWidget())
+                            .child(new NoteListWidget())
+                            .child(new SearchResultWidget())
+                            .child(new SqlResultWidget())
+                        )
                     )
                     .child(...this.customWidgets.get('center-pane'))
                 )
diff --git a/src/public/app/layouts/desktop_main_window_layout.js b/src/public/app/layouts/desktop_main_window_layout.js
index 34537bbdf..f1995339c 100644
--- a/src/public/app/layouts/desktop_main_window_layout.js
+++ b/src/public/app/layouts/desktop_main_window_layout.js
@@ -34,6 +34,7 @@ import NotePropertiesWidget from "../widgets/type_property_widgets/note_properti
 import NoteIconWidget from "../widgets/note_icon.js";
 import SearchResultWidget from "../widgets/search_result.js";
 import SyncStatusWidget from "../widgets/sync_status.js";
+import ScrollingContainer from "../widgets/scrolling_container.js";
 
 const RIGHT_PANE_CSS = `
 <style>
@@ -177,13 +178,14 @@ export default class DesktopMainWindowLayout {
                             .child(new InheritedAttributesWidget())
                         )
                     )
-                    .child(new Container()
-                        .css('height: 100%; overflow: auto;')
-                        .child(new TabCachingWidget(() => new SqlTableSchemasWidget()))
-                        .child(new TabCachingWidget(() => new NoteDetailWidget()))
-                        .child(new TabCachingWidget(() => new NoteListWidget()))
-                        .child(new TabCachingWidget(() => new SearchResultWidget()))
-                        .child(new TabCachingWidget(() => new SqlResultWidget()))
+                    .child(
+                        new TabCachingWidget(() => new ScrollingContainer()
+                            .child(new SqlTableSchemasWidget())
+                            .child(new NoteDetailWidget())
+                            .child(new NoteListWidget())
+                            .child(new SearchResultWidget())
+                            .child(new SqlResultWidget())
+                        )
                     )
                     .child(new TabCachingWidget(() => new SimilarNotesWidget()))
                     .child(...this.customWidgets.get('center-pane'))
diff --git a/src/public/app/layouts/mobile_layout.js b/src/public/app/layouts/mobile_layout.js
index 4a60595bd..d61d2f381 100644
--- a/src/public/app/layouts/mobile_layout.js
+++ b/src/public/app/layouts/mobile_layout.js
@@ -6,6 +6,7 @@ import MobileGlobalButtonsWidget from "../widgets/mobile_widgets/mobile_global_b
 import CloseDetailButtonWidget from "../widgets/mobile_widgets/close_detail_button.js";
 import MobileDetailMenuWidget from "../widgets/mobile_widgets/mobile_detail_menu.js";
 import ScreenContainer from "../widgets/mobile_widgets/screen_container.js";
+import ScrollingContainer from "../widgets/scrolling_container.js";
 
 const MOBILE_CSS = `
 <style>
@@ -105,10 +106,15 @@ export default class MobileLayout {
                     .child(new MobileDetailMenuWidget())
                     .child(new NoteTitleWidget())
                     .child(new CloseDetailButtonWidget()))
-                .child(new NoteDetailWidget()
-                    .css('padding', '5px 20px 10px 0')
-                    .css('margin-top', '55px')
-                    .css('overflow-y', 'auto')
-                    .css('contain', 'content')));
+                .child(
+                    new ScrollingContainer()
+                        .child(
+                            new NoteDetailWidget()
+                                .css('padding', '5px 20px 10px 0')
+                                .css('margin-top', '55px')
+                                .css('contain', 'content')
+                        )
+                )
+            );
     }
 }
diff --git a/src/public/app/widgets/scrolling_container.js b/src/public/app/widgets/scrolling_container.js
new file mode 100644
index 000000000..0d9b1c2b4
--- /dev/null
+++ b/src/public/app/widgets/scrolling_container.js
@@ -0,0 +1,18 @@
+import Container from "./container.js";
+
+export default class ScrollingContainer extends Container {
+    constructor() {
+        super();
+
+        this.css('height: 100%; overflow: auto;');
+    }
+
+    async tabNoteSwitchedEvent({tabContext, notePath}) {
+        // if notePath does not match then the tabContext has been switched to another note in the mean time
+        if (tabContext.notePath === notePath) {
+            console.log("SCROLLING");
+
+            this.$widget.scrollTop(0);
+        }
+    }
+}
diff --git a/src/public/app/widgets/type_widgets/type_widget.js b/src/public/app/widgets/type_widgets/type_widget.js
index cf06a163b..fd31a44f5 100644
--- a/src/public/app/widgets/type_widgets/type_widget.js
+++ b/src/public/app/widgets/type_widgets/type_widget.js
@@ -27,12 +27,6 @@ export default class TypeWidget extends TabAwareWidget {
         }
     }
 
-    async noteSwitched() {
-        this.scrollToTop();
-
-        await super.noteSwitched();
-    }
-
     isActive() {
         return this.$widget.is(":visible");
     }
@@ -41,10 +35,6 @@ export default class TypeWidget extends TabAwareWidget {
 
     focus() {}
 
-    scrollToTop() {
-        this.$widget.scrollTop(0);
-    }
-
     textPreviewDisabledEvent({tabContext}) {
         if (this.isTab(tabContext.tabId)) {
             this.refresh();