From ab3109d84b4ae748cc1fa0dc62b54acb5b9851b8 Mon Sep 17 00:00:00 2001
From: Jeremy Ruston <jeremy@jermolene.com>
Date: Mon, 21 Feb 2022 15:24:06 +0000
Subject: [PATCH] Add support for directly setting style.* attributes on HTML
 elements (#6388)

* Support direct style attributes on the element widget

* Fix tests

Not all parse tree nodes have an "orderedAttributes" member (eg. the error message generated at https://github.com/Jermolene/TiddlyWiki5/blob/5613bcc8849bd979505eb442c7c2b9b0d2eeff19/core/modules/widgets/transclude.js#L73-L75)

* Ensure ordering isn't insertion dependent if orderedAttributes is missing

* Add docs
---
 core/modules/widgets/widget.js                | 44 +++++++++++++------
 .../tiddlers/wikitext/HTML in WikiText.tid    | 20 +++++++++
 2 files changed, 50 insertions(+), 14 deletions(-)

diff --git a/core/modules/widgets/widget.js b/core/modules/widgets/widget.js
index 0ba2444b6..c6b49f04a 100755
--- a/core/modules/widgets/widget.js
+++ b/core/modules/widgets/widget.js
@@ -314,24 +314,40 @@ excludeEventAttributes: ignores attributes whose name begins with "on"
 Widget.prototype.assignAttributes = function(domNode,options) {
 	options = options || {};
 	var self = this;
-	$tw.utils.each(this.attributes,function(v,a) {
-		// Check exclusions
-		if(options.excludeEventAttributes && a.substr(0,2) === "on") {
-			v = undefined;
+	var assignAttribute = function(name,value) {
+		// Check for excluded attribute names
+		if(options.excludeEventAttributes && name.substr(0,2) === "on") {
+			value = undefined;
 		}
-		if(v !== undefined) {
-			var b = a.split(":");
-			// Setting certain attributes can cause a DOM error (eg xmlns on the svg element)
-			try {
-				if (b.length == 2 && b[0] == "xlink"){
-					domNode.setAttributeNS("http://www.w3.org/1999/xlink",b[1],v);
-				} else {
-					domNode.setAttributeNS(null,a,v);
+		if(value !== undefined) {
+			// Handle the xlink: namespace
+			var namespace = null;
+			if(name.substr(0,6) === "xlink:" && name.length > 6) {
+				namespace = "http://www.w3.org/1999/xlink";
+				name = name.substr(6);
+			}
+			// Handle styles
+			if(name.substr(0,6) === "style." && name.length > 6) {
+				domNode.style[$tw.utils.unHyphenateCss(name.substr(6))] = value;
+			} else {
+				// Setting certain attributes can cause a DOM error (eg xmlns on the svg element)
+				try {
+					domNode.setAttributeNS(namespace,name,value);
+				} catch(e) {
 				}
-			} catch(e) {
 			}
 		}
-	});
+	}
+	// Not all parse tree nodes have the orderedAttributes property
+	if(this.parseTreeNode.orderedAttributes) {
+		$tw.utils.each(this.parseTreeNode.orderedAttributes,function(attribute,index) {
+			assignAttribute(attribute.name,self.attributes[attribute.name]);
+		});	
+	} else {
+		$tw.utils.each(Object.keys(self.attributes).sort(),function(name) {
+			assignAttribute(name,self.attributes[name]);
+		});	
+	}
 };
 
 /*
diff --git a/editions/tw5.com/tiddlers/wikitext/HTML in WikiText.tid b/editions/tw5.com/tiddlers/wikitext/HTML in WikiText.tid
index d510c3d08..db6f00429 100644
--- a/editions/tw5.com/tiddlers/wikitext/HTML in WikiText.tid	
+++ b/editions/tw5.com/tiddlers/wikitext/HTML in WikiText.tid	
@@ -58,6 +58,26 @@ In an extension of conventional HTML syntax, attributes of elements/widgets can
 * a transclusion of a [[macro/variable|Macros in WikiText]]
 * as the result of a [[Filter Expression]]
 
+!! Style Attributes
+
+<<.from-version "5.2.2">> TiddlyWiki supports the usual HTML ''style'' attribute for assigning CSS styles to elements:
+
+```
+<div style="color:red;">Hello</div>
+```
+
+In an extension to HTML, TiddlyWiki also supports accessing individual CSS styles as independent attributes. For example:
+
+```
+<div style.color="red">Hello</div>
+```
+
+The advantage of this syntax is that it simplifies assigning computed values to CSS styles. For example:
+
+```
+<div style.color={{!!color}}>Hello</div>
+```
+
 !! Literal Attribute Values
 
 Literal attribute values can use several different styles of quoting: