gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-03-01 14:22:32 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

got rid of .renderTo(), tab caching widgets use hidden marker element

Browse Source
This commit is contained in:
zadam 2020-01-19 15:36:42 +01:00
parent 6de4914ea6
commit 416d733510
11 changed files with 59 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/public/javascripts/services/app_context.js
View File

@ -24,6 +24,11 @@ import RowFlexContainer from "../widgets/row_flex_container.js";
import StandardTopWidget from "../widgets/standard_top_widget.js";
import treeCache from "./tree_cache.js";
import treeUtils from "./tree_utils.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";
class AppContext {
constructor() {
@ -51,7 +56,7 @@ class AppContext {
const $topPane = $("#top-pane");
for (const widget of topPaneWidgets) {
widget.renderTo($topPane);
$topPane.append(widget.render());
}
const $leftPane = $("#left-pane");
@ -66,19 +71,26 @@ class AppContext {
];
for (const widget of leftPaneWidgets) {
widget.renderTo($leftPane);
$leftPane.append(widget.render());
}
const $centerPane = $("#center-pane");
const centerPaneWidgets = [
new TabCachingWidget(this, () => new NoteTitleWidget(this)),
new RowFlexContainer(this, [
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))
];
for (const widget of centerPaneWidgets) {
widget.renderTo($centerPane);
$centerPane.append(widget.render());
}
const $rightPane = $("#right-pane");
@ -93,7 +105,7 @@ class AppContext {
];
for (const widget of rightPaneWidgets) {
widget.renderTo($rightPane);
$rightPane.append(widget.render());
}
this.widgets = [

6
src/public/javascripts/widgets/basic_widget.js
View File

@ -1,12 +1,6 @@
import Component from "./component.js";
class BasicWidget extends Component {
renderTo($parent) {
this.$parent = $parent;
$parent.append(this.render());
}
render() {
return this.doRender();
}

2
src/public/javascripts/widgets/note_detail.js
View File

@ -92,7 +92,7 @@ export default class NoteDetailWidget extends TabAwareWidget {
this.typeWidgets[this.type] = new clazz.default(this.appContext);
this.children.push(this.typeWidgets[this.type]);
this.typeWidgets[this.type].renderTo(this.$widget);
this.$widget.append(this.typeWidgets[this.type].render());
this.typeWidgets[this.type].eventReceived('setTabContext', {tabContext: this.tabContext});
}

4
src/public/javascripts/widgets/note_paths.js
View File

@ -30,9 +30,7 @@ export default class NotePathsWidget extends TabAwareWidget {
return this.$widget;
}
async refreshWithNote() {
const {note, notePath} = this.tabContext;
async refreshWithNote(note, notePath) {
if (note.noteId === 'root') {
// root doesn't have any parent, but it's still technically 1 path

34
src/public/javascripts/widgets/note_title.js
View File

@ -12,12 +12,8 @@ import ProtectedNoteSwitchWidget from "./protected_note_switch.js";
import RunScriptButtonsWidget from "./run_script_buttons.js";
const TPL = `
<div class="note-title-row">
<div>
<style>
.note-title-row {
display: flex;
}
.note-title {
margin-left: 15px;
margin-right: 10px;
@ -34,28 +30,8 @@ const TPL = `
export default class NoteTitleWidget extends TabAwareWidget {
doRender() {
this.$widget = $(TPL);
this.$noteTitle = this.$widget.find(".note-title");
this.$savedIndicator = this.$widget.find(".saved-indicator");
this.runScriptButtons = new RunScriptButtonsWidget(this.appContext);
this.$widget.append(this.runScriptButtons.render());
this.protectedNoteSwitch = new ProtectedNoteSwitchWidget(this.appContext);
this.$widget.append(this.protectedNoteSwitch.render());
this.noteType = new NoteTypeWidget(this.appContext);
this.$widget.append(this.noteType.render());
this.noteActions = new NoteActionsWidget(this.appContext);
this.$widget.append(this.noteActions.render());
this.notePaths = new NotePathsWidget(this.appContext);
this.$widget.prepend(this.notePaths.render());
this.children.push(this.noteType, this.notePaths);
this.$noteTitle.on('input', () => {
if (!this.note) {
return;
@ -84,17 +60,11 @@ export default class NoteTitleWidget extends TabAwareWidget {
return this.$widget;
}
async refreshWithNote() {
const note = this.tabContext.note;
async refreshWithNote(note) {
this.$noteTitle.val(note.title);
if (note.isProtected && !protectedSessionHolder.isProtectedSessionAvailable()) {
this.$noteTitle.prop("readonly", true);
}
}
noteSavedListener() {
this.$savedIndicator.fadeIn();
}
}

11
src/public/javascripts/widgets/note_type.js
View File

@ -42,20 +42,15 @@ export default class NoteTypeWidget extends TabAwareWidget {
this.$noteTypeDropdown = this.$widget.find(".note-type-dropdown");
this.$noteTypeButton = this.$widget.find(".note-type-button");
this.$noteTypeDesc = this.$widget.find(".note-type-desc");
this.$executeScriptButton = this.$widget.find(".execute-script-button");
this.$renderButton = this.$widget.find('.render-button');
return this.$widget;
}
async refreshWithNote() {
async refreshWithNote(note) {
this.$noteTypeButton.prop("disabled",
() => ["file", "image", "search"].includes(this.tabContext.note.type));
() => ["file", "image", "search"].includes(note.type));
this.$noteTypeDesc.text(await this.findTypeTitle(this.tabContext.note.type, this.tabContext.note.mime));
this.$executeScriptButton.toggle(this.tabContext.note.mime.startsWith('application/javascript'));
this.$renderButton.toggle(this.tabContext.note.type === 'render');
this.$noteTypeDesc.text(await this.findTypeTitle(note.type, note.mime));
}
/** actual body is rendered lazily on note-type button click */

15
src/public/javascripts/widgets/protected_note_switch.js
View File

@ -1,4 +1,6 @@
import BasicWidget from "./basic_widget.js";
import protectedSessionService from "../services/protected_session.js";
import protectedSessionHolder from "../services/protected_session_holder.js";
const TPL = `
<div class="btn-group btn-group-xs">
@ -17,6 +19,19 @@ export default class ProtectedNoteSwitchWidget extends BasicWidget {
doRender() {
this.$widget = $(TPL);
this.$protectButton = this.$widget.find(".protect-button");
this.$protectButton.on('click', protectedSessionService.protectNoteAndSendToServer);
this.$unprotectButton = this.$widget.find(".unprotect-button");
this.$unprotectButton.on('click', protectedSessionService.unprotectNoteAndSendToServer);
return this.$widget;
}
refreshWithNote(note) {
this.$protectButton.toggleClass("active", note.isProtected);
this.$protectButton.prop("disabled", note.isProtected);
this.$unprotectButton.toggleClass("active", !note.isProtected);
this.$unprotectButton.prop("disabled", !note.isProtected || !protectedSessionHolder.isProtectedSessionAvailable());
}
}

4
src/public/javascripts/widgets/row_flex_container.js
View File

@ -4,13 +4,13 @@ export default class RowFlexContainer extends BasicWidget {
constructor(appContext, widgets) {
super(appContext);
this.childWidgets = widgets;
this.children = widgets;
}
render() {
this.$widget = $(`<div style="display: flex; flex-direction: row;">`);
for (const widget of this.childWidgets) {
for (const widget of this.children) {
this.$widget.append(widget.render());
}

29
src/public/javascripts/widgets/run_script_buttons.js
View File

@ -3,31 +3,28 @@ import protectedSessionService from "../services/protected_session.js";
import protectedSessionHolder from "../services/protected_session_holder.js";
const TPL = `
<button class="btn btn-sm icon-button bx bx-play-circle render-button"
style="display: none; margin-right: 10px;"
title="Render"></button>
<button class="btn btn-sm icon-button bx bx-play-circle execute-script-button"
style="display: none; margin-right: 10px;"
title="Execute (Ctrl+Enter)"></button>`;
<div>
<button class="btn btn-sm icon-button bx bx-play-circle render-button"
style="display: none; margin-right: 10px;"
title="Render"></button>
<button class="btn btn-sm icon-button bx bx-play-circle execute-script-button"
style="display: none; margin-right: 10px;"
title="Execute (Ctrl+Enter)"></button>
</div>`;
export default class RunScriptButtonsWidget extends TabAwareWidget {
doRender() {
this.$widget = $(TPL);
this.$protectButton = this.$widget.find(".protect-button");
this.$protectButton.on('click', protectedSessionService.protectNoteAndSendToServer);
this.$unprotectButton = this.$widget.find(".unprotect-button");
this.$unprotectButton.on('click', protectedSessionService.unprotectNoteAndSendToServer);
this.$renderButton = this.$widget.find('.render-button');
this.$executeScriptButton = this.$widget.find('.execute-script-button');
return this.$widget;
}
refreshWithNote(note) {
this.$protectButton.toggleClass("active", note.isProtected);
this.$protectButton.prop("disabled", note.isProtected);
this.$unprotectButton.toggleClass("active", !note.isProtected);
this.$unprotectButton.prop("disabled", !note.isProtected || !protectedSessionHolder.isProtectedSessionAvailable());
this.$renderButton.toggle(note.type === 'render');
this.$executeScriptButton.toggle(note.mime.startsWith('application/javascript'));
}
}

2
src/public/javascripts/widgets/tab_aware_widget.js
View File

@ -25,7 +25,7 @@ export default class TabAwareWidget extends BasicWidget {
refresh() {
if (this.tabContext && this.tabContext.note) {
this.toggle(true);
this.refreshWithNote(this.tabContext.note);
this.refreshWithNote(this.tabContext.note, this.tabContext.notePath);
}
else {
this.toggle(false);

9
src/public/javascripts/widgets/tab_caching_widget.js
View File

@ -5,13 +5,12 @@ export default class TabCachingWidget extends TabAwareWidget {
super(appContext);
this.widgetFactory = widgetFactory;
/** @type {JQuery} */
this.$parent = null;
this.widgets = {};
}
renderTo($parent) {
this.$parent = $parent;
doRender() {
this.$widget = $(`<div class="marker" style="display: none;">`);
return this.$widget;
}
activeTabChangedListener() {
@ -26,7 +25,7 @@ export default class TabCachingWidget extends TabAwareWidget {
if (!widget) {
widget = this.widgets[this.tabContext.tabId] = this.widgetFactory();
this.children.push(widget);
widget.renderTo(this.$parent);
this.$widget.after(widget.render());
widget.eventReceived('setTabContext', {tabContext: this.tabContext});
}