From 532d323df9357d7e4a7bc98f3867268bd3385dbc Mon Sep 17 00:00:00 2001
From: Thomas Lecavelier <tl@pierlis.com>
Date: Tue, 17 Sep 2013 13:31:44 +0200
Subject: [PATCH] Kick out Growler (proto), welcome Gritter (jquery)

---
 Gemfile                                   |   3 +
 app/views/layouts/administration.html.erb |   4 +-
 app/views/shared/_page_header.html.erb    |   4 +-
 config/locales/gflash.en.yml              |  21 +++
 public/javascripts/growler.js             | 168 -----------------
 public/stylesheets/growler.css            | 216 ----------------------
 6 files changed, 28 insertions(+), 388 deletions(-)
 create mode 100644 config/locales/gflash.en.yml
 delete mode 100644 public/javascripts/growler.js
 delete mode 100644 public/stylesheets/growler.css

diff --git a/Gemfile b/Gemfile
index 122fe7af56..dcc309c39f 100644
--- a/Gemfile
+++ b/Gemfile
@@ -51,6 +51,9 @@ gem 'twitter'
 gem "jquery-rails", "~> 3.0.4"
 gem "jquery-ui-rails", "~> 4.0.4"
 
+# Growler replacement
+gem "gritter", "~> 1.0.3"
+
 gem 'rails_autolink', '~> 1.1.0'
 gem 'dynamic_form', '~> 1.1.4'
 
diff --git a/app/views/layouts/administration.html.erb b/app/views/layouts/administration.html.erb
index f47d55f980..119c6fe77c 100644
--- a/app/views/layouts/administration.html.erb
+++ b/app/views/layouts/administration.html.erb
@@ -6,8 +6,8 @@
   <title><%= this_blog.blog_name %> – <%= controller.controller_name %></title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="imagetoolbar" content="no" />
