diff --git a/src/public/app/entities/note_short.js b/src/public/app/entities/note_short.js index 3203d9c6e..304a706e3 100644 --- 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" }; /** diff --git a/src/public/app/services/tree_context_menu.js b/src/public/app/services/tree_context_menu.js index 1a0b64213..6fecbad3b 100644 --- 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" }, ]; } diff --git a/src/public/app/widgets/note_detail.js b/src/public/app/widgets/note_detail.js index 69af9d507..f5dc0093b 100644 --- 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 = `
@@ -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'); } diff --git a/src/public/app/widgets/note_type.js b/src/public/app/widgets/note_type.js index 0ce02b83f..b18099cd8 100644 --- 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 } ]; diff --git a/src/public/app/widgets/note_wrapper.js b/src/public/app/widgets/note_wrapper.js index 53f734bfb..41ab2e90b 100644 --- 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') ); } diff --git a/src/public/app/widgets/type_widgets/iframe.js b/src/public/app/widgets/type_widgets/iframe.js deleted file mode 100644 index db0141af4..000000000 --- a/src/public/app/widgets/type_widgets/iframe.js +++ /dev/null @@ -1,67 +0,0 @@ -import TypeWidget from "./type_widget.js"; -import attributeService from "../../services/attributes.js"; - -const TPL = ` -
-
-

This help note is shown because this note of type IFrame HTML doesn't have required label to function properly.

- -

Please create label with a URL address you want to embed, e.g. #iframeSrc="http://www.google.com"

-
- - -
`; - -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(); - } - } -} diff --git a/src/public/app/widgets/type_widgets/web_view.js b/src/public/app/widgets/type_widgets/web_view.js new file mode 100644 index 000000000..5fe466584 --- /dev/null +++ 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 = ` +
+
+

This help note is shown because this note of type WebView HTML doesn't have required label to function properly.

+ +

Please create label with a URL address you want to embed, e.g. #webViewSrc="http://www.google.com"

+
+ + +
`; + +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(); + } + } +} diff --git a/src/services/note_types.js b/src/services/note_types.js index 5fc923686..b85d90bc1 100644 --- 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' ];