From bf7541bfb9c523ba2964981eeb3b0d29d85e8e4a Mon Sep 17 00:00:00 2001 From: zadam Date: Sun, 12 Jan 2020 20:15:05 +0100 Subject: [PATCH] more refactoring ... --- .../javascripts/services/app_context.js | 8 +- .../javascripts/services/note_detail.js | 3 +- src/public/javascripts/services/tab_row.js | 222 +++++++++++++++++- src/public/javascripts/services/tree.js | 7 +- .../javascripts/widgets/basic_widget.js | 10 +- .../javascripts/widgets/global_buttons.js | 6 +- src/public/javascripts/widgets/note_title.js | 6 +- src/public/javascripts/widgets/note_tree.js | 39 ++- src/public/javascripts/widgets/note_type.js | 4 +- src/public/javascripts/widgets/search_box.js | 6 +- .../javascripts/widgets/search_results.js | 6 +- src/public/stylesheets/desktop.css | 189 --------------- src/views/desktop.ejs | 2 - 13 files changed, 260 insertions(+), 248 deletions(-) diff --git a/src/public/javascripts/services/app_context.js b/src/public/javascripts/services/app_context.js index 336b0a357..ce659ee40 100644 --- a/src/public/javascripts/services/app_context.js +++ b/src/public/javascripts/services/app_context.js @@ -23,7 +23,9 @@ class AppContext { const $leftPane = $("#left-pane"); this.tabRow = new TabRowWidget(this); - $("#tab-row-container").append(this.tabRow.render()); + const contents = this.tabRow.render(); + + $("#global-menu-wrapper").after(contents); this.noteTreeWidget = new NoteTreeWidget(this); @@ -234,6 +236,10 @@ class AppContext { this.tabsChangedTaskId = setTimeout(() => this.saveOpenTabs(), 1000); } + async activateTab(tabContext) { + return this.tabRow.activateTab(tabContext.$tab[0]); + } + newTabListener() { this.openEmptyTab(); } diff --git a/src/public/javascripts/services/note_detail.js b/src/public/javascripts/services/note_detail.js index 4730492d3..ad28fe30a 100644 --- a/src/public/javascripts/services/note_detail.js +++ b/src/public/javascripts/services/note_detail.js @@ -118,8 +118,7 @@ async function loadNoteDetail(origNotePath, options = {}) { const loadPromise = loadNoteDetailToContext(ctx, loadedNote, notePath).then(() => { if (activate) { - // will also trigger showTab via event - return tabRow.activateTab(ctx.$tab[0]); + appContext.activateTab(ctx); } else { return Promise.resolve(); diff --git a/src/public/javascripts/services/tab_row.js b/src/public/javascripts/services/tab_row.js index a03621cf7..06793970d 100644 --- a/src/public/javascripts/services/tab_row.js +++ b/src/public/javascripts/services/tab_row.js @@ -21,7 +21,7 @@ const TAB_SIZE_SMALL = 84; const TAB_SIZE_SMALLER = 60; const TAB_SIZE_MINI = 48; -const tabTemplate = ` +const TAB_TPL = `
@@ -30,25 +30,216 @@ const tabTemplate = `
`; -const newTabButtonTemplate = `
+
`; -const fillerTemplate = `
+const NEW_TAB_BUTTON_TPL = `
+
`; +const FILLER_TPL = `
`; -const TPL = ` +const TAB_ROW_TPL = `
+ +
`; export default class TabRowWidget extends BasicWidget { - async doRender($widget) { - $widget.append($(TPL)); + doRender() { + const $widget = $(TAB_ROW_TPL); + + this.el = $widget[0]; this.draggabillies = []; this.eventListeners = {}; - this.el = $widget.find(".note-tab-row")[0]; - this.setupStyleEl(); this.setupEvents(); this.setupDraggabilly(); @@ -77,7 +268,9 @@ export default class TabRowWidget extends BasicWidget { } } }); - }) + }); + + return $widget; } setupStyleEl() { @@ -187,8 +380,10 @@ export default class TabRowWidget extends BasicWidget { } addTab(tabId) { + console.log("Adding tab", tabId); + const div = document.createElement('div'); - div.innerHTML = tabTemplate; + div.innerHTML = TAB_TPL; const tabEl = div.firstElementChild; tabEl.setAttribute('data-tab-id', tabId); @@ -207,7 +402,8 @@ export default class TabRowWidget extends BasicWidget { } setTabCloseEventListener(tabEl) { - tabEl.querySelector('.note-tab-close').addEventListener('click', _ => this.removeTab(tabEl)); + tabEl.querySelector('.note-tab-close') + .addEventListener('click', _ => this.removeTab(tabEl)); tabEl.addEventListener('mousedown', e => { if (e.which === 2) { @@ -407,7 +603,7 @@ export default class TabRowWidget extends BasicWidget { setupNewButton() { const div = document.createElement('div'); - div.innerHTML = newTabButtonTemplate; + div.innerHTML = NEW_TAB_BUTTON_TPL; this.newTabEl = div.firstElementChild; this.tabContentEl.appendChild(this.newTabEl); @@ -417,7 +613,7 @@ export default class TabRowWidget extends BasicWidget { setupFiller() { const div = document.createElement('div'); - div.innerHTML = fillerTemplate; + div.innerHTML = FILLER_TPL; this.fillerEl = div.firstElementChild; this.tabContentEl.appendChild(this.fillerEl); diff --git a/src/public/javascripts/services/tree.js b/src/public/javascripts/services/tree.js index a21b1f40f..0ddcd1cd0 100644 --- a/src/public/javascripts/services/tree.js +++ b/src/public/javascripts/services/tree.js @@ -209,11 +209,6 @@ async function setExpandedToServer(branchId, isExpanded) { await server.put('branches/' + branchId + '/expanded/' + expandedNum); } -/** @return {FancytreeNode[]} */ -function getSelectedNodes(stopOnParents = false) { - return tree.getSelectedNodes(stopOnParents); -} - async function treeInitialized() { if (appContext.getTabContexts().length > 0) { // this is just tree reload - tabs are already in place @@ -276,6 +271,8 @@ async function treeInitialized() { filteredTabs[0].active = true; } + console.log("filteredTabs", filteredTabs); + for (const tab of filteredTabs) { await noteDetailService.loadNoteDetail(tab.notePath, { state: tab, diff --git a/src/public/javascripts/widgets/basic_widget.js b/src/public/javascripts/widgets/basic_widget.js index cd0f2887d..48983be9c 100644 --- a/src/public/javascripts/widgets/basic_widget.js +++ b/src/public/javascripts/widgets/basic_widget.js @@ -8,20 +8,18 @@ class BasicWidget { } render() { - const $widget = $('
').attr('id', this.widgetId); - // actual rendering is async - this.doRender($widget); + const $widget = this.doRender(); + +// $widget.attr('id', this.widgetId); return $widget; } /** * for overriding - * - * @param {JQuery} $widget */ - async doRender($widget) {} + doRender() {} eventReceived(name, data) { const fun = this[name + 'Listener']; diff --git a/src/public/javascripts/widgets/global_buttons.js b/src/public/javascripts/widgets/global_buttons.js index 3c5963851..a9f8fc475 100644 --- a/src/public/javascripts/widgets/global_buttons.js +++ b/src/public/javascripts/widgets/global_buttons.js @@ -25,8 +25,8 @@ const WIDGET_TPL = ` `; class GlobalButtonsWidget extends BasicWidget { - async doRender($widget) { - $widget.append($(WIDGET_TPL)); + doRender($widget) { + $widget = $(WIDGET_TPL); const $createTopLevelNoteButton = $widget.find(".create-top-level-note-button"); const $collapseTreeButton = $widget.find(".collapse-tree-button"); @@ -37,6 +37,8 @@ class GlobalButtonsWidget extends BasicWidget { $collapseTreeButton.on('click', () => this.trigger('collapseTree')); $scrollToActiveNoteButton.on('click', () => appContext.getMainNoteTree().scrollToActiveNote()); $toggleSearchButton.on('click', () => this.trigger('toggleSearch')); + + return $widget; } } diff --git a/src/public/javascripts/widgets/note_title.js b/src/public/javascripts/widgets/note_title.js index ea7bb9392..251210a3a 100644 --- a/src/public/javascripts/widgets/note_title.js +++ b/src/public/javascripts/widgets/note_title.js @@ -98,8 +98,8 @@ export default class NoteTitleWidget extends TabAwareWidget { this.tree = null; } - async doRender($widget) { - $widget.append($(TPL)); + doRender() { + const $widget = $(TPL); this.$noteTitle = this.$tabContent.find(".note-title"); this.$noteTitleRow = this.$tabContent.find(".note-title-row"); @@ -140,6 +140,8 @@ export default class NoteTitleWidget extends TabAwareWidget { return false; // to not propagate the enter into the editor (causes issues with codemirror) }); } + + return $widget; } async activeTabChanged() { diff --git a/src/public/javascripts/widgets/note_tree.js b/src/public/javascripts/widgets/note_tree.js index 8f3129841..a32e8c190 100644 --- a/src/public/javascripts/widgets/note_tree.js +++ b/src/public/javascripts/widgets/note_tree.js @@ -15,18 +15,18 @@ import ws from "../services/ws.js"; import appContext from "../services/app_context.js"; const TPL = ` - - -
+
+ +
`; export default class NoteTreeWidget extends BasicWidget { @@ -36,14 +36,9 @@ export default class NoteTreeWidget extends BasicWidget { this.tree = null; } - async doRender($widget) { - $widget.append($(TPL)); - - const $tree = $widget.find('.tree'); - - const treeData = await treeService.loadTreeData(); - - await this.initFancyTree($tree, treeData); + doRender() { + const $widget = $(TPL); + const $tree = $widget; $tree.on("click", ".unhoist-button", hoistedNoteService.unhoist); $tree.on("click", ".refresh-search-button", searchNotesService.refreshSearch); @@ -63,6 +58,10 @@ export default class NoteTreeWidget extends BasicWidget { e.preventDefault(); } }); + + treeService.loadTreeData().then(treeData => this.initFancyTree($tree, treeData)); + + return $widget; } async initFancyTree($tree, treeData) { diff --git a/src/public/javascripts/widgets/note_type.js b/src/public/javascripts/widgets/note_type.js index f5264183b..eca679968 100644 --- a/src/public/javascripts/widgets/note_type.js +++ b/src/public/javascripts/widgets/note_type.js @@ -35,8 +35,8 @@ const TPL = ` `; export default class NoteTypeWidget extends TabAwareWidget { - async doRender($widget) { - $widget.append($(TPL)); + doRender() { + const $widget = $(TPL); $widget.find('.note-type').on('show.bs.dropdown', () => this.renderDropdown()); diff --git a/src/public/javascripts/widgets/search_box.js b/src/public/javascripts/widgets/search_box.js index da7bc35c9..63224d9d8 100644 --- a/src/public/javascripts/widgets/search_box.js +++ b/src/public/javascripts/widgets/search_box.js @@ -57,8 +57,8 @@ const TPL = `
`; export default class SearchBoxWidget extends BasicWidget { - async doRender($widget) { - $widget.append($(TPL)); + doRender() { + const $widget = $(TPL); this.$searchBox = $widget.find(".search-box"); this.$closeSearchButton = $widget.find(".close-search-button"); @@ -86,6 +86,8 @@ export default class SearchBoxWidget extends BasicWidget { this.$saveSearchButton.on('click', () => this.saveSearch()); this.$closeSearchButton.on('click', () => this.hideSearchListener()); + + return $widget; } doSearch(searchText) { diff --git a/src/public/javascripts/widgets/search_results.js b/src/public/javascripts/widgets/search_results.js index 16b412249..3925b360c 100644 --- a/src/public/javascripts/widgets/search_results.js +++ b/src/public/javascripts/widgets/search_results.js @@ -28,11 +28,13 @@ const TPL = ` `; export default class SearchResultsWidget extends BasicWidget { - async doRender($widget) { - $widget.append($(TPL)); + doRender() { + const $widget = $(TPL); this.$searchResults = $widget.find(".search-results"); this.$searchResultsInner = $widget.find(".search-results-inner"); + + return $widget; } async searchForResultsListener({searchText}) { diff --git a/src/public/stylesheets/desktop.css b/src/public/stylesheets/desktop.css index 2e58b3cfb..2b93af544 100644 --- a/src/public/stylesheets/desktop.css +++ b/src/public/stylesheets/desktop.css @@ -175,195 +175,6 @@ body { border-color: var(--button-border-color); } -.note-tab-row { - box-sizing: border-box; - position: relative; - height: 34px; - min-height: 34px; - width: 100%; - background: var(--main-background-color); - border-radius: 5px 5px 0 0; - overflow: hidden; - margin-top: 2px; -} -.note-tab-row * { - box-sizing: inherit; - font: inherit; -} -.note-tab-row .note-tab-row-content { - position: relative; - width: 100%; - height: 100%; -} -.note-tab-row .note-tab { - position: absolute; - left: 0; - height: 33px; - width: 240px; - border: 0; - margin: 0; - z-index: 1; - pointer-events: none; -} - -.note-new-tab { - position: absolute; - left: 0; - height: 33px; - width: 32px; - border: 0; - margin: 0; - z-index: 1; - text-align: center; - font-size: 24px; - cursor: pointer; - border-bottom: 1px solid var(--main-border-color); -} - -.note-new-tab:hover { - background-color: var(--accented-background-color); - border-radius: 5px; -} - -.tab-row-filler { - -webkit-app-region: drag; - position: absolute; - left: 0; - height: 33px; -} - -.tab-row-filler .tab-row-border { - position: relative; - background: linear-gradient(to right, var(--main-border-color), transparent); - height: 1px; - margin-top: 32px; -} - -.note-tab-row .note-tab[active] { - z-index: 5; -} - -.note-tab-row .note-tab, -.note-tab-row .note-tab * { - user-select: none; - cursor: default; -} - -.note-tab-row .note-tab.note-tab-was-just-added { - top: 10px; - animation: note-tab-was-just-added 120ms forwards ease-in-out; -} - -.note-tab-row .note-tab .note-tab-wrapper { - position: absolute; - display: flex; - top: 0; - bottom: 0; - left: 0; - right: 0; - padding: 5px 8px; - border-top-left-radius: 8px; - border-top-right-radius: 8px; - overflow: hidden; - pointer-events: all; - background-color: var(--accented-background-color); - border-bottom: 1px solid var(--main-border-color); -} - -.note-tab-row .note-tab[active] .note-tab-wrapper { - background-color: var(--main-background-color); - border: 1px solid var(--main-border-color); - border-bottom: 0; - font-weight: bold; -} - -.note-tab-row .note-tab[is-mini] .note-tab-wrapper { - padding-left: 2px; - padding-right: 2px; -} - -.note-tab-row .note-tab .note-tab-title { - flex: 1; - vertical-align: top; - overflow: hidden; - white-space: nowrap; - color: var(--muted-text-color); -} - -.note-tab-row .note-tab[is-small] .note-tab-title { - margin-left: 0; -} - -.note-tab-row .note-tab[active] .note-tab-title { - color: var(--main-text-color); -} - -.note-tab-row .note-tab .note-tab-drag-handle { - position: absolute; - top: 0; - bottom: 0; - right: 0; - left: 0; - border-top-left-radius: 8px; - border-top-right-radius: 8px; -} - -.note-tab-row .note-tab .note-tab-close { - flex-grow: 0; - flex-shrink: 0; - border-radius: 50%; - z-index: 100; - width: 24px; - height: 24px; - text-align: center; -} - -.note-tab-row .note-tab .note-tab-close span { - font-size: 24px; - position: relative; - top: -6px; -} - -.note-tab-row .note-tab .note-tab-close:hover { - background-color: var(--hover-item-background-color); - color: var(--hover-item-text-color); -} - -.note-tab-row .note-tab[is-smaller] .note-tab-close { - margin-left: auto; -} -.note-tab-row .note-tab[is-mini]:not([active]) .note-tab-close { - display: none; -} -.note-tab-row .note-tab[is-mini][active] .note-tab-close { - margin-left: auto; - margin-right: auto; -} -@-moz-keyframes note-tab-was-just-added { - to { - top: 0; - } -} -@-webkit-keyframes note-tab-was-just-added { - to { - top: 0; - } -} -@-o-keyframes note-tab-was-just-added { - to { - top: 0; - } -} -@keyframes note-tab-was-just-added { - to { - top: 0; - } -} -.note-tab-row.note-tab-row-is-sorting .note-tab:not(.note-tab-is-dragging), -.note-tab-row:not(.note-tab-row-is-sorting) .note-tab.note-tab-was-just-dragged { - transition: transform 120ms ease-in-out; -} - #hide-sidebar-button, #show-sidebar-button { position: fixed; bottom: 10px; diff --git a/src/views/desktop.ejs b/src/views/desktop.ejs index 2a804379a..ededfe080 100644 --- a/src/views/desktop.ejs +++ b/src/views/desktop.ejs @@ -85,8 +85,6 @@
-
-