View
3.423
Download
0
Category
Preview:
Citation preview
@mixonic
httP://madhatted.com
matt.beale@madhatted.com
http://emberjs.jsbin.com/woxes/10/edit
1.7: http://emberjs.jsbin.com/woxes/9 !
1.8: http://emberjs.jsbin.com/woxes/10
Vector Graphic (SVG)
1 <?xml version="1.0" standalone="no"?> 2 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 3 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 4 <svg width="12cm" height="4cm" viewBox="0 0 1200 400" 5 xmlns="http://www.w3.org/2000/svg" version="1.1"> 6 <desc>Example rect01 - rectangle with sharp corners</desc> 7 8 <rect x="400" y="100" width="400" height="200" 9 fill="yellow" stroke="navy" stroke-width="10" />10 </svg>
w3.org
1998 Vector Markup Language proposed by Macromedia, Microsoft. PGML proposed by Adobe, Sun. W3C kick off SVG.
2001 SVG 1.02003 SVG 1.1
1998 Vector Markup Language proposed by Macromedia, Microsoft. PGML proposed by Adobe, Sun. W3C kick off SVG.
2001 SVG 1.02003 SVG 1.12004 Konqueror 3.2 support
2005 Gecko (Firefox) support
2006 WebKit (Chrome, Safari) support
5upmushroom.tumblr.com
1998 Vector Markup Language proposed by Macromedia, Microsoft. PGML proposed by Adobe, Sun. W3C kick off SVG.
2001 SVG 1.02003 SVG 1.1
2011 IE9 is the last platform to support SVG
2004 Konqueror 3.2 support
2005 Gecko (Firefox) support
2006 WebKit (Chrome, Safari) support
Creating elements with a namespace
1 var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); 2 svg.setAttribute("viewBox", "0 0 1200 400"); 3 svg.setAttribute("width", "12cm"); 4 svg.setAttribute("height", "4cm"); 5 var path = document.createElementNS("http://www.w3.org/2000/svg", "path"); 6 path.setAttribute("x", "400"); 7 path.setAttribute("y", "100"); 8 path.setAttribute("width", "400"); 9 path.setAttribute("height", "200");10 path.setAttribute("fill", "yellow");11 path.setAttribute("stroke", "navy");12 path.setAttribute("stroke-width", "10");13 svg.appendChild(path);14 document.body.appendChild(svg);
Setting SVG attributes
• Attributes are case sensitive1 var div = document.createElement("div");2 div.setAttribute("someWacky", "foo");3 div.getAttribute("someWacky"); // => "foo"4 div.getAttribute("somewacky"); // => "foo"5 6 var svg = document.createElementNS(svgNS, "svg");7 svg.setAttribute("someWow", "boo")8 svg.getAttribute("someWow"); // => "boo"9 svg.getAttribute("somewow"); // => null
• Property values are not primitives1 svg.viewBox; // => SVGAnimatedRect {animVal: SVGRect, baseVal: SVGRect}2 var viewBox = new SVGAnimatedRect(); // => TypeError: Illegal constructor3 svg.viewBox = "0 0 100 100";4 svg.getAttribute("viewBox"); // => null
Changing namespaces
1 <div>2 <span></span>3 <svg>4 <path></path>5 <foreignObject>6 <div></div>7 </foreignObject>8 </svg>9 </div>
Entrance to namespace dictated by next element
Exit from namespace dictated by previous element
Ember.js pre-1.8
1 var buffer = "<section>\n";2 buffer += "<script metamorph-0-start></script>";3 if (isShowing) {4 buffer += " <span>Howdy!</span>\n";5 }6 buffer += "<script metamorph-0-end></script>";7 buffer += "</section>";8 9 rootElement.innerHTML = buffer;
Ember.js pre-1.8
1 var2 buffer 3 if (isShowing) {4 buffer 5 }6 buffer 7 buffer 8 9 rootElement.innerHTML
STRINGS, INNERHTML
Ember.js 1.10
1 var outerChilden = [document.createElement('section')]; 2 3 var innerChildren; 4 if (isShowing) { 5 innerChildren = [document.createElement('span');] 6 innerChildren[0].appendChild(document.createTextNode('Howdy!')); 7 while (innerChildren[0]) { 8 outerChilden[0].appendChild(innerChildren[0]); 9 }10 }11 12 while (outerChilden[0]) {13 rootElement.appendChild(outerChilden[0]);14 }
Ember.js 1.10
1 var 2 3 var 4 if (isShowing) { 5 innerChildren 6 innerChildren[ 7 while (innerChildren[ 8 outerChilden[ 9 }10 }11 12 while (outerChilden[13 rootElement.appendChild(outerChilden[14 }
DOM! HTMLBARS! WOOOMG!
Ember.js 1.8-1.9
1 var buffer, parsingNode; 2 3 buffer = "<section>\n</section>"; 4 parsingNode = document.createElement('div'); 5 parsingNode.innerHTML = buffer; 6 var outerChilden = parsingNode.childNodes; 7 8 if (isShowing) { 9 buffer = " <span>Howdy!</span>\n";10 parsingNode.innerHTML = buffer;11 var innerChildren = parsingNode.childNodes;12 while (innerChildren[0]) {13 outerChilden[0].appendChild(innerChildren[0]);14 }15 }16 17 while (outerChilden[0]) {18 rootElement.appendChild(outerChilden[0]);19 }
Ember.js 1.8-1.9
1 var 2 3 buffer 4 parsingNode 5 parsingNode.innerHTML 6 var 7 8 if (isShowing) { 9 buffer 10 parsingNode.innerHTML 11 12 while (innerChildren[13 outerChilden[14 }15 }16 17 while (outerChilden[18 rootElement.appendChild(outerChilden[19 }
STRING TEMPLATES, DOM for stitching
Tricky stuff in 1.8+
1 var string = handlebarsTemplate(context, options);2 var nodes = domHelper.parseHTML(string, morph.contextualElement);3 4 var node;5 while (node = nodes[0]) {6 rootElement.appendChild(node);7 }
Tricky stuff in 1.8+
1 var nodes = htmlbarsTemplate(context, env, morph.contextualElement);2 3 var node;4 while (node = nodes[0]) {5 rootElement.appendChild(node);6 }
HTMLBARS, 1.10
1 var root = document.createElement('div'); 2 3 root.innerHTML = "<svg><foreignObject><div></div></foreignObject></svg>"; 4 5 var svg = div.firstChild; 6 var foreignObject = svg.firstChild; 7 var div = foreignObject.firstChild; 8 9 svg.namespaceURI; // http://www.w3.org/2000/svg10 foreignObject.namespaceURI; // http://www.w3.org/2000/svg11 div.namespaceURI; // undefined
Tricky stuff in 1.8+
Tricky stuff in 1.8+
1 var root = document.createElementNS(svgNs, 'svg');! 2 ! 3 root.innerHTML = "<foreignObject><div></div></foreignObject>";! 4 ! 5 var foreignObject = root.firstChild;! 6 var div = foreignObject.firstChild;! 7 !
8 svg.namespaceURI; // http://www.w3.org/2000/svg! 9 foreignObject.namespaceURI; // http://www.w3.org/2000/svg!10 div.namespaceURI; // undefined!
Tricky stuff in 1.8+HTMLBARS, 1.10
1 var template = htmlbarsCompile( 2 "<foreignObject><div></div></foreignObject>" 3 ); 4 // so long as contextualElement is an SVG tag... 5 var nodes = template(context, env, morph.contextualElement); 6 7 var foreignObject = nodes[0]; 8 var div = foreignObject.firstChild; 9 10 foreignObject.namespaceURI; // http://www.w3.org/2000/svg11 div.namespaceURI; // undefined
• JS String (.jst, Ember <1.10) • HTML (Angular, Polymer) • JavaScript (React, Ember > 1.9,
Mithril)
Recommended