mirror of
https://github.com/zadam/trilium.git
synced 2025-06-06 18:08:33 +02:00
progress
This commit is contained in:
parent
b25c1d6fa8
commit
b00a9f4415
6
package-lock.json
generated
6
package-lock.json
generated
@ -2777,9 +2777,9 @@
|
|||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@types/node": {
|
"@types/node": {
|
||||||
"version": "10.17.11",
|
"version": "10.17.13",
|
||||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-10.17.11.tgz",
|
"resolved": "https://registry.npmjs.org/@types/node/-/node-10.17.13.tgz",
|
||||||
"integrity": "sha512-dNd2pp8qTzzNLAs3O8nH3iU9DG9866KHq9L3ISPB7DOGERZN81nW/5/g/KzMJpCU8jrbCiMRBzV9/sCEdRosig==",
|
"integrity": "sha512-pMCcqU2zT4TjqYFrWtYHKal7Sl30Ims6ulZ4UFXxI4xbtQqK/qqKwkDoBFCfooRqqmRu9vY3xaJRwxSh673aYg==",
|
||||||
"dev": true
|
"dev": true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -127,6 +127,8 @@ class AppContext {
|
|||||||
activateNote(notePath) {
|
activateNote(notePath) {
|
||||||
const activeTabContext = this.getActiveTabContext();
|
const activeTabContext = this.getActiveTabContext();
|
||||||
|
|
||||||
|
console.log("Setting activeTabContext to " + notePath);
|
||||||
|
|
||||||
activeTabContext.setNote(notePath);
|
activeTabContext.setNote(notePath);
|
||||||
|
|
||||||
this._setTitleBar();
|
this._setTitleBar();
|
||||||
@ -209,36 +211,6 @@ class AppContext {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
async showTab(tabId) {
|
|
||||||
for (const ctx of this.tabContexts) {
|
|
||||||
if (ctx.tabId === tabId) {
|
|
||||||
await ctx.show();
|
|
||||||
} else {
|
|
||||||
ctx.hide();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const oldActiveNode = this.getMainNoteTree().getActiveNode();
|
|
||||||
|
|
||||||
if (oldActiveNode) {
|
|
||||||
oldActiveNode.setActive(false);
|
|
||||||
}
|
|
||||||
|
|
||||||
const newActiveTabContext = this.getActiveTabContext();
|
|
||||||
|
|
||||||
if (newActiveTabContext && newActiveTabContext.notePath) {
|
|
||||||
const newActiveNode = await this.getMainNoteTree().getNodeFromPath(newActiveTabContext.notePath);
|
|
||||||
|
|
||||||
if (newActiveNode) {
|
|
||||||
if (!newActiveNode.isVisible()) {
|
|
||||||
await this.getMainNoteTree().expandToNote(newActiveTabContext.notePath);
|
|
||||||
}
|
|
||||||
|
|
||||||
newActiveNode.setActive(true, {noEvents: true});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @return {NoteTreeWidget}
|
* @return {NoteTreeWidget}
|
||||||
*/
|
*/
|
||||||
@ -343,10 +315,6 @@ class AppContext {
|
|||||||
this.openEmptyTab();
|
this.openEmptyTab();
|
||||||
}
|
}
|
||||||
|
|
||||||
async activeTabChangedListener({tabId}) {
|
|
||||||
await this.showTab(tabId);
|
|
||||||
}
|
|
||||||
|
|
||||||
async tabRemoveListener({tabId}) {
|
async tabRemoveListener({tabId}) {
|
||||||
this.tabContexts.filter(nc => nc.tabId === tabId)
|
this.tabContexts.filter(nc => nc.tabId === tabId)
|
||||||
.forEach(tc => tc.remove());
|
.forEach(tc => tc.remove());
|
||||||
|
@ -44,13 +44,9 @@ class TabContext extends Component {
|
|||||||
|
|
||||||
this.tabRow.updateTab(this.$tab[0], {title: this.note.title});
|
this.tabRow.updateTab(this.$tab[0], {title: this.note.title});
|
||||||
|
|
||||||
if (!this.initialized) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.setupClasses();
|
this.setupClasses();
|
||||||
|
|
||||||
this.cleanup(); // esp. on windows autocomplete is not getting closed automatically
|
//this.cleanup(); // esp. on windows autocomplete is not getting closed automatically
|
||||||
|
|
||||||
setTimeout(async () => {
|
setTimeout(async () => {
|
||||||
// we include the note into recent list only if the user stayed on the note at least 5 seconds
|
// we include the note into recent list only if the user stayed on the note at least 5 seconds
|
||||||
@ -64,11 +60,10 @@ class TabContext extends Component {
|
|||||||
|
|
||||||
bundleService.executeRelationBundles(this.note, 'runOnNoteView', this);
|
bundleService.executeRelationBundles(this.note, 'runOnNoteView', this);
|
||||||
|
|
||||||
appContext.trigger('activeNoteChanged');
|
this.trigger('tabNoteSwitched', {tabId: this.tabId});
|
||||||
}
|
}
|
||||||
|
|
||||||
async show() {
|
async show() {
|
||||||
await this.setNote(this.notePath);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
hide() {
|
hide() {
|
||||||
|
@ -1,28 +1,20 @@
|
|||||||
import Component from "./component.js";
|
import Component from "./component.js";
|
||||||
|
|
||||||
class BasicWidget extends Component {
|
class BasicWidget extends Component {
|
||||||
constructor(appContext) {
|
|
||||||
super(appContext);
|
|
||||||
this.widgetId = `widget-${this.constructor.name}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
renderTo($parent) {
|
renderTo($parent) {
|
||||||
|
this.$parent = $parent;
|
||||||
|
|
||||||
$parent.append(this.render());
|
$parent.append(this.render());
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
// actual rendering is async
|
return this.doRender();
|
||||||
this.$widget = this.doRender();
|
|
||||||
|
|
||||||
// $widget.attr('id', this.widgetId);
|
|
||||||
|
|
||||||
return this.$widget;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* for overriding
|
* for overriding
|
||||||
*/
|
*/
|
||||||
doRender() {}
|
async doRender() {}
|
||||||
|
|
||||||
toggle(show) {
|
toggle(show) {
|
||||||
this.$widget.toggle(show);
|
this.$widget.toggle(show);
|
||||||
|
@ -1,16 +1,22 @@
|
|||||||
export default class Component {
|
export default class Component {
|
||||||
/** @param {AppContext} appContext */
|
/** @param {AppContext} appContext */
|
||||||
constructor(appContext) {
|
constructor(appContext) {
|
||||||
|
this.componentId = `component-${this.constructor.name}`;
|
||||||
this.appContext = appContext;
|
this.appContext = appContext;
|
||||||
/** @type Component[] */
|
/** @type Component[] */
|
||||||
this.children = [];
|
this.children = [];
|
||||||
|
this.initialized = Promise.resolve();
|
||||||
}
|
}
|
||||||
|
|
||||||
eventReceived(name, data) {
|
async eventReceived(name, data) {
|
||||||
|
await this.initialized;
|
||||||
|
|
||||||
|
console.log(`Received ${name} to ${this.componentId}`);
|
||||||
|
|
||||||
const fun = this[name + 'Listener'];
|
const fun = this[name + 'Listener'];
|
||||||
|
|
||||||
if (typeof fun === 'function') {
|
if (typeof fun === 'function') {
|
||||||
fun.call(this, data);
|
await fun.call(this, data);
|
||||||
}
|
}
|
||||||
|
|
||||||
for (const child of this.children) {
|
for (const child of this.children) {
|
||||||
|
@ -73,11 +73,9 @@ const TPL = `
|
|||||||
`;
|
`;
|
||||||
|
|
||||||
class NoteDetailText extends TabAwareWidget {
|
class NoteDetailText extends TabAwareWidget {
|
||||||
render() {
|
doRender() {
|
||||||
this.$widget = $(TPL);
|
this.$widget = $(TPL);
|
||||||
this.$editor = this.$widget.find('.note-detail-text-editor');
|
this.$editor = this.$widget.find('.note-detail-text-editor');
|
||||||
this.textEditorPromise = null;
|
|
||||||
this.textEditor = null;
|
|
||||||
|
|
||||||
this.$widget.on("dblclick", "img", e => {
|
this.$widget.on("dblclick", "img", e => {
|
||||||
const $img = $(e.target);
|
const $img = $(e.target);
|
||||||
@ -95,26 +93,11 @@ class NoteDetailText extends TabAwareWidget {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
if (!this.textEditorPromise) {
|
this.initialized = this.initEditor();
|
||||||
this.textEditorPromise = this.initEditor();
|
|
||||||
}
|
|
||||||
|
|
||||||
return this.$widget;
|
return this.$widget;
|
||||||
}
|
}
|
||||||
|
|
||||||
async activeNoteChanged() {
|
|
||||||
await this.textEditorPromise;
|
|
||||||
|
|
||||||
// lazy loading above can take time and tab might have been already switched to another note
|
|
||||||
if (this.tabContext.note && this.tabContext.note.type === 'text') {
|
|
||||||
this.textEditor.isReadOnly = await this.isReadOnly();
|
|
||||||
|
|
||||||
this.$widget.show();
|
|
||||||
|
|
||||||
this.textEditor.setData(this.tabContext.note.content);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async initEditor() {
|
async initEditor() {
|
||||||
await libraryLoader.requireLibrary(libraryLoader.CKEDITOR);
|
await libraryLoader.requireLibrary(libraryLoader.CKEDITOR);
|
||||||
|
|
||||||
@ -133,7 +116,7 @@ class NoteDetailText extends TabAwareWidget {
|
|||||||
// display of $widget in both branches.
|
// display of $widget in both branches.
|
||||||
this.$widget.show();
|
this.$widget.show();
|
||||||
|
|
||||||
const textEditorInstance = await BalloonEditor.create(this.$editor[0], {
|
this.textEditor = await BalloonEditor.create(this.$editor[0], {
|
||||||
placeholder: "Type the content of your note here ...",
|
placeholder: "Type the content of your note here ...",
|
||||||
mention: mentionSetup,
|
mention: mentionSetup,
|
||||||
codeBlock: {
|
codeBlock: {
|
||||||
@ -143,12 +126,19 @@ class NoteDetailText extends TabAwareWidget {
|
|||||||
|
|
||||||
if (glob.isDev && ENABLE_INSPECTOR) {
|
if (glob.isDev && ENABLE_INSPECTOR) {
|
||||||
await import('../../libraries/ckeditor/inspector.js');
|
await import('../../libraries/ckeditor/inspector.js');
|
||||||
CKEditorInspector.attach(textEditorInstance);
|
CKEditorInspector.attach(this.textEditor);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
this.textEditor = textEditorInstance;
|
async noteSwitched() {
|
||||||
|
// lazy loading above can take time and tab might have been already switched to another note
|
||||||
|
if (this.tabContext.note && this.tabContext.note.type === 'text') {
|
||||||
|
this.textEditor.isReadOnly = await this.isReadOnly();
|
||||||
|
|
||||||
//this.onNoteChange(() => this.tabContext.noteChanged());
|
this.$widget.show();
|
||||||
|
|
||||||
|
this.textEditor.setData(this.tabContext.note.content);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
getContent() {
|
getContent() {
|
||||||
|
@ -34,6 +34,7 @@ export default class NoteDetailWidget extends TabAwareWidget {
|
|||||||
super(appContext);
|
super(appContext);
|
||||||
|
|
||||||
this.components = {};
|
this.components = {};
|
||||||
|
this.componentPromises = {};
|
||||||
}
|
}
|
||||||
|
|
||||||
doRender() {
|
doRender() {
|
||||||
@ -42,13 +43,10 @@ export default class NoteDetailWidget extends TabAwareWidget {
|
|||||||
return this.$widget;
|
return this.$widget;
|
||||||
}
|
}
|
||||||
|
|
||||||
async activeTabChanged() {
|
async noteSwitched() {
|
||||||
await this.initComponent(/**disableAutoBook*/);
|
await this.initComponent(/**disableAutoBook*/);
|
||||||
|
|
||||||
for (const componentType in this.components) {
|
for (const componentType in this.components) {
|
||||||
// FIXME
|
|
||||||
this.components[componentType].ctx = this.tabContext;
|
|
||||||
|
|
||||||
if (componentType !== this.type) {
|
if (componentType !== this.type) {
|
||||||
this.components[componentType].cleanup();
|
this.components[componentType].cleanup();
|
||||||
}
|
}
|
||||||
@ -57,7 +55,6 @@ export default class NoteDetailWidget extends TabAwareWidget {
|
|||||||
this.$widget.find('.note-detail-component').hide();
|
this.$widget.find('.note-detail-component').hide();
|
||||||
|
|
||||||
this.getComponent().show();
|
this.getComponent().show();
|
||||||
await this.getComponent().render();
|
|
||||||
|
|
||||||
this.setupClasses();
|
this.setupClasses();
|
||||||
}
|
}
|
||||||
@ -89,14 +86,24 @@ export default class NoteDetailWidget extends TabAwareWidget {
|
|||||||
async initComponent(disableAutoBook = false) {
|
async initComponent(disableAutoBook = false) {
|
||||||
this.type = this.getComponentType(disableAutoBook);
|
this.type = this.getComponentType(disableAutoBook);
|
||||||
|
|
||||||
if (!(this.type in this.components)) {
|
if (!(this.type in this.componentPromises)) {
|
||||||
const clazz = await import(componentClasses[this.type]);
|
this.componentPromises[this.type] = this.reallyInitComponent(this.type);
|
||||||
|
}
|
||||||
|
|
||||||
this.components[this.type] = new clazz.default(this);
|
await this.componentPromises[this.type];
|
||||||
|
}
|
||||||
|
|
||||||
|
async reallyInitComponent(type) {
|
||||||
|
const clazz = await import(componentClasses[type]);
|
||||||
|
|
||||||
|
this.components[this.type] = new clazz.default(this.appContext);
|
||||||
this.children.push(this.components[this.type]);
|
this.children.push(this.components[this.type]);
|
||||||
|
|
||||||
this.$widget.append(this.components[this.type].render());
|
this.components[this.type].renderTo(this.$widget);
|
||||||
}
|
|
||||||
|
this.components[this.type].setTabContext(this.tabContext);
|
||||||
|
|
||||||
|
this.components[this.type].eventReceived('tabNoteSwitched', {tabId: this.tabContext.tabId});
|
||||||
}
|
}
|
||||||
|
|
||||||
getComponentType(disableAutoBook) {
|
getComponentType(disableAutoBook) {
|
||||||
|
@ -13,6 +13,7 @@ import TreeContextMenu from "../services/tree_context_menu.js";
|
|||||||
import treeChangesService from "../services/branches.js";
|
import treeChangesService from "../services/branches.js";
|
||||||
import ws from "../services/ws.js";
|
import ws from "../services/ws.js";
|
||||||
import appContext from "../services/app_context.js";
|
import appContext from "../services/app_context.js";
|
||||||
|
import TabAwareWidget from "./tab_aware_widget.js";
|
||||||
|
|
||||||
const TPL = `
|
const TPL = `
|
||||||
<div class="tree">
|
<div class="tree">
|
||||||
@ -29,7 +30,7 @@ const TPL = `
|
|||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
export default class NoteTreeWidget extends BasicWidget {
|
export default class NoteTreeWidget extends TabAwareWidget {
|
||||||
constructor(appContext) {
|
constructor(appContext) {
|
||||||
super(appContext);
|
super(appContext);
|
||||||
|
|
||||||
@ -402,6 +403,26 @@ export default class NoteTreeWidget extends BasicWidget {
|
|||||||
|
|
||||||
collapseTreeListener() { this.collapseTree(); }
|
collapseTreeListener() { this.collapseTree(); }
|
||||||
|
|
||||||
|
async activeTabChanged() {
|
||||||
|
const oldActiveNode = this.getActiveNode();
|
||||||
|
|
||||||
|
if (oldActiveNode) {
|
||||||
|
oldActiveNode.setActive(false);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.tabContext && this.tabContext.notePath) {
|
||||||
|
const newActiveNode = await this.getNodeFromPath(this.tabContext.notePath);
|
||||||
|
|
||||||
|
if (newActiveNode) {
|
||||||
|
if (!newActiveNode.isVisible()) {
|
||||||
|
await this.expandToNote(this.tabContext.notePath);
|
||||||
|
}
|
||||||
|
|
||||||
|
newActiveNode.setActive(true, {noEvents: true});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
async notesReloadedListener({ noteIds, activateNotePath }) {
|
async notesReloadedListener({ noteIds, activateNotePath }) {
|
||||||
for (const noteId of noteIds) {
|
for (const noteId of noteIds) {
|
||||||
for (const node of this.getNodesByNoteId(noteId)) {
|
for (const node of this.getNodesByNoteId(noteId)) {
|
||||||
|
@ -28,11 +28,11 @@ const TPL = `
|
|||||||
|
|
||||||
export default class PromotedAttributesWidget extends TabAwareWidget {
|
export default class PromotedAttributesWidget extends TabAwareWidget {
|
||||||
doRender() {
|
doRender() {
|
||||||
const $widget = $(TPL);
|
this.$widget = $(TPL);
|
||||||
|
|
||||||
this.$container = $widget.find(".promoted-attributes");
|
this.$container = this.$widget.find(".promoted-attributes");
|
||||||
|
|
||||||
return $widget;
|
return this.$widget;
|
||||||
}
|
}
|
||||||
|
|
||||||
async activeTabChanged() {
|
async activeTabChanged() {
|
||||||
|
@ -33,7 +33,7 @@ class StandardWidget extends TabAwareWidget {
|
|||||||
//getPosition() { return this.widgetOptions.position; }
|
//getPosition() { return this.widgetOptions.position; }
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const widgetInstanceId = this.widgetId + "-" + utils.randomString(10);
|
const widgetInstanceId = this.componentId + "-" + utils.randomString(10);
|
||||||
|
|
||||||
this.$widget = $(WIDGET_TPL);
|
this.$widget = $(WIDGET_TPL);
|
||||||
this.$widget.find('[data-target]').attr('data-target', "#" + widgetInstanceId);
|
this.$widget.find('[data-target]').attr('data-target', "#" + widgetInstanceId);
|
||||||
|
@ -1,13 +1,21 @@
|
|||||||
import BasicWidget from "./basic_widget.js";
|
import BasicWidget from "./basic_widget.js";
|
||||||
|
|
||||||
export default class TabAwareWidget extends BasicWidget {
|
export default class TabAwareWidget extends BasicWidget {
|
||||||
constructor(appContext, tabContext = null) {
|
setTabContext(tabContext) {
|
||||||
super(appContext);
|
|
||||||
|
|
||||||
/** @var {TabContext} */
|
/** @var {TabContext} */
|
||||||
this.tabContext = tabContext;
|
this.tabContext = tabContext;
|
||||||
|
|
||||||
|
this.eventReceived('tabNoteSwitched', {tabId: this.tabContext.tabId});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
tabNoteSwitchedListener({tabId}) {
|
||||||
|
if (this.tabContext && tabId === this.tabContext.tabId) {
|
||||||
|
this.noteSwitched();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
noteSwitched() {}
|
||||||
|
|
||||||
// to override
|
// to override
|
||||||
activeTabChanged() {}
|
activeTabChanged() {}
|
||||||
|
|
||||||
|
@ -23,8 +23,10 @@ export default class TabCachingWidget extends TabAwareWidget {
|
|||||||
|
|
||||||
if (!widget) {
|
if (!widget) {
|
||||||
widget = this.widgets[this.tabContext.tabId] = this.widgetFactory();
|
widget = this.widgets[this.tabContext.tabId] = this.widgetFactory();
|
||||||
|
this.children.push(widget);
|
||||||
widget.renderTo(this.$parent);
|
widget.renderTo(this.$parent);
|
||||||
widget.activeTabChangedListener();
|
|
||||||
|
widget.setTabContext(this.tabContext);
|
||||||
}
|
}
|
||||||
|
|
||||||
widget.toggle(true);
|
widget.toggle(true);
|
||||||
|
Loading…
x
Reference in New Issue
Block a user