aboutsummaryrefslogtreecommitdiffstats
path: root/view/tpl/notifications_widget.tpl
diff options
context:
space:
mode:
authorMario <mario@mariovavti.com>2021-06-17 07:33:45 +0000
committerMario <mario@mariovavti.com>2021-06-17 07:33:45 +0000
commitb55676d08914d58927b5503a1bfa283397cd6d44 (patch)
tree34827895f126f9afe0c1db284e089632e19984c6 /view/tpl/notifications_widget.tpl
parentb5a8ca6ef72366d355c99702f0a775ccc36734d5 (diff)
downloadvolse-hubzilla-b55676d08914d58927b5503a1bfa283397cd6d44.tar.gz
volse-hubzilla-b55676d08914d58927b5503a1bfa283397cd6d44.tar.bz2
volse-hubzilla-b55676d08914d58927b5503a1bfa283397cd6d44.zip
New landing page HQ with separate views for direct messages, public/limited messages and starred messages if the feature is enabled
Diffstat (limited to 'view/tpl/notifications_widget.tpl')
-rw-r--r--view/tpl/notifications_widget.tpl455
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}}