From 1c7810783cf8a4b4b1359266b2af7b87fda4160a Mon Sep 17 00:00:00 2001
From: John McLear <john@mclear.co.uk>
Date: Tue, 29 Jan 2013 01:55:36 +0000
Subject: [PATCH] gritter now implemented

---
 src/static/css/pad.css     |  92 +++++++++++++++++++++++++++++++++++++
 src/static/img/gritter.png | Bin 0 -> 4880 bytes
 src/static/js/chat.js      |  34 ++++++++++++--
 src/static/js/gritter.js   |   1 -
 src/static/js/pad.js       |   7 +++
 src/templates/pad.html     |   2 -
 6 files changed, 129 insertions(+), 7 deletions(-)
 create mode 100644 src/static/img/gritter.png

diff --git a/src/static/css/pad.css b/src/static/css/pad.css
index bbbadbc18..6034b5edc 100644
--- a/src/static/css/pad.css
+++ b/src/static/css/pad.css
@@ -925,3 +925,95 @@ input[type=checkbox] {
 #wrongPassword{
   display:none;
 }
+
+/* gritter stuff */
+#gritter-notice-wrapper {
+  position:fixed;
+  top:20px;
+  right:20px;
+  width:301px;
+  z-index:9999;
+}
+#gritter-notice-wrapper.bottom-right {
+  top: auto;
+  left: auto;
+  bottom: 20px;
+  right: 20px;
+}
+.gritter-item-wrapper {
+  position:relative;
+  margin:0 0 10px 0;
+}
+
+.gritter-top {
+  background:url(../../static/img/gritter.png) no-repeat left -30px;
+  height:10px;
+}
+.hover .gritter-top {
+  background-position:right -30px;
+}
+.gritter-bottom {
+  background:url(../../static/img/gritter.png) no-repeat left bottom;
+  height:8px;
+  margin:0;
+}
+.hover .gritter-bottom {
+  background-position: bottom right;
+}
+.gritter-item {
+  display:block;
+  background:url(../../static/img/gritter.png) no-repeat left -40px;
+  color:#eee;
+  padding:2px 11px 8px 11px;
+  font-size: 11px;
+  font-family:verdana;
+}
+.hover .gritter-item {
+  background-position:right -40px;
+}
+.gritter-item p {
+  padding:0;
+  margin:0;
+}
+.gritter-close {
+  display:none;
+  position:absolute;
+  top:5px;
+  left:3px;
+  background:url('../../static/img/gritter.png') no-repeat left top;
+  cursor:pointer;
+  width:30px;
+  height:30px;
+}
+.gritter-title {
+  font-size:14px;
+  font-weight:bold;
+  padding:0 0 7px 0;
+  display:block;
+  text-shadow:1px 1px 0 #000; /* Not supported by IE :( */
+}
+.gritter-image {
+  width:48px;
+  height:48px;
+  float:left;
+}
+.gritter-with-image,
+.gritter-without-image {
+  padding:0 0 5px 0;
+}
+.gritter-with-image {
+  width:220px;
+  float:right;
+}
+/* for the light (white) version of the gritter notice */
+.gritter-light .gritter-item,
+.gritter-light .gritter-bottom,
+.gritter-light .gritter-top,
+.gritter-close {
+  color: #222;
+}
+.gritter-light .gritter-title {
+  text-shadow: none;
+}
+
+/* End of gritter stuff */
diff --git a/src/static/img/gritter.png b/src/static/img/gritter.png
new file mode 100644
index 0000000000000000000000000000000000000000..0ca3bc0a0f8068194082db9719d6e20a8645985f
GIT binary patch
literal 4880
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
Zf3P5-;PGuo@D~?gbJgKWjfL<1{{eTAuA%?{

literal 0
HcmV?d00001

diff --git a/src/static/js/chat.js b/src/static/js/chat.js
index 205294a85..f868d869a 100644
--- a/src/static/js/chat.js
+++ b/src/static/js/chat.js
@@ -22,7 +22,6 @@
 
 var padutils = require('./pad_utils').padutils;
 var padcookie = require('./pad_cookie').padcookie;
-
 var Tinycon = require('tinycon/tinycon');
 
 var chat = (function()
@@ -36,6 +35,7 @@ var chat = (function()
     {      
       $("#chaticon").hide();
       $("#chatbox").show();
+      $("#gritter-notice-wrapper").hide();
       self.scrollDown();
       chatMentions = 0;
       Tinycon.setBubble(0);
@@ -62,6 +62,8 @@ var chat = (function()
       $("#chatcounter").text("0");
       $("#chaticon").show();
       $("#chatbox").hide();
+      $.gritter.removeAll();
+      $("#gritter-notice-wrapper").show();
     },
     scrollDown: function()
     {
@@ -130,17 +132,41 @@ var chat = (function()
         // is the users focus already in the chatbox?
         var alreadyFocused = $("#chatinput").is(":focus");
         
+        // does the user already have the chatbox open?
+        var chatOpen = $("#chatbox").is(":visible");
+
         $("#chatcounter").text(count);
         // chat throb stuff -- Just make it throw for twice as long
-        if(wasMentioned && !alreadyFocused && !isHistoryAdd)
+        if(wasMentioned && !alreadyFocused && !isHistoryAdd && !chatOpen)
         { // If the user was mentioned show for twice as long and flash the browser window
-          $('#chatthrob').html("<b>"+authorName+"</b>" + ": " + text).show().delay(4000).hide(400);
+          $.gritter.add({
+            // (string | mandatory) the heading of the notification
+            title: authorName,
+            // (string | mandatory) the text inside the notification
+            text: text,
+            // (bool | optional) if you want it to fade out on its own or just sit there
+            sticky: true,
+            // (int | optional) the time you want it to be alive for before fading out
+            time: '2000'
+          });
+
           chatMentions++;
           Tinycon.setBubble(chatMentions);
         }
         else
         {
-          $('#chatthrob').html("<b>"+authorName+"</b>" + ": " + text).show().delay(2000).hide(400);
+          if(!chatOpen){
+            $.gritter.add({
+              // (string | mandatory) the heading of the notification
+              title: authorName,
+              // (string | mandatory) the text inside the notification
+              text: text,
+              // (bool | optional) if you want it to fade out on its own or just sit there
+              sticky: false,
+              // (int | optional) the time you want it to be alive for before fading out
+              time: '4000'
+            });
+          }
         }
       }
        // Clear the chat mentions when the user clicks on the chat input box
diff --git a/src/static/js/gritter.js b/src/static/js/gritter.js
index 35076f174..c32cc758e 100644
--- a/src/static/js/gritter.js
+++ b/src/static/js/gritter.js
@@ -10,7 +10,6 @@
  */
 
 (function($){
- 	
 	/**
 	* Set it up as an object under the jQuery namespace
 	*/
diff --git a/src/static/js/pad.js b/src/static/js/pad.js
index 6a115868e..93e785cdd 100644
--- a/src/static/js/pad.js
+++ b/src/static/js/pad.js
@@ -364,6 +364,13 @@ function handshake()
   });
 }
 
+$.extend($.gritter.options, { 
+        position: 'bottom-right', // defaults to 'top-right' but can be 'bottom-left', 'bottom-right', 'top-left', 'top-right' (added in 1.7.1)
+	fade_in_speed: 'medium', // how fast notifications fade in (string or int)
+	fade_out_speed: 2000, // how fast the notices fade out
+	time: 6000 // hang on the screen for...
+});
+
 var pad = {
   // don't access these directly from outside this file, except
   // for debugging
diff --git a/src/templates/pad.html b/src/templates/pad.html
index cb88c1c1a..76df5133c 100644
--- a/src/templates/pad.html
+++ b/src/templates/pad.html
@@ -365,8 +365,6 @@
             <% e.end_block(); %>
         </div>
 
-        <div id="chatthrob"></div>
-
         <div id="chaticon" onclick="chat.show();return false;">
             <span id="chatlabel" data-l10n-id="pad.chat"></span>
             <span class="buttonicon buttonicon-chat"></span>