From 786bbbc1605c9b02e2ef09669b21d776acb17c09 Mon Sep 17 00:00:00 2001 From: zadam Date: Tue, 4 Feb 2020 22:46:17 +0100 Subject: [PATCH] sidebars are now represented as widgets --- src/public/javascripts/desktop.js | 8 +++- .../javascripts/services/app_context.js | 36 +++++++----------- .../javascripts/widgets/basic_widget.js | 4 ++ .../widgets/side_pane_container.js | 37 +++++++++++++++++++ .../javascripts/widgets/tab_aware_widget.js | 4 ++ .../javascripts/widgets/tab_caching_widget.js | 6 +-- src/views/desktop.ejs | 4 -- 7 files changed, 67 insertions(+), 32 deletions(-) create mode 100644 src/public/javascripts/widgets/side_pane_container.js diff --git a/src/public/javascripts/desktop.js b/src/public/javascripts/desktop.js index a04996012..1e0c25730 100644 --- a/src/public/javascripts/desktop.js +++ b/src/public/javascripts/desktop.js @@ -162,12 +162,16 @@ function toggleSidebar(side, show) { paneVisible[side] = show; } -function toggleAndSave(side, show) { +async function toggleAndSave(side, show) { toggleSidebar(side, show); + await server.put(`options/${side}PaneVisible/` + show.toString()); + + await optionService.reloadOptions(); + splitService.setupSplit(paneVisible.left, paneVisible.right); - server.put(`options/${side}PaneVisible/` + show.toString()); + appContext.trigger('sidebarVisibilityChanged', {side, show}); } $("#show-right-pane-button").on('click', () => toggleAndSave('right', true)); diff --git a/src/public/javascripts/services/app_context.js b/src/public/javascripts/services/app_context.js index 533fd9da4..79c7a3e0e 100644 --- a/src/public/javascripts/services/app_context.js +++ b/src/public/javascripts/services/app_context.js @@ -25,7 +25,6 @@ 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 protectedSessionHolder from "./protected_session_holder.js"; import bundleService from "./bundle.js"; import DialogEventComponent from "./dialog_events.js"; import Entrypoints from "./entrypoints.js"; @@ -33,6 +32,7 @@ import CalendarWidget from "../widgets/calendar.js"; import optionsService from "./options.js"; import utils from "./utils.js"; import treeService from "./tree.js"; +import SidePaneContainer from "../widgets/side_pane_container.js"; class AppContext { constructor() { @@ -144,21 +144,8 @@ class AppContext { $topPane.append(widget.render()); } - const $leftPane = $("#left-pane"); - this.noteTreeWidget = new NoteTreeWidget(this); - const leftPaneWidgets = [ - new GlobalButtonsWidget(this), - new SearchBoxWidget(this), - new SearchResultsWidget(this), - this.noteTreeWidget - ]; - - for (const widget of leftPaneWidgets) { - $leftPane.append(widget.render()); - } - const $centerPane = $("#center-pane"); const centerPaneWidgets = [ @@ -178,9 +165,16 @@ class AppContext { $centerPane.append(widget.render()); } - const $rightPane = $("#right-pane"); + const leftPaneContainer = new SidePaneContainer(this, 'left', [ + new GlobalButtonsWidget(this), + new SearchBoxWidget(this), + new SearchResultsWidget(this), + this.noteTreeWidget + ]); - const rightPaneWidgets = [ + $centerPane.before(leftPaneContainer.render()); + + const rightPaneContainer = new SidePaneContainer(this, 'right', [ new NoteInfoWidget(this), new TabCachingWidget(this, () => new CalendarWidget(this)), new TabCachingWidget(this, () => new AttributesWidget(this)), @@ -188,19 +182,17 @@ class AppContext { new TabCachingWidget(this, () => new NoteRevisionsWidget(this)), new TabCachingWidget(this, () => new SimilarNotesWidget(this)), new TabCachingWidget(this, () => new WhatLinksHereWidget(this)) - ]; + ]); - for (const widget of rightPaneWidgets) { - $rightPane.append(widget.render()); - } + $centerPane.after(rightPaneContainer.render()); this.components = [ new Entrypoints(), new DialogEventComponent(this), ...topPaneWidgets, - ...leftPaneWidgets, + leftPaneContainer, ...centerPaneWidgets, - ...rightPaneWidgets + rightPaneContainer ]; } diff --git a/src/public/javascripts/widgets/basic_widget.js b/src/public/javascripts/widgets/basic_widget.js index cb5e3889e..adf78081e 100644 --- a/src/public/javascripts/widgets/basic_widget.js +++ b/src/public/javascripts/widgets/basic_widget.js @@ -25,6 +25,10 @@ class BasicWidget extends Component { this.$widget.toggle(show); } + isVisible() { + return this.$widget.is(":visible"); + } + remove() { if (this.$widget) { this.$widget.remove(); diff --git a/src/public/javascripts/widgets/side_pane_container.js b/src/public/javascripts/widgets/side_pane_container.js new file mode 100644 index 000000000..213a42311 --- /dev/null +++ b/src/public/javascripts/widgets/side_pane_container.js @@ -0,0 +1,37 @@ +import BasicWidget from "./basic_widget.js"; +import optionService from "../services/options.js"; + +export default class SidePaneContainer extends BasicWidget { + constructor(appContext, side, widgets) { + super(appContext); + + this.side = side; + this.children = widgets; + } + + render() { + this.$widget = $(`
`); + + for (const widget of this.children) { + this.$widget.append(widget.render()); + } + + return this.$widget; + } + + async eventReceived(name, data, sync = false) { + const options = await optionService.waitForOptions(); + + if (options.is(this.side + 'PaneVisible')) { + super.eventReceived(name, data, sync); + } + } + + sidebarVisibilityChangedListener({side, show}) { + if (this.side === side) { + this.toggle(show); + + this.eventReceived('lazyLoaded'); + } + } +} \ No newline at end of file diff --git a/src/public/javascripts/widgets/tab_aware_widget.js b/src/public/javascripts/widgets/tab_aware_widget.js index 69d509451..e29c79488 100644 --- a/src/public/javascripts/widgets/tab_aware_widget.js +++ b/src/public/javascripts/widgets/tab_aware_widget.js @@ -76,4 +76,8 @@ export default class TabAwareWidget extends BasicWidget { treeCacheReloadedListener() { this.refresh(); } + + lazyLoadedListener() { + this.refresh(); + } } \ No newline at end of file diff --git a/src/public/javascripts/widgets/tab_caching_widget.js b/src/public/javascripts/widgets/tab_caching_widget.js index b049ea5e7..5089d47d6 100644 --- a/src/public/javascripts/widgets/tab_caching_widget.js +++ b/src/public/javascripts/widgets/tab_caching_widget.js @@ -13,15 +13,13 @@ export default class TabCachingWidget extends TabAwareWidget { return this.$widget; } - activeTabChangedListener() { - super.activeTabChangedListener(); - + refreshWithNote() { for (const widget of Object.values(this.widgets)) { widget.toggle(false); } if (!this.tabContext) { - console.log(`Received activeTabChanged to widget ${this.componentId} which does not have tabContext.`); + console.log(`No tabContext in widget ${this.componentId}.`); return; } diff --git a/src/views/desktop.ejs b/src/views/desktop.ejs index 27f4c117c..a8af7c11a 100644 --- a/src/views/desktop.ejs +++ b/src/views/desktop.ejs @@ -17,14 +17,10 @@ -
-
- -