| 1 |
/** |
| 2 |
* @license MIT or GPL-2.0 |
| 3 |
* @fileOverview Favico animations |
| 4 |
* @author Miroslav Magda, http://blog.ejci.net |
| 5 |
* @source: https://github.com/ejci/favico.js |
| 6 |
* @version 0.3.10 |
| 7 |
*/ |
| 8 |
|
| 9 |
/** |
| 10 |
* Create new favico instance |
| 11 |
* @param {Object} Options |
| 12 |
* @return {Object} Favico object |
| 13 |
* @example |
| 14 |
* var favico = new Favico({ |
| 15 |
* bgColor : '#d00', |
| 16 |
* textColor : '#fff', |
| 17 |
* fontFamily : 'sans-serif', |
| 18 |
* fontStyle : 'bold', |
| 19 |
* type : 'circle', |
| 20 |
* position : 'down', |
| 21 |
* animation : 'slide', |
| 22 |
* elementId: false, |
| 23 |
* element: null, |
| 24 |
* dataUrl: function(url){}, |
| 25 |
* win: window |
| 26 |
* }); |
| 27 |
*/ |
| 28 |
(function () { |
| 29 |
|
| 30 |
var Favico = (function (opt) { |
| 31 |
'use strict'; |
| 32 |
opt = (opt) ? opt : {}; |
| 33 |
var _def = { |
| 34 |
bgColor: '#d00', |
| 35 |
textColor: '#fff', |
| 36 |
fontFamily: 'sans-serif', //Arial,Verdana,Times New Roman,serif,sans-serif,... |
| 37 |
fontStyle: 'bold', //normal,italic,oblique,bold,bolder,lighter,100,200,300,400,500,600,700,800,900 |
| 38 |
type: 'circle', |
| 39 |
position: 'down', // down, up, left, leftup (upleft) |
| 40 |
animation: 'slide', |
| 41 |
elementId: false, |
| 42 |
element: null, |
| 43 |
dataUrl: false, |
| 44 |
win: window |
| 45 |
}; |
| 46 |
var _opt, _orig, _h, _w, _canvas, _context, _img, _ready, _lastBadge, _running, _readyCb, _stop, _browser, _animTimeout, _drawTimeout, _doc; |
| 47 |
|
| 48 |
_browser = {}; |
| 49 |
_browser.ff = typeof InstallTrigger != 'undefined'; |
| 50 |
_browser.chrome = !!window.chrome; |
| 51 |
_browser.opera = !!window.opera || navigator.userAgent.indexOf('Opera') >= 0; |
| 52 |
_browser.ie = /*@cc_on!@*/false; |
| 53 |
_browser.safari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0; |
| 54 |
_browser.supported = (_browser.chrome || _browser.ff || _browser.opera); |
| 55 |
|
| 56 |
var _queue = []; |
| 57 |
_readyCb = function () { |
| 58 |
}; |
| 59 |
_ready = _stop = false; |
| 60 |
/** |
| 61 |
* Initialize favico |
| 62 |
*/ |
| 63 |
var init = function () { |
| 64 |
//merge initial options |
| 65 |
_opt = merge(_def, opt); |
| 66 |
_opt.bgColor = hexToRgb(_opt.bgColor); |
| 67 |
_opt.textColor = hexToRgb(_opt.textColor); |
| 68 |
_opt.position = _opt.position.toLowerCase(); |
| 69 |
_opt.animation = (animation.types['' + _opt.animation]) ? _opt.animation : _def.animation; |
| 70 |
|
| 71 |
_doc = _opt.win.document; |
| 72 |
|
| 73 |
var isUp = _opt.position.indexOf('up') > -1; |
| 74 |
var isLeft = _opt.position.indexOf('left') > -1; |
| 75 |
|
| 76 |
//transform the animations |
| 77 |
if (isUp || isLeft) { |
| 78 |
for (var a in animation.types) { |
| 79 |
for (var i = 0; i < animation.types[a].length; i++) { |
| 80 |
var step = animation.types[a][i]; |
| 81 |
|
| 82 |
if (isUp) { |
| 83 |
if (step.y < 0.6) { |
| 84 |
step.y = step.y - 0.4; |
| 85 |
} else { |
| 86 |
step.y = step.y - 2 * step.y + (1 - step.w); |
| 87 |
} |
| 88 |
} |
| 89 |
|
| 90 |
if (isLeft) { |
| 91 |
if (step.x < 0.6) { |
| 92 |
step.x = step.x - 0.4; |
| 93 |
} else { |
| 94 |
step.x = step.x - 2 * step.x + (1 - step.h); |
| 95 |
} |
| 96 |
} |
| 97 |
|
| 98 |
animation.types[a][i] = step; |
| 99 |
} |
| 100 |
} |
| 101 |
} |
| 102 |
_opt.type = (type['' + _opt.type]) ? _opt.type : _def.type; |
| 103 |
|
| 104 |
_orig = link. getIcons(); |
| 105 |
//create temp canvas |
| 106 |
_canvas = document.createElement('canvas'); |
| 107 |
//create temp image |
| 108 |
_img = document.createElement('img'); |
| 109 |
var lastIcon = _orig[_orig.length - 1]; |
| 110 |
if (lastIcon.hasAttribute('href')) { |
| 111 |
_img.setAttribute('crossOrigin', 'anonymous'); |
| 112 |
//get width/height |
| 113 |
_img.onload = function () { |
| 114 |
_h = (_img.height > 0) ? _img.height : 32; |
| 115 |
_w = (_img.width > 0) ? _img.width : 32; |
| 116 |
_canvas.height = _h; |
| 117 |
_canvas.width = _w; |
| 118 |
_context = _canvas.getContext('2d'); |
| 119 |
icon.ready(); |
| 120 |
}; |
| 121 |
_img.setAttribute('src', lastIcon.getAttribute('href')); |
| 122 |
} else { |
| 123 |
_h = 32; |
| 124 |
_w = 32; |
| 125 |
_img.height = _h; |
| 126 |
_img.width = _w; |
| 127 |
_canvas.height = _h; |
| 128 |
_canvas.width = _w; |
| 129 |
_context = _canvas.getContext('2d'); |
| 130 |
icon.ready(); |
| 131 |
} |
| 132 |
|
| 133 |
}; |
| 134 |
/** |
| 135 |
* Icon namespace |
| 136 |
*/ |
| 137 |
var icon = {}; |
| 138 |
/** |
| 139 |
* Icon is ready (reset icon) and start animation (if ther is any) |
| 140 |
*/ |
| 141 |
icon.ready = function () { |
| 142 |
_ready = true; |
| 143 |
icon.reset(); |
| 144 |
_readyCb(); |
| 145 |
}; |
| 146 |
/** |
| 147 |
* Reset icon to default state |
| 148 |
*/ |
| 149 |
icon.reset = function () { |
| 150 |
//reset |
| 151 |
if (!_ready) { |
| 152 |
return; |
| 153 |
} |
| 154 |
_queue = []; |
| 155 |
_lastBadge = false; |
| 156 |
_running = false; |
| 157 |
_context.clearRect(0, 0, _w, _h); |
| 158 |
_context.drawImage(_img, 0, 0, _w, _h); |
| 159 |
//_stop=true; |
| 160 |
link.setIcon(_canvas); |
| 161 |
//webcam('stop'); |
| 162 |
//video('stop'); |
| 163 |
window.clearTimeout(_animTimeout); |
| 164 |
window.clearTimeout(_drawTimeout); |
| 165 |
}; |
| 166 |
/** |
| 167 |
* Start animation |
| 168 |
*/ |
| 169 |
icon.start = function () { |
| 170 |
if (!_ready || _running) { |
| 171 |
return; |
| 172 |
} |
| 173 |
var finished = function () { |
| 174 |
_lastBadge = _queue[0]; |
| 175 |
_running = false; |
| 176 |
if (_queue.length > 0) { |
| 177 |
_queue.shift(); |
| 178 |
icon.start(); |
| 179 |
} else { |
| 180 |
|
| 181 |
} |
| 182 |
}; |
| 183 |
if (_queue.length > 0) { |
| 184 |
_running = true; |
| 185 |
var run = function () { |
| 186 |
// apply options for this animation |
| 187 |
['type', 'animation', 'bgColor', 'textColor', 'fontFamily', 'fontStyle'].forEach(function (a) { |
| 188 |
if (a in _queue[0].options) { |
| 189 |
_opt[a] = _queue[0].options[a]; |
| 190 |
} |
| 191 |
}); |
| 192 |
animation.run(_queue[0].options, function () { |
| 193 |
finished(); |
| 194 |
}, false); |
| 195 |
}; |
| 196 |
if (_lastBadge) { |
| 197 |
animation.run(_lastBadge.options, function () { |
| 198 |
run(); |
| 199 |
}, true); |
| 200 |
} else { |
| 201 |
run(); |
| 202 |
} |
| 203 |
} |
| 204 |
}; |
| 205 |
|
| 206 |
/** |
| 207 |
* Badge types |
| 208 |
*/ |
| 209 |
var type = {}; |
| 210 |
var options = function (opt) { |
| 211 |
opt.n = ((typeof opt.n) === 'number') ? Math.abs(opt.n | 0) : opt.n; |
| 212 |
opt.x = _w * opt.x; |
| 213 |
opt.y = _h * opt.y; |
| 214 |
opt.w = _w * opt.w; |
| 215 |
opt.h = _h * opt.h; |
| 216 |
opt.len = ("" + opt.n).length; |
| 217 |
return opt; |
| 218 |
}; |
| 219 |
/** |
| 220 |
* Generate circle |
| 221 |
* @param {Object} opt Badge options |
| 222 |
*/ |
| 223 |
type.circle = function (opt) { |
| 224 |
opt = options(opt); |
| 225 |
var more = false; |
| 226 |
if (opt.len === 2) { |
| 227 |
opt.x = opt.x - opt.w * 0.4; |
| 228 |
opt.w = opt.w * 1.4; |
| 229 |
more = true; |
| 230 |
} else if (opt.len >= 3) { |
| 231 |
opt.x = opt.x - opt.w * 0.65; |
| 232 |
opt.w = opt.w * 1.65; |
| 233 |
more = true; |
| 234 |
} |
| 235 |
_context.clearRect(0, 0, _w, _h); |
| 236 |
_context.drawImage(_img, 0, 0, _w, _h); |
| 237 |
_context.beginPath(); |
| 238 |
_context.font = _opt.fontStyle + " " + Math.floor(opt.h * (opt.n > 99 ? 0.85 : 1)) + "px " + _opt.fontFamily; |
| 239 |
_context.textAlign = 'center'; |
| 240 |
if (more) { |
| 241 |
_context.moveTo(opt.x + opt.w / 2, opt.y); |
| 242 |
_context.lineTo(opt.x + opt.w - opt.h / 2, opt.y); |
| 243 |
_context.quadraticCurveTo(opt.x + opt.w, opt.y, opt.x + opt.w, opt.y + opt.h / 2); |
| 244 |
_context.lineTo(opt.x + opt.w, opt.y + opt.h - opt.h / 2); |
| 245 |
_context.quadraticCurveTo(opt.x + opt.w, opt.y + opt.h, opt.x + opt.w - opt.h / 2, opt.y + opt.h); |
| 246 |
_context.lineTo(opt.x + opt.h / 2, opt.y + opt.h); |
| 247 |
_context.quadraticCurveTo(opt.x, opt.y + opt.h, opt.x, opt.y + opt.h - opt.h / 2); |
| 248 |
_context.lineTo(opt.x, opt.y + opt.h / 2); |
| 249 |
_context.quadraticCurveTo(opt.x, opt.y, opt.x + opt.h / 2, opt.y); |
| 250 |
} else { |
| 251 |
_context.arc(opt.x + opt.w / 2, opt.y + opt.h / 2, opt.h / 2, 0, 2 * Math.PI); |
| 252 |
} |
| 253 |
_context.fillStyle = 'rgba(' + _opt.bgColor.r + ',' + _opt.bgColor.g + ',' + _opt.bgColor.b + ',' + opt.o + ')'; |
| 254 |
_context.fill(); |
| 255 |
_context.closePath(); |
| 256 |
_context.beginPath(); |
| 257 |
_context.stroke(); |
| 258 |
_context.fillStyle = 'rgba(' + _opt.textColor.r + ',' + _opt.textColor.g + ',' + _opt.textColor.b + ',' + opt.o + ')'; |
| 259 |
//_context.fillText((more) ? '9+' : opt.n, Math.floor(opt.x + opt.w / 2), Math.floor(opt.y + opt.h - opt.h * 0.15)); |
| 260 |
if ((typeof opt.n) === 'number' && opt.n > 999) { |
| 261 |
_context.fillText(((opt.n > 9999) ? 9 : Math.floor(opt.n / 1000)) + 'k+', Math.floor(opt.x + opt.w / 2), Math.floor(opt.y + opt.h - opt.h * 0.2)); |
| 262 |
} else { |
| 263 |
_context.fillText(opt.n, Math.floor(opt.x + opt.w / 2), Math.floor(opt.y + opt.h - opt.h * 0.15)); |
| 264 |
} |
| 265 |
_context.closePath(); |
| 266 |
}; |
| 267 |
/** |
| 268 |
* Generate rectangle |
| 269 |
* @param {Object} opt Badge options |
| 270 |
*/ |
| 271 |
type.rectangle = function (opt) { |
| 272 |
opt = options(opt); |
| 273 |
var more = false; |
| 274 |
if (opt.len === 2) { |
| 275 |
opt.x = opt.x - opt.w * 0.4; |
| 276 |
opt.w = opt.w * 1.4; |
| 277 |
more = true; |
| 278 |
} else if (opt.len >= 3) { |
| 279 |
opt.x = opt.x - opt.w * 0.65; |
| 280 |
opt.w = opt.w * 1.65; |
| 281 |
more = true; |
| 282 |
} |
| 283 |
_context.clearRect(0, 0, _w, _h); |
| 284 |
_context.drawImage(_img, 0, 0, _w, _h); |
| 285 |
_context.beginPath(); |
| 286 |
_context.font = _opt.fontStyle + " " + Math.floor(opt.h * (opt.n > 99 ? 0.9 : 1)) + "px " + _opt.fontFamily; |
| 287 |
_context.textAlign = 'center'; |
| 288 |
_context.fillStyle = 'rgba(' + _opt.bgColor.r + ',' + _opt.bgColor.g + ',' + _opt.bgColor.b + ',' + opt.o + ')'; |
| 289 |
_context.fillRect(opt.x, opt.y, opt.w, opt.h); |
| 290 |
_context.fillStyle = 'rgba(' + _opt.textColor.r + ',' + _opt.textColor.g + ',' + _opt.textColor.b + ',' + opt.o + ')'; |
| 291 |
//_context.fillText((more) ? '9+' : opt.n, Math.floor(opt.x + opt.w / 2), Math.floor(opt.y + opt.h - opt.h * 0.15)); |
| 292 |
if ((typeof opt.n) === 'number' && opt.n > 999) { |
| 293 |
_context.fillText(((opt.n > 9999) ? 9 : Math.floor(opt.n / 1000)) + 'k+', Math.floor(opt.x + opt.w / 2), Math.floor(opt.y + opt.h - opt.h * 0.2)); |
| 294 |
} else { |
| 295 |
_context.fillText(opt.n, Math.floor(opt.x + opt.w / 2), Math.floor(opt.y + opt.h - opt.h * 0.15)); |
| 296 |
} |
| 297 |
_context.closePath(); |
| 298 |
}; |
| 299 |
|
| 300 |
/** |
| 301 |
* Set badge |
| 302 |
*/ |
| 303 |
var badge = function (number, opts) { |
| 304 |
opts = ((typeof opts) === 'string' ? { |
| 305 |
animation: opts |
| 306 |
} : opts) || {}; |
| 307 |
_readyCb = function () { |
| 308 |
try { |
| 309 |
if (typeof (number) === 'number' ? (number > 0) : (number !== '')) { |
| 310 |
var q = { |
| 311 |
type: 'badge', |
| 312 |
options: { |
| 313 |
n: number |
| 314 |
} |
| 315 |
}; |
| 316 |
if ('animation' in opts && animation.types['' + opts.animation]) { |
| 317 |
q.options.animation = '' + opts.animation; |
| 318 |
} |
| 319 |
if ('type' in opts && type['' + opts.type]) { |
| 320 |
q.options.type = '' + opts.type; |
| 321 |
} |
| 322 |
['bgColor', 'textColor'].forEach(function (o) { |
| 323 |
if (o in opts) { |
| 324 |
q.options[o] = hexToRgb(opts[o]); |
| 325 |
} |
| 326 |
}); |
| 327 |
['fontStyle', 'fontFamily'].forEach(function (o) { |
| 328 |
if (o in opts) { |
| 329 |
q.options[o] = opts[o]; |
| 330 |
} |
| 331 |
}); |
| 332 |
_queue.push(q); |
| 333 |
if (_queue.length > 100) { |
| 334 |
throw new Error('Too many badges requests in queue.'); |
| 335 |
} |
| 336 |
icon.start(); |
| 337 |
} else { |
| 338 |
icon.reset(); |
| 339 |
} |
| 340 |
} catch (e) { |
| 341 |
throw new Error('Error setting badge. Message: ' + e.message); |
| 342 |
} |
| 343 |
}; |
| 344 |
if (_ready) { |
| 345 |
_readyCb(); |
| 346 |
} |
| 347 |
}; |
| 348 |
|
| 349 |
/** |
| 350 |
* Set image as icon |
| 351 |
*/ |
| 352 |
var image = function (imageElement) { |
| 353 |
_readyCb = function () { |
| 354 |
try { |
| 355 |
var w = imageElement.width; |
| 356 |
var h = imageElement.height; |
| 357 |
var newImg = document.createElement('img'); |
| 358 |
var ratio = (w / _w < h / _h) ? (w / _w) : (h / _h); |
| 359 |
newImg.setAttribute('crossOrigin', 'anonymous'); |
| 360 |
newImg.onload=function(){ |
| 361 |
_context.clearRect(0, 0, _w, _h); |
| 362 |
_context.drawImage(newImg, 0, 0, _w, _h); |
| 363 |
link.setIcon(_canvas); |
| 364 |
}; |
| 365 |
newImg.setAttribute('src', imageElement.getAttribute('src')); |
| 366 |
newImg.height = (h / ratio); |
| 367 |
newImg.width = (w / ratio); |
| 368 |
} catch (e) { |
| 369 |
throw new Error('Error setting image. Message: ' + e.message); |
| 370 |
} |
| 371 |
}; |
| 372 |
if (_ready) { |
| 373 |
_readyCb(); |
| 374 |
} |
| 375 |
}; |
| 376 |
/** |
| 377 |
* Set the icon from a source url. Won't work with badges. |
| 378 |
*/ |
| 379 |
var rawImageSrc = function (url) { |
| 380 |
_readyCb = function() { |
| 381 |
link.setIconSrc(url); |
| 382 |
}; |
| 383 |
if (_ready) { |
| 384 |
_readyCb(); |
| 385 |
} |
| 386 |
}; |
| 387 |
/** |
| 388 |
* Set video as icon |
| 389 |
*/ |
| 390 |
var video = function (videoElement) { |
| 391 |
_readyCb = function () { |
| 392 |
try { |
| 393 |
if (videoElement === 'stop') { |
| 394 |
_stop = true; |
| 395 |
icon.reset(); |
| 396 |
_stop = false; |
| 397 |
return; |
| 398 |
} |
| 399 |
//var w = videoElement.width; |
| 400 |
//var h = videoElement.height; |
| 401 |
//var ratio = (w / _w < h / _h) ? (w / _w) : (h / _h); |
| 402 |
videoElement.addEventListener('play', function () { |
| 403 |
drawVideo(this); |
| 404 |
}, false); |
| 405 |
|
| 406 |
} catch (e) { |
| 407 |
throw new Error('Error setting video. Message: ' + e.message); |
| 408 |
} |
| 409 |
}; |
| 410 |
if (_ready) { |
| 411 |
_readyCb(); |
| 412 |
} |
| 413 |
}; |
| 414 |
/** |
| 415 |
* Set video as icon |
| 416 |
*/ |
| 417 |
var webcam = function (action) { |
| 418 |
//UR |
| 419 |
if (!window.URL || !window.URL.createObjectURL) { |
| 420 |
window.URL = window.URL || {}; |
| 421 |
window.URL.createObjectURL = function (obj) { |
| 422 |
return obj; |
| 423 |
}; |
| 424 |
} |
| 425 |
if (_browser.supported) { |
| 426 |
var newVideo = false; |
| 427 |
navigator.getUserMedia = navigator.getUserMedia || navigator.oGetUserMedia || navigator.msGetUserMedia || navigator.mozGetUserMedia || navigator.webkitGetUserMedia; |
| 428 |
_readyCb = function () { |
| 429 |
try { |
| 430 |
if (action === 'stop') { |
| 431 |
_stop = true; |
| 432 |
icon.reset(); |
| 433 |
_stop = false; |
| 434 |
return; |
| 435 |
} |
| 436 |
newVideo = document.createElement('video'); |
| 437 |
newVideo.width = _w; |
| 438 |
newVideo.height = _h; |
| 439 |
navigator.getUserMedia({ |
| 440 |
video: true, |
| 441 |
audio: false |
| 442 |
}, function (stream) { |
| 443 |
newVideo.src = URL.createObjectURL(stream); |
| 444 |
newVideo.play(); |
| 445 |
drawVideo(newVideo); |
| 446 |
}, function () { |
| 447 |
}); |
| 448 |
} catch (e) { |
| 449 |
throw new Error('Error setting webcam. Message: ' + e.message); |
| 450 |
} |
| 451 |
}; |
| 452 |
if (_ready) { |
| 453 |
_readyCb(); |
| 454 |
} |
| 455 |
} |
| 456 |
|
| 457 |
}; |
| 458 |
|
| 459 |
var setOpt = function (key, value) { |
| 460 |
var opts = key; |
| 461 |
if (!(value == null && Object.prototype.toString.call(key) == '[object Object]')) { |
| 462 |
opts = {}; |
| 463 |
opts[key] = value; |
| 464 |
} |
| 465 |
|
| 466 |
var keys = Object.keys(opts); |
| 467 |
for (var i = 0; i < keys.length; i++) { |
| 468 |
if (keys[i] == 'bgColor' || keys[i] == 'textColor') { |
| 469 |
_opt[keys[i]] = hexToRgb(opts[keys[i]]); |
| 470 |
} else { |
| 471 |
_opt[keys[i]] = opts[keys[i]]; |
| 472 |
} |
| 473 |
} |
| 474 |
|
| 475 |
_queue.push(_lastBadge); |
| 476 |
icon.start(); |
| 477 |
}; |
| 478 |
|
| 479 |
/** |
| 480 |
* Draw video to context and repeat :) |
| 481 |
*/ |
| 482 |
function drawVideo(video) { |
| 483 |
if (video.paused || video.ended || _stop) { |
| 484 |
return false; |
| 485 |
} |
| 486 |
//nasty hack for FF webcam (Thanks to Julian Ćwirko, kontakt@redsunmedia.pl) |
| 487 |
try { |
| 488 |
_context.clearRect(0, 0, _w, _h); |
| 489 |
_context.drawImage(video, 0, 0, _w, _h); |
| 490 |
} catch (e) { |
| 491 |
|
| 492 |
} |
| 493 |
_drawTimeout = setTimeout(function () { |
| 494 |
drawVideo(video); |
| 495 |
}, animation.duration); |
| 496 |
link.setIcon(_canvas); |
| 497 |
} |
| 498 |
|
| 499 |
var link = {}; |
| 500 |
/** |
| 501 |
* Get icons from HEAD tag or create a new <link> element |
| 502 |
*/ |
| 503 |
link.getIcons = function () { |
| 504 |
var elms = []; |
| 505 |
//get link element |
| 506 |
var getLinks = function () { |
| 507 |
var icons = []; |
| 508 |
var links = _doc.getElementsByTagName('head')[0].getElementsByTagName('link'); |
| 509 |
for (var i = 0; i < links.length; i++) { |
| 510 |
if ((/(^|\s)icon(\s|$)/i).test(links[i].getAttribute('rel'))) { |
| 511 |
icons.push(links[i]); |
| 512 |
} |
| 513 |
} |
| 514 |
return icons; |
| 515 |
}; |
| 516 |
if (_opt.element) { |
| 517 |
elms = [_opt.element]; |
| 518 |
} else if (_opt.elementId) { |
| 519 |
//if img element identified by elementId |
| 520 |
elms = [_doc.getElementById(_opt.elementId)]; |
| 521 |
elms[0].setAttribute('href', elms[0].getAttribute('src')); |
| 522 |
} else { |
| 523 |
//if link element |
| 524 |
elms = getLinks(); |
| 525 |
if (elms.length === 0) { |
| 526 |
elms = [_doc.createElement('link')]; |
| 527 |
elms[0].setAttribute('rel', 'icon'); |
| 528 |
_doc.getElementsByTagName('head')[0].appendChild(elms[0]); |
| 529 |
} |
| 530 |
} |
| 531 |
elms.forEach(function(item) { |
| 532 |
item.setAttribute('type', 'image/png'); |
| 533 |
}); |
| 534 |
return elms; |
| 535 |
}; |
| 536 |
link.setIcon = function (canvas) { |
| 537 |
var url = canvas.toDataURL('image/png'); |
| 538 |
link.setIconSrc(url); |
| 539 |
}; |
| 540 |
link.setIconSrc = function (url) { |
| 541 |
if (_opt.dataUrl) { |
| 542 |
//if using custom exporter |
| 543 |
_opt.dataUrl(url); |
| 544 |
} |
| 545 |
if (_opt.element) { |
| 546 |
_opt.element.setAttribute('href', url); |
| 547 |
_opt.element.setAttribute('src', url); |
| 548 |
} else if (_opt.elementId) { |
| 549 |
//if is attached to element (image) |
| 550 |
var elm = _doc.getElementById(_opt.elementId); |
| 551 |
elm.setAttribute('href', url); |
| 552 |
elm.setAttribute('src', url); |
| 553 |
} else { |
| 554 |
//if is attached to fav icon |
| 555 |
if (_browser.ff || _browser.opera) { |
| 556 |
//for FF we need to "recreate" element, atach to dom and remove old <link> |
| 557 |
//var originalType = _orig.getAttribute('rel'); |
| 558 |
var old = _orig[_orig.length - 1]; |
| 559 |
var newIcon = _doc.createElement('link'); |
| 560 |
_orig = [newIcon]; |
| 561 |
//_orig.setAttribute('rel', originalType); |
| 562 |
if (_browser.opera) { |
| 563 |
newIcon.setAttribute('rel', 'icon'); |
| 564 |
} |
| 565 |
newIcon.setAttribute('rel', 'icon'); |
| 566 |
newIcon.setAttribute('type', 'image/png'); |
| 567 |
_doc.getElementsByTagName('head')[0].appendChild(newIcon); |
| 568 |
newIcon.setAttribute('href', url); |
| 569 |
if (old.parentNode) { |
| 570 |
old.parentNode.removeChild(old); |
| 571 |
} |
| 572 |
} else { |
| 573 |
_orig.forEach(function(icon) { |
| 574 |
icon.setAttribute('href', url); |
| 575 |
}); |
| 576 |
} |
| 577 |
} |
| 578 |
}; |
| 579 |
|
| 580 |
//http://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb#answer-5624139 |
| 581 |
//HEX to RGB convertor |
| 582 |
function hexToRgb(hex) { |
| 583 |
var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i; |
| 584 |
hex = hex.replace(shorthandRegex, function (m, r, g, b) { |
| 585 |
return r + r + g + g + b + b; |
| 586 |
}); |
| 587 |
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); |
| 588 |
return result ? { |
| 589 |
r: parseInt(result[1], 16), |
| 590 |
g: parseInt(result[2], 16), |
| 591 |
b: parseInt(result[3], 16) |
| 592 |
} : false; |
| 593 |
} |
| 594 |
|
| 595 |
/** |
| 596 |
* Merge options |
| 597 |
*/ |
| 598 |
function merge(def, opt) { |
| 599 |
var mergedOpt = {}; |
| 600 |
var attrname; |
| 601 |
for (attrname in def) { |
| 602 |
mergedOpt[attrname] = def[attrname]; |
| 603 |
} |
| 604 |
for (attrname in opt) { |
| 605 |
mergedOpt[attrname] = opt[attrname]; |
| 606 |
} |
| 607 |
return mergedOpt; |
| 608 |
} |
| 609 |
|
| 610 |
/** |
| 611 |
* Cross-browser page visibility shim |
| 612 |
* http://stackoverflow.com/questions/12536562/detect-whether-a-window-is-visible |
| 613 |
*/ |
| 614 |
function isPageHidden() { |
| 615 |
return _doc.hidden || _doc.msHidden || _doc.webkitHidden || _doc.mozHidden; |
| 616 |
} |
| 617 |
|
| 618 |
/** |
| 619 |
* @namespace animation |
| 620 |
*/ |
| 621 |
var animation = {}; |
| 622 |
/** |
| 623 |
* Animation "frame" duration |
| 624 |
*/ |
| 625 |
animation.duration = 40; |
| 626 |
/** |
| 627 |
* Animation types (none,fade,pop,slide) |
| 628 |
*/ |
| 629 |
animation.types = {}; |
| 630 |
animation.types.fade = [{ |
| 631 |
x: 0.4, |
| 632 |
y: 0.4, |
| 633 |
w: 0.6, |
| 634 |
h: 0.6, |
| 635 |
o: 0.0 |
| 636 |
}, { |
| 637 |
x: 0.4, |
| 638 |
y: 0.4, |
| 639 |
w: 0.6, |
| 640 |
h: 0.6, |
| 641 |
o: 0.1 |
| 642 |
}, { |
| 643 |
x: 0.4, |
| 644 |
y: 0.4, |
| 645 |
w: 0.6, |
| 646 |
h: 0.6, |
| 647 |
o: 0.2 |
| 648 |
}, { |
| 649 |
x: 0.4, |
| 650 |
y: 0.4, |
| 651 |
w: 0.6, |
| 652 |
h: 0.6, |
| 653 |
o: 0.3 |
| 654 |
}, { |
| 655 |
x: 0.4, |
| 656 |
y: 0.4, |
| 657 |
w: 0.6, |
| 658 |
h: 0.6, |
| 659 |
o: 0.4 |
| 660 |
}, { |
| 661 |
x: 0.4, |
| 662 |
y: 0.4, |
| 663 |
w: 0.6, |
| 664 |
h: 0.6, |
| 665 |
o: 0.5 |
| 666 |
}, { |
| 667 |
x: 0.4, |
| 668 |
y: 0.4, |
| 669 |
w: 0.6, |
| 670 |
h: 0.6, |
| 671 |
o: 0.6 |
| 672 |
}, { |
| 673 |
x: 0.4, |
| 674 |
y: 0.4, |
| 675 |
w: 0.6, |
| 676 |
h: 0.6, |
| 677 |
o: 0.7 |
| 678 |
}, { |
| 679 |
x: 0.4, |
| 680 |
y: 0.4, |
| 681 |
w: 0.6, |
| 682 |
h: 0.6, |
| 683 |
o: 0.8 |
| 684 |
}, { |
| 685 |
x: 0.4, |
| 686 |
y: 0.4, |
| 687 |
w: 0.6, |
| 688 |
h: 0.6, |
| 689 |
o: 0.9 |
| 690 |
}, { |
| 691 |
x: 0.4, |
| 692 |
y: 0.4, |
| 693 |
w: 0.6, |
| 694 |
h: 0.6, |
| 695 |
o: 1.0 |
| 696 |
}]; |
| 697 |
animation.types.none = [{ |
| 698 |
x: 0.4, |
| 699 |
y: 0.4, |
| 700 |
w: 0.6, |
| 701 |
h: 0.6, |
| 702 |
o: 1 |
| 703 |
}]; |
| 704 |
animation.types.pop = [{ |
| 705 |
x: 1, |
| 706 |
y: 1, |
| 707 |
w: 0, |
| 708 |
h: 0, |
| 709 |
o: 1 |
| 710 |
}, { |
| 711 |
x: 0.9, |
| 712 |
y: 0.9, |
| 713 |
w: 0.1, |
| 714 |
h: 0.1, |
| 715 |
o: 1 |
| 716 |
}, { |
| 717 |
x: 0.8, |
| 718 |
y: 0.8, |
| 719 |
w: 0.2, |
| 720 |
h: 0.2, |
| 721 |
o: 1 |
| 722 |
}, { |
| 723 |
x: 0.7, |
| 724 |
y: 0.7, |
| 725 |
w: 0.3, |
| 726 |
h: 0.3, |
| 727 |
o: 1 |
| 728 |
}, { |
| 729 |
x: 0.6, |
| 730 |
y: 0.6, |
| 731 |
w: 0.4, |
| 732 |
h: 0.4, |
| 733 |
o: 1 |
| 734 |
}, { |
| 735 |
x: 0.5, |
| 736 |
y: 0.5, |
| 737 |
w: 0.5, |
| 738 |
h: 0.5, |
| 739 |
o: 1 |
| 740 |
}, { |
| 741 |
x: 0.4, |
| 742 |
y: 0.4, |
| 743 |
w: 0.6, |
| 744 |
h: 0.6, |
| 745 |
o: 1 |
| 746 |
}]; |
| 747 |
animation.types.popFade = [{ |
| 748 |
x: 0.75, |
| 749 |
y: 0.75, |
| 750 |
w: 0, |
| 751 |
h: 0, |
| 752 |
o: 0 |
| 753 |
}, { |
| 754 |
x: 0.65, |
| 755 |
y: 0.65, |
| 756 |
w: 0.1, |
| 757 |
h: 0.1, |
| 758 |
o: 0.2 |
| 759 |
}, { |
| 760 |
x: 0.6, |
| 761 |
y: 0.6, |
| 762 |
w: 0.2, |
| 763 |
h: 0.2, |
| 764 |
o: 0.4 |
| 765 |
}, { |
| 766 |
x: 0.55, |
| 767 |
y: 0.55, |
| 768 |
w: 0.3, |
| 769 |
h: 0.3, |
| 770 |
o: 0.6 |
| 771 |
}, { |
| 772 |
x: 0.50, |
| 773 |
y: 0.50, |
| 774 |
w: 0.4, |
| 775 |
h: 0.4, |
| 776 |
o: 0.8 |
| 777 |
}, { |
| 778 |
x: 0.45, |
| 779 |
y: 0.45, |
| 780 |
w: 0.5, |
| 781 |
h: 0.5, |
| 782 |
o: 0.9 |
| 783 |
}, { |
| 784 |
x: 0.4, |
| 785 |
y: 0.4, |
| 786 |
w: 0.6, |
| 787 |
h: 0.6, |
| 788 |
o: 1 |
| 789 |
}]; |
| 790 |
animation.types.slide = [{ |
| 791 |
x: 0.4, |
| 792 |
y: 1, |
| 793 |
w: 0.6, |
| 794 |
h: 0.6, |
| 795 |
o: 1 |
| 796 |
}, { |
| 797 |
x: 0.4, |
| 798 |
y: 0.9, |
| 799 |
w: 0.6, |
| 800 |
h: 0.6, |
| 801 |
o: 1 |
| 802 |
}, { |
| 803 |
x: 0.4, |
| 804 |
y: 0.9, |
| 805 |
w: 0.6, |
| 806 |
h: 0.6, |
| 807 |
o: 1 |
| 808 |
}, { |
| 809 |
x: 0.4, |
| 810 |
y: 0.8, |
| 811 |
w: 0.6, |
| 812 |
h: 0.6, |
| 813 |
o: 1 |
| 814 |
}, { |
| 815 |
x: 0.4, |
| 816 |
y: 0.7, |
| 817 |
w: 0.6, |
| 818 |
h: 0.6, |
| 819 |
o: 1 |
| 820 |
}, { |
| 821 |
x: 0.4, |
| 822 |
y: 0.6, |
| 823 |
w: 0.6, |
| 824 |
h: 0.6, |
| 825 |
o: 1 |
| 826 |
}, { |
| 827 |
x: 0.4, |
| 828 |
y: 0.5, |
| 829 |
w: 0.6, |
| 830 |
h: 0.6, |
| 831 |
o: 1 |
| 832 |
}, { |
| 833 |
x: 0.4, |
| 834 |
y: 0.4, |
| 835 |
w: 0.6, |
| 836 |
h: 0.6, |
| 837 |
o: 1 |
| 838 |
}]; |
| 839 |
/** |
| 840 |
* Run animation |
| 841 |
* @param {Object} opt Animation options |
| 842 |
* @param {Object} cb Callabak after all steps are done |
| 843 |
* @param {Object} revert Reverse order? true|false |
| 844 |
* @param {Object} step Optional step number (frame bumber) |
| 845 |
*/ |
| 846 |
animation.run = function (opt, cb, revert, step) { |
| 847 |
var animationType = animation.types[isPageHidden() ? 'none' : _opt.animation]; |
| 848 |
if (revert === true) { |
| 849 |
step = (typeof step !== 'undefined') ? step : animationType.length - 1; |
| 850 |
} else { |
| 851 |
step = (typeof step !== 'undefined') ? step : 0; |
| 852 |
} |
| 853 |
cb = (cb) ? cb : function () { |
| 854 |
}; |
| 855 |
if ((step < animationType.length) && (step >= 0)) { |
| 856 |
type[_opt.type](merge(opt, animationType[step])); |
| 857 |
_animTimeout = setTimeout(function () { |
| 858 |
if (revert) { |
| 859 |
step = step - 1; |
| 860 |
} else { |
| 861 |
step = step + 1; |
| 862 |
} |
| 863 |
animation.run(opt, cb, revert, step); |
| 864 |
}, animation.duration); |
| 865 |
|
| 866 |
link.setIcon(_canvas); |
| 867 |
} else { |
| 868 |
cb(); |
| 869 |
return; |
| 870 |
} |
| 871 |
}; |
| 872 |
//auto init |
| 873 |
init(); |
| 874 |
return { |
| 875 |
badge: badge, |
| 876 |
video: video, |
| 877 |
image: image, |
| 878 |
rawImageSrc: rawImageSrc, |
| 879 |
webcam: webcam, |
| 880 |
setOpt: setOpt, |
| 881 |
reset: icon.reset, |
| 882 |
browser: { |
| 883 |
supported: _browser.supported |
| 884 |
} |
| 885 |
}; |
| 886 |
}); |
| 887 |
|
| 888 |
// AMD / RequireJS |
| 889 |
if (typeof define !== 'undefined' && define.amd) { |
| 890 |
define([], function () { |
| 891 |
return Favico; |
| 892 |
}); |
| 893 |
} |
| 894 |
// CommonJS |
| 895 |
else if (typeof module !== 'undefined' && module.exports) { |
| 896 |
module.exports = Favico; |
| 897 |
} |
| 898 |
// included directly via <script> tag |
| 899 |
else { |
| 900 |
this.Favico = Favico; |
| 901 |
} |
| 902 |
|
| 903 |
})(); |
| 904 |
|
