New landing page HQ with separate views for direct messages, public/limited messages and starred messages if the feature is enabled

1 files changed, 394 insertions, 61 deletions

diff --git a/view/tpl/notifications_widget.tpl b/view/tpl/notifications_widget.tpl
index 1092bc155..0d922e416 100644
--- a/view/tpl/notifications_widget.tpl
+++ b/view/tpl/notifications_widget.tpl
@@ -1,9 +1,17 @@
-{{if $notifications}}
 <script>
-	var notifications_parent;
+	var sse_bs_active = false;
+	var sse_offset = 0;
+	var sse_type;
+	var sse_partial_result = false;
+	var sse_rmids = [];
+	var sse_fallback_interval;
 
 	$(document).ready(function() {
-		notifications_parent = $('#notifications_wrapper')[0].parentElement.id;
+		let notifications_parent;
+		if ($('#notifications_wrapper').length) {
+			notifications_parent = $('#notifications_wrapper')[0].parentElement.id;
+		}
+
 		$('.notifications-btn').click(function() {
 			if($('#notifications_wrapper').hasClass('fs')) {
 				$('#notifications_wrapper').prependTo('#' + notifications_parent);
@@ -23,60 +31,118 @@
 			}
 		});
 
-		window.onpopstate = function(e) {
-			if(e.state !== null && e.state.b64mid !== bParam_mid)
-				getData(e.state.b64mid, '');
-		};
-	});
+		$(document).on('click', '.notification', function() {
+			if($('#notifications_wrapper').hasClass('fs')) {
+				$('#notifications_wrapper').prependTo('#' + notifications_parent).removeClass('fs');
+			}
+		});
 
