From 57db945558ba2aead5b7a78f9165945f28fa8aca Mon Sep 17 00:00:00 2001
From: zadam <adam.zivner@gmail.com>
Date: Sun, 28 Mar 2021 22:24:24 +0200
Subject: [PATCH] set cssClass and other note related classes on the root
 widget instead, fixes #1799

---
 package.json                                  |  2 +-
 src/public/app/layouts/desktop_layout.js      | 15 ++++---
 src/public/app/layouts/mobile_layout.js       |  4 +-
 .../collapsible_section_container.js          |  2 +-
 .../app/widgets/{ => containers}/container.js |  2 +-
 .../{ => containers}/flex_container.js        |  0
 .../app/widgets/containers/root_container.js  | 42 +++++++++++++++++++
 .../{ => containers}/scrolling_container.js   |  0
 .../{ => containers}/side_pane_container.js   |  4 +-
 .../mobile_widgets/screen_container.js        |  4 +-
 src/public/app/widgets/note_detail.js         | 21 ----------
 11 files changed, 58 insertions(+), 38 deletions(-)
 rename src/public/app/widgets/{ => containers}/collapsible_section_container.js (98%)
 rename src/public/app/widgets/{ => containers}/container.js (94%)
 rename src/public/app/widgets/{ => containers}/flex_container.js (100%)
 create mode 100644 src/public/app/widgets/containers/root_container.js
 rename src/public/app/widgets/{ => containers}/scrolling_container.js (100%)
 rename src/public/app/widgets/{ => containers}/side_pane_container.js (91%)

diff --git a/package.json b/package.json
index 6ae75a5b8..0d7bec452 100644
--- a/package.json
+++ b/package.json
@@ -52,7 +52,7 @@
     "is-svg": "4.3.1",
     "jimp": "0.16.1",
     "joplin-turndown-plugin-gfm": "1.0.12",
-    "jsdom": "16.5.1",
+    "jsdom": "16.5.2",
     "mime-types": "2.1.29",
     "multer": "1.4.2",
     "node-abi": "2.21.0",
diff --git a/src/public/app/layouts/desktop_layout.js b/src/public/app/layouts/desktop_layout.js
index 8674860b4..a6be0959e 100644
--- a/src/public/app/layouts/desktop_layout.js
+++ b/src/public/app/layouts/desktop_layout.js
@@ -1,9 +1,9 @@
-import FlexContainer from "../widgets/flex_container.js";
+import FlexContainer from "../widgets/containers/flex_container.js";
 import GlobalMenuWidget from "../widgets/global_menu.js";
 import TabRowWidget from "../widgets/tab_row.js";
 import TitleBarButtonsWidget from "../widgets/title_bar_buttons.js";
 import StandardTopWidget from "../widgets/standard_top_widget.js";
-import SidePaneContainer from "../widgets/side_pane_container.js";
+import SidePaneContainer from "../widgets/containers/side_pane_container.js";
 import NoteTreeWidget from "../widgets/note_tree.js";
 import TabCachingWidget from "../widgets/tab_caching_widget.js";
 import NotePathsWidget from "../widgets/note_paths.js";
@@ -20,12 +20,12 @@ import SimilarNotesWidget from "../widgets/similar_notes.js";
 import WhatLinksHereWidget from "../widgets/collapsible_widgets/what_links_here.js";
 import SidePaneToggles from "../widgets/side_pane_toggles.js";
 import EditedNotesWidget from "../widgets/collapsible_widgets/edited_notes.js";
-import CollapsibleSectionContainer from "../widgets/collapsible_section_container.js";
+import CollapsibleSectionContainer from "../widgets/containers/collapsible_section_container.js";
 import PromotedAttributesWidget from "../widgets/type_property_widgets/promoted_attributes.js";
 import InheritedAttributesWidget from "../widgets/type_property_widgets/inherited_attribute_list.js";
 import NoteListWidget from "../widgets/note_list.js";
 import SearchDefinitionWidget from "../widgets/type_property_widgets/search_definition.js";
