start removing jgrowl

4 files changed, 33 insertions, 5 deletions

diff --git a/view/js/main.js b/view/js/main.js
index c9798dede..f38d9db2d 100644
--- a/view/js/main.js
+++ b/view/js/main.js
@@ -1305,7 +1305,8 @@ function dropItem(url, object, b64mid) {
 			$(object + ', #pinned-wrapper-' + id).remove();
 			$('body').css('cursor', 'auto');
 
-			$.jGrowl(aStr.itemdel, { sticky: false, theme: 'info', life: 3000 });
+			toast(aStr.itemdel, 'info')
+			//$.jGrowl(aStr.itemdel, { sticky: false, theme: 'info', life: 3000 });
 
 			if (typeof b64mid !== typeof undefined) {
 				$('[data-b64mid=\'' + b64mid + '\']').fadeOut(function() {
@@ -1408,7 +1409,8 @@ function submitPoll(id) {
 	$.post('vote/' + id,
 		$('#question-form-' + id).serialize(),
 		function(data) {
-			$.jGrowl(data.message, { sticky: false, theme: ((data.success) ? 'info' : 'notice'), life: 10000 });
+			toast(data.message, ((data.success) ? 'info' : 'danger'));
+			//$.jGrowl(data.message, { sticky: false, theme: ((data.success) ? 'info' : 'notice'), life: 10000 });
 			if(timer) clearTimeout(timer);
 			timer = setTimeout(updateInit, 500);
 		}
@@ -1815,3 +1817,20 @@ function toggleAside() {
 		$('<div id="overlay"></div>').appendTo('body').one('click', function() { toggleAside(); });
 	}
 }
+
+function toast(string, severity) {
+	let container = document.getElementById('toast-container');
+	let toast = document.createElement('div');
+
+	toast.innerHTML = '<div class="d-flex"><div class="toast-body">' + string + '</div><button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button></div>';
+	toast.classList.add('toast', 'p-2', 'm-3', 'bg-' + severity + '-subtle', 'text-' + severity + '-emphasis', 'border-' + severity,);
+	container.prepend(toast);
+
+	let toastInstance = bootstrap.Toast.getOrCreateInstance(toast);
+
+	if (severity === 'danger') {
+		toastInstance._config.autohide = false;
+	}
+
+	toastInstance.show();
+}
diff --git a/view/theme/redbasic/css/style.css b/view/theme/redbasic/css/style.css
index 56194c735..05cd75422 100644
--- a/view/theme/redbasic/css/style.css
+++ b/view/theme/redbasic/css/style.css
@@ -168,6 +168,11 @@ input[type=text], textarea {
 	color: #FF0000;
 }
 
+#toast-container {
+	z-index: 1030;
+	width: 300px;
+}
+
 #powered-by {
 	font-size: 0.5rem;
 	position: absolute;
@@ -719,6 +724,7 @@ div.jGrowl div.info {
   color: #ffffff;
   padding-left: 58px;
 }
+
 #jGrowl.top-right {
 	top: 4.5rem;
 	right: .25rem;
diff --git a/view/tpl/hdr.tpl b/view/tpl/hdr.tpl
index e69de29bb..7d20633bc 100644
--- a/view/tpl/hdr.tpl
+++ b/view/tpl/hdr.tpl
@@ -0,0 +1 @@
+<div id="toast-container" class="position-fixed top-0 end-0 me-4"></div>
diff --git a/view/tpl/notifications_widget.tpl b/view/tpl/notifications_widget.tpl
index 9ea5ffec6..aa53905ad 100644
--- a/view/tpl/notifications_widget.tpl
+++ b/view/tpl/notifications_widget.tpl
@@ -337,17 +337,19 @@
 		sse_setNotificationsStatus();
 
 		// notice and info
-		$.jGrowl.defaults.closerTemplate = '<div>[ ' + aStr.closeAll + ']</div>';
+		//$.jGrowl.defaults.closerTemplate = '<div>[ ' + aStr.closeAll + ']</div>';
 
 		if(obj.notice) {
 			$(obj.notice.notifications).each(function() {
-				$.jGrowl(this, { sticky: true, theme: 'notice' });
+				toast(this, 'danger');
+				//$.jGrowl(this, { sticky: true, theme: 'notice' });
 			});
 		}
 
 		if(obj.info) {
 			$(obj.info.notifications).each(function(){
-				$.jGrowl(this, { sticky: false, theme: 'info', life: 10000 });
+				toast(this, 'info');
+				//$.jGrowl(this, { sticky: false, theme: 'info', life: 10000 });
 			});
 		}