mirrors
/
TiddlyWiki5
mirror of https://github.com/Jermolene/TiddlyWiki5
1
0
Fork 0
Code Issues Releases Wiki Activity

Add usemap attribute to image widget (#7634) 

* 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) {
domNode.setAttribute("class",this.imageClass);
}
if(this.imageUsemap) {
domNode.setAttribute("usemap",this.imageUsemap);
}
if(this.imageWidth) {
domNode.setAttribute("width",this.imageWidth);
}
@ -139,6 +142,7 @@ ImageWidget.prototype.execute = function() {
this.imageWidth = this.getAttribute("width");
this.imageHeight = this.getAttribute("height");
this.imageClass = this.getAttribute("class");
this.imageUsemap = this.getAttribute("usemap");
this.imageTooltip = this.getAttribute("tooltip");
this.imageAlt = this.getAttribute("alt");
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) {
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();
return true;
} else {

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

@ -1,6 +1,6 @@
caption: image
created: 20140416160234142
modified: 20220721102303815
modified: 20231121114351165
tags: Widgets
title: ImageWidget
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 |
|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 |
|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.