UNPKG

3.74 kBJavaScriptView Raw
1
2/* litejs.com/MIT-LICENSE.txt */
3
4
5
6!function(SVGElement, document, bindings) {
7 var ns = "http://www.w3.org/2000/svg"
8 , xlinkNs = "http://www.w3.org/1999/xlink"
9 , svg = document.createElementNS && document.createElementNS(ns, "svg").createSVGRect
10 , proto = SVGElement && SVGElement.prototype // From IE9
11
12 if (!svg || !proto) {
13 return
14 }
15
16 "svg circle clipPath defs g path rect text stop use line linearGradient".replace(/\w+/g, populateSvgElements)
17 //http://stackoverflow.com/questions/5736398/how-to-calculate-the-svg-path-for-an-arc-of-a-circle
18 function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
19 var angleInRadians = (angleInDegrees - 90) * Math.PI / 180.0
20 return {
21 x: centerX + (radius * Math.cos(angleInRadians)),
22 y: centerY + (radius * Math.sin(angleInRadians))
23 }
24 }
25 function describeArc(x, y, radius, startAngle, endAngle) {
26 var start = polarToCartesian(x, y, radius, endAngle)
27 , end = polarToCartesian(x, y, radius, startAngle)
28 , arcSweep = endAngle - startAngle <= 180 ? "0" : "1"
29 , d = [
30 "M", start.x, start.y,
31 "A", radius, radius, 0, arcSweep, 0, end.x, end.y
32 ].join(" ")
33 return d
34 }
35 bindings.arc = function(el, startAngle, endAngle, radius, x, y) {
36 var center = (y && x && radius) || el.viewportElement.viewBox.baseVal.width >> 1
37 // var length = path.getTotalLength();
38 el.setAttribute("d", describeArc(
39 x || center,
40 y || center,
41 radius || center,
42 3.6 * startAngle,
43 3.6 * endAngle
44 ))
45 }
46 bindings.xlink = function(el, href) {
47 // https://gist.github.com/leonderijke/c5cf7c5b2e424c0061d2
48 el.setAttributeNS(xlinkNs, "xlink:href", href)
49 }
50 bindings.xlink.once=1
51
52 function drawLine(node) {
53 var length = node.getTotalLength()
54 node.style.transition = node.style.WebkitTransition = "none"
55 node.style.strokeDasharray = length + " " + length
56 node.style.strokeDashoffset = length
57 // Trigger a layout so styles are calculated & the browser
58 // picks up the starting position before animating
59 node.getBoundingClientRect()
60 node.style.transition = node.style.WebkitTransition = "stroke-dashoffset 5s ease .5s"
61 node.style.strokeDashoffset = "0"
62 }
63 var arch1 = "a? ? 0 1 0 ? -?".split("?")
64 , arch2 = "a? ? 0 1 0 ? ?".split("?")
65 bindings.svgLine = function(el, points, opts) {
66 opts = opts || {}
67 var i = 0
68 , dataPoints = []
69 , radius = opts.radius || 0
70 , d = ["M" + (100 - radius), points[0]]
71 if (radius) {
72 d.push(arch1.join(radius), arch2.join(radius))
73 }
74
75 for (; ++i < points.length; ) {
76 if (opts.smooth) {
77 d.push("C" + (i * 100 + 50 - radius), points[i-1] + "," + (i * 100 + 50 + radius), points[i] + "," + (i * 100 + 100 - radius), points[i])
78 } else {
79 d.push("L" + (i * 100 + 100 - radius), points[i])
80 }
81 if (radius) {
82 d.push(arch1.join(radius), arch2.join(radius))
83 }
84 //dataPoints.push(El("circle[r=3][cx=" + (i * 100 + 100) + "][cy=" + points[i] + "]"))
85 }
86 el.setAttribute("d", d.join(" "))
87 drawLine(el)
88 el.parentNode.append(dataPoints)
89 }
90 var svgToLastActive
91 bindings.initChart = function(el) {
92 El.on(el, "mouseout", function(e) {
93 if (svgToLastActive && e.target == el) {
94 El.rmClass(svgToLastActive, "is-active")
95 svgToLastActive = null
96 }
97 })
98 }
99 // riseOnHover
100 bindings.svgToLast = function(el) {
101 El.on(el, "mouseover", function() {
102 if (!svgToLastActive || el != el.parentNode.lastChild) {
103 if (svgToLastActive) El.rmClass(svgToLastActive, "line-active")
104 El.append(el.parentNode, el)
105 El.addClass(el, "is-active")
106 svgToLastActive = el
107 }
108 })
109 }
110 bindings.svgToLast.once =
111 bindings.initChart.once = 1
112 function populateSvgElements(name) {
113 El.cache[name] = document.createElementNS(ns, name)
114 }
115}(this.SVGElement, document, El.bindings)
116