vndb/mithril-vndb
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add docs for SVG, and better tests

Browse source
This commit is contained in:
Leo Horie 2014-04-10 21:36:09 -04:00
parent 1aef5dd942
commit 5c9f9d782f
9 changed files with 100 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

2
archive/v0.1.4/change-log.html
View file

@ -65,6 +65,7 @@
<h3 id="news-">News:</h3>
<ul>
<li>added regression tests for reported bugs</li>
<li>added support for SVG</li>
</ul>
<h3 id="bug-fixes-">Bug Fixes:</h3>
<ul>
@ -74,6 +75,7 @@
<li>fixed caching bug in links w/ config option attached <a href="https://github.com/lhorie/mithril.js/issues/43">#43</a></li>
<li>fixed attribute update bug when an element has both <code>oninput</code> and <code>onkeydown</code> handlers <a href="https://github.com/lhorie/mithril.js/issues/36">#36</a></li>
</ul>
<hr>
<p><a href="/mithril/archive/v0.1.3">v0.1.3</a> - maintenance</p>
<h3 id="news-">News:</h3>
<ul>

8
archive/v0.1.4/mithril-tests.js
View file

@ -487,6 +487,7 @@ mock.window = new function() {
this[name] = value.toString()
},
setAttributeNS: function(namespace, name, value) {
this.namespaceURI = namespace
this[name] = value.toString()
},
getAttribute: function(name, value) {
@ -495,7 +496,9 @@ mock.window = new function() {
}
}
window.document.createElementNS = function(namespace, tag) {
return window.document.createElement(tag)
var element = window.document.createElement(tag)
element.namespaceURI = namespace
return element
}
window.document.createTextNode = function(text) {
return {nodeValue: text.toString()}
@ -665,7 +668,8 @@ function testMithril(mock) {
test(function() {
var root = mock.document.createElement("div")
m.render(root, m("svg", [m("g")]))
return root.childNodes[0].childNodes[0].nodeName === "G"
var g = root.childNodes[0].childNodes[0]
return g.nodeName === "G" && g.namespaceURI == "http://www.w3.org/2000/svg"
})
test(function() {
var root = mock.document.createElement("div")

6
archive/v0.1.4/mithril.html
View file

@ -177,6 +177,12 @@ m(&quot;a[href=&#39;/dashboard&#39;]&quot;, {config: m.route}, &quot;Dashboard&q
<p>Also note that the <code>config</code> callback only runs after a rendering lifecycle is done. Therefore, you should not use <code>config</code> to modify controller and model values, if you expect these changes to render immediately. Changes to controller and model values in this fashion will only render on the next <code>m.render</code> or <code>m.module</code> call.</p>
<p>You can use this mechanism to attach custom event listeners to controller methods (for example, when integrating with third party libraries), but you are responsible for making sure the integration with Mithril&#39;s autoredrawing system is in place. See the <a href="integration.html">integration guide</a> for more information.</p>
<hr>
<p>You can use Mithril to create SVG documents (as long as you don&#39;t need to support browsers that don&#39;t support SVG natively).</p>
<p>Mithril automatically figures out the correct XML namespaces when it sees an SVG island in the virtual DOM tree.</p>
<pre><code class="lang-javascript">m(&quot;svg[height=&#39;200px&#39;][width=&#39;200px&#39;]&quot;, [
m(&quot;image[href=&#39;foo.jpg&#39;][height=&#39;200px&#39;][width=&#39;200px&#39;]&quot;)
])</code></pre>
<hr>
<h3 id="signature">Signature</h3>
<p><a href="how-to-read-signatures.html">How to read signatures</a></p>
<pre><code class="lang-clike">VirtualElement m(String selector [, Attributes attributes] [, Children children])

BIN
archive/v0.1.4/mithril.min.zip
View file

Binary file not shown.

3
docs/change-log.md
View file

@ -5,6 +5,7 @@
### News:
- added regression tests for reported bugs
- added support for SVG
### Bug Fixes:
@ -14,6 +15,8 @@
- fixed caching bug in links w/ config option attached [#43](https://github.com/lhorie/mithril.js/issues/43)
- fixed attribute update bug when an element has both `oninput` and `onkeydown` handlers [#36](https://github.com/lhorie/mithril.js/issues/36)
---
[v0.1.3](/mithril/archive/v0.1.3) - maintenance
### News:

12
docs/mithril.md
View file

@ -185,6 +185,18 @@ You can use this mechanism to attach custom event listeners to controller method
---
You can use Mithril to create SVG documents (as long as you don't need to support browsers that don't support SVG natively).
Mithril automatically figures out the correct XML namespaces when it sees an SVG island in the virtual DOM tree.
```javascript
m("svg[height='200px'][width='200px']", [
m("image[href='foo.jpg'][height='200px'][width='200px']")
])
```
---
### Signature
[How to read signatures](how-to-read-signatures.md)

3
tests/mithril-tests.js
View file

@ -110,7 +110,8 @@ function testMithril(mock) {
test(function() {
var root = mock.document.createElement("div")
m.render(root, m("svg", [m("g")]))
return root.childNodes[0].childNodes[0].nodeName === "G"
var g = root.childNodes[0].childNodes[0]
return g.nodeName === "G" && g.namespaceURI == "http://www.w3.org/2000/svg"
})
test(function() {
var root = mock.document.createElement("div")

5
tests/mock.js
View file

@ -20,6 +20,7 @@ mock.window = new function() {
this[name] = value.toString()
},
setAttributeNS: function(namespace, name, value) {
this.namespaceURI = namespace
this[name] = value.toString()
},
getAttribute: function(name, value) {
@ -28,7 +29,9 @@ mock.window = new function() {
}
}
window.document.createElementNS = function(namespace, tag) {
return window.document.createElement(tag)
var element = window.document.createElement(tag)
element.namespaceURI = namespace
return element
}
window.document.createTextNode = function(text) {
return {nodeValue: text.toString()}

70
tests/svg.html
View file

@ -1,21 +1,81 @@
<!doctype html>
<html>
<head></head>
<head>
<title>SVG test</title>
<style>
.path {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 5s linear alternate infinite;
}
@keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
</style>
</head>
<body>
<p>Since it's not possible to test SVG functionality from a NodeJS environment, this page can be used to test it in a browser.</p>
<p>There should be an HTML link labeled "HTML link", a SVG link labeled "SVG link", and a tilted blue square. The links should open in a new tab. All three items should display title tooltips.</p>
<p>This page should contain:</p>
<ul>
<li>an HTML link labeled "HTML link"</li>
<li>an SVG link labeled "SVG link"</li>
<li>a tilted blue square</li>
<li>a cat picture from <a href="http://placekitten.com">http://placekitten.com</a></li>
<li>an animated line drawing</li>
<li>a clock with the current time</li>
</ul>
<p>The links should open in a new tab. All items should display title tooltips when hovered over.</p>
<div id="test"></div>
<script src="../mithril.js"></script>
<script>
var svg = [
m("p", [
m("a[href='http://google.com'][target='_blank'][title='HTML link']", "HTML link")
]),
m("a[href='http://google.com'][target='_blank'][title='HTML link']", "HTML link"),
m("br"),
m("svg[width=180][height=200]", [
m("rect[x=50][y=50][height=100][width=100][transform='translate(30) rotate(45 50 50)'][title='Square']", {style: {stroke: "#000", fill: "#0086b2"}}),
m("a[href='http://google.com'][title='SVG link'][target=_new]", {style: {textDecoration: "underline"}}, [
m("text[x=0][y=20]", "SVG Link")
])
]),
m("svg[height='200px'][width='200px']", [
m("image[href='http://placekitten.com/200/200'][height='200px'][width='200px'][title='Cat picture']")
]),
m("svg[enable-background='new 0 0 340 333'][height='333px'][viewBox='0 0 340 333'][width='340px'][x='0px'][y='0px'][title='Line drawings']", [
m("path.path[d='M66.039,133.545c0,0-21-57,18-67s49-4,65,8s30,41,53,27s66,4,58,32s-5,44,18,57s22,46,0,45s-54-40-68-16s-40,88-83,48s11-61-11-80s-79-7-70-41C46.039,146.545,53.039,128.545,66.039,133.545z'][fill='#FFFFFF'][stroke='#000000'][stroke-miterlimit='10'][stroke-width='4']")
]),
m("svg[height='270px'][width='270px'][viewBox='0 0 270 270']", [
m("g[transform='translate(150,150)'][title='Clock']", [
m("g", [
m("circle[r='108'][fill='none'][stroke-width='4'][stroke='gray']"),
m("circle[r='97'][fill='none'][stroke-width='11'][stroke='black'][stroke-dasharray='4,46.789082'][transform='rotate(-1.5)']"),
m("circle[r='100'][fill='none'][stroke-width='5'][stroke='black'][stroke-dasharray='2,8.471976'][transform='rotate(-.873)']"),
]),
m("g[transform='rotate(180)']", [
m("g[id='hour']", [
m("line[stroke-width='5'][y2='75'][stroke-linecap='round'][stroke='blue'][opacity='.5']"),
m("animateTransform[attributeName='transform'][type='rotate'][repeatCount='indefinite'][dur='12h'][by='360']"),
m("circle[r='7']")
]),
m("g[id='minute']", [
m("line[stroke-width='4'][y2='93'][stroke-linecap='round'][stroke='green'][opacity='.9']"),
m("animateTransform[attributeName='transform'][type='rotate'][repeatCount='indefinite'][dur='60min'][by='360']"),
m("circle[r='6'][fill='red']")
]),
m("g[id='second']", [
m("line[stroke-width='2'][y1='-20'][y2=102][stroke-linecap='round'][stroke='red']"),
m("animateTransform[attributeName='transform'][type='rotate'][repeatCount='indefinite'][dur='60s'][by='360']"),
m("circle[r='4'][fill='blue']")
])
])
]),
m("script", 'var a=new Date,b=parseInt(a.getHours());b=b>12?b-12:b;var c=parseInt(a.getMinutes()),d=parseInt(a.getSeconds()),e=6*d,f=6*(c+d/60),g=30*(b+c/60+d/3600),h=document.getElementById("hour"),i=document.getElementById("minute"),j=document.getElementById("second");h.setAttribute("transform","rotate("+g.toString()+")"),i.setAttribute("transform","rotate("+f.toString()+")"),j.setAttribute("transform","rotate("+e.toString()+")")')
])
]