mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2024-12-24 17:10:29 +00:00
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 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:
parent
a4ab42da8a
commit
ab3109d84b
@ -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(":");
|
||||
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 {
|
||||
if (b.length == 2 && b[0] == "xlink"){
|
||||
domNode.setAttributeNS("http://www.w3.org/1999/xlink",b[1],v);
|
||||
} else {
|
||||
domNode.setAttributeNS(null,a,v);
|
||||
}
|
||||
domNode.setAttributeNS(namespace,name,value);
|
||||
} 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]);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
/*
|
||||
|
@ -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:
|
||||
|
Loading…
Reference in New Issue
Block a user