-	{{if $module == 'display' || $module == 'hq' || $startpage == 'hq'}}
-	$(document).on('click', '.notification', function(e) {
-		var b64mid = $(this).data('b64mid');
-		var notify_id = $(this).data('notify_id');
-		var path = $(this)[0].pathname.substr(1,7);
-		var stateObj = { b64mid: b64mid };
+		if(sse_enabled) {
+			if(typeof(window.SharedWorker) === 'undefined') {
+				// notifications with multiple tabs open will not work very well in this scenario
+				var evtSource = new EventSource('/sse');
 
-		if(! b64mid && ! notify_id)
-			return;
+				evtSource.addEventListener('notifications', function(e) {
+					var obj = JSON.parse(e.data);
+					sse_handleNotifications(obj, false, false);
+				}, false);
 
-		{{if $module != 'hq' && $startpage == 'hq'}}
-			e.preventDefault();
-			if(notify_id != null) {
-				$.post(
-					"hq",
-					{
-						"notify_id" : notify_id
+				document.addEventListener('visibilitychange', function() {
+					if (!document.hidden) {
+						sse_offset = 0;
+						sse_bs_init();
 					}
-				);
+				}, false);
+
 			}
-			window.location.href = 'hq/' + b64mid;
-			return;
-		{{else}}
-			{{if $module == 'display'}}
-			history.pushState(stateObj, '', 'display/' + b64mid);
-			{{/if}}
-
-			{{if $module == 'hq'}}
-			history.pushState(stateObj, '', 'hq/' + b64mid);
-			{{/if}}
-
-			{{if $module == 'hq'}}
-			if(b64mid) {
-			{{else}}
-			if(path === 'display' && b64mid) {
-			{{/if}}
-				e.preventDefault();
-
-				if(! page_load) {
-					getData(b64mid, notify_id);
+			else {
+				var myWorker = new SharedWorker('/view/js/sse_worker.js', localUser);
+
+				myWorker.port.onmessage = function(e) {
+					obj = e.data;
+					console.log(obj);
+					sse_handleNotifications(obj, false, false);
+				}
+
+				myWorker.onerror = function(e) {
+					myWorker.port.close();
+				}
+
+				myWorker.port.start();
+			}
+		}
+		else {
+			if (!document.hidden)
+				sse_fallback_interval = setInterval(sse_fallback, updateInterval);
+
+			document.addEventListener('visibilitychange', function() {
+				if (document.hidden) {
+					clearInterval(sse_fallback_interval);
 				}
+				else {
+					sse_offset = 0;
+					sse_bs_init();
+					sse_fallback_interval = setInterval(sse_fallback, updateInterval);
+				}
+
+			}, false);
+		}
+
+		$('.notification-link').on('click', { replace: true, followup: false }, sse_bs_notifications);
+
+		$('.notification-filter').on('keypress', function(e) {
+			if(e.which == 13) { // enter
+				this.blur();
+				sse_offset = 0;
+				$("#nav-" + sse_type + "-menu").html('');
+				$("#nav-" + sse_type + "-loading").show();
+
+				var cn_val = $('#cn-' + sse_type + '-input').length ? $('#cn-' + sse_type + '-input').val().toString().toLowerCase() : '';
+
+				$.get('/sse_bs/' + sse_type + '/' + sse_offset + '?nquery=' + encodeURIComponent(cn_val), function(obj) {
+					console.log('sse: bootstraping ' + sse_type);
+					console.log(obj);
+
+					sse_bs_active = false;
+					sse_partial_result = true;
+					sse_offset = obj[sse_type].offset;
+					if(sse_offset < 0)
+						$("#nav-" + sse_type + "-loading").hide();
+
+					sse_handleNotifications(obj, true, false);
+
+				});
+			}
+		});
+
+		$('.notifications-textinput-clear').on('click', function(e) {
+			if(! sse_partial_result)
+				return;
+
+			$("#nav-" + sse_type + "-menu").html('');
+			$("#nav-" + sse_type + "-loading").show();
+			$.get('/sse_bs/' + sse_type, function(obj) {
+				console.log('sse: bootstraping ' + sse_type);
+				console.log(obj);
+
+				sse_bs_active = false;
+				sse_partial_result = false;
+				sse_offset = obj[sse_type].offset;
+				if(sse_offset < 0)
+					$("#nav-" + sse_type + "-loading").hide();
+
+				sse_handleNotifications(obj, true, false);
+
+			});
+		});
 
-				if($('#notifications_wrapper').hasClass('fs'))
-					$('#notifications_wrapper').prependTo('#' + notifications_parent).removeClass('fs');
+		$('.notification-content').on('scroll', function() {
+			if(this.scrollTop > this.scrollHeight - this.clientHeight - (this.scrollHeight/7)) {
+				sse_bs_notifications(sse_type, false, true);
 			}
-		{{/if}}
+		});
+
 	});
-	{{/if}}
 
 	{{foreach $notifications as $notification}}
 	{{if $notification.filter}}
@@ -91,12 +157,14 @@
 		}
 
 	});
+
 	$(document).on('click', '#cn-{{$notification.type}}-input-clear', function(e) {
 		$('#cn-{{$notification.type}}-input').val('');
 		$('#cn-{{$notification.type}}-only').removeClass('active sticky-top');
 		$("#nav-{{$notification.type}}-menu .notification").removeClass('cn-filter-active');
 		$('#cn-{{$notification.type}}-input-clear').addClass('d-none');
 	});
+
 	$(document).on('input', '#cn-{{$notification.type}}-input', function(e) {
 		var val = $('#cn-{{$notification.type}}-input').val().toString().toLowerCase();
 		if(val) {
@@ -122,18 +190,284 @@
 	{{/if}}
 	{{/foreach}}
 
-	function getData(b64mid, notify_id) {
-		$(document).scrollTop(0);
-		$('.thread-wrapper').remove();
-		bParam_mid = b64mid;
-		mode = 'replace';
-		page_load = true;
-		{{if $module == 'hq'}}
-		liveUpdate(notify_id);
-		{{/if}}
-		{{if $module == 'display'}}
-		liveUpdate();
-		{{/if}}
+	function sse_bs_init() {
+		if(sessionStorage.getItem('notification_open') !== null || typeof sse_type !== 'undefined' ) {
+			if(typeof sse_type === 'undefined')
+				sse_type = sessionStorage.getItem('notification_open');
+
+			$("#nav-" + sse_type + "-sub").addClass('show');
+			sse_bs_notifications(sse_type, true, false);
+		}
+		else {
+			sse_bs_counts();
+		}
+	}
+
+	function sse_bs_counts() {
+		if(sse_bs_active)
+			return;
+
+		sse_bs_active = true;
+
+		$.ajax({
+			type: 'post',
+			url: '/sse_bs',
+			data: { sse_rmids }
+		}).done( function(obj) {
+			console.log(obj);
+			sse_bs_active = false;
+			sse_rmids = [];
+			sse_handleNotifications(obj, true, false);
+		});
+	}
+
+	function sse_bs_notifications(e, replace, followup) {
+
+		if(sse_bs_active)
+			return;
+
+		var manual = false;
+
+		if(typeof replace === 'undefined')
+			replace = e.data.replace;
+
+		if(typeof followup === 'undefined')
+			followup = e.data.followup;
+
+		if(typeof e === 'string') {
+			sse_type = e;
+		}
+		else {
+			manual = true;
+			sse_offset = 0;
+			sse_type = e.target.dataset.sse_type;
+		}
+
+		if(typeof sse_type === 'undefined')
+			return;
+
+		if(followup || !manual || !($('#nav-' + sse_type + '-sub').hasClass('collapse') && $('#nav-' + sse_type + '-sub').hasClass('show'))) {
+
+			if(sse_offset >= 0) {
+				$("#nav-" + sse_type + "-loading").show();
+			}
+
+			sessionStorage.setItem('notification_open', sse_type);
+			if(sse_offset !== -1 || replace) {
+
+				var cn_val = (($('#cn-' + sse_type + '-input').length && sse_partial_result) ? $('#cn-' + sse_type + '-input').val().toString().toLowerCase() : '');
+
+				$("#nav-" + sse_type + "-loading").show();
+
+				sse_bs_active = true;
+
+				$.ajax({
+					type: 'post',
+					url: '/sse_bs/' + sse_type + '/' + sse_offset,
+					nquery: encodeURIComponent(cn_val),
+					data: { sse_rmids }
+				}).done(function(obj) {
+					console.log('sse: bootstraping ' + sse_type);
+					console.log(obj);
+					sse_bs_active = false;
+					sse_rmids = [];
+					$("#nav-" + sse_type + "-loading").hide();
+					sse_offset = obj[sse_type].offset;
+					sse_handleNotifications(obj, replace, followup);
+				});
+			}
+			else
+				$("#nav-" + sse_type + "-loading").hide();
+
+		}
+		else {
+			sessionStorage.removeItem('notification_open');
+		}
+	}
+
+	function sse_handleNotifications(obj, replace, followup) {
+
+		var primary_notifications = ['dm', 'home', 'intros', 'register', 'notify', 'files'];
+		var secondary_notifications = ['network', 'forums', 'all_events', 'pubs'];
+		var all_notifications = primary_notifications.concat(secondary_notifications);
+
+		all_notifications.forEach(function(type, index) {
+			if(typeof obj[type] === typeof undefined)
+				return true;
+
+			if(obj[type].count) {
+				$('.' + type + '-button').fadeIn();
+				if(replace || followup)
+					$('.' + type + '-update').html(Number(obj[type].count));
+				else
+					$('.' + type + '-update').html(Number(obj[type].count) + Number($('.' + type + '-update').html()));
+			}
+			else {
+				$('.' + type + '-update').html('0');
+				$('.' + type + '-button').fadeOut(function() {
+					sse_setNotificationsStatus();
+				});
+			}
+			if(obj[type].notifications.length)
+				sse_handleNotificationsItems(type, obj[type].notifications, replace, followup);
+		});
+
+		sse_setNotificationsStatus();
+
+		// notice and info
+		$.jGrowl.defaults.closerTemplate = '<div>[ ' + aStr.closeAll + ']</div>';
+
+		if(obj.notice) {
+			$(obj.notice.notifications).each(function() {
+				$.jGrowl(this, { sticky: true, theme: 'notice' });
+			});
+		}
+
+		if(obj.info) {
+			$(obj.info.notifications).each(function(){
+				$.jGrowl(this, { sticky: false, theme: 'info', life: 10000 });
+			});
+		}
+
+		// load more notifications if visible notifications count becomes low
+		if(sse_type  && sse_offset != -1 && $('#nav-' + sse_type + '-menu').children().length < 15) {
+			sse_offset = 0;
+			sse_bs_notifications(sse_type, false, true);
+		}
+
+
+	}
+
+	function sse_handleNotificationsItems(notifyType, data, replace, followup) {
+
+		var notifications_tpl = ((notifyType == 'forums') ? decodeURIComponent($("#nav-notifications-forums-template[rel=template]").html().replace('data-src', 'src')) : decodeURIComponent($("#nav-notifications-template[rel=template]").html().replace('data-src', 'src')));
+		var notify_menu = $("#nav-" + notifyType + "-menu");
+		var notify_loading = $("#nav-" + notifyType + "-loading");
+		var notify_count = $("." + notifyType + "-update");
+
+		if(replace && !followup) {
+			notify_menu.html('');
+			notify_loading.hide();
+		}
+
+		$(data).each(function() {
+
+			// do not add a notification if it is already present
+			if($('#nav-' + notifyType + '-menu .notification[data-b64mid=\'' + this.b64mid + '\']').length)
+				return true;
+
+			html = notifications_tpl.format(this.notify_link,this.photo,this.name,this.addr,this.message,this.when,this.hclass,this.b64mid,this.notify_id,this.thread_top,this.unseen,this.private_forum, encodeURIComponent(this.mids), this.body);
+			notify_menu.append(html);
+		});
+
+		if(!replace && !followup) {
+			$("#nav-" + notifyType + "-menu .notification").sort(function(a,b) {
+				a = new Date(a.dataset.when);
+				b = new Date(b.dataset.when);
+				return a > b ? -1 : a < b ? 1 : 0;
+			}).appendTo('#nav-' + notifyType + '-menu');
+		}
+
+		$("#nav-" + notifyType + "-menu .notifications-autotime").timeago();
+
+		if($('#tt-' + notifyType + '-only').hasClass('active'))
+			$('#nav-' + notifyType + '-menu [data-thread_top=false]').addClass('tt-filter-active');
+
+		if($('#cn-' + notifyType + '-input').length) {
+			var filter = $('#cn-' + notifyType + '-input').val().toString().toLowerCase();
+			if(filter) {
+				filter = filter.indexOf('%') == 0 ? filter.substring(1) : filter;
+
+				$('#nav-' + notifyType + '-menu .notification').each(function(i, el) {
+					var cn = $(el).data('contact_name').toString().toLowerCase();
+					var ca = $(el).data('contact_addr').toString().toLowerCase();
+					if(cn.indexOf(filter) === -1 && ca.indexOf(filter) === -1)
+						$(el).addClass('cn-filter-active');
+					else
+						$(el).removeClass('cn-filter-active');
+				});
+			}
+		}
+	}
+
+	function sse_updateNotifications(type, mid) {
+
+		if(type === 'pubs')
+			return true;
+
+		if(type === 'notify' && (mid !== bParam_mid || sse_type !== 'notify'))
+			return true;
+	/*
+		var count = Number($('.' + type + '-update').html());
+
+		count--;
+
+		if(count < 1) {
+			$('.' + type + '-update').html(count);
+			$('.' + type + '-button').fadeOut(function() {
+				sse_setNotificationsStatus();
+			});
+		}
+		else {
+			$('.' + type + '-update').html(count);
+		}
+	*/
+
+		$('#nav-' + type + '-menu .notification[data-b64mid=\'' + mid + '\']').fadeOut(function() {
+			this.remove();
+		});
+
+	}
+
+	function sse_setNotificationsStatus() {
+		var primary_notifications = ['dm', 'home', 'intros', 'register', 'notify', 'files'];
+		var secondary_notifications = ['network', 'forums', 'all_events', 'pubs'];
+		var all_notifications = primary_notifications.concat(secondary_notifications);
+
+		var primary_available = false;
+		var any_available = false;
+
+		all_notifications.forEach(function(type, index) {
+			if($('.' + type + '-button').css('display') == 'block') {
+				any_available = true;
+				if(primary_notifications.indexOf(type) > -1)
+					primary_available = true;
+			}
+		});
+
+		if(primary_available) {
+			$('.notifications-btn-icon').removeClass('fa-exclamation-circle');
+			$('.notifications-btn-icon').addClass('fa-exclamation-triangle');
+		}
+		else {
+			$('.notifications-btn-icon').removeClass('fa-exclamation-triangle');
+			$('.notifications-btn-icon').addClass('fa-exclamation-circle');
+		}
+
+		if(any_available) {
+			$('.notifications-btn').css('opacity', 1);
+			$('#no_notifications').hide();
+			$('#notifications').show();
+		}
+		else {
+			$('.notifications-btn').css('opacity', 0.5);
+			$('#navbar-collapse-1').removeClass('show');
+			$('#no_notifications').show();
+			$('#notifications').hide();
+		}
+
+	}
+
+	function sse_fallback() {
+		$.get('/sse', function(obj) {
+			if(! obj)
+				return;
+
+			console.log('sse fallback');
+			console.log(obj);
+
+			sse_handleNotifications(obj, false, false);
+		});
 	}
 </script>
 
@@ -199,4 +533,3 @@
 		{{/foreach}}
 	</div>
 </div>
-{{/if}}