refactored attr detail into separate widget

package.json

@@ -42,7 +42,7 @@
     "express-session": "1.17.1",
     "file-type": "14.6.2",
     "fs-extra": "9.0.1",
-    "helmet": "3.23.2",
+    "helmet": "3.23.3",
     "html": "1.0.0",
     "html2plaintext": "2.1.2",
     "http-proxy-agent": "4.0.1",

src/public/app/widgets/attribute_detail.js

@@ -0,0 +1,162 @@
+import server from "../services/server.js";
+import treeCache from "../services/tree_cache.js";
+import treeService from "../services/tree.js";
+import linkService from "../services/link.js";
+import BasicWidget from "./basic_widget.js";
+
+const TPL = `
+<div class="attr-detail" style="display: none;">
+    <style>
+        .attr-detail {
+            display: block;
+            background-color: var(--accented-background-color);
+            border: 1px solid var(--main-border-color);
+            border-radius: 4px;
+            z-index: 1000;
+            padding: 10px;
+            position: absolute;
+            max-width: 600px;
+            max-height: 600px;
+            overflow: auto;
+        }
+        
+        .related-notes-list {
+            padding-left: 20px;
+            margin-top: 10px;
+            margin-bottom: 10px;
+        }
+        
+        .attr-edit {
+            width: 100%;
+        }
+        
+        .attr-edit th {
+            text-align: left;
+        }
+        
+        .attr-edit td input {
+            width: 100%;
+        }
+    </style>
+
+    <h5>Label detail</h5>
+
+    <table class="attr-edit">
+        <tr>
+            <th>Name:</th>
+            <td><input type="text" class="attr-edit-name form-control form-control-sm" /></td>
+        </tr>
+        <tr>
+            <th>Value:</th>
+            <td><input type="text" class="attr-edit-value form-control form-control-sm" /></td>
+        </tr>
+        <tr>
+            <th>Inheritable:</th>
+            <td><input type="checkbox" class="attr-edit-inheritable form-control form-control-sm" /></td>
+        </tr>
+        <tr>
+            <td colspan="2">
+                <div style="display: flex; justify-content: space-between">
+                    <div>
+                        <button type="submit" class="btn btn-sm btn-primary">Save</button>
+                        <button type="submit" class="btn btn-sm btn-secondary">Cancel</button>
+                    </div>
+                    
+                    <div>
+                        <button type="submit" class="btn btn-sm btn-danger">Delete</button>
+                    </div>
+                </div>
+            </td>
+        </tr>
+    </table>
+
+    <br/>
+
+    <h5 class="related-notes-tile">Other notes with this label</h5>
+    
+    <ul class="related-notes-list"></ul>
+    
+    <div class="related-notes-more-notes"></div>
+</div>`;
+
+
+const DISPLAYED_NOTES = 10;
+
+export default class AttributeDetailWidget extends BasicWidget {
+    doRender() {
+        this.$widget = $(TPL);
+        this.$relatedNotesTitle = this.$widget.find('.related-notes-tile');
+        this.$relatedNotesList = this.$widget.find('.related-notes-list');
+        this.$relatedNotesMoreNotes = this.$widget.find('.related-notes-more-notes');
+        this.$attrEditName = this.$widget.find('.attr-edit-name');
+        this.$attrEditValue = this.$widget.find('.attr-edit-value');
+        this.$attrEditInheritable = this.$widget.find('.attr-edit-inheritable');
+
+        return this.$widget;
+    }
+
+    async showAttributeDetail(attr, x, y) {
+        if (!attr) {
+            this.hide();
+
+            return;
+        }
+
+        this.toggleInt(true);
+
+        let {results, count} = await server.post('search-related', attr);
+
+        for (const res of results) {
+            res.noteId = res.notePathArray[res.notePathArray.length - 1];
+        }
+
+        results = results.filter(({noteId}) => noteId !== this.noteId);
+
+        if (results.length === 0) {
+            this.$relatedNotesTitle.hide();
+        }
+        else {
+            this.$relatedNotesTitle.text(`Other notes with ${attr.type} name "${attr.name}"`);
+        }
+
+        this.$relatedNotesList.empty();
+
+        const displayedResults = results.length <= DISPLAYED_NOTES ? results : results.slice(0, DISPLAYED_NOTES);
+        const displayedNotes = await treeCache.getNotes(displayedResults.map(res => res.noteId));
+
+        for (const note of displayedNotes) {
+            const notePath = treeService.getSomeNotePath(note);
+            const $noteLink = await linkService.createNoteLink(notePath, {showNotePath: true});
+
+            this.$relatedNotesList.append(
+                $("<li>").append($noteLink)
+            );
+        }
+
+        if (results.length > DISPLAYED_NOTES) {
+            this.$relatedNotesMoreNotes.show().text(`... and ${count - DISPLAYED_NOTES} more.`);
+        }
+        else {
+            this.$relatedNotesMoreNotes.hide();
+        }
+
+        this.$attrEditName.val(attr.name);
+        this.$attrEditValue.val(attr.value);
+
+        this.$widget.css("left", x - this.$widget.width() / 2);
+        this.$widget.css("top", y + 30);
+        this.$widget.show();
+    }
+
+    hide() {
+        this.toggleInt(false);
+    }
+
+    createNoteLink(noteId) {
+        return $("<a>", {
+            href: '#' + noteId,
+            class: 'reference-link',
+            'data-note-path': noteId
+        });
+    }
+}

