From c89514f9bb32ebcf64aa5c751bd8067674eca32e Mon Sep 17 00:00:00 2001 From: zadam Date: Mon, 23 Dec 2019 20:34:29 +0100 Subject: [PATCH] saving size and visibility state of the panes --- src/public/javascripts/desktop.js | 2 -- src/public/javascripts/services/sidebar.js | 39 +++++++++++++++------- src/public/javascripts/services/split.js | 35 +++++++++++++++---- src/routes/api/options.js | 5 ++- src/services/options_init.js | 5 ++- src/views/center.ejs | 2 +- 6 files changed, 65 insertions(+), 23 deletions(-) diff --git a/src/public/javascripts/desktop.js b/src/public/javascripts/desktop.js index 1a8086300..876cc9177 100644 --- a/src/public/javascripts/desktop.js +++ b/src/public/javascripts/desktop.js @@ -175,8 +175,6 @@ noteTooltipService.setupGlobalTooltip(); noteAutocompleteService.init(); -splitService.setupSplitWithSidebar(); - if (utils.isElectron()) { import("./services/spell_check.js").then(spellCheckService => spellCheckService.initSpellCheck()); } diff --git a/src/public/javascripts/services/sidebar.js b/src/public/javascripts/services/sidebar.js index 654f09e62..9363b4a6f 100644 --- a/src/public/javascripts/services/sidebar.js +++ b/src/public/javascripts/services/sidebar.js @@ -2,30 +2,45 @@ import bundleService from "./bundle.js"; import ws from "./ws.js"; import optionsService from "./options.js"; import splitService from "./split.js"; +import optionService from "./options.js"; +import server from "./server.js"; +import noteDetailService from "./note_detail.js"; const $sidebar = $("#right-pane"); const $sidebarContainer = $('#sidebar-container'); -const $showSideBarButton = $("#show-sidebar-button"); +const $showSidebarButton = $("#show-sidebar-button"); const $hideSidebarButton = $("#hide-sidebar-button"); -$showSideBarButton.hide(); +optionService.waitForOptions().then(options => toggleSidebar(options.is('rightPaneVisible'))); + +function toggleSidebar(show) { + $sidebar.toggle(show); + $showSidebarButton.toggle(!show); + $hideSidebarButton.toggle(show); + + if (show) { + splitService.setupSplitWithSidebar(); + } + else { + splitService.setupSplitWithoutSidebar(); + } +} $hideSidebarButton.on('click', () => { - $sidebar.hide(); - $showSideBarButton.show(); - $hideSidebarButton.hide(); + toggleSidebar(false); - splitService.setupSplitWithoutSidebar(); + server.put('options/rightPaneVisible/false'); }); -// FIXME shoud run note loaded! -$showSideBarButton.on('click', () => { - $sidebar.show(); - $showSideBarButton.hide(); - $hideSidebarButton.show(); +$showSidebarButton.on('click', async () => { + toggleSidebar(true); - splitService.setupSplitWithSidebar(); + await server.put('options/rightPaneVisible/true'); + + const {sidebar} = noteDetailService.getActiveTabContext(); + await sidebar.noteLoaded(); + sidebar.show(); }); class Sidebar { diff --git a/src/public/javascripts/services/split.js b/src/public/javascripts/services/split.js index a10e747a0..9ee15a9c1 100644 --- a/src/public/javascripts/services/split.js +++ b/src/public/javascripts/services/split.js @@ -1,24 +1,47 @@ +import server from "./server.js"; +import optionService from "./options.js"; + let instance; -function setupSplitWithSidebar() { +async function getPaneWidths() { + const options = await optionService.waitForOptions(); + + return { + leftPaneWidth: options.getInt('leftPaneWidth'), + rightPaneWidth: options.getInt('rightPaneWidth') + }; +} + +async function setupSplitWithSidebar() { if (instance) { instance.destroy(); } + const {leftPaneWidth, rightPaneWidth} = await getPaneWidths(); + instance = Split(['#left-pane', '#center-pane', '#right-pane'], { - sizes: [25, 50, 25], - gutterSize: 5 + sizes: [leftPaneWidth, 100 - leftPaneWidth - rightPaneWidth, rightPaneWidth], + gutterSize: 5, + onDragEnd: sizes => { + server.put('options/leftPaneWidth/' + Math.round(sizes[0])); + server.put('options/rightPaneWidth/' + Math.round(sizes[2])); + } }); } -function setupSplitWithoutSidebar() { +async function setupSplitWithoutSidebar() { if (instance) { instance.destroy(); } + const {leftPaneWidth} = await getPaneWidths(); + instance = Split(['#left-pane', '#center-pane'], { - sizes: [25, 75], - gutterSize: 5 + sizes: [leftPaneWidth, 100 - leftPaneWidth], + gutterSize: 5, + onDragEnd: sizes => { + server.put('options/leftPaneWidth/' + Math.round(sizes[0])); + } }); } diff --git a/src/routes/api/options.js b/src/routes/api/options.js index e71cbb46c..3ef5ecd6d 100644 --- a/src/routes/api/options.js +++ b/src/routes/api/options.js @@ -30,7 +30,10 @@ const ALLOWED_OPTIONS = new Set([ 'spellCheckEnabled', 'spellCheckLanguageCode', 'imageMaxWidthHeight', - 'imageJpegQuality' + 'imageJpegQuality', + 'leftPaneWidth', + 'rightPaneWidth', + 'rightPaneVisible' ]); async function getOptions() { diff --git a/src/services/options_init.js b/src/services/options_init.js index a2b69f618..4945c5c67 100644 --- a/src/services/options_init.js +++ b/src/services/options_init.js @@ -76,7 +76,10 @@ const defaultOptions = [ { name: 'imageMaxWidthHeight', value: '1200', isSynced: true }, { name: 'imageJpegQuality', value: '75', isSynced: true }, { name: 'autoFixConsistencyIssues', value: 'true', isSynced: false }, - { name: 'codeNotesMimeTypes', value: '["text/x-csrc","text/x-c++src","text/x-csharp","text/css","text/x-go","text/x-groovy","text/x-haskell","text/html","message/http","text/x-java","application/javascript;env=frontend","application/javascript;env=backend","application/json","text/x-kotlin","text/x-markdown","text/x-perl","text/x-php","text/x-python","text/x-ruby",null,"text/x-sql","text/x-swift","text/xml","text/x-yaml"]', isSynced: true } + { name: 'codeNotesMimeTypes', value: '["text/x-csrc","text/x-c++src","text/x-csharp","text/css","text/x-go","text/x-groovy","text/x-haskell","text/html","message/http","text/x-java","application/javascript;env=frontend","application/javascript;env=backend","application/json","text/x-kotlin","text/x-markdown","text/x-perl","text/x-php","text/x-python","text/x-ruby",null,"text/x-sql","text/x-swift","text/xml","text/x-yaml"]', isSynced: true }, + { name: 'leftPaneWidth', value: '25', isSynced: false }, + { name: 'rightPaneWidth', value: '25', isSynced: false }, + { name: 'rightPaneVisible', value: 'true', isSynced: false } ]; async function initStartupOptions() { diff --git a/src/views/center.ejs b/src/views/center.ejs index bd3c02651..97ade9a51 100644 --- a/src/views/center.ejs +++ b/src/views/center.ejs @@ -1,7 +1,7 @@
-
+
<% include title.ejs %>