client-side dynamic notifications

Author: agent725

nak/webapp/views/admin.phtml

@@ -1,8 +1,10 @@
+<?php include ('notify/js/notify.pjs'); ?>
 <?php include ('admin/js/admin.pjs'); ?>
 
 <?php include ('admin/menu.phtml'); ?>
+<?php include ('notify/notify.phtml'); ?>
 
-<div class="row">
+<div class="row" style="margin-top: 30px;">
     <div class="col-xs-12 col-md-6">
         <img src="/img/logo/logo-nak-square.png">
         <?php echo _('<h3>Welcome!</h3>'); ?>

nak/webapp/views/notify/js/notify.pjs

@@ -0,0 +1,79 @@
+<script type="text/javascript">
+	notifications = [];
+	notification_active = false;
+
+	// push a notification to the client-side messages stack	
+	pushNotification = function(notification) {
+		if(typeof notification != 'undefined') {
+			notifications.push(notification);
+		}
+		if(notification_active == false) {
+			openNotification(notifications.pop());
+		}
+	}
+	
+	// open a notification
+	openNotification = function(notification) {
+		if(typeof notification != 'undefined') {
+			notification_active == true;
+			var message = notification[0];
+			var type = notification[1];
+			var closetext = notification[2];
+			var buttontext = notification[3];
+			var buttonfunction = notification[4];
+			if(typeof type == 'undefined' || type == '') { type = 'success'; }
+			if(typeof closetext == 'undefined' || closetext == '') { closetext = 'X'; }
+			// buttons
+			output = '<div class="notify-buttons" style="position: absolute; bottom: 15px; right: 15px;">';
+			if(typeof buttontext != 'undefined') {
+				output += '<button onclick="'+buttonfunction+';" class="btn btn-sm btn-primary">'+buttontext+'</button><div style="width: 12px; display: inline-block;"></div>';
+			}
+			output += '<button onclick="closeNotification();" class="btn btn-sm btn-danger">'+closetext+'</button></div>';
+			// content
+			// <p style="font-weight: bold;">Alert title</p>
+			output += '<p>'+message+'</p>';
+			$('#notify').attr('class','alert alert-'+type);
+			$('#notify > div').html(output);
+			// close after 30 seconds
+			notification_active = setTimeout( function() {
+				closeNotification();
+			}, 30000);
+		}
+	}
+
+	// close a notification
+	closeNotification = function() {
+		clearTimeout(notification_active);
+		// close current message
+		var notifyclass = $('#notify').attr('class');
+		$('#notify').attr('class',notifyclass+' notify-hidden');
+		setTimeout( function() {
+			// any new messages on the stack? open the next one
+			notification_active == false;
+			openNotification(notifications.pop());
+		}, 1000);
+	}
+
+	// get all PHP generated info boxes, and convert them to push Notifications
+	convertNotifications = function() {
+		var infobox = 'div.tile.error';
+		$(infobox).each(function() {
+			var message = $(infobox).html();
+			pushNotification([message,'error','Close']);
+		});
+		var infobox = 'div.tile.info';
+		$(infobox).each(function() {
+			var message = $(infobox).html();
+			pushNotification([message,'success','Close']);
+		});
+	}
+	
+    $(document).ready(function() {
+		convertNotifications();
+	});
+	
+	// EXAMPLES:
+	//	pushNotification(['This is a test also...','success','Close','Test','alert("WOOT!")']);
+	//	pushNotification(['This is a test and more stuff!...','warning','Close']);
+	
+</script>

nak/webapp/views/notify/notify.phtml

@@ -0,0 +1,4 @@
+<div id="notify" class="alert notify-hidden" role="alert" style="position: relative;">
+	<div class="alert-content">
+	</div>
+</div>

www/dist/css/style.css

@@ -36,3 +36,29 @@ body {
 #wifi-list .radio {
 	padding-right: 8px;
 }
+
+#notify {
+	transition: all 2s ease;
+	overflow: hidden;
+	max-height: 128px;
+	opacity: 1;
+}
+
+.notify-hidden {
+	transition: all 2s ease;
+	max-height: 0 !important;
+	opacity: 0 !important;
+	padding: 0;
+}
+
+.notify-hidden .notify-buttons {
+	bottom: 0;
+}
+
+/* Notifications now converted and handled by client-side Javascript */
+.tile.info {
+	display: none;
+}
+.tile.error {
+	display: none;
+}