rename iframe to web view

2025-11-03 20:06:08 +01:00 · 2022-05-30 20:59:54 +02:00
parent f19adf3ee0
commit 8052574950
8 changed files with 78 additions and 78 deletions
--- a/src/public/app/entities/note_short.js
+++ b/src/public/app/entities/note_short.js
@@ -18,7 +18,7 @@ const NOTE_TYPE_ICONS = {
    "note-map": "bx bx-map-alt",
    "mermaid": "bx bx-selection",
    "canvas": "bx bx-pen",
-    "iframe": "bx bx-globe-alt"
+    "web-view": "bx bx-globe-alt"
 };

 /**
--- a/src/public/app/services/tree_context_menu.js
+++ b/src/public/app/services/tree_context_menu.js
@@ -28,14 +28,14 @@ class TreeContextMenu {
        return [
            { title: "Text", command: command, type: "text", uiIcon: "note" },
            { title: "Code", command: command, type: "code", uiIcon: "code" },
-            { title: "Saved search", command: command, type: "search", uiIcon: "file-find" },
+            { title: "Saved Search", command: command, type: "search", uiIcon: "file-find" },
            { title: "Relation Map", command: command, type: "relation-map", uiIcon: "map-alt" },
            { title: "Note Map", command: command, type: "note-map", uiIcon: "map-alt" },
-            { title: "Render HTML note", command: command, type: "render", uiIcon: "extension" },
+            { title: "Render Note", command: command, type: "render", uiIcon: "extension" },
            { title: "Book", command: command, type: "book", uiIcon: "book" },
-            { title: "Mermaid diagram", command: command, type: "mermaid", uiIcon: "selection" },
+            { title: "Mermaid Diagram", command: command, type: "mermaid", uiIcon: "selection" },
            { title: "Canvas", command: command, type: "canvas", uiIcon: "pen" },
-            { title: "IFrame", command: command, type: "iframe", uiIcon: "globe-alt" },
+            { title: "Web View", command: command, type: "iframe", uiIcon: "globe-alt" },
        ];
    }

--- a/src/public/app/widgets/note_detail.js
+++ b/src/public/app/widgets/note_detail.js
@@ -24,7 +24,7 @@ import ReadOnlyTextTypeWidget from "./type_widgets/read_only_text.js";
 import ReadOnlyCodeTypeWidget from "./type_widgets/read_only_code.js";
 import NoneTypeWidget from "./type_widgets/none.js";
 import NoteMapTypeWidget from "./type_widgets/note_map.js";
-import IframeTypeWidget from "./type_widgets/iframe.js";
+import WebViewTypeWidget from "./type_widgets/web_view.js";

 const TPL = `
 <div class="note-detail">
@@ -57,7 +57,7 @@ const typeWidgetClasses = {
    'protected-session': ProtectedSessionTypeWidget,
    'book': BookTypeWidget,
    'note-map': NoteMapTypeWidget,
-    'iframe': IframeTypeWidget
+    'web-view': WebViewTypeWidget
 };

 export default class NoteDetailWidget extends NoteContextAwareWidget {
@@ -157,7 +157,7 @@ export default class NoteDetailWidget extends NoteContextAwareWidget {
        // https://github.com/zadam/trilium/issues/2522
        this.$widget.toggleClass("full-height",
            !this.noteContext.hasNoteList()
-            && ['editable-text', 'editable-code', 'canvas', 'iframe'].includes(this.type)
+            && ['editable-text', 'editable-code', 'canvas', 'web-view'].includes(this.type)
            && this.mime !== 'text/x-sqlite;schema=trilium');
    }

--- a/src/public/app/widgets/note_type.js
+++ b/src/public/app/widgets/note_type.js
@@ -14,7 +14,7 @@ const NOTE_TYPES = [
    { type: "canvas", mime: 'application/json', title: "Canvas", selectable: true },
    { type: "mermaid", mime: 'text/mermaid', title: "Mermaid Diagram", selectable: true },
    { type: "book", mime: '', title: "Book", selectable: true },
-    { type: "iframe", mime: '', title: "IFrame", selectable: true },
+    { type: "web-view", mime: '', title: "Web View", selectable: true },
    { type: "code", mime: 'text/plain', title: "Code", selectable: true }
 ];

--- a/src/public/app/widgets/note_wrapper.js
+++ b/src/public/app/widgets/note_wrapper.js
@@ -36,7 +36,7 @@ export default class NoteWrapperWidget extends FlexContainer {
        const note = this.noteContext?.note;

        this.$widget.toggleClass("full-content-width",
-            ['image', 'mermaid', 'book', 'render', 'canvas', 'iframe'].includes(note?.type)
+            ['image', 'mermaid', 'book', 'render', 'canvas', 'web-view'].includes(note?.type)
            || !!note?.hasLabel('fullContentWidth')
        );
    }
--- a/src/public/app/widgets/type_widgets/iframe.js
+++ b/src/public/app/widgets/type_widgets/iframe.js
@@ -1,67 +0,0 @@
-import TypeWidget from "./type_widget.js";
-import attributeService from "../../services/attributes.js";
-
-const TPL = `
-<div class="note-detail-iframe note-detail-printable" style="height: 100%">
-    <div class="note-detail-iframe-help alert alert-warning" style="margin: 50px; padding: 20px;">
-        <p><strong>This help note is shown because this note of type IFrame HTML doesn't have required label to function properly.</strong></p>
-
-        <p>Please create label with a URL address you want to embed, e.g. <code>#iframeSrc="http://www.google.com"</code></p>
-    </div>
-
-    <webview class="note-detail-iframe-content"></webview>
-</div>`;
-
-export default class IframeTypeWidget extends TypeWidget {
-    static getType() { return "iframe"; }
-
-    doRender() {
-        this.$widget = $(TPL);
-        this.$noteDetailIframeHelp = this.$widget.find('.note-detail-iframe-help');
-        this.$noteDetailIframeContent = this.$widget.find('.note-detail-iframe-content');
-
-        window.addEventListener('resize', () => this.setDimensions(), false);
-
-        super.doRender();
-    }
-
-    async doRefresh(note) {
-        this.$widget.show();
-        this.$noteDetailIframeHelp.hide();
-        this.$noteDetailIframeContent.hide();
-
-        const iframeSrc = this.note.getLabelValue('iframeSrc');
-
-        if (iframeSrc) {
-            this.$noteDetailIframeContent
-                .show()
-                .attr("src", iframeSrc);
-        }
-        else {
-            this.$noteDetailIframeContent.hide();
-            this.$noteDetailIframeHelp.show();
-        }
-
-        this.setDimensions();
-
-        setTimeout(() => this.setDimensions(), 1000);
-    }
-
-    cleanup() {
-        this.$noteDetailIframeContent.removeAttribute("src");
-    }
-
-    setDimensions() {
-        const $parent = this.$widget;
-
-        this.$noteDetailIframeContent
-            .height($parent.height())
-            .width($parent.width());
-    }
-
-    entitiesReloadedEvent({loadResults}) {
-        if (loadResults.getAttributes().find(attr => attr.name === 'iframeSrc' && attributeService.isAffecting(attr, this.noteContext.note))) {
-            this.refresh();
-        }
-    }
-}
--- a/src/public/app/widgets/type_widgets/web_view.js
+++ b/src/public/app/widgets/type_widgets/web_view.js
@@ -0,0 +1,67 @@
+import TypeWidget from "./type_widget.js";
+import attributeService from "../../services/attributes.js";
+
+const TPL = `
+<div class="note-detail-web-view note-detail-printable" style="height: 100%">
+    <div class="note-detail-web-view-help alert alert-warning" style="margin: 50px; padding: 20px;">
+        <p><strong>This help note is shown because this note of type WebView HTML doesn't have required label to function properly.</strong></p>
+
+        <p>Please create label with a URL address you want to embed, e.g. <code>#webViewSrc="http://www.google.com"</code></p>
+    </div>
+
+    <webview class="note-detail-web-view-content"></webview>
+</div>`;
+
+export default class WebViewTypeWidget extends TypeWidget {
+    static getType() { return "web-view"; }
+
+    doRender() {
+        this.$widget = $(TPL);
+        this.$noteDetailWebViewHelp = this.$widget.find('.note-detail-web-view-help');
+        this.$noteDetailWebViewContent = this.$widget.find('.note-detail-web-view-content');
+
+        window.addEventListener('resize', () => this.setDimensions(), false);
+
+        super.doRender();
+    }
+
+    async doRefresh(note) {
+        this.$widget.show();
+        this.$noteDetailWebViewHelp.hide();
+        this.$noteDetailWebViewContent.hide();
+
+        const webViewSrc = this.note.getLabelValue('webViewSrc');
+
+        if (webViewSrc) {
+            this.$noteDetailWebViewContent
+                .show()
+                .attr("src", webViewSrc);
+        }
+        else {
+            this.$noteDetailWebViewContent.hide();
+            this.$noteDetailWebViewHelp.show();
+        }
+
+        this.setDimensions();
+
+        setTimeout(() => this.setDimensions(), 1000);
+    }
+
+    cleanup() {
+        this.$noteDetailWebViewContent.removeAttribute("src");
+    }
+
+    setDimensions() {
+        const $parent = this.$widget;
+
+        this.$noteDetailWebViewContent
+            .height($parent.height())
+            .width($parent.width());
+    }
+
+    entitiesReloadedEvent({loadResults}) {
+        if (loadResults.getAttributes().find(attr => attr.name === 'webViewSrc' && attributeService.isAffecting(attr, this.noteContext.note))) {
+            this.refresh();
+        }
+    }
+}
--- a/src/services/note_types.js
+++ b/src/services/note_types.js
@@ -10,5 +10,5 @@ module.exports = [
    'note-map',
    'mermaid',
    'canvas',
-    'iframe'
+    'web-view'
 ];