refactroring WIP

package-lock.json

@@ -9296,9 +9296,9 @@
       "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0="
     },
     "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": {
         "lodash": "^4.17.12",
         "moment": "^2.20.1"

package.json

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

src/public/javascripts/services/tab_context.js

@@ -28,21 +28,8 @@ class TabContext extends Component {
         this.tabRow = tabRow;
         this.tabId = state.tabId || utils.randomString(4);
         this.$tab = $(this.tabRow.addTab(this.tabId));
-        this.initialized = false;
         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.children.push(this.attributes);
@@ -77,35 +64,15 @@ class TabContext extends Component {
 
         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');
     }
 
     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() {
-        if (this.initialized) {
+        // FIXME
-            this.$tabContent.hide();
-        }
     }
 
     isActive() {
@@ -124,14 +91,6 @@ class TabContext extends Component {
         this.$tab.addClass(utils.getMimeTypeClass(this.note.mime));
     }
 
-    getComponent() {
-        // FIXME
-    }
-
-    getComponentType(disableAutoBook) {
-    // FIXME
-    }
-
     async activate() {
         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() {
         if (!this.notePath) {
             return null;

src/public/javascripts/widgets/detail/note_detail_text.js

@@ -2,6 +2,7 @@ import libraryLoader from "../../services/library_loader.js";
 import treeService from '../../services/tree.js';
 import noteAutocompleteService from '../../services/note_autocomplete.js';
 import mimeTypesService from '../../services/mime_types.js';
+import TabAwareWidget from "../tab_aware_widget.js";
 
 const ENABLE_INSPECTOR = false;
 
@@ -71,19 +72,14 @@ const TPL = `
 </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.textEditor = null;
 
-        this.$component.on("dblclick", "img", e => {
+        this.$widget.on("dblclick", "img", e => {
             const $img = $(e.target);
             const src = $img.prop("src");
 
@@ -98,22 +94,24 @@ class NoteDetailText {
                 window.open(src, '_blank');
             }
         });
-    }
 
-    async render() {
         if (!this.textEditorPromise) {
             this.textEditorPromise = this.initEditor();
         }
 
+        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.ctx.note && this.ctx.note.type === 'text') {
+        if (this.tabContext.note && this.tabContext.note.type === 'text') {
             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
         // 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 ...",
             mention: mentionSetup,
             codeBlock: {
@@ -150,7 +148,7 @@ class NoteDetailText {
 
         this.textEditor = textEditorInstance;
 
-        this.onNoteChange(() => this.ctx.noteChanged());
+        //this.onNoteChange(() => this.tabContext.noteChanged());
     }
 
     getContent() {
@@ -170,13 +168,13 @@ class NoteDetailText {
     }
 
     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');
     }
 
     focus() {
-        this.$editorEl.trigger('focus');
+        this.$editor.trigger('focus');
     }
 
     show() {}
@@ -196,8 +194,8 @@ class NoteDetailText {
     }
 
     scrollToTop() {
-        this.$component.scrollTop(0);
+        this.$widget.scrollTop(0);
     }
 }
 
-export default NoteDetailText
+export default NoteDetailText;

src/public/javascripts/widgets/note_detail.js

@@ -92,7 +92,10 @@ export default class NoteDetailWidget extends TabAwareWidget {
         if (!(this.type in this.components)) {
             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());
         }
     }
 

src/public/javascripts/widgets/tab_aware_widget.js

@@ -1,11 +1,11 @@
 import BasicWidget from "./basic_widget.js";
 
 export default class TabAwareWidget extends BasicWidget {
-    constructor(appContext) {
+    constructor(appContext, tabContext = null) {
         super(appContext);
 
         /** @var {TabContext} */
-        this.tabContext = null;
+        this.tabContext = tabContext;
     }
 
     // to override