src/public/app/widgets/basic_widget.js

@@ -46,9 +46,9 @@ class BasicWidget extends Component {
     }
 
     render() {
-        const $widget = this.doRender();
+        this.doRender();
 
-        $widget.addClass('component')
+        this.$widget.addClass('component')
             .prop('component', this);
 
         this.toggleInt(this.isEnabled());
@@ -56,28 +56,28 @@ class BasicWidget extends Component {
         if (this.cssEl) {
             const css = this.cssEl.trim().startsWith('<style>') ? this.cssEl : `<style>${this.cssEl}</style>`;
 
-            $widget.append(css);
+            this.$widget.append(css);
         }
 
         for (const key in this.attrs) {
             if (key === 'style') {
                 if (this.attrs[key]) {
-                    let style = $widget.attr('style');
+                    let style = this.$widget.attr('style');
                     style = style ? `${style}; ${this.attrs[key]}` : this.attrs[key];
 
-                    $widget.attr(key, style);
+                    this.$widget.attr(key, style);
                 }
             }
             else {
-                $widget.attr(key, this.attrs[key]);
+                this.$widget.attr(key, this.attrs[key]);
             }
         }
 
         for (const className of this.classes) {
-            $widget.addClass(className);
+            this.$widget.addClass(className);
         }
 
-        return $widget;
+        return this.$widget;
     }
 
     isEnabled() {

src/public/app/widgets/note_attributes.js

@@ -6,8 +6,7 @@ import server from "../services/server.js";
 import ws from "../services/ws.js";
 import SpacedUpdate from "../services/spaced_update.js";
 import attributesParser from "../services/attribute_parser.js";
-import linkService from "../services/link.js";
+import AttributeDetailWidget from "./attribute_detail.js";
-import treeService from "../services/tree.js";
 
 const mentionSetup = {
     feeds: [
@@ -74,110 +73,36 @@ const mentionSetup = {
 const TPL = `
 <div class="note-attributes">
 <style>
-.note-attributes {
+    .note-attributes {
-    margin-left: 7px;
+        margin-left: 7px;
-    margin-right: 7px;
+        margin-right: 7px;
-}
+    }
-
-.note-attributes-editor {
-    border: 0 !important;
-    outline: 0 !important;
-    box-shadow: none !important;
-    padding: 0 0 0 5px !important;
-    margin: 0 !important;
-    color: var(--muted-text-color);
-    max-height: 200px;
-    overflow: auto;
-}
-
-.inherited-attributes {
-    color: var(--muted-text-color);
-    max-height: 200px;
-    overflow: auto;
-}
-
-.note-attributes-editor p {
-    margin: 0 !important;
-}
-
-.note-attributes.error .note-attributes-editor {
-    border-color: red !important;
-}
-
-.attr-extras {
-    display: block;
-    background-color: var(--accented-background-color);
-    border: 1px solid var(--main-border-color);
-    border-radius: 4px;
-    z-index: 1000;
-    padding: 10px;
-    position: absolute;
-    max-width: 600px;
-    max-height: 600px;
-    overflow: auto;
-}
-
-.attr-extras-list {
-    padding-left: 20px;
-    margin-top: 10px;
-    margin-bottom: 10px;
-}
-
-.attr-edit {
-    width: 100%;
-}
-
-.attr-edit th {
-    text-align: left;
-}
-
-.attr-edit td input {
-    width: 100%;
-}
-</style>
-
-<div class="attr-extras" style="display: none;">
-    <h5>Label detail</h5>
-
-    <table class="attr-edit">
-        <tr>
-            <th>Name:</th>
-            <td><input type="text" class="attr-edit-name form-control form-control-sm" /></td>
-        </tr>
-        <tr>
-            <th>Value:</th>
-            <td><input type="text" class="attr-edit-value form-control form-control-sm" /></td>
-        </tr>
-        <tr>
-            <th>Inheritable:</th>
-            <td><input type="checkbox" class="attr-edit-inheritable form-control form-control-sm" /></td>
-        </tr>
-        <tr>
-            <td colspan="2">
-                <div style="display: flex; justify-content: space-between">
-                    <div>
-                        <button type="submit" class="btn btn-sm btn-primary">Save</button>
-                        <button type="submit" class="btn btn-sm btn-secondary">Cancel</button>
-                    </div>
-                    
-                    <div>
-                        <button type="submit" class="btn btn-sm btn-danger">Delete</button>
-                    </div>
-                </div>
-            </td>
-        </tr>
-    </table>
-
-    <br/>
-
-    <h5 class="attr-extras-title">Other notes with this label</h5>
     
-    <ul class="attr-extras-list"></ul>
+    .note-attributes-editor {
+        border: 0 !important;
+        outline: 0 !important;
+        box-shadow: none !important;
+        padding: 0 0 0 5px !important;
+        margin: 0 !important;
+        color: var(--muted-text-color);
+        max-height: 200px;
+        overflow: auto;
+    }
+    
+    .inherited-attributes {
+        color: var(--muted-text-color);
+        max-height: 200px;
+        overflow: auto;
+    }
+    
+    .note-attributes-editor p {
+        margin: 0 !important;
+    }
+    
+    .note-attributes.error .note-attributes-editor {
+        border-color: red !important;
+    }
     
-    <div class="attr-extras-more-notes"></div>
-</div>
-
-<style>
     .attr-expander {
         display: flex; 
         flex-direction: row; 
@@ -248,29 +173,22 @@ const TPL = `
 </div>
 `;
 
-const DISPLAYED_NOTES = 10;
-
 export default class NoteAttributesWidget extends TabAwareWidget {
     constructor() {
         super();
 
+        this.attributeDetailWidget = new AttributeDetailWidget().setParent(this);
+
         this.spacedUpdate = new SpacedUpdate(() => {
             this.parseAttributes();
 
-            this.$attrExtras.hide();
+            this.attributeDetailWidget.hide();
         });
     }
 
     doRender() {
         this.$widget = $(TPL);
         this.$editor = this.$widget.find('.note-attributes-editor');
-        this.$attrExtras = this.$widget.find('.attr-extras');
-        this.$attrExtrasTitle = this.$widget.find('.attr-extras-title');
-        this.$attrExtrasList = this.$widget.find('.attr-extras-list');
-        this.$attrExtrasMoreNotes = this.$widget.find('.attr-extras-more-notes');
-        this.$attrEditName = this.$attrExtras.find('.attr-edit-name');
-        this.$attrEditValue = this.$attrExtras.find('.attr-edit-value');
-        this.$attrEditInheritable = this.$attrExtras.find('.attr-edit-inheritable');
 
         this.initialized = this.initEditor();
 
@@ -313,16 +231,16 @@ export default class NoteAttributesWidget extends TabAwareWidget {
                 await this.save();
             }
 
-            this.$attrExtras.hide();
+            this.attributeDetailWidget.hide();
         });
 
         this.$editor.on('blur', () => {
             this.save();
 
-            this.$attrExtras.hide();
+            this.attributeDetailWidget.hide();
         });
 
-        return this.$widget;
+        this.$widget.append(this.attributeDetailWidget.render());
     }
 
     async save() {
@@ -380,54 +298,7 @@ export default class NoteAttributesWidget extends TabAwareWidget {
                     }
                 }
 
-                if (!matchedAttr) {
+                this.attributeDetailWidget.showAttributeDetail(matchedAttr, e.pageX, e.pageY);
-                    this.$attrExtras.hide();
-
-                    return;
-                }
-
-                let {results, count} = await server.post('search-related', matchedAttr);
-
-                for (const res of results) {
-                    res.noteId = res.notePathArray[res.notePathArray.length - 1];
-                }
-
-                results = results.filter(({noteId}) => noteId !== this.noteId);
-
-                if (results.length === 0) {
-                    this.$attrExtrasTitle.hide();
-                }
-                else {
-                    this.$attrExtrasTitle.text(`Other notes with ${matchedAttr.type} name "${matchedAttr.name}"`);
-                }
-
-                this.$attrExtrasList.empty();
-
-                const displayedResults = results.length <= DISPLAYED_NOTES ? results : results.slice(0, DISPLAYED_NOTES);
-                const displayedNotes = await treeCache.getNotes(displayedResults.map(res => res.noteId));
-
-                for (const note of displayedNotes) {
-                    const notePath = treeService.getSomeNotePath(note);
-                    const $noteLink = await linkService.createNoteLink(notePath, {showNotePath: true});
-
-                    this.$attrExtrasList.append(
-                        $("<li>").append($noteLink)
-                    );
-                }
-
-                if (results.length > DISPLAYED_NOTES) {
-                    this.$attrExtrasMoreNotes.show().text(`... and ${count - DISPLAYED_NOTES} more.`);
-                }
-                else {
-                    this.$attrExtrasMoreNotes.hide();
-                }
-
-                this.$attrEditName.val(matchedAttr.name);
-                this.$attrEditValue.val(matchedAttr.value);
-
-                this.$attrExtras.css("left", e.pageX - this.$attrExtras.width() / 2);
-                this.$attrExtras.css("top", e.pageY + 30);
-                this.$attrExtras.show();
             }
         });
 
@@ -519,7 +390,9 @@ export default class NoteAttributesWidget extends TabAwareWidget {
 
         await this.renderAttributes(ownedAttributes, $attributesContainer);
 
-        this.textEditor.setData($attributesContainer.html());
+        await this.spacedUpdate.allowUpdateWithoutChange(() => {
+            this.textEditor.setData($attributesContainer.html());
+        });
 
         const inheritedAttributes = note.getAttributes().filter(attr => attr.isInheritable && attr.noteId !== this.noteId);
         const inheritedAttributeCount = inheritedAttributes.length;