| |
@@ -0,0 +1,185 @@
|
| |
+ /*
|
| |
+ Notificon :: Client-side Favicon Notifications - Usage: Notificon(label='',favicon_url={default_favicon})
|
| |
+ =========================================================================================================
|
| |
+
|
| |
+ Copyright (c) 2011 Matt Williams <matt@makeable.co.uk>. All rights reserved.
|
| |
+
|
| |
+ Redistribution and use in source and binary forms, with or without modification, are
|
| |
+ permitted provided that the following conditions are met:
|
| |
+
|
| |
+ 1. Redistributions of source code must retain the above copyright notice, this list of
|
| |
+ conditions and the following disclaimer.
|
| |
+
|
| |
+ 2. Redistributions in binary form must reproduce the above copyright notice, this list
|
| |
+ of conditions and the following disclaimer in the documentation and/or other materials
|
| |
+ provided with the distribution.
|
| |
+
|
| |
+ THIS SOFTWARE IS PROVIDED BY MATT WILLIAMS ''AS IS'' AND ANY EXPRESS OR IMPLIED
|
| |
+ WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND
|
| |
+ FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL MATT WILLIAMS OR
|
| |
+ CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
|
| |
+ CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
|
| |
+ SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
|
| |
+ ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
|
| |
+ NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF
|
| |
+ ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
|
| |
+
|
| |
+ The views and conclusions contained in the software and documentation are those of the
|
| |
+ authors and should not be interpreted as representing official policies,
|
| |
+ either expressed or implied, of Matt Williams.
|
| |
+
|
| |
+ Modified by Pierre-Yves Chibon <pingou@pingoured.fr> using code from the
|
| |
+ favicon-notification project (https://github.com/igorprado/favicon-notification)
|
| |
+ licensed under the MIT license.
|
| |
+
|
| |
+ */
|
| |
+
|
| |
+ (function(){
|
| |
+
|
| |
+ var unsupported = false;
|
| |
+ var _options = {};
|
| |
+
|
| |
+ var checkSupport = function checkSupport() {
|
| |
+ if (unsupported) {
|
| |
+ return false;
|
| |
+ }
|
| |
+ if (!document.createElement('canvas').getContext) {
|
| |
+ unsupported = true;
|
| |
+ if (console) {
|
| |
+ console.log('Notificon: requires canvas support');
|
| |
+ }
|
| |
+ return false;
|
| |
+ }
|
| |
+ return true;
|
| |
+ }
|
| |
+
|
| |
+
|
| |
+ var _defaults = {
|
| |
+ color: '#eb361e',
|
| |
+ lineColor: '#ffffff'
|
| |
+ };
|
| |
+
|
| |
+ var _setOptions = function(options) {
|
| |
+ if (!options) {
|
| |
+ _options = _defaults;
|
| |
+ return;
|
| |
+ }
|
| |
+
|
| |
+ _options = {};
|
| |
+
|
| |
+ for(var key in _defaults){
|
| |
+ _options[key] = options.hasOwnProperty(key) ? options[key] : _defaults[key];
|
| |
+ }
|
| |
+ };
|
| |
+
|
| |
+ var findFaviconTag = function findFaviconTag(notificon) {
|
| |
+ var link_tags = document.getElementsByTagName('link');
|
| |
+ for (var i=0; i < link_tags.length; i++) {
|
| |
+ if (notificon && (/\bnotificon\b/i).test(link_tags[i].getAttribute('rel'))) {
|
| |
+ return link_tags[i];
|
| |
+ } else if (!notificon && (/\bicon\b/i).test(link_tags[i].getAttribute('rel'))) {
|
| |
+ return link_tags[i];
|
| |
+ }
|
| |
+ }
|
| |
+ return false;
|
| |
+ };
|
| |
+
|
| |
+ var getExistingFavicon = function getExistingFavicon() {
|
| |
+ var favicon = findFaviconTag();
|
| |
+ return favicon ? favicon.getAttribute('href') : '/favicon.ico';
|
| |
+ };
|
| |
+
|
| |
+ var removeNotificon = function removeNotificon() {
|
| |
+ var notificon = findFaviconTag(true);
|
| |
+ if (notificon) {
|
| |
+ notificon.parentNode.removeChild(notificon);
|
| |
+ removeNotificon();
|
| |
+ }
|
| |
+ };
|
| |
+
|
| |
+ var changeFavicon = function changeFavicon(canvas) {
|
| |
+ var link = document.createElement('link');
|
| |
+ link.type = 'image/x-icon';
|
| |
+ link.rel = 'icon notificon';
|
| |
+ link.href = canvas.toDataURL("image/png");
|
| |
+ removeNotificon();
|
| |
+ document.getElementsByTagName('head')[0].appendChild(link);
|
| |
+ };
|
| |
+
|
| |
+ var drawLabel = function drawLabel(canvas, color, favicon) {
|
| |
+ var img = document.createElement('img');
|
| |
+ img.src = favicon;
|
| |
+
|
| |
+ img.onload = function() {
|
| |
+ var lineWidth = 2;
|
| |
+
|
| |
+ canvas.width = img.width;
|
| |
+ canvas.height = img.height;
|
| |
+
|
| |
+ var context = canvas.getContext('2d');
|
| |
+ context.clearRect(0, 0, img.width, img.height);
|
| |
+ context.drawImage(img, 0, 0);
|
| |
+
|
| |
+ var centerX = img.width - (img.width / 4.5) - lineWidth;
|
| |
+ var centerY = img.height - (img.height / 4.5) - lineWidth;
|
| |
+ var radius = img.width / 4.5;
|
| |
+
|
| |
+ context.fillStyle = color;
|
| |
+ context.strokeStyle = _options.lineColor;
|
| |
+ context.lineWidth = lineWidth;
|
| |
+
|
| |
+ context.beginPath();
|
| |
+ context.arc(centerX, centerY, radius, 0, Math.PI * 2, false);
|
| |
+ context.closePath();
|
| |
+ context.fill();
|
| |
+ context.stroke();
|
| |
+
|
| |
+ changeFavicon(canvas)
|
| |
+ }
|
| |
+ };
|
| |
+
|
| |
+ var imgToCanvas = function imgToCanvas(img) {
|
| |
+ var canvas = document.createElement("canvas");
|
| |
+ canvas.width = img.width;
|
| |
+ canvas.height = img.height;
|
| |
+ var context = canvas.getContext("2d");
|
| |
+ context.drawImage(img, 0, 0);
|
| |
+ return canvas;
|
| |
+ };
|
| |
+
|
| |
+ var createNotificon = function createNotificon(color, favicon) {
|
| |
+ if (!checkSupport()) {
|
| |
+ return false;
|
| |
+ }
|
| |
+ if (!favicon) {
|
| |
+ favicon = getExistingFavicon();
|
| |
+ }
|
| |
+ var img = document.createElement("img");
|
| |
+ img.src = favicon;
|
| |
+ img.onload = function() {
|
| |
+ var canvas = imgToCanvas(img);
|
| |
+ if (color) {
|
| |
+ drawLabel(canvas, color, favicon);
|
| |
+ }
|
| |
+ try {
|
| |
+ changeFavicon(canvas);
|
| |
+ } catch(e) {
|
| |
+ if (console) {
|
| |
+ console.log(e)
|
| |
+ console.log('Notificon: cannot use icons located on a different domain (' + favicon + ')');
|
| |
+ }
|
| |
+ }
|
| |
+
|
| |
+ };
|
| |
+ img.onerror = function() {
|
| |
+ if (console) {
|
| |
+ console.log('Notificon: image not found (' + favicon + ')');
|
| |
+ }
|
| |
+ };
|
| |
+ };
|
| |
+
|
| |
+ this.Notificon = function(color, favicon, options) {
|
| |
+ _setOptions(options);
|
| |
+ createNotificon(color, favicon);
|
| |
+ };
|
| |
+ })();
|
| |
