css: improve gritters

- have two containers, one of the top, on of the bottom;
- remove gritting chat message when opening the chat.

src/static/js/chat.js

@@ -32,9 +32,12 @@ var chat = (function()
     {
       $("#chaticon").removeClass('visible');
       $("#chatbox").addClass('visible');
-      self.scrollDown();
+      self.scrollDown(true);
       chatMentions = 0;
       Tinycon.setBubble(0);
+      $('.chat-gritter-msg').each(function() {
+        $.gritter.remove(this.id);
+      });
     },
     focus: function ()
     {
@@ -86,10 +89,10 @@ var chat = (function()
         $("#chatbox").removeClass('visible');
       }
     },
-    scrollDown: function()
+    scrollDown: function(force)
     {
-      if($('.chat-content').is(':visible')){
-        if(!self.lastMessage || !self.lastMessage.position() || self.lastMessage.position().top < ($('#chattext').outerHeight() + 20)) {
+      if ($('#chatbox').hasClass('visible')) {
+        if (force || !self.lastMessage || !self.lastMessage.position() || self.lastMessage.position().top < ($('#chattext').outerHeight() + 20)) {
           // if we use a slow animate here we can have a race condition when a users focus can not be moved away
           // from the last message recieved.
           $('#chattext').animate({scrollTop: $('#chattext')[0].scrollHeight}, { duration: 400, queue: false });
@@ -155,14 +158,14 @@ var chat = (function()
       var alreadyFocused = $("#chatinput").is(":focus");
 
       // does the user already have the chatbox open?
-      var chatOpen = $(".chat-content").is(":visible");
+      var chatOpen = $("#chatbox").hasClass("visible");
 
       // does this message contain this user's name? (is the curretn user mentioned?)
       var myName = $('#myusernameedit').val();
       var wasMentioned = (text.toLowerCase().indexOf(myName.toLowerCase()) !== -1 && myName != "undefined");
 
       if(wasMentioned && !alreadyFocused && !isHistoryAdd && !chatOpen)
-      { // If the user was mentioned show for twice as long and flash the browser window
+      { // If the user was mentioned, make the message sticky
         chatMentions++;
         Tinycon.setBubble(chatMentions);
         ctx.sticky = true;
@@ -187,14 +190,11 @@ var chat = (function()
 
           if(!chatOpen && ctx.duration > 0) {
             $.gritter.add({
-              // (string | mandatory) the heading of the notification
-              title: ctx.authorName,
-              // (string | mandatory) the text inside the notification
-              text: ctx.text,
-              // (bool | optional) if you want it to fade out on its own or just sit there
+              text: '<span class="author-name">' + ctx.authorName + '</span>' + ctx.text,
               sticky: ctx.sticky,
-              // (int | optional) the time you want it to be alive for before fading out
-              time: ctx.duration
+              time: 5000,
+              position: 'bottom',
+              class_name: 'chat-gritter-msg'
             });
           }
         }

src/static/js/gritter.js

@@ -50,7 +50,7 @@
 	* @see Gritter#removeSpecific();
 	*/
 	$.gritter.remove = function(id, params){
-		Gritter.removeSpecific(id, params || {});
+		Gritter.removeSpecific(id.split('gritter-item-')[1], params || {});
 	}
 
 	/**
@@ -74,7 +74,8 @@
 		_custom_timer: 0,
 		_item_count: 0,
 		_is_setup: 0,
-		_tpl_wrap: '<div id="gritter-container"></div>',
+		_tpl_wrap_top: '<div id="gritter-container" class="top"></div>',
+		_tpl_wrap_bottom: '<div id="gritter-container" class="bottom"></div>',
 		_tpl_close: '',
 		_tpl_title: '<h3 class="gritter-title">[[title]]</h3>',
 		_tpl_item: [
@@ -114,6 +115,7 @@
 			var title = params.title,
 				text = params.text,
 				image = params.image || '',
+				position = params.position || 'top',
 				sticky = params.sticky || false,
 				item_class = params.class_name || $.gritter.options.class_name,
 				time_alive = params.time || '';
@@ -158,7 +160,11 @@
 				return false;
 			}
 
-			$('#gritter-container').append(tmp);
+			if (['top', 'bottom'].indexOf(position) == -1) {
+				position = 'top';
+			}
+
+			$('#gritter-container.' + position).append(tmp);
 
 			var item = $('#gritter-item-' + this._item_count);
 
@@ -199,9 +205,11 @@
 			this['_after_close_' + unique_id](e, manual_close);
 
 			// Remove container if empty
-			if ($('#gritter-container .gritter-item').length == 0) {
-				$('#gritter-container').remove();
-			}
+			$('#gritter-container').each(function() {
+				if ($(this).find('.gritter-item').length == 0) {
+					$(this).remove();
+				}
+			})
 		},
 
 		/**
@@ -367,11 +375,13 @@
 		* @private
 		*/
 		_verifyWrapper: function(){
-
-			if($('#gritter-container').length == 0){
-				$('#editorcontainerbox').append(this._tpl_wrap);
+			if ($('#gritter-container.top').length === 0) {
+				$('#editorcontainerbox').append(this._tpl_wrap_top);
 			}
 
+			if ($('#gritter-container.bottom').length === 0) {
+				$('#editorcontainerbox').append(this._tpl_wrap_bottom);
+			}
 		}
 
 	}

src/static/js/pad_savedrevs.js

@@ -24,7 +24,9 @@ exports.saveNow = function(){
     // (string | mandatory) the text inside the notification
     text: _("pad.savedrevs.timeslider") || "You can view saved revisions in the timeslider",
     // (bool | optional) if you want it to fade out on its own or just sit there
-    sticky: false
+    sticky: false,
+    time: 3000,
+    class_name: "saved-revision",
   });
 }