From d79ae261e155ece5ce3016100ae1df9d4ed92f19 Mon Sep 17 00:00:00 2001 From: zadam Date: Thu, 6 Feb 2020 21:47:31 +0100 Subject: [PATCH] refactored layout out of app context --- .../javascripts/services/app_context.js | 75 ++----------------- src/public/javascripts/widgets/layout.js | 70 +++++++++++++++++ src/public/javascripts/widgets/note_tree.js | 2 + src/public/javascripts/widgets/tab_row.js | 6 ++ 4 files changed, 85 insertions(+), 68 deletions(-) create mode 100644 src/public/javascripts/widgets/layout.js diff --git a/src/public/javascripts/services/app_context.js b/src/public/javascripts/services/app_context.js index 0dd66bdac..4b7571323 100644 --- a/src/public/javascripts/services/app_context.js +++ b/src/public/javascripts/services/app_context.js @@ -1,43 +1,20 @@ -import GlobalButtonsWidget from "../widgets/global_buttons.js"; -import SearchBoxWidget from "../widgets/search_box.js"; -import SearchResultsWidget from "../widgets/search_results.js"; import NoteTreeWidget from "../widgets/note_tree.js"; import TabContext from "./tab_context.js"; import server from "./server.js"; import TabRowWidget from "../widgets/tab_row.js"; -import NoteTitleWidget from "../widgets/note_title.js"; -import PromotedAttributesWidget from "../widgets/promoted_attributes.js"; -import NoteDetailWidget from "../widgets/note_detail.js"; -import TabCachingWidget from "../widgets/tab_caching_widget.js"; -import NoteInfoWidget from "../widgets/note_info.js"; -import NoteRevisionsWidget from "../widgets/note_revisions.js"; -import LinkMapWidget from "../widgets/link_map.js"; -import SimilarNotesWidget from "../widgets/similar_notes.js"; -import WhatLinksHereWidget from "../widgets/what_links_here.js"; -import AttributesWidget from "../widgets/attributes.js"; -import TitleBarButtonsWidget from "../widgets/title_bar_buttons.js"; -import GlobalMenuWidget from "../widgets/global_menu.js"; -import StandardTopWidget from "../widgets/standard_top_widget.js"; import treeCache from "./tree_cache.js"; -import NotePathsWidget from "../widgets/note_paths.js"; -import RunScriptButtonsWidget from "../widgets/run_script_buttons.js"; -import ProtectedNoteSwitchWidget from "../widgets/protected_note_switch.js"; -import NoteTypeWidget from "../widgets/note_type.js"; -import NoteActionsWidget from "../widgets/note_actions.js"; import bundleService from "./bundle.js"; import DialogEventComponent from "./dialog_events.js"; import Entrypoints from "./entrypoints.js"; -import CalendarWidget from "../widgets/calendar.js"; import options from "./options.js"; import utils from "./utils.js"; import treeService from "./tree.js"; -import SidePaneContainer from "../widgets/side_pane_container.js"; import ZoomService from "./zoom.js"; -import SidePaneToggles from "../widgets/side_pane_toggles.js"; -import FlexContainer from "../widgets/flex_container.js"; +import Layout from "../widgets/layout.js"; class AppContext { - constructor() { + constructor(layout) { + this.layout = layout; this.components = []; /** @type {TabContext[]} */ this.tabContexts = []; @@ -129,47 +106,7 @@ class AppContext { } showWidgets() { - this.tabRow = new TabRowWidget(this); - this.noteTreeWidget = new NoteTreeWidget(this); - - const rootContainer = new FlexContainer(this, { 'flex-direction': 'column', 'height': '100vh' }, [ - new FlexContainer(this, { 'flex-direction': 'row' }, [ - new GlobalMenuWidget(this), - this.tabRow, - new TitleBarButtonsWidget(this) - ]), - new StandardTopWidget(this), - new FlexContainer(this, { 'flex-direction': 'row' }, [ - new SidePaneContainer(this, 'left', [ - new GlobalButtonsWidget(this), - new SearchBoxWidget(this), - new SearchResultsWidget(this), - this.noteTreeWidget - ]), - new FlexContainer(this, { id: 'center-pane', 'flex-direction': 'column' }, [ - new FlexContainer(this, { 'flex-direction': 'row' }, [ - new TabCachingWidget(this, () => new NotePathsWidget(this)), - new NoteTitleWidget(this), - new RunScriptButtonsWidget(this), - new ProtectedNoteSwitchWidget(this), - new NoteTypeWidget(this), - new NoteActionsWidget(this) - ]), - new TabCachingWidget(this, () => new PromotedAttributesWidget(this)), - new TabCachingWidget(this, () => new NoteDetailWidget(this)) - ]), - new SidePaneContainer(this, 'right', [ - new NoteInfoWidget(this), - new TabCachingWidget(this, () => new CalendarWidget(this)), - new TabCachingWidget(this, () => new AttributesWidget(this)), - new TabCachingWidget(this, () => new LinkMapWidget(this)), - new TabCachingWidget(this, () => new NoteRevisionsWidget(this)), - new TabCachingWidget(this, () => new SimilarNotesWidget(this)), - new TabCachingWidget(this, () => new WhatLinksHereWidget(this)) - ]), - new SidePaneToggles(this) - ]) - ]); + const rootContainer = this.layout.getRootWidget(this); $("body").append(rootContainer.render()); @@ -456,7 +393,9 @@ class AppContext { } } -const appContext = new AppContext(); +const layout = new Layout(); + +const appContext = new AppContext(layout); // we should save all outstanding changes before the page/app is closed $(window).on('beforeunload', () => { diff --git a/src/public/javascripts/widgets/layout.js b/src/public/javascripts/widgets/layout.js new file mode 100644 index 000000000..b3793cfc4 --- /dev/null +++ b/src/public/javascripts/widgets/layout.js @@ -0,0 +1,70 @@ +import FlexContainer from "./flex_container.js"; +import GlobalMenuWidget from "./global_menu.js"; +import TabRowWidget from "./tab_row.js"; +import TitleBarButtonsWidget from "./title_bar_buttons.js"; +import StandardTopWidget from "./standard_top_widget.js"; +import SidePaneContainer from "./side_pane_container.js"; +import GlobalButtonsWidget from "./global_buttons.js"; +import SearchBoxWidget from "./search_box.js"; +import SearchResultsWidget from "./search_results.js"; +import NoteTreeWidget from "./note_tree.js"; +import TabCachingWidget from "./tab_caching_widget.js"; +import NotePathsWidget from "./note_paths.js"; +import NoteTitleWidget from "./note_title.js"; +import RunScriptButtonsWidget from "./run_script_buttons.js"; +import ProtectedNoteSwitchWidget from "./protected_note_switch.js"; +import NoteTypeWidget from "./note_type.js"; +import NoteActionsWidget from "./note_actions.js"; +import PromotedAttributesWidget from "./promoted_attributes.js"; +import NoteDetailWidget from "./note_detail.js"; +import NoteInfoWidget from "./note_info.js"; +import CalendarWidget from "./calendar.js"; +import AttributesWidget from "./attributes.js"; +import LinkMapWidget from "./link_map.js"; +import NoteRevisionsWidget from "./note_revisions.js"; +import SimilarNotesWidget from "./similar_notes.js"; +import WhatLinksHereWidget from "./what_links_here.js"; +import SidePaneToggles from "./side_pane_toggles.js"; + +export default class Layout { + getRootWidget(appContext) { + return new FlexContainer(appContext, { 'flex-direction': 'column', 'height': '100vh' }, [ + new FlexContainer(appContext, { 'flex-direction': 'row' }, [ + new GlobalMenuWidget(appContext), + new TabRowWidget(appContext), + new TitleBarButtonsWidget(appContext) + ]), + new StandardTopWidget(appContext), + new FlexContainer(appContext, { 'flex-direction': 'row' }, [ + new SidePaneContainer(appContext, 'left', [ + new GlobalButtonsWidget(appContext), + new SearchBoxWidget(appContext), + new SearchResultsWidget(appContext), + new NoteTreeWidget(appContext) + ]), + new FlexContainer(appContext, { id: 'center-pane', 'flex-direction': 'column' }, [ + new FlexContainer(appContext, { 'flex-direction': 'row' }, [ + new TabCachingWidget(appContext, () => new NotePathsWidget(appContext)), + new NoteTitleWidget(appContext), + new RunScriptButtonsWidget(appContext), + new ProtectedNoteSwitchWidget(appContext), + new NoteTypeWidget(appContext), + new NoteActionsWidget(appContext) + ]), + new TabCachingWidget(appContext, () => new PromotedAttributesWidget(appContext)), + new TabCachingWidget(appContext, () => new NoteDetailWidget(appContext)) + ]), + new SidePaneContainer(appContext, 'right', [ + new NoteInfoWidget(appContext), + new TabCachingWidget(appContext, () => new CalendarWidget(appContext)), + new TabCachingWidget(appContext, () => new AttributesWidget(appContext)), + new TabCachingWidget(appContext, () => new LinkMapWidget(appContext)), + new TabCachingWidget(appContext, () => new NoteRevisionsWidget(appContext)), + new TabCachingWidget(appContext, () => new SimilarNotesWidget(appContext)), + new TabCachingWidget(appContext, () => new WhatLinksHereWidget(appContext)) + ]), + new SidePaneToggles(appContext) + ]) + ]) + } +} \ No newline at end of file diff --git a/src/public/javascripts/widgets/note_tree.js b/src/public/javascripts/widgets/note_tree.js index 567eff5f6..d5f2b9349 100644 --- a/src/public/javascripts/widgets/note_tree.js +++ b/src/public/javascripts/widgets/note_tree.js @@ -35,6 +35,8 @@ export default class NoteTreeWidget extends TabAwareWidget { window.glob.cutIntoNote = () => this.cutIntoNoteListener(); + this.appContext.noteTreeWidget = this; + this.tree = null; } diff --git a/src/public/javascripts/widgets/tab_row.js b/src/public/javascripts/widgets/tab_row.js index 98a1be2ff..db74b760d 100644 --- a/src/public/javascripts/widgets/tab_row.js +++ b/src/public/javascripts/widgets/tab_row.js @@ -234,6 +234,12 @@ const TAB_ROW_TPL = ` `; export default class TabRowWidget extends BasicWidget { + constructor(appContext) { + super(appContext); + + appContext.tabRow = this; + } + doRender() { this.$widget = $(TAB_ROW_TPL);