css: improve gritter

- rename DOM wrapper because is was blacklisted by some ad blocker
- make the template and the lib to add gritter more simple (remove unused
  option, make template simpler)
- add style for gritter error message

src/static/css/pad/gritter.css

@@ -1,130 +1,36 @@
-#gritter-notice-wrapper {
+#gritter-container {
-  position:fixed;
+  position: absolute;
-  top:20px;
+  bottom: 0;
-  right:20px;
+  right: 0;
-  width:301px;
+  left: 0;
-  z-index:9999;
+  text-align: center;
-  background-color:#666;
+  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 {
-  height:10px;
-}
-.hover .gritter-top {
-  background-position:right -30px;
-}
-.gritter-bottom {
-  height:8px;
-  margin:0;
-}
-.hover .gritter-bottom {
-  background-position: bottom right;
-}
 .gritter-item {
-  display:block;
+  position: relative;
-  color: #eee;
+  max-width: 400px;
-  padding: 2px 11px 8px 11px;
+  min-width: 0;
-  font-size: 11px;
+  width: 100%;
-}
+  margin: 0 auto;
-.hover .gritter-item {
+  display: flex;
-  background-position:right -40px;
-}
-.gritter-item p {
-  padding:0;
-  margin:0;
-}
-.gritter-close {
-  display:none;
-  position:absolute;
-  top:5px;
-  left:3px;
-  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;
 }
 
-@media all and (max-width: 400px){
+.gritter-item .gritter-content {
-  #gritter-notice-wrapper{
+  flex: 1 auto;
-    max-height:172px;
+  text-align: center;
-    overflow:hidden;
-    width:100% !important;
-    background-color: #ccc;
-    bottom:20px;
-    left:0px;
-    right:0px;
-    color:#000;
-  }
-  .gritter-close {
-    display:block !important;
-    left: auto !important;
-    right:5px;
-  }
-  #gritter-notice-wrapper.bottom-right{
-    left:0px !important;
-    bottom:30px !important;
-    right:0px !important;
-  }
-  .gritter-item p{
-    color:black;
-    font-size:16px;
-  }
-  .gritter-title{
-    text-shadow: none !important;
-    color:black;
-  }
-  .gritter-item{
-    padding:2px 11px 8px 4px;
-  }
-  .gritter-item-wrapper{
-    margin:0;
-  }
-  .gritter-item-wrapper > div{
-    background: none;
-  }
 }
-@media only screen and (max-width: 720px) {
+
-  #gritter-notice-wrapper{
+.gritter-item .gritter-close {
-    bottom:43px !important;
+  display: none;
-    right:10px !important;
+  align-self: center;
-  }
+}
+
+.gritter-item.sticky .gritter-close {
+  display: block;
+}
+
+.gritter-item.error {
+  color: #a84341;
+  background-color: #eed3d4;
 }

src/static/js/chat.js

