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

Add support for directly setting style.* attributes on HTML elements (#6388)

Browse Source 
* 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 5613bcc884/core/modules/widgets/transclude.js (L73-L75))

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

* Add docs
This commit is contained in:
Jeremy Ruston 2022-02-21 15:24:06 +00:00 committed by GitHub
parent a4ab42da8a
commit ab3109d84b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 50 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
core/modules/widgets/widget.js
View File

@ -314,24 +314,40 @@ excludeEventAttributes: ignores attributes whose name begins with "on"
Widget.prototype.assignAttributes = function(domNode,options) { Widget.prototype.assignAttributes = function(domNode,options) {
options = options || {}; options = options || {};
var self = this; var self = this;
$tw.utils.each(this.attributes,function(v,a) { var assignAttribute = function(name,value) {
// Check exclusions // Check for excluded attribute names
if(options.excludeEventAttributes && a.substr(0,2) === "on") { if(options.excludeEventAttributes && name.substr(0,2) === "on") {
v = undefined; value = undefined;
} }
if(v !== undefined) { if(value !== undefined) {
var b = a.split(":"); // Handle the xlink: namespace
// Setting certain attributes can cause a DOM error (eg xmlns on the svg element) var namespace = null;
try { if(name.substr(0,6) === "xlink:" && name.length > 6) {
if (b.length == 2 && b[0] == "xlink"){ namespace = "http://www.w3.org/1999/xlink";
domNode.setAttributeNS("http://www.w3.org/1999/xlink",b[1],v); name = name.substr(6);
} else { }
domNode.setAttributeNS(null,a,v); // 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]);
});
}
}; };
/* /*

20
editions/tw5.com/tiddlers/wikitext/HTML in WikiText.tid
View File

@ -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]] * a transclusion of a [[macro/variable|Macros in WikiText]]
* as the result of a [[Filter Expression]] * 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
Literal attribute values can use several different styles of quoting: Literal attribute values can use several different styles of quoting: