From 04b9e5ba4c0610e2d6a047d47b166318f5d594f5 Mon Sep 17 00:00:00 2001 From: BurningTreeC Date: Sun, 17 Nov 2024 08:19:02 +0100 Subject: [PATCH] different classes for text-editor and bitmap-editor --- core/modules/widgets/edit-bitmap.js | 18 +++++++++++++++++- core/ui/EditTemplate/body-editor.tid | 2 +- core/ui/EditTemplate/body/default.tid | 2 +- themes/tiddlywiki/vanilla/base.tid | 1 + themes/tiddlywiki/vanilla/sidebar-resizer.tid | 6 ++++-- 5 files changed, 24 insertions(+), 5 deletions(-) diff --git a/core/modules/widgets/edit-bitmap.js b/core/modules/widgets/edit-bitmap.js index 5065127d8..b3f02da4e 100644 --- a/core/modules/widgets/edit-bitmap.js +++ b/core/modules/widgets/edit-bitmap.js @@ -54,10 +54,14 @@ EditBitmapWidget.prototype.render = function(parent,nextSibling) { this.toolbarNode.className = "tc-editor-toolbar"; parent.insertBefore(this.toolbarNode,nextSibling); this.domNodes.push(this.toolbarNode); + var classes = this.getAttribute("class","").split(" "); + if(classes.indexOf("tc-edit-bitmapeditor") === -1) { + classes.push("tc-edit-bitmapeditor"); + } // Create the on-screen canvas this.canvasDomNode = $tw.utils.domMaker("canvas",{ document: this.document, - "class":"tc-edit-bitmapeditor", + "class": classes.join(" "), eventListeners: [{ name: "touchstart", handlerObject: this, handlerMethod: "handleTouchStartEvent" },{ @@ -90,6 +94,14 @@ EditBitmapWidget.prototype.render = function(parent,nextSibling) { ]); }; +EditBitmapWidget.prototype.assignDomNodeClasses = function() { + var classes = this.getAttribute("class","").split(" "); + if(classes.indexOf("tc-edit-bitmapeditor") === -1) { + classes.push("tc-edit-bitmapeditor"); + } + this.canvasDomNode.className = classes.join(" "); +}; + /* Handle an edit bitmap operation message from the toolbar */ @@ -115,6 +127,10 @@ EditBitmapWidget.prototype.execute = function() { Just refresh the toolbar */ EditBitmapWidget.prototype.refresh = function(changedTiddlers) { + var changedAttributes = this.computeAttributes(); + if(changedAttributes["class"]) { + this.assignDomNodeClasses(); + } return this.refreshChildren(changedTiddlers); }; diff --git a/core/ui/EditTemplate/body-editor.tid b/core/ui/EditTemplate/body-editor.tid index c3d86c5c9..9f067a665 100644 --- a/core/ui/EditTemplate/body-editor.tid +++ b/core/ui/EditTemplate/body-editor.tid @@ -5,7 +5,7 @@ title: $:/core/ui/EditTemplate/body/editor <$edit field="text" - class=<> + class=<> placeholder={{$:/language/EditTemplate/Body/Placeholder}} tabindex={{$:/config/EditTabIndex}} focus={{{ [{$:/config/AutoFocus}match[text]then[true]] ~[[false]] }}} diff --git a/core/ui/EditTemplate/body/default.tid b/core/ui/EditTemplate/body/default.tid index 6ee927a02..0f57bb538 100644 --- a/core/ui/EditTemplate/body/default.tid +++ b/core/ui/EditTemplate/body/default.tid @@ -6,7 +6,7 @@ title: $:/core/ui/EditTemplate/body/default [{$:/config/ShowEditPreview/PerTiddler}!match[yes]then[$:/state/showeditpreview]] :else[] +[get[text]] :else[[no]] \end -\function get.tc-edit-texteditor.class() tc-edit-texteditor tc-edit-texteditor-body [match[yes]thenaddprefix[tc-edit-texteditor-identified-]] +[join[ ]] +\function get.tc-editor.class() [{!!type}is[blank]then[tc-edit-texteditor tc-edit-texteditor-body]] [{!!type}is[blank]thenmatch[yes]thenaddprefix[tc-edit-texteditor-identified-]] [{!!type}addprefix[$:/config/EditorTypeMappings/]get[text]!match[bitmap]then[tc-edit-texteditor tc-edit-texteditor-body]] [{!!type}addprefix[$:/config/EditorTypeMappings/]get[text]!match[bitmap]thenmatch[yes]thenaddprefix[tc-edit-texteditor-identified-]] [{!!type}addprefix[$:/config/EditorTypeMappings/]get[text]match[bitmap]then[tc-edit-bitmapeditor tc-edit-bitmapeditor-body]] [{!!type}addprefix[$:/config/EditorTypeMappings/]get[text]match[bitmap]thenmatch[yes]thenaddprefix[tc-edit-bitmapeditor-identified-]] +[join[ ]] \function get.tc-tiddler-preview-preview.class() tc-tiddler-preview-preview [addprefix[tc-tiddler-preview-preview-identified-]] +[join[ ]] diff --git a/themes/tiddlywiki/vanilla/base.tid b/themes/tiddlywiki/vanilla/base.tid index 7ba95c5f6..2648106eb 100644 --- a/themes/tiddlywiki/vanilla/base.tid +++ b/themes/tiddlywiki/vanilla/base.tid @@ -1775,6 +1775,7 @@ html body.tc-body.tc-single-tiddler-window { .tc-tiddler-frame .tc-tiddler-editor.tc-tiddler-preview-hidden canvas.tc-edit-bitmapeditor { grid-area: editor; max-width: 100%; + z-index: 1; } .tc-edit-fields { diff --git a/themes/tiddlywiki/vanilla/sidebar-resizer.tid b/themes/tiddlywiki/vanilla/sidebar-resizer.tid index b1abb5005..b239e4b44 100644 --- a/themes/tiddlywiki/vanilla/sidebar-resizer.tid +++ b/themes/tiddlywiki/vanilla/sidebar-resizer.tid @@ -183,14 +183,16 @@ code-body: yes .tc-tiddler-frame iframe[class*="tc-edit-texteditor-identified-"].tc-edit-texteditor, .tc-tiddler-frame textarea[class*="tc-edit-texteditor-identified-"].tc-edit-texteditor, -.tc-tiddler-frame div[class*="tc-edit-texteditor-identified-"].tc-edit-texteditor { +.tc-tiddler-frame div[class*="tc-edit-texteditor-identified-"].tc-edit-texteditor, +.tc-tiddler-frame canvas[class*="tc-edit-bitmapeditor-identified-"].tc-edit-bitmapeditor { width: calc(100% - <>); min-width: 0px; } .tc-tiddler-frame iframe[class*="tc-edit-texteditor-identified-"].tc-edit-texteditor + .tc-tiddler-preview-preview, .tc-tiddler-frame textarea[class*="tc-edit-texteditor-identified-"].tc-edit-texteditor + .tc-tiddler-preview-preview, -.tc-tiddler-frame div[class*="tc-edit-texteditor-identified-"].tc-edit-texteditor + .tc-tiddler-preview-preview { +.tc-tiddler-frame div[class*="tc-edit-texteditor-identified-"].tc-edit-texteditor + .tc-tiddler-preview-preview, +.tc-tiddler-frame canvas[class*="tc-edit-bitmapeditor-identified-"].tc-edit-bitmapeditor + .tc-tiddler-preview-preview { min-width: 0px; }