| 1 |
(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){ |
| 2 |
// Generated by LiveScript 1.4.0 |
| 3 |
var presets, simpleStr, wrap, slice$ = [].slice, toString$ = {}.toString; |
| 4 |
presets = require('./presets').presets; |
| 5 |
simpleStr = function(arr){ |
| 6 |
return arr.join(''); |
| 7 |
}; |
| 8 |
wrap = function(content){ |
| 9 |
return "data:image/svg+xml;base64," + btoa(content); |
| 10 |
}; |
| 11 |
(function(){ |
| 12 |
var make, handler, ldBar; |
| 13 |
make = { |
| 14 |
head: function(viewBox){ |
| 15 |
return "<?xml version=\"1.0\" encoding=\"utf-8\"?>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"" + viewBox + "\">"; |
| 16 |
}, |
| 17 |
gradient: function(dir, dur){ |
| 18 |
var colors, ret, len, gx, gy, x, y, i$, i, idx; |
| 19 |
dir == null && (dir = 45); |
| 20 |
dur == null && (dur = 1); |
| 21 |
colors = slice$.call(arguments, 2); |
| 22 |
ret = [this.head("0 0 100 100")]; |
| 23 |
len = colors.length * 4 + 1; |
| 24 |
dir = dir * Math.PI / 180; |
| 25 |
gx = Math.pow(Math.cos(dir), 2); |
| 26 |
gy = Math.sqrt(gx - Math.pow(gx, 2)); |
| 27 |
if (dir > Math.PI * 0.25) { |
| 28 |
gy = Math.pow(Math.sin(dir), 2); |
| 29 |
gx = Math.sqrt(gy - Math.pow(gy, 2)); |
| 30 |
} |
| 31 |
x = gx * 100; |
| 32 |
y = gy * 100; |
| 33 |
ret.push("<defs><linearGradient id=\"gradient\" x1=\"0\" x2=\"" + gx + "\" y1=\"0\" y2=\"" + gy + "\">"); |
| 34 |
for (i$ = 0; i$ < len; ++i$) { |
| 35 |
i = i$; |
| 36 |
idx = i * 100 / (len - 1); |
| 37 |
ret.push("<stop offset=\"" + idx + "%\" stop-color=\"" + colors[i % colors.length] + "\"/>"); |
| 38 |
} |
| 39 |
ret.push("</linearGradient></defs>\n<rect x=\"0\" y=\"0\" width=\"400\" height=\"400\" fill=\"url(#gradient)\">\n<animateTransform attributeName=\"transform\" type=\"translate\" from=\"-" + x + ",-" + y + "\"\nto=\"0,0\" dur=\"" + dur + "s\" repeatCount=\"indefinite\"/></rect></svg>"); |
| 40 |
return wrap(ret.join("")); |
| 41 |
}, |
| 42 |
stripe: function(c1, c2, dur){ |
| 43 |
var ret, i; |
| 44 |
c1 == null && (c1 = '#b4b4b4'); |
| 45 |
c2 == null && (c2 = '#e6e6e6'); |
| 46 |
dur == null && (dur = 1); |
| 47 |
ret = [this.head("0 0 100 100")]; |
| 48 |
ret = ret.concat([ |
| 49 |
"<rect fill=\"" + c2 + "\" width=\"100\" height=\"100\"/>", "<g><g>", (function(){ |
| 50 |
var i$, results$ = []; |
| 51 |
for (i$ = 0; i$ < 13; ++i$) { |
| 52 |
i = i$; |
| 53 |
results$.push(("<polygon fill=\"" + c1 + "\" ") + ("points=\"" + (-90 + i * 20) + ",100 " + (-100 + i * 20) + ",") + ("100 " + (-60 + i * 20) + ",0 " + (-50 + i * 20) + ",0 \"/>")); |
| 54 |
} |
| 55 |
return results$; |
| 56 |
}()).join(""), "</g><animateTransform attributeName=\"transform\" type=\"translate\" ", "from=\"0,0\" to=\"20,0\" dur=\"" + dur + "s\" repeatCount=\"indefinite\"/></g></svg>" |
| 57 |
].join("")); |
| 58 |
return wrap(ret); |
| 59 |
}, |
| 60 |
bubble: function(c1, c2, count, dur, size, sw){ |
| 61 |
var ret, i$, i, idx, x, r, d; |
| 62 |
c1 == null && (c1 = '#39d'); |
| 63 |
c2 == null && (c2 = '#9cf'); |
| 64 |
count == null && (count = 15); |
| 65 |
dur == null && (dur = 1); |
| 66 |
size == null && (size = 6); |
| 67 |
sw == null && (sw = 1); |
| 68 |
ret = [this.head("0 0 200 200"), "<rect x=\"0\" y=\"0\" width=\"200\" height=\"200\" fill=\"" + c1 + "\"/>"]; |
| 69 |
for (i$ = 0; i$ < count; ++i$) { |
| 70 |
i = i$; |
| 71 |
idx = -(i / count) * dur; |
| 72 |
x = Math.random() * 184 + 8; |
| 73 |
r = (Math.random() * 0.7 + 0.3) * size; |
| 74 |
d = dur * (1 + Math.random() * 0.5); |
| 75 |
ret.push(["<circle cx=\"" + x + "\" cy=\"0\" r=\"" + r + "\" fill=\"none\" stroke=\"" + c2 + "\" stroke-width=\"" + sw + "\">", "<animate attributeName=\"cy\" values=\"190;-10\" times=\"0;1\" ", "dur=\"" + d + "s\" begin=\"" + idx + "s\" repeatCount=\"indefinite\"/>", "</circle>", "<circle cx=\"" + x + "\" cy=\"0\" r=\"" + r + "\" fill=\"none\" stroke=\"" + c2 + "\" stroke-width=\"" + sw + "\">", "<animate attributeName=\"cy\" values=\"390;190\" times=\"0;1\" ", "dur=\"" + d + "s\" begin=\"" + idx + "s\" repeatCount=\"indefinite\"/>", "</circle>"].join("")); |
| 76 |
} |
| 77 |
return wrap(ret.join("") + "</svg>"); |
| 78 |
} |
| 79 |
}; |
| 80 |
handler = { |
| 81 |
queue: {}, |
| 82 |
running: false, |
| 83 |
main: function(timestamp){ |
| 84 |
var keepon, removed, k, ref$, func, ret, this$ = this; |
| 85 |
keepon = false; |
| 86 |
removed = []; |
| 87 |
for (k in ref$ = this.queue) { |
| 88 |
func = ref$[k]; |
| 89 |
ret = func(timestamp); |
| 90 |
if (!ret) { |
| 91 |
removed.push(func); |
| 92 |
} |
| 93 |
keepon = keepon || ret; |
| 94 |
} |
| 95 |
for (k in ref$ = this.queue) { |
| 96 |
func = ref$[k]; |
| 97 |
if (removed.indexOf(func) >= 0) { |
| 98 |
delete this.queue[k]; |
| 99 |
} |
| 100 |
} |
| 101 |
if (keepon) { |
| 102 |
return requestAnimationFrame(function(it){ |
| 103 |
return this$.main(it); |
| 104 |
}); |
| 105 |
} else { |
| 106 |
return this.running = false; |
| 107 |
} |
| 108 |
}, |
| 109 |
add: function(key, f){ |
| 110 |
var this$ = this; |
| 111 |
if (!this.queue[key]) { |
| 112 |
this.queue[key] = f; |
| 113 |
} |
| 114 |
if (!this.running) { |
| 115 |
this.running = true; |
| 116 |
return requestAnimationFrame(function(it){ |
| 117 |
return this$.main(it); |
| 118 |
}); |
| 119 |
} |
| 120 |
} |
| 121 |
}; |
| 122 |
window.ldBar = ldBar = function(selector, option){ |
| 123 |
var xmlns, root, cls, idPrefix, id, domTree, newNode, x$, config, attr, that, isStroke, parseRes, dom, svg, text, group, length, path0, path1, patimg, img, ret, size, this$ = this; |
| 124 |
option == null && (option = {}); |
| 125 |
xmlns = { |
| 126 |
xlink: "http://www.w3.org/1999/xlink" |
| 127 |
}; |
| 128 |
root = toString$.call(selector).slice(8, -1) === 'String' ? document.querySelector(selector) : selector; |
| 129 |
if (!root.ldBar) { |
| 130 |
root.ldBar = this; |
| 131 |
} else { |
| 132 |
return root.ldBar; |
| 133 |
} |
| 134 |
cls = root.getAttribute('class') || ''; |
| 135 |
if (!~cls.indexOf('ldBar')) { |
| 136 |
root.setAttribute('class', cls + " ldBar"); |
| 137 |
} |
| 138 |
idPrefix = "ldBar-" + Math.random().toString(16).substring(2); |
| 139 |
id = { |
| 140 |
key: idPrefix, |
| 141 |
clip: idPrefix + "-clip", |
| 142 |
filter: idPrefix + "-filter", |
| 143 |
pattern: idPrefix + "-pattern", |
| 144 |
mask: idPrefix + "-mask", |
| 145 |
maskPath: idPrefix + "-mask-path" |
| 146 |
}; |
| 147 |
domTree = function(n, o){ |
| 148 |
var k, v; |
| 149 |
n = newNode(n); |
| 150 |
for (k in o) { |
| 151 |
v = o[k]; |
| 152 |
if (k !== 'attr') { |
| 153 |
n.appendChild(domTree(k, v || {})); |
| 154 |
} |
| 155 |
} |
| 156 |
n.attrs(o.attr || {}); |
| 157 |
return n; |
| 158 |
}; |
| 159 |
newNode = function(n){ |
| 160 |
return document.createElementNS("http://www.w3.org/2000/svg", n); |
| 161 |
}; |
| 162 |
x$ = document.body.__proto__.__proto__.__proto__; |
| 163 |
x$.text = function(t){ |
| 164 |
return this.appendChild(document.createTextNode(t)); |
| 165 |
}; |
| 166 |
x$.attrs = function(o){ |
| 167 |
var k, v, ret, results$ = []; |
| 168 |
for (k in o) { |
| 169 |
v = o[k]; |
| 170 |
ret = /([^:]+):([^:]+)/.exec(k); |
| 171 |
if (!ret || !xmlns[ret[1]]) { |
| 172 |
results$.push(this.setAttribute(k, v)); |
| 173 |
} else { |
| 174 |
results$.push(this.setAttributeNS(xmlns[ret[1]], k, v)); |
| 175 |
} |
| 176 |
} |
| 177 |
return results$; |
| 178 |
}; |
| 179 |
x$.styles = function(o){ |
| 180 |
var k, v, results$ = []; |
| 181 |
for (k in o) { |
| 182 |
v = o[k]; |
| 183 |
results$.push(this.style[k] = v); |
| 184 |
} |
| 185 |
return results$; |
| 186 |
}; |
| 187 |
x$.append = function(n){ |
| 188 |
var r; |
| 189 |
return this.appendChild(r = document.createElementNS("http://www.w3.og/2000/svg", n)); |
| 190 |
}; |
| 191 |
x$.attr = function(n, v){ |
| 192 |
if (v != null) { |
| 193 |
return this.setAttribute(n, v); |
| 194 |
} else { |
| 195 |
return this.getAttribute(n); |
| 196 |
} |
| 197 |
}; |
| 198 |
config = { |
| 199 |
"type": 'stroke', |
| 200 |
"img": '', |
| 201 |
"path": 'M10 10L90 10M90 8M90 12', |
| 202 |
"fill-dir": 'btt', |
| 203 |
"fill": '#25b', |
| 204 |
"fill-background": '#ddd', |
| 205 |
"fill-background-extrude": 3, |
| 206 |
"pattern-size": null, |
| 207 |
"stroke-dir": 'normal', |
| 208 |
"stroke": '#25b', |
| 209 |
"stroke-width": '3', |
| 210 |
"stroke-trail": '#ddd', |
| 211 |
"stroke-trail-width": 0.5, |
| 212 |
"duration": 1, |
| 213 |
"easing": 'linear', |
| 214 |
"value": 0, |
| 215 |
"img-size": null, |
| 216 |
"bbox": null, |
| 217 |
"set-dim": true, |
| 218 |
"aspect-ratio": "xMidYMid", |
| 219 |
"min": 0, |
| 220 |
"max": 100 |
| 221 |
}; |
| 222 |
config["preset"] = root.getAttribute("data-preset") || option["preset"]; |
| 223 |
if (config.preset != null) { |
| 224 |
import$(config, presets[config.preset]); |
| 225 |
} |
| 226 |
for (attr in config) { |
| 227 |
if (that = that = root.getAttribute("data-" + attr)) { |
| 228 |
config[attr] = that; |
| 229 |
} |
| 230 |
} |
| 231 |
import$(config, option); |
| 232 |
if (config.img) { |
| 233 |
config.path = null; |
| 234 |
} |
| 235 |
isStroke = config.type === 'stroke'; |
| 236 |
parseRes = function(v){ |
| 237 |
var parser, ret; |
| 238 |
parser = /data:ldbar\/res,([^()]+)\(([^)]+)\)/; |
| 239 |
ret = parser.exec(v); |
| 240 |
if (!ret) { |
| 241 |
return v; |
| 242 |
} |
| 243 |
return ret = make[ret[1]].apply(make, ret[2].split(',')); |
| 244 |
}; |
| 245 |
config.fill = parseRes(config.fill); |
| 246 |
config.stroke = parseRes(config.stroke); |
| 247 |
if (config["set-dim"] === 'false') { |
| 248 |
config["set-dim"] = false; |
| 249 |
} |
| 250 |
dom = { |
| 251 |
attr: { |
| 252 |
"xmlns:xlink": 'http://www.w3.org/1999/xlink', |
| 253 |
preserveAspectRatio: config["aspect-ratio"], |
| 254 |
width: "100%", |
| 255 |
height: "100%" |
| 256 |
}, |
| 257 |
defs: { |
| 258 |
filter: { |
| 259 |
attr: { |
| 260 |
id: id.filter, |
| 261 |
x: -1, |
| 262 |
y: -1, |
| 263 |
width: 3, |
| 264 |
height: 3 |
| 265 |
}, |
| 266 |
feMorphology: { |
| 267 |
attr: { |
| 268 |
operator: +config["fill-background-extrude"] >= 0 ? 'dilate' : 'erode', |
| 269 |
radius: Math.abs(+config["fill-background-extrude"]) |
| 270 |
} |
| 271 |
}, |
| 272 |
feColorMatrix: { |
| 273 |
attr: { |
| 274 |
values: '0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0', |
| 275 |
result: "cm" |
| 276 |
} |
| 277 |
} |
| 278 |
}, |
| 279 |
mask: { |
| 280 |
attr: { |
| 281 |
id: id.mask |
| 282 |
}, |
| 283 |
image: { |
| 284 |
attr: { |
| 285 |
"xlink:href": config.img, |
| 286 |
filter: "url(#" + id.filter + ")", |
| 287 |
x: 0, |
| 288 |
y: 0, |
| 289 |
width: 100, |
| 290 |
height: 100, |
| 291 |
preserveAspectRatio: config["aspect-ratio"] |
| 292 |
} |
| 293 |
} |
| 294 |
}, |
| 295 |
g: { |
| 296 |
mask: { |
| 297 |
attr: { |
| 298 |
id: id.maskPath |
| 299 |
}, |
| 300 |
path: { |
| 301 |
attr: { |
| 302 |
d: config.path || "", |
| 303 |
fill: '#fff', |
| 304 |
stroke: '#fff', |
| 305 |
filter: "url(#" + id.filter + ")" |
| 306 |
} |
| 307 |
} |
| 308 |
} |
| 309 |
}, |
| 310 |
clipPath: { |
| 311 |
attr: { |
| 312 |
id: id.clip |
| 313 |
}, |
| 314 |
rect: { |
| 315 |
attr: { |
| 316 |
'class': 'mask', |
| 317 |
fill: '#000' |
| 318 |
} |
| 319 |
} |
| 320 |
}, |
| 321 |
pattern: { |
| 322 |
attr: { |
| 323 |
id: id.pattern, |
| 324 |
patternUnits: 'userSpaceOnUse', |
| 325 |
x: 0, |
| 326 |
y: 0, |
| 327 |
width: 300, |
| 328 |
height: 300 |
| 329 |
}, |
| 330 |
image: { |
| 331 |
attr: { |
| 332 |
x: 0, |
| 333 |
y: 0, |
| 334 |
width: 300, |
| 335 |
height: 300 |
| 336 |
} |
| 337 |
} |
| 338 |
} |
| 339 |
} |
| 340 |
}; |
| 341 |
svg = domTree('svg', dom); |
| 342 |
text = document.createElement('div'); |
| 343 |
text.setAttribute('class', 'ldBar-label'); |
| 344 |
root.appendChild(svg); |
| 345 |
root.appendChild(text); |
| 346 |
group = [0, 0]; |
| 347 |
length = 0; |
| 348 |
this.fit = function(){ |
| 349 |
var that, box, d, rect; |
| 350 |
if (that = config["bbox"]) { |
| 351 |
box = that.split(' ').map(function(it){ |
| 352 |
return +it.trim(); |
| 353 |
}); |
| 354 |
box = { |
| 355 |
x: box[0], |
| 356 |
y: box[1], |
| 357 |
width: box[2], |
| 358 |
height: box[3] |
| 359 |
}; |
| 360 |
} else { |
| 361 |
box = group[1].getBBox(); |
| 362 |
} |
| 363 |
if (!box || box.width === 0 || box.height === 0) { |
| 364 |
box = { |
| 365 |
x: 0, |
| 366 |
y: 0, |
| 367 |
width: 100, |
| 368 |
height: 100 |
| 369 |
}; |
| 370 |
} |
| 371 |
d = Math.max.apply(null, ['stroke-width', 'stroke-trail-width', 'fill-background-extrude'].map(function(it){ |
| 372 |
return config[it]; |
| 373 |
})) * 1.5; |
| 374 |
svg.attrs({ |
| 375 |
viewBox: [box.x - d, box.y - d, box.width + d * 2, box.height + d * 2].join(" ") |
| 376 |
}); |
| 377 |
if (config["set-dim"]) { |
| 378 |
['width', 'height'].map(function(it){ |
| 379 |
if (!root.style[it] || this$.fit[it]) { |
| 380 |
root.style[it] = (box[it] + d * 2) + "px"; |
| 381 |
return this$.fit[it] = true; |
| 382 |
} |
| 383 |
}); |
| 384 |
} |
| 385 |
rect = group[0].querySelector('rect'); |
| 386 |
if (rect) { |
| 387 |
return rect.attrs({ |
| 388 |
x: box.x - d, |
| 389 |
y: box.y - d, |
| 390 |
width: box.width + d * 2, |
| 391 |
height: box.height + d * 2 |
| 392 |
}); |
| 393 |
} |
| 394 |
}; |
| 395 |
if (config.path) { |
| 396 |
if (isStroke) { |
| 397 |
group[0] = domTree('g', { |
| 398 |
path: { |
| 399 |
attr: { |
| 400 |
d: config.path, |
| 401 |
fill: 'none', |
| 402 |
'class': 'baseline' |
| 403 |
} |
| 404 |
} |
| 405 |
}); |
| 406 |
} else { |
| 407 |
group[0] = domTree('g', { |
| 408 |
rect: { |
| 409 |
attr: { |
| 410 |
x: 0, |
| 411 |
y: 0, |
| 412 |
width: 100, |
| 413 |
height: 100, |
| 414 |
mask: "url(#" + id.maskPath + ")", |
| 415 |
fill: config["fill-background"], |
| 416 |
'class': 'frame' |
| 417 |
} |
| 418 |
} |
| 419 |
}); |
| 420 |
} |
| 421 |
svg.appendChild(group[0]); |
| 422 |
group[1] = domTree('g', { |
| 423 |
path: { |
| 424 |
attr: { |
| 425 |
d: config.path, |
| 426 |
'class': isStroke ? 'mainline' : 'solid', |
| 427 |
"clip-path": config.type === 'fill' ? "url(#" + id.clip + ")" : '' |
| 428 |
} |
| 429 |
} |
| 430 |
}); |
| 431 |
svg.appendChild(group[1]); |
| 432 |
path0 = group[0].querySelector(isStroke ? 'path' : 'rect'); |
| 433 |
path1 = group[1].querySelector('path'); |
| 434 |
if (isStroke) { |
| 435 |
path1.attrs({ |
| 436 |
fill: 'none' |
| 437 |
}); |
| 438 |
} |
| 439 |
patimg = svg.querySelector('pattern image'); |
| 440 |
img = new Image(); |
| 441 |
img.addEventListener('load', function(){ |
| 442 |
var box, that; |
| 443 |
box = (that = config["pattern-size"]) |
| 444 |
? { |
| 445 |
width: +that, |
| 446 |
height: +that |
| 447 |
} |
| 448 |
: img.width && img.height |
| 449 |
? { |
| 450 |
width: img.width, |
| 451 |
height: img.height |
| 452 |
} |
| 453 |
: { |
| 454 |
width: 300, |
| 455 |
height: 300 |
| 456 |
}; |
| 457 |
svg.querySelector('pattern').attrs({ |
| 458 |
width: box.width, |
| 459 |
height: box.height |
| 460 |
}); |
| 461 |
return patimg.attrs({ |
| 462 |
width: box.width, |
| 463 |
height: box.height |
| 464 |
}); |
| 465 |
}); |
| 466 |
if (/.+\..+|^data:/.exec(!isStroke |
| 467 |
? config.fill |
| 468 |
: config.stroke)) { |
| 469 |
img.src = !isStroke |
| 470 |
? config.fill |
| 471 |
: config.stroke; |
| 472 |
patimg.attrs({ |
| 473 |
"xlink:href": img.src |
| 474 |
}); |
| 475 |
} |
| 476 |
if (isStroke) { |
| 477 |
path0.attrs({ |
| 478 |
stroke: config["stroke-trail"], |
| 479 |
"stroke-width": config["stroke-trail-width"] |
| 480 |
}); |
| 481 |
path1.attrs({ |
| 482 |
"stroke-width": config["stroke-width"], |
| 483 |
stroke: /.+\..+|^data:/.exec(config.stroke) |
| 484 |
? "url(#" + id.pattern + ")" |
| 485 |
: config.stroke |
| 486 |
}); |
| 487 |
} |
| 488 |
if (config.fill && !isStroke) { |
| 489 |
path1.attrs({ |
| 490 |
fill: /.+\..+|^data:/.exec(config.fill) |
| 491 |
? "url(#" + id.pattern + ")" |
| 492 |
: config.fill |
| 493 |
}); |
| 494 |
} |
| 495 |
length = path1.getTotalLength(); |
| 496 |
this.fit(); |
| 497 |
this.inited = true; |
| 498 |
} else if (config.img) { |
| 499 |
if (config["img-size"]) { |
| 500 |
ret = config["img-size"].split(','); |
| 501 |
size = { |
| 502 |
width: +ret[0], |
| 503 |
height: +ret[1] |
| 504 |
}; |
| 505 |
} else { |
| 506 |
size = { |
| 507 |
width: 100, |
| 508 |
height: 100 |
| 509 |
}; |
| 510 |
} |
| 511 |
group[0] = domTree('g', { |
| 512 |
rect: { |
| 513 |
attr: { |
| 514 |
x: 0, |
| 515 |
y: 0, |
| 516 |
width: 100, |
| 517 |
height: 100, |
| 518 |
mask: "url(#" + id.mask + ")", |
| 519 |
fill: config["fill-background"] |
| 520 |
} |
| 521 |
} |
| 522 |
}); |
| 523 |
svg.querySelector('mask image').attrs({ |
| 524 |
width: size.width, |
| 525 |
height: size.height |
| 526 |
}); |
| 527 |
group[1] = domTree('g', { |
| 528 |
image: { |
| 529 |
attr: { |
| 530 |
width: size.width, |
| 531 |
height: size.height, |
| 532 |
x: 0, |
| 533 |
y: 0, |
| 534 |
preserveAspectRatio: config["aspect-ratio"], |
| 535 |
"clip-path": config.type === 'fill' ? "url(#" + id.clip + ")" : '', |
| 536 |
"xlink:href": config.img, |
| 537 |
'class': 'solid' |
| 538 |
} |
| 539 |
} |
| 540 |
}); |
| 541 |
img = new Image(); |
| 542 |
img.addEventListener('load', function(){ |
| 543 |
var ret, size; |
| 544 |
if (config["img-size"]) { |
| 545 |
ret = config["img-size"].split(','); |
| 546 |
size = { |
| 547 |
width: +ret[0], |
| 548 |
height: +ret[1] |
| 549 |
}; |
| 550 |
} else if (img.width && img.height) { |
| 551 |
size = { |
| 552 |
width: img.width, |
| 553 |
height: img.height |
| 554 |
}; |
| 555 |
} else { |
| 556 |
size = { |
| 557 |
width: 100, |
| 558 |
height: 100 |
| 559 |
}; |
| 560 |
} |
| 561 |
svg.querySelector('mask image').attrs({ |
| 562 |
width: size.width, |
| 563 |
height: size.height |
| 564 |
}); |
| 565 |
group[1].querySelector('image').attrs({ |
| 566 |
width: size.width, |
| 567 |
height: size.height |
| 568 |
}); |
| 569 |
this$.fit(); |
| 570 |
this$.set(undefined, false); |
| 571 |
return this$.inited = true; |
| 572 |
}); |
| 573 |
img.src = config.img; |
| 574 |
svg.appendChild(group[0]); |
| 575 |
svg.appendChild(group[1]); |
| 576 |
} |
| 577 |
svg.attrs({ |
| 578 |
width: '100%', |
| 579 |
height: '100%' |
| 580 |
}); |
| 581 |
this.transition = { |
| 582 |
value: { |
| 583 |
src: 0, |
| 584 |
des: 0 |
| 585 |
}, |
| 586 |
time: {}, |
| 587 |
ease: function(t, b, c, d){ |
| 588 |
t = t / (d * 0.5); |
| 589 |
if (t < 1) { |
| 590 |
return c * 0.5 * t * t + b; |
| 591 |
} |
| 592 |
t = t - 1; |
| 593 |
return -c * 0.5 * (t * (t - 2) - 1) + b; |
| 594 |
}, |
| 595 |
handler: function(time, doTransition){ |
| 596 |
var ref$, min, max, dv, dt, dur, v, p, node, style, box, dir; |
| 597 |
doTransition == null && (doTransition = true); |
| 598 |
if (this.time.src == null) { |
| 599 |
this.time.src = time; |
| 600 |
} |
| 601 |
ref$ = [config["min"], config["max"]], min = ref$[0], max = ref$[1]; |
| 602 |
ref$ = [this.value.des - this.value.src, (time - this.time.src) * 0.001, +config["duration"] || 1], dv = ref$[0], dt = ref$[1], dur = ref$[2]; |
| 603 |
v = doTransition |
| 604 |
? Math.round(this.ease(dt, this.value.src, dv, dur)) |
| 605 |
: this.value.des; |
| 606 |
v >= min || (v = min); |
| 607 |
v <= max || (v = max); |
| 608 |
text.textContent = v; |
| 609 |
p = 100.0 * (v - min) / (max - min); |
| 610 |
if (isStroke) { |
| 611 |
node = path1; |
| 612 |
style = { |
| 613 |
"stroke-dasharray": config["stroke-dir"] === 'reverse' |
| 614 |
? "0 " + length * (100 - p) * 0.01 + " " + length * p * 0.01 + " 0" |
| 615 |
: p * 0.01 * length + " " + ((100 - p) * 0.01 * length + 1) |
| 616 |
}; |
| 617 |
} else { |
| 618 |
box = group[1].getBBox(); |
| 619 |
dir = config["fill-dir"]; |
| 620 |
style = dir === 'btt' || !dir |
| 621 |
? { |
| 622 |
y: box.y + box.height * (100 - p) * 0.01, |
| 623 |
height: box.height * p * 0.01, |
| 624 |
x: box.x, |
| 625 |
width: box.width |
| 626 |
} |
| 627 |
: dir === 'ttb' |
| 628 |
? { |
| 629 |
y: box.y, |
| 630 |
height: box.height * p * 0.01, |
| 631 |
x: box.x, |
| 632 |
width: box.width |
| 633 |
} |
| 634 |
: dir === 'ltr' |
| 635 |
? { |
| 636 |
y: box.y, |
| 637 |
height: box.height, |
| 638 |
x: box.x, |
| 639 |
width: box.width * p * 0.01 |
| 640 |
} |
| 641 |
: dir === 'rtl' ? { |
| 642 |
y: box.y, |
| 643 |
height: box.height, |
| 644 |
x: box.x + box.width * (100 - p) * 0.01, |
| 645 |
width: box.width * p * 0.01 |
| 646 |
} : void 8; |
| 647 |
node = svg.querySelector('rect'); |
| 648 |
} |
| 649 |
node.attrs(style); |
| 650 |
if (dt >= dur) { |
| 651 |
delete this.time.src; |
| 652 |
return false; |
| 653 |
} |
| 654 |
return true; |
| 655 |
}, |
| 656 |
start: function(src, des, doTransition){ |
| 657 |
var ref$, this$ = this; |
| 658 |
ref$ = this.value; |
| 659 |
ref$.src = src; |
| 660 |
ref$.des = des; |
| 661 |
!!(root.offsetWidth || root.offsetHeight || root.getClientRects().length); |
| 662 |
if (!doTransition || !(root.offsetWidth || root.offsetHeight || root.getClientRects().length)) { |
| 663 |
this.time.src = 0; |
| 664 |
this.handler(1000, false); |
| 665 |
return; |
| 666 |
} |
| 667 |
return handler.add(id.key, function(time){ |
| 668 |
return this$.handler(time); |
| 669 |
}); |
| 670 |
} |
| 671 |
}; |
| 672 |
this.set = function(v, doTransition){ |
| 673 |
var src, des; |
| 674 |
doTransition == null && (doTransition = true); |
| 675 |
src = this.value || 0; |
| 676 |
if (v != null) { |
| 677 |
this.value = v; |
| 678 |
} else { |
| 679 |
v = this.value; |
| 680 |
} |
| 681 |
des = this.value; |
| 682 |
return this.transition.start(src, des, doTransition); |
| 683 |
}; |
| 684 |
this.set(+config.value || 0, false); |
| 685 |
return this; |
| 686 |
}; |
| 687 |
return window.addEventListener('load', function(){ |
| 688 |
var i$, ref$, len$, node, results$ = []; |
| 689 |
for (i$ = 0, len$ = (ref$ = document.querySelectorAll('.ldBar')).length; i$ < len$; ++i$) { |
| 690 |
node = ref$[i$]; |
| 691 |
if (!node.ldBar) { |
| 692 |
results$.push(node.ldBar = new ldBar(node)); |
| 693 |
} |
| 694 |
} |
| 695 |
return results$; |
| 696 |
}, false); |
| 697 |
})(); |
| 698 |
module.exports = ldBar; |
| 699 |
function import$(obj, src){ |
| 700 |
var own = {}.hasOwnProperty; |
| 701 |
for (var key in src) if (own.call(src, key)) obj[key] = src[key]; |
| 702 |
return obj; |
| 703 |
} |
| 704 |
|
| 705 |
|
| 706 |
|
| 707 |
},{"./presets":2}],2:[function(require,module,exports){ |
| 708 |
// Generated by LiveScript 1.4.0 |
| 709 |
var presets, out$ = typeof exports != 'undefined' && exports || this; |
| 710 |
out$.presets = presets = { |
| 711 |
rainbow: { |
| 712 |
"type": 'stroke', |
| 713 |
"path": 'M10 10L90 10', |
| 714 |
"stroke": 'data:ldbar/res,gradient(0,1,#a551df,#fd51ad,#ff7f82,#ffb874,#ffeb90)', |
| 715 |
"bbox": "10 10 80 10" |
| 716 |
}, |
| 717 |
energy: { |
| 718 |
"type": 'fill', |
| 719 |
"path": 'M15 5L85 5A5 5 0 0 1 85 15L15 15A5 5 0 0 1 15 5', |
| 720 |
"stroke": '#f00', |
| 721 |
"fill": 'data:ldbar/res,gradient(45,2,#4e9,#8fb,#4e9)', |
| 722 |
"fill-dir": "ltr", |
| 723 |
"fill-background": '#444', |
| 724 |
"fill-background-extrude": 1, |
| 725 |
"bbox": "10 5 80 10" |
| 726 |
}, |
| 727 |
stripe: { |
| 728 |
"type": 'fill', |
| 729 |
"path": 'M15 5L85 5A5 5 0 0 1 85 15L15 15A5 5 0 0 1 15 5', |
| 730 |
"stroke": '#f00', |
| 731 |
"fill": 'data:ldbar/res,stripe(#25b,#58e,1)', |
| 732 |
"fill-dir": "ltr", |
| 733 |
"fill-background": '#ddd', |
| 734 |
"fill-background-extrude": 1, |
| 735 |
"bbox": "10 5 80 10" |
| 736 |
}, |
| 737 |
text: { |
| 738 |
"type": 'fill', |
| 739 |
"img": "data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"70\" height=\"20\" viewBox=\"0 0 70 20\"><text x=\"35\" y=\"10\" text-anchor=\"middle\" dominant-baseline=\"central\" font-family=\"arial\">LOADING</text></svg>", |
| 740 |
"fill-background-extrude": 1.3, |
| 741 |
"pattern-size": 100, |
| 742 |
"fill-dir": "ltr", |
| 743 |
"img-size": "70,20", |
| 744 |
"bbox": "0 0 70 20" |
| 745 |
}, |
| 746 |
line: { |
| 747 |
"type": 'stroke', |
| 748 |
"path": 'M10 10L90 10', |
| 749 |
"stroke": '#25b', |
| 750 |
"stroke-width": 3, |
| 751 |
"stroke-trail": '#ddd', |
| 752 |
"stroke-trail-width": 1, |
| 753 |
"bbox": "10 10 80 10" |
| 754 |
}, |
| 755 |
fan: { |
| 756 |
"type": 'stroke', |
| 757 |
"path": 'M10 90A40 40 0 0 1 90 90', |
| 758 |
"fill-dir": 'btt', |
| 759 |
"fill": '#25b', |
| 760 |
"fill-background": '#ddd', |
| 761 |
"fill-background-extrude": 3, |
| 762 |
"stroke-dir": 'normal', |
| 763 |
"stroke": '#25b', |
| 764 |
"stroke-width": '3', |
| 765 |
"stroke-trail": '#ddd', |
| 766 |
"stroke-trail-width": 0.5, |
| 767 |
"bbox": "10 50 80 40" |
| 768 |
}, |
| 769 |
circle: { |
| 770 |
"type": 'stroke', |
| 771 |
"path": 'M50 10A40 40 0 0 1 50 90A40 40 0 0 1 50 10', |
| 772 |
"fill-dir": 'btt', |
| 773 |
"fill": '#25b', |
| 774 |
"fill-background": '#ddd', |
| 775 |
"fill-background-extrude": 3, |
| 776 |
"stroke-dir": 'normal', |
| 777 |
"stroke": '#25b', |
| 778 |
"stroke-width": '3', |
| 779 |
"stroke-trail": '#ddd', |
| 780 |
"stroke-trail-width": 0.5, |
| 781 |
"bbox": "10 10 80 80" |
| 782 |
}, |
| 783 |
bubble: { |
| 784 |
"type": 'fill', |
| 785 |
"path": 'M50 10A40 40 0 0 1 50 90A40 40 0 0 1 50 10', |
| 786 |
"fill-dir": 'btt', |
| 787 |
"fill": 'data:ldbar/res,bubble(#39d,#cef)', |
| 788 |
"pattern-size": "150", |
| 789 |
"fill-background": '#ddd', |
| 790 |
"fill-background-extrude": 2, |
| 791 |
"stroke-dir": 'normal', |
| 792 |
"stroke": '#25b', |
| 793 |
"stroke-width": '3', |
| 794 |
"stroke-trail": '#ddd', |
| 795 |
"stroke-trail-width": 0.5, |
| 796 |
"bbox": "10 10 80 80" |
| 797 |
} |
| 798 |
}; |
| 799 |
},{}]},{},[1]) |
| 800 |
|
