rails-env-favicon 0.0.3 → 0.0.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: f1918a28b4ed51533dee46b589aa6f7e690af35a
-  data.tar.gz: 1c42969fd6aef0ab57a0094e4e61508749a255b0
+  metadata.gz: 360876ef2a17013757041f0c08850c43c7cd5a46
+  data.tar.gz: 061d6dbb8015cfc604289a955dc2bb9e07febf66
 SHA512:
-  metadata.gz: 3cbf4ab69b3bf4508346662c68845ade2a61fadbf404f5bac7d4c3345ac775b6b5a73fc49e443ac2d9e1e732b0737648cefa82b62209ada141b3d3de572a7341
-  data.tar.gz: 58969accc533706b41476b602f663343c1748aa77ed5f9d695bb09e67a0247e6c2fbffe4ae3ff286161e13c83cb83c47a01e0186d307ec151219ff0991817560
+  metadata.gz: 7ee020c8021c9d3d5d3980f9db9f5fa123c7abdfa6a5aa1faa904e70e106a8135adb5940f26659c21ad573c1f2dcddb0c947b1a0d2ffadbb6d159eb498acfde9
+  data.tar.gz: 122b036f8bacbd22753edc1193773bb562bd3ebcc2839290056e700168f942436ec1fa8d0108c97fe523301bb2f8b84b337b8efbda4506fc9505711b4c7ff317

data/README.md

