mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-11-29 12:59:56 +00:00
Code Issues Releases Wiki Activity

Add usemap attribute to image widget (#7634)

Browse Source 
* Add usemap attribute to image macro

Allow for a usemap attribute on the $image macro call which is passed through to the resulting img tag. This makes the use of HTML image maps [1] possible.

[1]: <https://www.w3schools.com/html/html_images_imagemap.asp>

* Document new usemap attribute in ImageWidget

* Update version docs

---------

Co-authored-by: Jeremy Ruston <jeremy@jermolene.com>
This commit is contained in:
Eric Haberstroh 2023-11-21 12:44:39 +01:00 committed by GitHub
parent 37c625384a
commit 0cd3c9a8ac
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 7 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
core/modules/widgets/image.js
View File

@ -100,6 +100,9 @@ ImageWidget.prototype.render = function(parent,nextSibling) {
if(this.imageClass) { if(this.imageClass) {
domNode.setAttribute("class",this.imageClass); domNode.setAttribute("class",this.imageClass);
} }
if(this.imageUsemap) {
domNode.setAttribute("usemap",this.imageUsemap);
}
if(this.imageWidth) { if(this.imageWidth) {
domNode.setAttribute("width",this.imageWidth); domNode.setAttribute("width",this.imageWidth);
} }
@ -139,6 +142,7 @@ ImageWidget.prototype.execute = function() {
this.imageWidth = this.getAttribute("width"); this.imageWidth = this.getAttribute("width");
this.imageHeight = this.getAttribute("height"); this.imageHeight = this.getAttribute("height");
this.imageClass = this.getAttribute("class"); this.imageClass = this.getAttribute("class");
this.imageUsemap = this.getAttribute("usemap");
this.imageTooltip = this.getAttribute("tooltip"); this.imageTooltip = this.getAttribute("tooltip");
this.imageAlt = this.getAttribute("alt"); this.imageAlt = this.getAttribute("alt");
this.lazyLoading = this.getAttribute("loading"); this.lazyLoading = this.getAttribute("loading");
@ -149,7 +153,7 @@ Selectively refreshes the widget if needed. Returns true if the widget or any of
*/ */
ImageWidget.prototype.refresh = function(changedTiddlers) { ImageWidget.prototype.refresh = function(changedTiddlers) {
var changedAttributes = this.computeAttributes(); var changedAttributes = this.computeAttributes();
if(changedAttributes.source || changedAttributes.width || changedAttributes.height || changedAttributes["class"] || changedAttributes.tooltip || changedTiddlers[this.imageSource]) { if(changedAttributes.source || changedAttributes.width || changedAttributes.height || changedAttributes["class"] || changedAttributes.usemap || changedAttributes.tooltip || changedTiddlers[this.imageSource]) {
this.refreshSelf(); this.refreshSelf();
return true; return true;
} else { } else {

3
editions/tw5.com/tiddlers/widgets/ImageWidget.tid
View File

@ -1,6 +1,6 @@
caption: image caption: image
created: 20140416160234142 created: 20140416160234142
modified: 20220721102303815 modified: 20231121114351165
tags: Widgets tags: Widgets
title: ImageWidget title: ImageWidget
type: text/vnd.tiddlywiki type: text/vnd.tiddlywiki
@ -21,6 +21,7 @@ Any content of the `<$image>` widget is ignored.
|alt |The alternative text to be associated with the image | |alt |The alternative text to be associated with the image |
|class |CSS classes to be assigned to the `<img>` element | |class |CSS classes to be assigned to the `<img>` element |
|loading|<<.from-version "5.2.3">>Optional. Set to `lazy` to enable lazy loading of images loaded from an external URI | |loading|<<.from-version "5.2.3">>Optional. Set to `lazy` to enable lazy loading of images loaded from an external URI |
|usemap|<<.from-version "5.3.2">>Optional usemap attribute to be assigned to the `<img>` element for use with HTML image maps |
The width and the height can be specified as pixel values (eg "23" or "23px") or percentages (eg "23%"). They are both optional; if not provided the browser will use CSS rules to size the image. The width and the height can be specified as pixel values (eg "23" or "23px") or percentages (eg "23%"). They are both optional; if not provided the browser will use CSS rules to size the image.