-import Container from "../widgets/container.js";
+import Container from "../widgets/containers/container.js";
 import SqlResultWidget from "../widgets/sql_result.js";
 import SqlTableSchemasWidget from "../widgets/sql_table_schemas.js";
 import FilePropertiesWidget from "../widgets/type_property_widgets/file_properties.js";
@@ -34,7 +34,8 @@ 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";
+import ScrollingContainer from "../widgets/containers/scrolling_container.js";
+import RootContainer from "../widgets/containers/root_container.js";
 
 const RIGHT_PANE_CSS = `
 <style>
@@ -136,10 +137,8 @@ export default class DesktopLayout {
     getRootWidget(appContext) {
         appContext.mainTreeWidget = new NoteTreeWidget("main");
 
-        return new FlexContainer('column')
+        return new RootContainer()
             .setParent(appContext)
-            .id('root-widget')
-            .css('height', '100vh')
             .child(new FlexContainer('row').overflowing()
                 .css('height', '36px')
                 .child(new GlobalMenuWidget())
diff --git a/src/public/app/layouts/mobile_layout.js b/src/public/app/layouts/mobile_layout.js
index d61d2f381..a715b5563 100644
--- a/src/public/app/layouts/mobile_layout.js
+++ b/src/public/app/layouts/mobile_layout.js
@@ -1,4 +1,4 @@
-import FlexContainer from "../widgets/flex_container.js";
+import FlexContainer from "../widgets/containers/flex_container.js";
 import NoteTitleWidget from "../widgets/note_title.js";
 import NoteDetailWidget from "../widgets/note_detail.js";
 import NoteTreeWidget from "../widgets/note_tree.js";
@@ -6,7 +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";
+import ScrollingContainer from "../widgets/containers/scrolling_container.js";
 
 const MOBILE_CSS = `
 <style>
