From 0cd3c9a8ac42c0c9ac7d4fe80379a96583c1fd33 Mon Sep 17 00:00:00 2001
From: Eric Haberstroh <pille1842@users.noreply.github.com>
Date: Tue, 21 Nov 2023 12:44:39 +0100
Subject: [PATCH] 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>
---
 core/modules/widgets/image.js                     | 6 +++++-
 editions/tw5.com/tiddlers/widgets/ImageWidget.tid | 3 ++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/core/modules/widgets/image.js b/core/modules/widgets/image.js
index 533b657cc..52496fd74 100644
--- a/core/modules/widgets/image.js
+++ b/core/modules/widgets/image.js
@@ -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 {
diff --git a/editions/tw5.com/tiddlers/widgets/ImageWidget.tid b/editions/tw5.com/tiddlers/widgets/ImageWidget.tid
index c888c3a31..0f4bd9012 100644
--- a/editions/tw5.com/tiddlers/widgets/ImageWidget.tid
+++ b/editions/tw5.com/tiddlers/widgets/ImageWidget.tid
@@ -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.