@@ -15,6 +15,12 @@ This means that on the first tab we have development environment, on second stag
 
 It uses [Tinycon](https://github.com/tommoor/tinycon) - A small library for manipulating the favicon.
 
+And one more option:
+
+![ScreenShot](https://raw.github.com/accessd/rails-env-favicon/master/doc/img/sample-grayscale.png)
+
+Icon will be gray on non production environment.
+
 Installation
 ------------
 
@@ -41,10 +47,14 @@ Config
 In config/initializers/rails_env_favicon.rb
 
     RailsEnvFavicon.setup do |config|
+      # If true then favicon will be gray on non production env
+      config.make_grayscale = false
+      # or if make_grayscale = false then draw badge on favicon with this options:
       config.text_color = '#ffffff'
       config.background_color = '#549a2f'
     end
 
+
 Contributing
 -------------
 

data/app/assets/javascripts/grayscale-favicon.js

@@ -0,0 +1,143 @@
+/*!
+ * GrayscaleFavicon - A small library for make the Favicon grayscale
+ * Accessd, https://github.com/accessd
+ * Copyright (c) 2014 Accessd
+ * @license MIT Licensed
+ * @version 0.0.1
+ */
+
+(function(){
+
+	var GrayscaleFavicon = {};
+	var currentFavicon = null;
+	var originalFavicon = null;
+	var faviconImage = null;
+	var canvas = null;
+	var size = 32;
+
+	// private methods
+	var getFaviconTag = function(){
+
+		var links = document.getElementsByTagName('link');
+
+		for(var i=0, len=links.length; i < len; i++) {
+			if ((links[i].getAttribute('rel') || '').match(/\bicon\b/)) {
+				return links[i];
+			}
+		}
+
+		return false;
+	};
+
+	var removeFaviconTag = function(){
+
+		var links = document.getElementsByTagName('link');
+		var head = document.getElementsByTagName('head')[0];
+
+		for(var i=0, len=links.length; i < len; i++) {
+			var exists = (typeof(links[i]) !== 'undefined');
+			if (exists && (links[i].getAttribute('rel') || '').match(/\bicon\b/)) {
+				head.removeChild(links[i]);
+			}
+		}
+	};
+
+	var getCurrentFavicon = function(){
+
+		if (!originalFavicon || !currentFavicon) {
+			var tag = getFaviconTag();
+			originalFavicon = currentFavicon = tag ? tag.getAttribute('href') : './favicon.ico';
+		}
+
+		return currentFavicon;
+	};
+
+	var getCanvas = function (){
+
+		if (!canvas) {
+			canvas = document.createElement("canvas");
+			canvas.width = size;
+			canvas.height = size;
+		}
+
+		return canvas;
+	};
+
+	var setFaviconTag = function(url){
+		removeFaviconTag();
+
+		var link = document.createElement('link');
+		link.type = 'image/x-icon';
+		link.rel = 'icon';
+		link.href = url;
+		document.getElementsByTagName('head')[0].appendChild(link);
+	};
+
+	var log = function(message){
+		if (window.console) window.console.log(message);
+	};
+
+	var drawFavicon = function(label, colour) {
+
+		var context = getCanvas().getContext("2d");
+		var colour = colour || '#000000';
+		var src = getCurrentFavicon();
+
+		faviconImage = document.createElement('img');
+		faviconImage.onload = function() {
+
+			// clear canvas
+			context.clearRect(0, 0, size, size);
+
+			// draw the favicon
+			context.drawImage(faviconImage, 0, 0, faviconImage.width, faviconImage.height, 0, 0, size, size);
+
+      var imgPixels = context.getImageData(0, 0, faviconImage.width, faviconImage.height);
+
+      for(var y = 0; y < imgPixels.height; y++){
+        for(var x = 0; x < imgPixels.width; x++){
+            var i = (y * 4) * imgPixels.width + x * 4;
+            var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
+            imgPixels.data[i] = avg;
+            imgPixels.data[i + 1] = avg;
+            imgPixels.data[i + 2] = avg;
+        }
+      }
+      context.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
+
+			// refresh tag in page
+			refreshFavicon();
+		};
+
+		// allow cross origin resource requests if the image is not a data:uri
+		// as detailed here: https://github.com/mrdoob/three.js/issues/1305
+		if (!src.match(/^data/)) {
+			faviconImage.crossOrigin = 'anonymous';
+		}
+
+		faviconImage.src = src;
+	};
+
+	var refreshFavicon = function(){
+		// check support
+		if (!getCanvas().getContext) return;
+
+		setFaviconTag(getCanvas().toDataURL());
+	};
+
+	GrayscaleFavicon.grayscale = function(){
+		drawFavicon();
+		return this;
+	};
+
+	GrayscaleFavicon.reset = function(){
+		setFaviconTag(originalFavicon);
+	};
+
+	window.GrayscaleFavicon = GrayscaleFavicon;
+
+	if(typeof define === 'function' && define.amd) {
+		define(GrayscaleFavicon);
+	}
+
+})();

data/app/assets/javascripts/rails_env_favicon.js.erb

@@ -1,13 +1,17 @@
 <% unless Rails.env.production? %>
-    <%= require_asset "tinycon.min.js" %>
-    Tinycon.setOptions({
-        width: 8,
-        height: 9,
-        font: '10px arial',
-        colour: '<%= RailsEnvFavicon.text_color %>',
-        background: '<%= RailsEnvFavicon.background_color %>',
-        fallback: true
-    });
+    <% if RailsEnvFavicon.make_grayscale %>
+        <%= require_asset "grayscale-favicon.js" %>
+        GrayscaleFavicon.grayscale();
+    <% else %>
+        <%= require_asset "tinycon.min.js" %>
+        Tinycon.setOptions({
+          width: 8,
+          height: 9,
+          colour: '<%= RailsEnvFavicon.text_color %>',
+          background: '<%= RailsEnvFavicon.background_color %>',
+          fallback: true
+        });
 
-    Tinycon.setBubble("<%= RailsEnvFavicon.env_letter %>");
+        Tinycon.setBubble("<%= RailsEnvFavicon.env_letter %>");
+    <% end %>
 <% end %>

data/config/initializers/rails_env_favicon.rb

@@ -1,6 +1,9 @@
 require 'rails-env-favicon'
 
 RailsEnvFavicon.setup do |config|
+  # If true then favicon will be gray on non production env
+  config.make_grayscale = false
+  # or if make_grayscale = false then draw badge on favicon with this options:
   config.text_color = '#ffffff'
   config.background_color = '#549a2f'
 end

data/lib/rails-env-favicon.rb

@@ -7,6 +7,9 @@ module RailsEnvFavicon
   mattr_accessor :background_color
   self.background_color = '#549a2f'
 
+  mattr_accessor :make_grayscale
+  self.make_grayscale = false
+
   def self.env_letter
     ::Rails.env.first.upcase
   end

data/lib/rails-env-favicon/version.rb

@@ -1,3 +1,3 @@
 module RailsEnvFavicon
-  VERSION = "0.0.3"
+  VERSION = "0.0.4"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: rails-env-favicon
 version: !ruby/object:Gem::Version
-  version: 0.0.3
+  version: 0.0.4
 platform: ruby
 authors:
 - Accessd
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2014-06-06 00:00:00.000000000 Z
+date: 2014-06-09 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: railties
@@ -78,8 +78,10 @@ files:
 - LICENSE.txt
 - README.md
 - Rakefile
+- app/assets/javascripts/grayscale-favicon.js
 - app/assets/javascripts/rails_env_favicon.js.erb
 - config/initializers/rails_env_favicon.rb
+- doc/img/sample-grayscale.png
 - doc/img/sample.png
 - lib/generators/rails_env_favicon/install_generator.rb
 - lib/rails-env-favicon.rb