diff --git a/src/public/app/widgets/collapsible_section_container.js b/src/public/app/widgets/containers/collapsible_section_container.js
similarity index 98%
rename from src/public/app/widgets/collapsible_section_container.js
rename to src/public/app/widgets/containers/collapsible_section_container.js
index ae80dfa1d..ea546af70 100644
--- a/src/public/app/widgets/collapsible_section_container.js
+++ b/src/public/app/widgets/containers/collapsible_section_container.js
@@ -1,4 +1,4 @@
-import TabAwareWidget from "./tab_aware_widget.js";
+import TabAwareWidget from "../tab_aware_widget.js";
 
 const TPL = `
 <div class="section-container">
diff --git a/src/public/app/widgets/container.js b/src/public/app/widgets/containers/container.js
similarity index 94%
rename from src/public/app/widgets/container.js
rename to src/public/app/widgets/containers/container.js
index 2478fbb41..7703e2eae 100644
--- a/src/public/app/widgets/container.js
+++ b/src/public/app/widgets/containers/container.js
@@ -1,4 +1,4 @@
-import BasicWidget from "./basic_widget.js";
+import BasicWidget from "../basic_widget.js";
 
 export default class Container extends BasicWidget {
     constructor() {
diff --git a/src/public/app/widgets/flex_container.js b/src/public/app/widgets/containers/flex_container.js
similarity index 100%
rename from src/public/app/widgets/flex_container.js
rename to src/public/app/widgets/containers/flex_container.js
diff --git a/src/public/app/widgets/containers/root_container.js b/src/public/app/widgets/containers/root_container.js
new file mode 100644
index 000000000..aecc8f2c3
--- /dev/null
+++ b/src/public/app/widgets/containers/root_container.js
@@ -0,0 +1,42 @@
+import FlexContainer from "./flex_container.js";
+import utils from "../../services/utils.js";
+import appContext from "../../services/app_context.js";
+
+export default class RootContainer extends FlexContainer {
+    constructor() {
+        super('column');
+
+        this.id('root-widget');
+        this.css('height', '100vh');
+    }
+
+    refresh() {
+        this.$widget.removeClass(); // remove all classes
+        const note = appContext.tabManager.getActiveTabNote();
+
+        if (note) {
+            this.$widget.addClass(note.getCssClass());
+
+            this.$widget.addClass(utils.getNoteTypeClass(note.type));
+            this.$widget.addClass(utils.getMimeTypeClass(note.mime));
+
+            this.$widget.toggleClass("protected", note.isProtected);
+        }
+    }
+
+    tabNoteSwitchedEvent() {
+        this.refresh();
+    }
+
+    activeTabChangedEvent() {
+        this.refresh();
+    }
+
+    tabNoteSwitchedAndActivatedEvent() {
+        this.refresh();
+    }
+
+    noteTypeMimeChangedEvent() {
+        this.refresh();
+    }
+}
diff --git a/src/public/app/widgets/scrolling_container.js b/src/public/app/widgets/containers/scrolling_container.js
similarity index 100%
rename from src/public/app/widgets/scrolling_container.js
rename to src/public/app/widgets/containers/scrolling_container.js
diff --git a/src/public/app/widgets/side_pane_container.js b/src/public/app/widgets/containers/side_pane_container.js
similarity index 91%
rename from src/public/app/widgets/side_pane_container.js
rename to src/public/app/widgets/containers/side_pane_container.js
index 1d4508e7f..c40b78874 100644
--- a/src/public/app/widgets/side_pane_container.js
+++ b/src/public/app/widgets/containers/side_pane_container.js
@@ -1,4 +1,4 @@
-import options from "../services/options.js";
+import options from "../../services/options.js";
 import FlexContainer from "./flex_container.js";
 
 export default class SidePaneContainer extends FlexContainer {
@@ -22,4 +22,4 @@ export default class SidePaneContainer extends FlexContainer {
             this.handleEvent('lazyLoaded');
         }
     }
-}
\ No newline at end of file
+}
diff --git a/src/public/app/widgets/mobile_widgets/screen_container.js b/src/public/app/widgets/mobile_widgets/screen_container.js
index 1a7ee3a8d..5229da8c5 100644
--- a/src/public/app/widgets/mobile_widgets/screen_container.js
+++ b/src/public/app/widgets/mobile_widgets/screen_container.js
@@ -1,4 +1,4 @@
-import FlexContainer from "../flex_container.js";
+import FlexContainer from "../containers/flex_container.js";
 
 export default class ScreenContainer extends FlexContainer {
     constructor(screenName, direction) {
@@ -15,4 +15,4 @@ export default class ScreenContainer extends FlexContainer {
             this.$widget.addClass('d-none');
         }
     }
-}
\ No newline at end of file
+}
diff --git a/src/public/app/widgets/note_detail.js b/src/public/app/widgets/note_detail.js
index a57a65216..4a36972b9 100644
--- a/src/public/app/widgets/note_detail.js
+++ b/src/public/app/widgets/note_detail.js
@@ -129,27 +129,6 @@ export default class NoteDetailWidget extends TabAwareWidget {
 
             this.child(typeWidget);
         }
-
-        this.setupClasses();
-    }
-
-    setupClasses() {
-        for (const clazz of Array.from(this.$widget[0].classList)) { // create copy to safely iterate over while removing classes
-            if (clazz !== 'note-detail' && !clazz.startsWith('hidden-')) {
-                this.$widget.removeClass(clazz);
-            }
-        }
-
-        const note = this.note;
-
-        if (note) {
-            this.$widget.addClass(note.getCssClass());
-
-            this.$widget.addClass(utils.getNoteTypeClass(note.type));
-            this.$widget.addClass(utils.getMimeTypeClass(note.mime));
-
-            this.$widget.toggleClass("protected", note.isProtected);
-        }
     }
 
     getTypeWidget() {