-  <%= stylesheet_link_tag "growler", "bootstrap", "administration_structure", "lightbox", "jquery-ui" %>
-  <%= javascript_include_tag "jquery", "jquery_ujs", "jquery-ui", "bootstrap", "publify", "publify_jquery", "lightbox", "growler", "publify_carousel", "administration", "administration_jquery" %>
+  <%= stylesheet_link_tag "growler", "bootstrap", "administration_structure", "lightbox", "jquery-ui", "gritter" %>
+  <%= javascript_include_tag "jquery", "jquery_ujs", "jquery-ui", "bootstrap", "publify", "publify_jquery", "lightbox", "publify_carousel", "administration", "administration_jquery", "gritter" %>
   <style type="text/css">
     #carousel-content .slide { width: <%= this_blog.image_thumb_size %>; }
     @font-face {
diff --git a/app/views/shared/_page_header.html.erb b/app/views/shared/_page_header.html.erb
index 7730472240..6bdba03d70 100644
--- a/app/views/shared/_page_header.html.erb
+++ b/app/views/shared/_page_header.html.erb
@@ -12,8 +12,8 @@
 <%- if feed_rss %>
   <link rel="alternate" type="application/rss+xml" title="RSS" href="<%= feed_rss %>" />
 <%- end %>
-<%= javascript_include_tag 'jquery', 'jquery_ujs', 'cookies', 'publify', :cache => true %>
-<%= stylesheet_link_tag 'coderay', 'user-styles', :cache => true %>
+<%= javascript_include_tag 'jquery', 'jquery_ujs', 'cookies', 'publify', 'gritter', :cache => true %>
+<%= stylesheet_link_tag 'coderay', 'user-styles', 'gritter', :cache => true %>
 <%= javascript_include_tag "lang/#{Localization.lang.to_s}" if File.exists? File.join(::Rails.root.to_s, 'public', 'lang', Localization.lang.to_s) %>
 <%= javascript_tag "window._token = '#{form_authenticity_token}'"%>
 <%= page_header_includes %>
diff --git a/config/locales/gflash.en.yml b/config/locales/gflash.en.yml
new file mode 100644
index 0000000000..6663b128c7
--- /dev/null
+++ b/config/locales/gflash.en.yml
@@ -0,0 +1,21 @@
+en:
+  gflash:
+    #
+    # These are the translations for the different titles.
+    #
+    titles:
+      notice: "Notice"
+      success: "Success"
+      warning: "Warning"
+      error: "Error"
+      progress: "Progress"
+    #
+    # Add gflash messages for controller actions:
+    # products:
+    #   create:
+    #     notice: "This is a notification"
+    #     error: "Something went wrong"
+    #
+    # Inside controller: 
+    # gflash :notice, :error
+    #
\ No newline at end of file
diff --git a/public/javascripts/growler.js b/public/javascripts/growler.js
deleted file mode 100644
index 5a6d801171..0000000000
--- a/public/javascripts/growler.js
+++ /dev/null
@@ -1,168 +0,0 @@
-/**
- * k.Growler 1.0.0
- *
- * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
- * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
- *
- * Written by Kevin Armstrong <kevin@kevinandre.com>
- * Last updated: 2008.10.14
- *
- * Growler is a PrototypeJS based class that displays unobtrusive notices on a page.
- * It functions much like the Growl (http://growl.info) available on the Mac OS X.
- *
- * Changes in 1.0.1:
- * -
- *
- * @todo
- */
-window.k = window.k || {};
-;(function(){
-
-var noticeOptions = {
-	header: 			'&nbsp;'
-	,speedin: 			0.3
-	,speedout: 			0.5
-	,outDirection: 		{ y: -20 }
-	,life: 				5
-	,sticky: 			false
-	,className: 		""
-};
-var growlerOptions = {
-	location: 			"tr"
-	,width: 			"250px"
-};
-var IE = (Prototype.Browser.IE) ? parseFloat(navigator.appVersion.split("MSIE ")[1]) || 0 : 0;
-function removeNotice(n, o){
-	o = o || noticeOptions;
-	new Effect.Parallel([
-		new Effect.Move(n, Object.extend({ sync: true, mode: 'relative' }, o.outDirection)),
-		new Effect.Opacity(n, { sync: true, to: 0 })
-	], {
-		duration: o.speedout
-		,afterFinish: function(){
-			try {
-				var ne = n.down("div.notice-exit");
-				if(ne != undefined){
-					ne.stopObserving("click", removeNotice);
-				}
-				if(o.created && Object.isFunction(o.created)){
-					n.stopObserving("notice:created", o.created);
-				}
-				if(o.destroyed && Object.isFunction(o.destroyed)){
-					n.fire("notice:destroyed");
-					n.stopObserving("notice:destroyed", o.destroyed);
-				}
-			} catch(e){}
-			try {
-				n.remove();
-			} catch(e){}
-		}
-	});
-}
-function createNotice(growler, msg, options){
-	var opt = Object.clone(noticeOptions);
-	options = options || {};
-	Object.extend(opt, options);
-	var notice;
-	if (opt.className != ""){
-		notice = new Element("div", {"class": opt.className}).setStyle({display: "block", opacity: 0});
-	} else {
-		notice = new Element("div", {"class": "Growler-notice"}).setStyle({display: "block", opacity: 0});
-	}
-	if(opt.created && Object.isFunction(opt.created)){
-		notice.observe("notice:created", opt.created);
-	}
-	if(opt.destroyed && Object.isFunction(opt.destroyed)){
-		notice.observe("notice:destroyed", opt.destroyed);
-	}
-	if (opt.sticky){
-		var noticeExit = new Element("div", {"class": "Growler-notice-exit"}).update("&times;");
-		noticeExit.observe("click", function(){ removeNotice(notice, opt); });
-		notice.insert(noticeExit);
-	}
-	notice.insert(new Element("div", {"class": "Growler-notice-head"}).update(opt.header));
-	notice.insert(new Element("div", {"class": "Growler-notice-body"}).update(msg));
-	growler.insert(notice);
-	new Effect.Opacity(notice, { to: 0.85, duration: opt.speedin });
-	if (!opt.sticky){
-		removeNotice.delay(opt.life, notice, opt);
-	}
-	notice.fire("notice:created");
-	return notice;
-}
-function specialNotice(g, m, o, t, b, c){
-	o.header = o.header || t;
-	var n = createNotice(g, m, o);
-	n.setStyle({ backgroundColor: b, color: c });
-	return n;
-}
-k.Growler = Class.create({
-	initialize: function(options){
-		var opt = Object.clone(growlerOptions);
-		options = options || {};
-		Object.extend(opt, options);
-		this.growler = new Element("div", { "class": "Growler", "id": "Growler" });
-		this.growler.setStyle({ position: ((IE==6)?"absolute":"fixed"), padding: "10px", "width": opt.width, "z-index": "50000" });
-		if(IE==6){
-			var offset = { w: parseInt(this.growler.style.width)+parseInt(this.growler.style.padding)*3, h: parseInt(this.growler.style.height)+parseInt(this.growler.style.padding)*3 };
-			switch(opt.location){
-				case "br":
-					this.growler.style.setExpression("left", "( 0 - Growler.offsetWidth + ( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth ) + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px'");
-				  	this.growler.style.setExpression("top", "( 0 - Growler.offsetHeight + ( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px'");
-					break;
-				case "tl":
-					this.growler.style.setExpression("left", "( 0 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px'");
-				  	this.growler.style.setExpression("top", "( 0 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px'");
-					break;
-				case "bl":
-					this.growler.style.setExpression("left", "( 0 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px'");
-				  	this.growler.style.setExpression("top", "( 0 - Growler.offsetHeight + ( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px'");
-					break;
-				default:
-					this.growler.setStyle({right: "auto", bottom: "auto"});
-					this.growler.style.setExpression("left", "( 0 - Growler.offsetWidth + ( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth ) + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px'");
-				  	this.growler.style.setExpression("top", "( 0 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px'");
-					break;
-			}
-		} else {
-			switch(opt.location){
-				case "br":
-					this.growler.setStyle({bottom: 0, right: 0});
-					break;
-				case "tl":
-					this.growler.setStyle({top: 0, left: 0});
-					break;
-				case "bl":
-					this.growler.setStyle({top: 0, right: 0});
-					break;
-				case "tc":
-					this.growler.setStyle({top: 0, left: "25%", width: "50%"});
-					break;
-				case "bc":
-					this.growler.setStyle({bottom: 0, left: "25%", width: "50%"});
-					break;
-				default:
-					this.growler.setStyle({top: 0, right: 0});
-					break;
-			}
-		}
-		this.growler.wrap( document.body );
-	}
-	,growl: function(msg, options) {
-		return createNotice(this.growler, msg, options);
-	}
-	,warn: function(msg, options){
-		return specialNotice(this.growler, msg, options, "Warning!", "#F6BD6F", "#000");
-	}
-	,error: function(msg, options){
-		return specialNotice(this.growler, msg, options, "Critical!", "#F66F82", "#000");
-	}
-	,info: function(msg, options){
-		return specialNotice(this.growler, msg, options, "Information!", "#BBF66F", "#000");
-	}
-	,ungrowl: function(n, o){
-		removeNotice(n, o);
-	}
-});
-
-})();
diff --git a/public/stylesheets/growler.css b/public/stylesheets/growler.css
deleted file mode 100644
index d87436663c..0000000000
--- a/public/stylesheets/growler.css
+++ /dev/null
@@ -1,216 +0,0 @@
-ul.code {
-	background-color: #EEE;
-	border-left: 5px solid;
-	font-size: 12px;
-}
-ul.code li {
-	list-style-type: none;
-}
-td, th {
-	padding: 5px;
-	vertical-align: top;
-}
-th {
-	background-color: #9C0;
-	text-align: center;
-	font-weight: bold;
-}
-td.shaded {
-	background-color: #E8FCCF;
-}
-div.growlerexamples > div {
-	background-color: #EEE;
-	margin: 5px 0;
-	padding: 1px 5px;
-}
-div.growlerexamples div pre {
-
-}
-div.growlerexamples > div code {
-	margin-left: 20px;
-}
-div.growlerexamples span.runner {
-	color: #7090C0;
-	text-decoration: none;
-	border-bottom: 1px dotted;
-	font-weight: bold;
-	cursor: pointer;
-	margin-left: 5px;
-	font-size: .8em;
-}
-div.growlerexamples span:hover {
-
-}
-div#noticeevents {
-	border: 1px solid #999;
-}
-div#noticeevents div {
-	border-bottom: 1px dotted #DDD;
-	padding: 3px;
-	margin: 0px;
-}
-
-/** Growler Notice Custom Styling **/
-div.Growler-notice {
-	background-color: 		#000;
-	color: 					#fff;
-	opacity: 				.85;
-	filter: 				alpha(opacity = 85);
-	zoom: 					1;
-	width: 					235px;
-	padding: 				10px;
-	margin-top: 			5px;
-	margin-bottom: 			5px;
-	margin-left: 			auto;
-	margin-right: 			auto;
-	font-family: 			Tahoma, Arial, Helvetica, sans-serif;
-	font-size: 				12px;
-	text-align: 			left;
-	display: 				none;
-	-moz-border-radius: 	5px;
-	-webkit-border-radius:	5px;
-	min-height: 			40px;
-}
-
-div.Growler-notice-head {
-	font-weight: 			bold;
-	font-size:				10px;
-}
-
-div.Growler-notice-exit {
-	float: 					right;
-	font-weight: 			bold;
-	font-size: 				12px;
-	cursor:					pointer;
-}
-
-/** Plain Theme **/
-div.plain {
-	color: 					#000;
-	width: 					253px;
-	margin-top: 			5px;
-	margin-bottom: 			5px;
-	text-align: 			left;
-	display: 				none;
-	min-height: 			40px;
-	background-color: 		#EDEDED;
-	border: 				1px solid #777;
-}
-
-div.plain div.Growler-notice-head {
-	font-weight: 			bold;
-	font-size:				10px;
-	padding: 				2px 10px;
-}
-
-div.plain div.Growler-notice-exit {
-	float: 					right;
-	cursor:					pointer;
-	margin: 				0px;
-	padding: 				0px 0px 2px 2px;
-	width: 					10px;
-	height: 				10px;
-	color: 					#BFBFBF;
-}
-div.plain div.Growler-notice-body {
-	padding: 5px;
-}
-
-
-/** Mac OS X Theme **/
-div.macosx {
-	color: 					#000;
-	width: 					253px;
-	margin-top: 			5px;
-	margin-bottom: 			5px;
-	text-align: 			left;
-	display: 				none;
-	min-height: 			40px;
-	background: #d7d7d7 url(../images/macosx.jpg) repeat-y 0;
-	border: 				1px solid #C9C9C9;
-}
-
-div.macosx div.Growler-notice-head {
-	font-weight: 			bold;
-	font-size:				10px;
-	padding: 				5px 10px;
-}
-
-div.macosx div.Growler-notice-exit {
-	width: 					15px;
-	height: 				15px;
-	float: 					left;
-	cursor:					pointer;
-	margin: 				4px;
-	margin-left: 			1px;
-	font-size: 				0em;
-	color: 					transparent;
-	background: transparent url(../images/macosx_exit.png) no-repeat left 0;
-}
-div.macosx div.Growler-notice-exit:hover {
-	background: transparent url(../images/macosx_exit_over.png) no-repeat left 0;
-}
-div.macosx div.Growler-notice-body {
-	padding: 2px 0 10px 25px;
-}
-
-/** Candybars Theme **/
-div.candybar {
-	color: 					#000;
-	width: 					253px;
-	margin-top: 			5px;
-	margin-bottom: 			5px;
-	text-align: 			left;
-	display: 				none;
-	min-height: 			40px;
-	background-color: 		#F5F7FA;
-	border: 				1px solid #19304B;
-}
-
-div.candybar div.Growler-notice-head {
-	font-weight: 			bold;
-	font-size:				10px;
-	background: 			url(../images/candybars.jpg) repeat-x;
-	padding: 				5px 10px;
-}
-
-div.candybar div.Growler-notice-exit {
-	float: 					right;
-	cursor:					pointer;
-	margin: 				3px;
-}
-div.candybar div.Growler-notice-body {
-	border-top: 1px solid #999;
-	padding: 10px;
-}
-
-/** Construction Theme **/
-div.atwork {
-	color: 					#FFF;
-	width: 					253px;
-	margin-top: 			5px;
-	margin-bottom: 			5px;
-	text-align: 			left;
-	display: 				none;
-	min-height: 			40px;
-	background: 			#4d4d4d url(../images/atwork.png) repeat-y 0;
-	border: 				1px solid #222;
-}
-
-div.atwork div.Growler-notice-head {
-	font-weight: 			bold;
-	font-size:				12px;
-	padding: 				5px 20px;
-	color: 					#efca23;
-
-}
-
-div.atwork div.Growler-notice-exit {
-	float: 					right;
-	cursor:					pointer;
-	margin: 				3px;
-}
-div.atwork div.Growler-notice-body {
-	padding: 2px 0 10px 25px;
-}
-