@@ -32,7 +32,7 @@ var chat = (function()
     {
       $("#chaticon").hide();
       $("#chatbox").css('display', 'flex');
-      $("#gritter-notice-wrapper").hide();
+      $("#gritter-container").hide();
       self.scrollDown();
       chatMentions = 0;
       Tinycon.setBubble(0);
@@ -81,7 +81,7 @@ var chat = (function()
         $("#chaticon").show();
         $("#chatbox").hide();
         $.gritter.removeAll();
-        $("#gritter-notice-wrapper").show();
+        $("#gritter-container").show();
       }
     },
     scrollDown: function()

src/static/js/gritter.js

@@ -7,6 +7,8 @@
  *
  * Date: February 24, 2012
  * Version: 1.7.4
+ *
+ * Edited by Sebastian Castro <sebastian.castro@protonmail.com> on 2020-03-31
  */
 
 (function($){
@@ -66,19 +68,26 @@
 	var Gritter = {
 
 		// Public - options to over-ride with $.gritter.options in "add"
-		position: '',
+		fade_in_speed: '300',
-		fade_in_speed: '',
+		fade_out_speed: '200',
-		fade_out_speed: '',
 		time: '',
 
 		// Private - no touchy the private parts
 		_custom_timer: 0,
 		_item_count: 0,
 		_is_setup: 0,
-		_tpl_close: '<div class="gritter-close"></div>',
+		_tpl_wrap: '<div id="gritter-container"></div>',
-		_tpl_title: '<span class="gritter-title">[[title]]</span>',
+		_tpl_close: '',
-		_tpl_item: '<div id="gritter-item-[[number]]" class="gritter-item-wrapper [[item_class]]" style="display:none"><div class="gritter-top"></div><div class="gritter-item">[[close]][[image]]<div class="[[class_name]]">[[title]]<p>[[text]]</p></div><div style="clear:both"></div></div><div class="gritter-bottom"></div></div>',
+		_tpl_title: '<h3 class="gritter-title">[[title]]</h3>',
-		_tpl_wrap: '<div id="gritter-notice-wrapper" aria-live="polite" aria-atomic="false" aria-relevant="additions" role="log"></div>',
+		_tpl_item: [
+			'<div id="gritter-item-[[number]]" class="popup gritter-item [[item_class]]">',
+				'<div class="gritter-content">',
+					'[[title]]',
+					'<p>[[text]]</p>',
+				'</div>',
+				'<div class="gritter-close"><i class="buttonicon buttonicon-cancel"></i></div>',
+			'</div>'].join(''),
+
 
 		/**
 		* Add a gritter notification to the screen
@@ -107,11 +116,14 @@
 				image = params.image || '',
 				sticky = params.sticky || false,
 				item_class = params.class_name || $.gritter.options.class_name,
-				position = $.gritter.options.position,
 				time_alive = params.time || '';
 
 			this._verifyWrapper();
 
+			if (sticky) {
+				item_class += " sticky";
+			}
+
 			this._item_count++;
 			var number = this._item_count,
 				tmp = this._tpl_item;
@@ -129,9 +141,6 @@
 				this._custom_timer = time_alive;
 			}
 
-			var image_str = (image != '') ? '<img src="' + image + '" class="gritter-image" />' : '',
-				class_name = (image != '') ? 'gritter-with-image' : 'gritter-without-image';
-
 			// String replacements on the template
 			if(title){
 				title = this._str_replace('[[title]]',title,this._tpl_title);
@@ -140,8 +149,8 @@
 			}
 
 			tmp = this._str_replace(
-				['[[title]]', '[[text]]', '[[close]]', '[[image]]', '[[number]]', '[[class_name]]', '[[item_class]]'],
+				['[[title]]', '[[text]]', '[[number]]', '[[item_class]]'],
-				[title, text, this._tpl_close, image_str, this._item_count, class_name, item_class], tmp
+				[title, text, this._item_count, item_class], tmp
 			);
 
 			// If it's false, don't show another gritter message
@@ -149,7 +158,7 @@
 				return false;
 			}
 
-			$('#gritter-notice-wrapper').addClass(position).append(tmp);
+			$('#gritter-container').append(tmp);
 
 			var item = $('#gritter-item-' + this._item_count);
 
@@ -173,7 +182,6 @@
 						Gritter._setFadeTimer($(this), number);
 					}
 				}
-				Gritter._hoverState($(this), event.type);
 			});
 
 			// Clicking (X) makes the perdy thing close
@@ -200,7 +208,7 @@
 
 			// Check if the wrapper is empty, if it is.. remove the wrapper
 			if($('.gritter-item-wrapper').length == 0){
-				$('#gritter-notice-wrapper').remove();
+				$('#gritter-container').remove();
 			}
 
 		},
@@ -247,35 +255,6 @@
 
 		},
 
-		/**
-		* Perform actions based on the type of bind (mouseenter, mouseleave)
-		* @private
-		* @param {Object} e The jQuery element
-		* @param {String} type The type of action we're performing: mouseenter or mouseleave
-		*/
-		_hoverState: function(e, type){
-
-			// Change the border styles and add the (X) close button when you hover
-			if(type == 'mouseenter'){
-
-				e.addClass('hover');
-
-				// Show close button
-				e.find('.gritter-close').show();
-
-			}
-			// Remove the border styles and hide (X) close button when you mouse out
-			else {
-
-				e.removeClass('hover');
-
-				// Hide close button
-				e.find('.gritter-close').hide();
-
-			}
-
-		},
-
 		/**
 		* Remove a specific notification based on an ID
 		* @param {Integer} unique_id The ID used to delete a specific notification
@@ -346,7 +325,7 @@
 			var before_close = ($.isFunction(params.before_close)) ? params.before_close : function(){};
 			var after_close = ($.isFunction(params.after_close)) ? params.after_close : function(){};
 
-			var wrap = $('#gritter-notice-wrapper');
+			var wrap = $('#gritter-container');
 			before_close(wrap);
 			wrap.fadeOut(function(){
 				$(this).remove();
@@ -404,8 +383,8 @@
 		*/
 		_verifyWrapper: function(){
 
-			if($('#gritter-notice-wrapper').length == 0){
+			if($('#gritter-container').length == 0){
-				$('body').append(this._tpl_wrap);
+				$('#editorcontainerbox').append(this._tpl_wrap);
 			}
 
 		}

src/static/js/pad.js

@@ -364,12 +364,6 @@ 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: false, // dont fade, too jerky on mobile
-  time: 6000 // hang on the screen for...
-});
-
 var pad = {
   // don't access these directly from outside this file, except
   // for debugging

src/static/skins/colibris/src/components/gritter.css

@@ -4,7 +4,7 @@
   text-shadow: none;
 }
 
-#gritter-notice-wrapper {
+#gritter-container {
   background-color: #fff;
   box-shadow: 0 0 0 1px rgba(99, 114, 130, 0.16), 0 8px 16px rgba(27, 39, 51, 0.08);
   border-radius: 3px;
@@ -14,7 +14,7 @@
 }
 
 @media (max-width: 1100px) {
-  #gritter-notice-wrapper {
+  #gritter-container {
     display: none;
   }
 }