refactroring WIP

This commit is contained in:
zadam 2020-01-16 22:44:36 +01:00
parent 0178232f26
commit 97b13ae91d
6 changed files with 33 additions and 102 deletions

6
package-lock.json generated
View File

@ -9296,9 +9296,9 @@
"integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=" "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0="
}, },
"simple-node-logger": { "simple-node-logger": {
"version": "18.12.23", "version": "18.12.24",
"resolved": "https://registry.npmjs.org/simple-node-logger/-/simple-node-logger-18.12.23.tgz", "resolved": "https://registry.npmjs.org/simple-node-logger/-/simple-node-logger-18.12.24.tgz",
"integrity": "sha512-HmqRYDNfdHcrV81UoMQij4mCOn1vjh3GdJJbWeb7aW72vEDU1SStbZI9uV4Tv0zXZ8ADDT3i7keGPZ73n6h4lA==", "integrity": "sha512-4dTqpYecHsvPjWo+i+J3pLty8WJDNbxOVesNj5ch8pYH95LIGAFH4dxMSqyf+Os0RTchXifEtI/mfm3AVJftmg==",
"requires": { "requires": {
"lodash": "^4.17.12", "lodash": "^4.17.12",
"moment": "^2.20.1" "moment": "^2.20.1"

View File

@ -66,7 +66,7 @@
"semver": "7.1.1", "semver": "7.1.1",
"serve-favicon": "2.5.0", "serve-favicon": "2.5.0",
"session-file-store": "1.3.1", "session-file-store": "1.3.1",
"simple-node-logger": "18.12.23", "simple-node-logger": "18.12.24",
"sqlite": "3.0.3", "sqlite": "3.0.3",
"sqlite3": "4.1.1", "sqlite3": "4.1.1",
"string-similarity": "4.0.1", "string-similarity": "4.0.1",

View File

@ -28,21 +28,8 @@ class TabContext extends Component {
this.tabRow = tabRow; this.tabRow = tabRow;
this.tabId = state.tabId || utils.randomString(4); this.tabId = state.tabId || utils.randomString(4);
this.$tab = $(this.tabRow.addTab(this.tabId)); this.$tab = $(this.tabRow.addTab(this.tabId));
this.initialized = false;
this.state = state; this.state = state;
}
async initTabContent() {
if (this.initialized) {
return;
}
this.initialized = true;
this.$tabContent = $("<div>"); // FIXME
this.noteChangeDisabled = false;
this.isNoteChanged = false;
this.attributes = new Attributes(this.appContext, this); this.attributes = new Attributes(this.appContext, this);
this.children.push(this.attributes); this.children.push(this.attributes);
@ -77,35 +64,15 @@ class TabContext extends Component {
bundleService.executeRelationBundles(this.note, 'runOnNoteView', this); bundleService.executeRelationBundles(this.note, 'runOnNoteView', this);
// after loading new note make sure editor is scrolled to the top
// FIXME
//this.getComponent().scrollToTop();
appContext.trigger('activeNoteChanged'); appContext.trigger('activeNoteChanged');
} }
async show() { async show() {
if (!this.initialized) { await this.setNote(this.notePath);
await this.initTabContent();
if (this.notePath) {
await this.setNote(this.notePath);
}
else {
// FIXME
await this.renderComponent(); // render empty page
}
}
}
async renderComponent(disableAutoBook = false) {
// FIXME
} }
hide() { hide() {
if (this.initialized) { // FIXME
this.$tabContent.hide();
}
} }
isActive() { isActive() {
@ -124,14 +91,6 @@ class TabContext extends Component {
this.$tab.addClass(utils.getMimeTypeClass(this.note.mime)); this.$tab.addClass(utils.getMimeTypeClass(this.note.mime));
} }
getComponent() {
// FIXME
}
getComponentType(disableAutoBook) {
// FIXME
}
async activate() { async activate() {
await this.tabRow.activateTab(this.$tab[0]); await this.tabRow.activateTab(this.$tab[0]);
} }
@ -176,35 +135,6 @@ class TabContext extends Component {
} }
} }
noteChanged() {
if (this.noteChangeDisabled) {
return;
}
this.isNoteChanged = true;
// FIXME: trigger noteChanged event
//this.$savedIndicator.fadeOut();
}
async remove() {
if (this.$tabContent) {
// sometimes there are orphan autocompletes after closing the tab
this.cleanup();
await this.saveNoteIfChanged();
this.$tabContent.remove();
}
}
cleanup() {
if (this.$tabContent && utils.isDesktop()) {
this.$tabContent.find('.aa-input').autocomplete('close');
$('.note-tooltip').remove();
}
}
getTabState() { getTabState() {
if (!this.notePath) { if (!this.notePath) {
return null; return null;

View File

@ -2,6 +2,7 @@ import libraryLoader from "../../services/library_loader.js";
import treeService from '../../services/tree.js'; import treeService from '../../services/tree.js';
import noteAutocompleteService from '../../services/note_autocomplete.js'; import noteAutocompleteService from '../../services/note_autocomplete.js';
import mimeTypesService from '../../services/mime_types.js'; import mimeTypesService from '../../services/mime_types.js';
import TabAwareWidget from "../tab_aware_widget.js";
const ENABLE_INSPECTOR = false; const ENABLE_INSPECTOR = false;
@ -71,19 +72,14 @@ const TPL = `
</div> </div>
`; `;
class NoteDetailText { class NoteDetailText extends TabAwareWidget {
/** render() {
* @param {TabContext} ctx this.$widget = $(TPL);
*/ this.$editor = this.$widget.find('.note-detail-text-editor');
constructor(ctx, $parent) {
this.$component = $(TPL);
$parent.append(this.$component);
this.ctx = ctx;
this.$editorEl = this.$component.find('.note-detail-text-editor');
this.textEditorPromise = null; this.textEditorPromise = null;
this.textEditor = null; this.textEditor = null;
this.$component.on("dblclick", "img", e => { this.$widget.on("dblclick", "img", e => {
const $img = $(e.target); const $img = $(e.target);
const src = $img.prop("src"); const src = $img.prop("src");
@ -98,22 +94,24 @@ class NoteDetailText {
window.open(src, '_blank'); window.open(src, '_blank');
} }
}); });
}
async render() {
if (!this.textEditorPromise) { if (!this.textEditorPromise) {
this.textEditorPromise = this.initEditor(); this.textEditorPromise = this.initEditor();
} }
return this.$widget;
}
async activeNoteChanged() {
await this.textEditorPromise; await this.textEditorPromise;
// lazy loading above can take time and tab might have been already switched to another note // lazy loading above can take time and tab might have been already switched to another note
if (this.ctx.note && this.ctx.note.type === 'text') { if (this.tabContext.note && this.tabContext.note.type === 'text') {
this.textEditor.isReadOnly = await this.isReadOnly(); this.textEditor.isReadOnly = await this.isReadOnly();
this.$component.show(); this.$widget.show();
this.textEditor.setData(this.ctx.note.content); this.textEditor.setData(this.tabContext.note.content);
} }
} }
@ -132,10 +130,10 @@ class NoteDetailText {
// CKEditor since version 12 needs the element to be visible before initialization. At the same time // CKEditor since version 12 needs the element to be visible before initialization. At the same time
// we want to avoid flicker - i.e. show editor only once everything is ready. That's why we have separate // we want to avoid flicker - i.e. show editor only once everything is ready. That's why we have separate
// display of $component in both branches. // display of $widget in both branches.
this.$component.show(); this.$widget.show();
const textEditorInstance = await BalloonEditor.create(this.$editorEl[0], { const textEditorInstance = 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: {
@ -150,7 +148,7 @@ class NoteDetailText {
this.textEditor = textEditorInstance; this.textEditor = textEditorInstance;
this.onNoteChange(() => this.ctx.noteChanged()); //this.onNoteChange(() => this.tabContext.noteChanged());
} }
getContent() { getContent() {
@ -170,13 +168,13 @@ class NoteDetailText {
} }
async isReadOnly() { async isReadOnly() {
const attributes = await this.ctx.attributes.getAttributes(); const attributes = await this.tabContext.attributes.getAttributes();
return attributes.some(attr => attr.type === 'label' && attr.name === 'readOnly'); return attributes.some(attr => attr.type === 'label' && attr.name === 'readOnly');
} }
focus() { focus() {
this.$editorEl.trigger('focus'); this.$editor.trigger('focus');
} }
show() {} show() {}
@ -196,8 +194,8 @@ class NoteDetailText {
} }
scrollToTop() { scrollToTop() {
this.$component.scrollTop(0); this.$widget.scrollTop(0);
} }
} }
export default NoteDetailText export default NoteDetailText;

View File

@ -92,7 +92,10 @@ export default class NoteDetailWidget extends TabAwareWidget {
if (!(this.type in this.components)) { if (!(this.type in this.components)) {
const clazz = await import(componentClasses[this.type]); const clazz = await import(componentClasses[this.type]);
this.components[this.type] = new clazz.default(this, this.$widget); this.components[this.type] = new clazz.default(this);
this.children.push(this.components[this.type]);
this.$widget.append(this.components[this.type].render());
} }
} }

View File

@ -1,11 +1,11 @@
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) { constructor(appContext, tabContext = null) {
super(appContext); super(appContext);
/** @var {TabContext} */ /** @var {TabContext} */
this.tabContext = null; this.tabContext = tabContext;
} }
// to override // to override