mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2024-12-25 01:20:30 +00:00
Fixes to make SVG and MathML elements work properly
This commit is contained in:
parent
ed35d91be6
commit
b0503cf709
@ -30,7 +30,7 @@ ElementWidget.prototype.render = function(parent,nextSibling) {
|
|||||||
this.parentDomNode = parent;
|
this.parentDomNode = parent;
|
||||||
this.computeAttributes();
|
this.computeAttributes();
|
||||||
this.execute();
|
this.execute();
|
||||||
var domNode = this.document.createElement(this.parseTreeNode.tag);
|
var domNode = this.document.createElementNS(this.namespace,this.parseTreeNode.tag);
|
||||||
this.assignAttributes(domNode);
|
this.assignAttributes(domNode);
|
||||||
parent.insertBefore(domNode,nextSibling);
|
parent.insertBefore(domNode,nextSibling);
|
||||||
this.renderChildren(domNode,null);
|
this.renderChildren(domNode,null);
|
||||||
@ -41,6 +41,18 @@ ElementWidget.prototype.render = function(parent,nextSibling) {
|
|||||||
Compute the internal state of the widget
|
Compute the internal state of the widget
|
||||||
*/
|
*/
|
||||||
ElementWidget.prototype.execute = function() {
|
ElementWidget.prototype.execute = function() {
|
||||||
|
// Select the namespace for the tag
|
||||||
|
var tagNamespaces = {
|
||||||
|
svg: "http://www.w3.org/2000/svg",
|
||||||
|
math: "http://www.w3.org/1998/Math/MathML"
|
||||||
|
};
|
||||||
|
this.namespace = tagNamespaces[this.parseTreeNode.tag];
|
||||||
|
if(this.namespace) {
|
||||||
|
this.setVariable("namespace",this.namespace);
|
||||||
|
} else {
|
||||||
|
this.namespace = this.getVariable("namespace",null,"http://www.w3.org/1999/xhtml");
|
||||||
|
}
|
||||||
|
// Make the child widgets
|
||||||
this.makeChildWidgets();
|
this.makeChildWidgets();
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -74,14 +74,15 @@ Get the prevailing value of a context variable
|
|||||||
name: name of variable
|
name: name of variable
|
||||||
params: array of {name:, value:} for each parameter
|
params: array of {name:, value:} for each parameter
|
||||||
*/
|
*/
|
||||||
Widget.prototype.getVariable = function(name,params) {
|
Widget.prototype.getVariable = function(name,params,defaultValue) {
|
||||||
|
params = params || [];
|
||||||
// Search up the widget tree for the variable name
|
// Search up the widget tree for the variable name
|
||||||
var node = this;
|
var node = this;
|
||||||
while(node && !$tw.utils.hop(node.variables,name)) {
|
while(node && !$tw.utils.hop(node.variables,name)) {
|
||||||
node = node.parentWidget;
|
node = node.parentWidget;
|
||||||
}
|
}
|
||||||
if(!node) {
|
if(!node) {
|
||||||
return undefined;
|
return defaultValue;
|
||||||
}
|
}
|
||||||
// Get the value
|
// Get the value
|
||||||
var value = node.variables[name].value;
|
var value = node.variables[name].value;
|
||||||
|
@ -26,12 +26,13 @@ var TW_TextNode = function(text) {
|
|||||||
this.textContent = text;
|
this.textContent = text;
|
||||||
};
|
};
|
||||||
|
|
||||||
var TW_Element = function(tag) {
|
var TW_Element = function(tag,namespace) {
|
||||||
bumpSequenceNumber(this);
|
bumpSequenceNumber(this);
|
||||||
this.tag = tag;
|
this.tag = tag;
|
||||||
this.attributes = {};
|
this.attributes = {};
|
||||||
this.isRaw = false;
|
this.isRaw = false;
|
||||||
this.children = [];
|
this.children = [];
|
||||||
|
this.namespaceURI = namespace || "http://www.w3.org/1999/xhtml";
|
||||||
};
|
};
|
||||||
|
|
||||||
TW_Element.prototype.setAttribute = function(name,value) {
|
TW_Element.prototype.setAttribute = function(name,value) {
|
||||||
@ -160,7 +161,7 @@ var document = {
|
|||||||
sequenceNumber = value;
|
sequenceNumber = value;
|
||||||
},
|
},
|
||||||
createElementNS: function(namespace,tag) {
|
createElementNS: function(namespace,tag) {
|
||||||
return new TW_Element(tag);
|
return new TW_Element(tag,namespace);
|
||||||
},
|
},
|
||||||
createElement: function(tag) {
|
createElement: function(tag) {
|
||||||
return new TW_Element(tag);
|
return new TW_Element(tag);
|
||||||
|
@ -24,8 +24,8 @@ describe("Widget module", function() {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function parseText(text,wiki) {
|
function parseText(text,wiki,options) {
|
||||||
var parser = wiki.new_parseText("text/vnd.tiddlywiki",text);
|
var parser = wiki.new_parseText("text/vnd.tiddlywiki",text,options);
|
||||||
return parser ? {type: "widget", children: parser.tree} : undefined;
|
return parser ? {type: "widget", children: parser.tree} : undefined;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -169,6 +169,18 @@ describe("Widget module", function() {
|
|||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it("should deal with SVG elements", function() {
|
||||||
|
var wiki = new $tw.Wiki();
|
||||||
|
// Construct the widget node
|
||||||
|
var text = "<svg class='tw-image-new-button' viewBox='83 81 50 50' width='22pt' height='22pt'><path d='M 101.25 112.5 L 101.25 127.5 C 101.25 127.5 101.25 127.5 101.25 127.5 L 101.25 127.5 C 101.25 129.156855 102.593146 130.5 104.25 130.5 L 111.75 130.5 C 113.406854 130.5 114.75 129.156854 114.75 127.5 L 114.75 112.5 L 129.75 112.5 C 131.406854 112.5 132.75 111.156854 132.75 109.5 L 132.75 102 C 132.75 100.343146 131.406854 99 129.75 99 L 114.75 99 L 114.75 84 C 114.75 82.343146 113.406854 81 111.75 81 L 104.25 81 C 104.25 81 104.25 81 104.25 81 C 102.593146 81 101.25 82.343146 101.25 84 L 101.25 99 L 86.25 99 C 86.25 99 86.25 99 86.25 99 C 84.593146 99 83.25 100.343146 83.25 102 L 83.25 109.5 C 83.25 109.5 83.25 109.5 83.25 109.5 L 83.25 109.5 C 83.25 111.156855 84.593146 112.5 86.25 112.5 Z'/></svg>\n";
|
||||||
|
var widgetNode = createWidgetNode(parseText(text,wiki,{parseAsInline:true}),wiki);
|
||||||
|
// Render the widget node to the DOM
|
||||||
|
var wrapper = renderWidgetNode(widgetNode);
|
||||||
|
// Test the rendering
|
||||||
|
expect(wrapper.innerHTML).toBe("<svg class='tw-image-new-button' height='22pt' viewBox='83 81 50 50' width='22pt'>\n<path d='M 101.25 112.5 L 101.25 127.5 C 101.25 127.5 101.25 127.5 101.25 127.5 L 101.25 127.5 C 101.25 129.156855 102.593146 130.5 104.25 130.5 L 111.75 130.5 C 113.406854 130.5 114.75 129.156854 114.75 127.5 L 114.75 112.5 L 129.75 112.5 C 131.406854 112.5 132.75 111.156854 132.75 109.5 L 132.75 102 C 132.75 100.343146 131.406854 99 129.75 99 L 114.75 99 L 114.75 84 C 114.75 82.343146 113.406854 81 111.75 81 L 104.25 81 C 104.25 81 104.25 81 104.25 81 C 102.593146 81 101.25 82.343146 101.25 84 L 101.25 99 L 86.25 99 C 86.25 99 86.25 99 86.25 99 C 84.593146 99 83.25 100.343146 83.25 102 L 83.25 109.5 C 83.25 109.5 83.25 109.5 83.25 109.5 L 83.25 109.5 C 83.25 111.156855 84.593146 112.5 86.25 112.5 Z'>\n</path></svg>\n");
|
||||||
|
expect(wrapper.firstChild.namespaceURI).toBe("http://www.w3.org/2000/svg");
|
||||||
|
});
|
||||||
|
|
||||||
it("should parse and render transclusions", function() {
|
it("should parse and render transclusions", function() {
|
||||||
var wiki = new $tw.Wiki();
|
var wiki = new $tw.Wiki();
|
||||||
// Add a tiddler
|
// Add a tiddler
|
||||||
|
Loading…
Reference in New Issue
Block a user