From 0f4ba434636dfac32a12183f772475a5e0f0dc1f Mon Sep 17 00:00:00 2001 From: zadam Date: Sun, 1 Mar 2020 15:19:16 +0100 Subject: [PATCH] mobile frontend is working again --- src/public/javascripts/mobile_old.js | 99 ------------------- .../javascripts/services/app_context.js | 5 + .../widgets/close_detail_button.js | 4 +- .../widgets/mobile_global_buttons.js | 1 + .../javascripts/widgets/mobile_layout.js | 7 +- .../widgets/mobile_screen_switcher.js | 15 +++ src/public/javascripts/widgets/note_tree.js | 14 ++- .../javascripts/widgets/screen_container.js | 18 ++++ 8 files changed, 58 insertions(+), 105 deletions(-) delete mode 100644 src/public/javascripts/mobile_old.js create mode 100644 src/public/javascripts/widgets/mobile_screen_switcher.js create mode 100644 src/public/javascripts/widgets/screen_container.js diff --git a/src/public/javascripts/mobile_old.js b/src/public/javascripts/mobile_old.js deleted file mode 100644 index 46ae1c6b7..000000000 --- a/src/public/javascripts/mobile_old.js +++ /dev/null @@ -1,99 +0,0 @@ -import treeService from "./services/tree.js"; -import treeCache from "./services/tree_cache.js"; -import treeBuilder from "./services/tree_builder.js"; -import contextMenuWidget from "./services/context_menu.js"; -import branchService from "./services/branches.js"; -import utils from "./services/utils.js"; -import appContext from "./services/app_context.js"; -import noteCreateService from "./services/note_create.js"; -import glob from "./services/glob.js"; - -const $leftPane = $("#left-pane"); -const $tree = $("#tree"); -const $detail = $("#detail"); - -function togglePanes() { - if (!$leftPane.is(":visible") || !$detail.is(":visible")) { - $detail.toggleClass("d-none"); - $leftPane.toggleClass("d-none"); - } -} - -function showDetailPane() { - if (!$detail.is(":visible")) { - $detail.removeClass("d-none"); - $leftPane.addClass("d-none"); - } -} - -$detail.on("click", ".close-detail-button",() => { - // no page is opened - document.location.hash = '-'; - - togglePanes(); -}); - -async function showTree() { - const treeData = await treeBuilder.prepareTree(); - - $tree.fancytree({ - autoScroll: true, - extensions: ["dnd5", "clones"], - source: treeData, - scrollParent: $tree, - minExpandLevel: 2, // root can't be collapsed - click: (event, data) => { - if (data.targetType !== 'expander' && data.node.isActive()) { - // this is important for single column mobile view, otherwise it's not possible to see again previously displayed note - $tree.fancytree('getTree').reactivate(true); - - return false; - } - }, - activate: async (event, data) => { - const node = data.node; - - treeService.clearSelectedNodes(); - - showDetailPane(); - - const notePath = await treeService.getNotePath(node); - - }, - expand: (event, data) => treeService.setExpandedToServer(data.node.data.branchId, true), - collapse: (event, data) => treeService.setExpandedToServer(data.node.data.branchId, false), - init: (event, data) => treeService.treeInitialized(), // don't collapse to short form - dnd5: dragAndDropSetup, - lazyLoad: function(event, data) { - const noteId = data.node.data.noteId; - - data.result = treeCache.getNote(noteId).then(note => treeBuilder.prepareBranch(note)); - }, - clones: { - highlightActiveClones: true - }, - // this is done to automatically lazy load all expanded search notes after tree load - loadChildren: (event, data) => { - data.node.visit((subNode) => { - // Load all lazy/unloaded child nodes - // (which will trigger `loadChildren` recursively) - if (subNode.isUndefined() && subNode.isExpanded()) { - subNode.load(); - } - }); - } - }); - - treeService.setTree($.ui.fancytree.getTree("#tree")); -} - -$("#log-out-button").on('click', () => { - $("#logout-form").trigger('submit'); -}); - -// this is done so that startNotePath is not used -if (!document.location.hash) { - document.location.hash = '-'; -} - -showTree(); \ No newline at end of file diff --git a/src/public/javascripts/services/app_context.js b/src/public/javascripts/services/app_context.js index 9efe410fd..0e71bc20b 100644 --- a/src/public/javascripts/services/app_context.js +++ b/src/public/javascripts/services/app_context.js @@ -10,6 +10,7 @@ import TabManager from "./tab_manager.js"; import treeService from "./tree.js"; import Component from "../widgets/component.js"; import keyboardActionsService from "./keyboard_actions.js"; +import MobileScreenSwitcherExecutor from "../widgets/mobile_screen_switcher.js"; class AppContext extends Component { setLayout(layout) { @@ -48,6 +49,10 @@ class AppContext extends Component { new Entrypoints() ]; + if (utils.isMobile()) { + this.executors.push(new MobileScreenSwitcherExecutor()); + } + this.child(rootWidget); for (const executor of this.executors) { diff --git a/src/public/javascripts/widgets/close_detail_button.js b/src/public/javascripts/widgets/close_detail_button.js index 5a500e850..a989c9b97 100644 --- a/src/public/javascripts/widgets/close_detail_button.js +++ b/src/public/javascripts/widgets/close_detail_button.js @@ -1,7 +1,7 @@ import BasicWidget from "./basic_widget.js"; const TPL = ` -`; @@ -9,7 +9,7 @@ class CloseDetailButtonWidget extends BasicWidget { doRender() { this.$widget = $(TPL); - //this.$widget.find('.close-detail-button').on('click', ); + this.$widget.on('click', () => this.triggerCommand('setActiveScreen', {screen:'tree'})); return this.$widget; } diff --git a/src/public/javascripts/widgets/mobile_global_buttons.js b/src/public/javascripts/widgets/mobile_global_buttons.js index 5952c466c..aa2458b6f 100644 --- a/src/public/javascripts/widgets/mobile_global_buttons.js +++ b/src/public/javascripts/widgets/mobile_global_buttons.js @@ -9,6 +9,7 @@ const WIDGET_TPL = ` justify-content: space-around; padding: 3px 0 3px 0; margin: 0 10px 0 16px; + font-size: larger; } diff --git a/src/public/javascripts/widgets/mobile_layout.js b/src/public/javascripts/widgets/mobile_layout.js index 3345a1421..47b415015 100644 --- a/src/public/javascripts/widgets/mobile_layout.js +++ b/src/public/javascripts/widgets/mobile_layout.js @@ -5,6 +5,7 @@ import NoteTreeWidget from "./note_tree.js"; import MobileGlobalButtonsWidget from "./mobile_global_buttons.js"; import CloseDetailButtonWidget from "./close_detail_button.js"; import MobileDetailMenuWidget from "./mobile_detail_menu.js"; +import ScreenContainer from "./screen_container.js"; export default class MobileLayout { getRootWidget(appContext) { @@ -12,12 +13,12 @@ export default class MobileLayout { .setParent(appContext) .id('root-widget') .css('height', '100vh') - .child(new FlexContainer('column') + .child(new ScreenContainer("tree", 'column') .class("d-sm-flex d-md-flex d-lg-flex d-xl-flex col-12 col-sm-5 col-md-4 col-lg-4 col-xl-4") .child(new MobileGlobalButtonsWidget()) .child(new NoteTreeWidget())) - .child(new FlexContainer('column') - .class("d-none d-sm-flex d-md-flex d-lg-flex d-xl-flex col-12 col-sm-7 col-md-8 col-lg-8") + .child(new ScreenContainer("detail", "column") + .class("d-sm-flex d-md-flex d-lg-flex d-xl-flex col-12 col-sm-7 col-md-8 col-lg-8") .child(new FlexContainer('row') .child(new MobileDetailMenuWidget()) .child(new NoteTitleWidget()) diff --git a/src/public/javascripts/widgets/mobile_screen_switcher.js b/src/public/javascripts/widgets/mobile_screen_switcher.js new file mode 100644 index 000000000..3ad9821a4 --- /dev/null +++ b/src/public/javascripts/widgets/mobile_screen_switcher.js @@ -0,0 +1,15 @@ +import Component from "./component.js"; + +export default class MobileScreenSwitcherExecutor extends Component { + setActiveScreenCommand({screen}) { + if (screen !== this.activeScreen) { + this.activeScreen = screen; + + this.triggerEvent('activeScreenChanged', {activeScreen: screen}); + } + } + + initialRenderCompleteEvent() { + this.setActiveScreenCommand({screen: 'tree'}); + } +} \ 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 c88cab5c8..c47933967 100644 --- a/src/public/javascripts/widgets/note_tree.js +++ b/src/public/javascripts/widgets/note_tree.js @@ -66,7 +66,7 @@ export default class NoteTreeWidget extends TabAwareWidget { this.$widget.fancytree({ autoScroll: true, keyboard: false, // we takover keyboard handling in the hotkeys plugin - extensions: utils.isMobile() ? ["clones"] : ["hotkeys", "dnd5", "clones"], + extensions: utils.isMobile() ? ["dnd5", "clones"] : ["hotkeys", "dnd5", "clones"], source: treeData, scrollParent: this.$widget, minExpandLevel: 2, // root can't be collapsed @@ -83,6 +83,10 @@ export default class NoteTreeWidget extends TabAwareWidget { const notePath = treeService.getNotePath(node); appContext.tabManager.openTabWithNote(notePath); } + else if (data.node.isActive()) { + // this is important for single column mobile view, otherwise it's not possible to see again previously displayed note + this.tree.reactivate(true); + } else { node.setActive(); @@ -100,6 +104,10 @@ export default class NoteTreeWidget extends TabAwareWidget { const activeTabContext = appContext.tabManager.getActiveTabContext(); await activeTabContext.setNote(notePath); + + if (utils.isMobile()) { + this.triggerCommand('setActiveScreen', {screen:'detail'}); + } }, expand: (event, data) => this.setExpandedToServer(data.node.data.branchId, true), collapse: (event, data) => this.setExpandedToServer(data.node.data.branchId, false), @@ -810,4 +818,8 @@ export default class NoteTreeWidget extends TabAwareWidget { noteCreateService.duplicateNote(noteId, branch.parentNoteId); } + + activeScreenChangedEvent({activeScreen}) { + this.toggle(activeScreen === 'tree'); + } } \ No newline at end of file diff --git a/src/public/javascripts/widgets/screen_container.js b/src/public/javascripts/widgets/screen_container.js new file mode 100644 index 000000000..9ad93c44f --- /dev/null +++ b/src/public/javascripts/widgets/screen_container.js @@ -0,0 +1,18 @@ +import FlexContainer from "./flex_container.js"; + +export default class ScreenContainer extends FlexContainer { + constructor(screenName, direction) { + super(direction); + + this.screenName = screenName; + } + + activeScreenChangedEvent({activeScreen}) {console.log("Active screen", activeScreen); + if (activeScreen === this.screenName) { + this.$widget.removeClass('d-none'); + } + else { + this.$widget.addClass('d-none'); + } + } +} \ No newline at end of file