Comments (6)
Note that the following does not work either :
CETEIcean.addBehaviors({
"namespaces": {
"tei": "http://www.tei-c.org/ns/1.0"
},
"tei": {
"div": function(element) {
return element;
},
"w": ["<span data-tooltip=\"$rw@lemma\">","</a>"],
"quote": function (element) {
return element;
}
}
});
from ceteicean.
It seems that recursivity only works if the lamba returns HTML nodes. I don't think I have seen doc pointers about it ?
CETEIcean.addBehaviors({
"namespaces": {
"tei": "http://www.tei-c.org/ns/1.0"
},
"tei": {
"div": function(element) {
var data = function (attr) {
return element.getAttribute(attr);
};
var div = document.createElement("div");
div.innerHTML = "<dl>\n" +
" <dt>Subjects:</dt><dd>"+data("ana")+"</dd>\n" +
" <dt>Adams Page:</dt><dd>"+data("corresp")+"</dd>\n" +
"</dl>" + element.innerHTML;
return div;
},
"w": ["<span data-tooltip=\"$rw@lemma\">","</a>"],
"quote": function (element) {
var q = document.createElement("p");
q.innerHTML = "<em>Source: " + element.getAttribute("source") + "</em><br />" +
element.innerHTML;
return q;
}
}
});
from ceteicean.
From the docs on behaviors:
Behavior functions take the element to be modified as a parameter and return an element to be appended to the parameter element. They may also return nothing and simply modify the passed element (e.g. by adding an attribute) or they may modify another part of the DOM. In general, we recommend avoiding side effects in behavior functions, but it may occasionally be necessary.
I’m pretty sure you can’t append an element to itself, so I don’t see how your example could work, but it probably points to a weakness in the documentation. What would help make it clearer?
from ceteicean.
Ok, thank you for the quick response.
I think, this could get a better light on it (a subtitle for example like "Behavior function parameter and return"
But what threw me is probably this example :
"graphic": function(elt) {
let content = new Image();
content.src = this.rw(elt.getAttribute("url")); // "this" is the CETEI object.
if (elt.hasAttribute("width")) {
content.setAttribute("width",elt.getAttribute("width"));
}
if (elt.hasAttribute("height")) {
content.setAttribute("height",elt.getAttribute("height"));
}
return content;
},
And if I look at this, it feels like it should work somehow, from a user point of view.
Note : I'll let another point after because I just understood something.
from ceteicean.
Ok, so I read an reread writing the response up there, and what I finally understood :
Behavior functions take the element to be modified as a parameter and return an element to be appended to the parameter element.
This is completely counter-intuitive for someone who does XSLT I think. Not that it is bad, but I would definitely stress this in any way you can find, because this is not what you expect (though one should read the doc hm ?).
Is it helpful ?
from ceteicean.
May-be I'd add an example stating everystep that is taken by one behavior element and the result in between steps (1. creating the component. 2. checking the function 3. modifying the html and appending the return value inside the component) :)
from ceteicean.
Related Issues (20)
- How to debug HOT 1
- Strange behaviour when attribute is missing HOT 4
- Further clean-up of the CETEIcean.css HOT 2
- Endnotes no longer work! HOT 1
- Tables are broken!
- Modularize the `note` behavior
- Add option to mute URL fragment parsing HOT 3
- Problem with behaviours HOT 3
- Use CETEIcean to extract and transform only a subelement of a TEI document HOT 3
- CETEIcean does not follow <xi:include/> entries HOT 2
- Manipulating CETEIcean output elements with JS document.querySelector('tei-p[attribute='value]') HOT 1
- alternate behaviors based on attribute values - example? HOT 1
- Declaring character entities with CETEIcean? HOT 3
- How to use CETEIcean server-side (if possible)? HOT 2
- Update spanish tutorial
- Babel seems to 'trip' over double semi-colon HOT 2
- Behavior-functions are not triggered HOT 3
- pb behaviors not triggered
- Leading space before URL attribute causes .rw() method to assume an empty URL HOT 2
- confusing line in tutorial HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ceteicean.