proper notifications init

css/notify.css

@@ -14,17 +14,26 @@
     padding: 0.2rem 2rem;
     min-height: 4rem;
     border-radius: 8px;
-    background-color: var(--bg-color-alt);
-    color: var(--fg-color-alt);
+    background-color: var(--bg-color);
+    color: var(--fg-color);
     box-shadow: var(--shadow-2);
     transition: all 0.5s;
     z-index: 5000;
 }
 
+div[data-notify]{
+    display: none;
+}
+
 .notify *{
     margin: 0;
 }
 
+.notify a{
+    color: inherit;
+    text-decoration: underline;
+}
+
 .notify__done{
     position: absolute;
     top: 5px;

js/notify.js

@@ -29,3 +29,19 @@ function notify(message, bg_color, fg_color, id){
         $('body').append(notice);
     }
 }
+
+
+$( document ).ready(function() {
+    let notifications = document.querySelectorAll('[data-notify]');
+    notifications.forEach(n => {
+        let message = n.innerHTML;
+        let bgcolor = n.getAttribute('data-bgcolor');
+        let fgcolor = n.getAttribute('data-fgcolor');
+        let id = n.getAttribute('data-id');
+
+        if (!!message) {
+            notify(message,bgcolor,fgcolor, id);            
+        }
+
+    });
+});

templates/partials/notifications.html.twig

@@ -2,14 +2,29 @@
 	{% for n in p.header.notifications if n.visible == true %}
 		{% set content = n.content|markdown %}
 		{% set id = n.remember ? n.id %}
+		{% set remember = n.remember %}
 		{% set bg_color = n.bg_color %}
 		{% set fg_color = n.fg_color %}
+
 		{% if n.target %}
 			{% for t in n.target if t == page.rawroute %}
-				<script>notify("{{ content }}", "{{ bg_color }}", "{{ fg_color }}", "{{ id }}");</script>
+				<div 
+				data-notify
+				data-bgcolor="{{ bg_color }}" 
+				data-fgcolor="{{ fg_color }}"
+				{% if id and remember %}data-id="{{ id }}"{% endif %}>
+				{{ content }}
+				</div>
 			{% endfor %}
+
 		{% else %}
-			<script>notify("{{ content }}", "{{ bg_color }}", "{{ fg_color }}", "{{ id }}");</script>
+			<div 
+			data-notify
+			data-bgcolor="{{ bg_color }}" 
+			data-fgcolor="{{ fg_color }}"
+			{% if id and remember %}data-id="{{ id }}"{% endif %}>
+			{{ content }}
+			</div>
 		{% endif %}
 	{% endfor %}
 {% endfor %}