slightly refactor for desktop notifications and fix minor issues

Zotlabs/Widget/Hq_controls.php

@@ -15,9 +15,8 @@ class Hq_controls {
 		$entries = [
 			'toggle_editor' => [
 				'label' => t('Toggle post editor'),
-				'id' => 'jot-toggle',
 				'href' => '#',
-				'class' => 'btn',
+				'class' => 'btn jot-toggle',
 				'type' => 'button',
 				'icon' => 'pencil',
 				'extra' => 'data-toggle="button"'
@@ -27,9 +26,8 @@ class Hq_controls {
 		if(Apps::system_app_installed(local_channel(), 'Notes')) {
 			$entries['toggle_notes'] = [
 				'label' => t('Toggle personal notes'),
-				'id' => 'notes-toggle',
 				'href' => '#',
-				'class' => 'btn',
+				'class' => 'btn notes-toggle',
 				'type' => 'button',
 				'icon' => 'sticky-note-o',
 				'extra' => 'data-toggle="button"'

view/js/main.js

@@ -1730,3 +1730,29 @@ function makeid(length) {
 	return result;
 }
 
+function push_notification_request(e) {
+    if (!('Notification' in window)) {
+        alert('This browser does not support push notifications');
+    }
+    else if (Notification.permission !== 'granted') {
+        Notification.requestPermission(function(permission) {
+			if(permission === 'granted') {
+				$(e.target).closest('button').hide();
+			}
+		});
+   }
+}
+
+
+function push_notification(body, title) {
+	let options = {
+		body: body,
+		icon: '/images/hz-64.png',
+		silent: false
+	}
+
+	let n = new Notification(title, options);
+	n.onclick = function (event) {
+		setTimeout(n.close.bind(n), 300);
+	}
+}

view/js/mod_hq.js

@@ -1,15 +1,18 @@
 $(document).ready(function() {
 
-	$(document).on('click', '#jot-toggle', function(e) {
+	$(document).on('click', '.jot-toggle', function(e) {
 		$(window).scrollTop(0);
 		$('#jot-popup').toggle();
 		$('#profile-jot-text').focus();
 	});
 
-	$(document).on('click', '#notes-toggle', function(e) {
+	$(document).on('click', '.notes-toggle', function(e) {
 		$(window).scrollTop(0);
 		$('#personal-notes').toggleClass('d-none');
 		$('#note-text').focus();
 	});
 
+	$(document).on('hz:handleNetworkNotificationsItems', function(e, obj) {
+		push_notification(obj.message, obj.name);
+	});
 });

view/tpl/hq_controls.tpl

@@ -1,7 +1,7 @@
 <div class="mb-3{{if $wrapper_class}} {{$wrapper_class}}{{/if}}">
 	{{foreach $entries as $e}}
-	<button id="{{$e.id}}" class="{{$e.class}} rounded-circle{{if $entry_class}} {{$entry_class}}{{/if}}" type="{{$e.type}}" title="{{$e.label}}"{{if $e.extra}} {{$e.extra}}{{/if}}>
-		{{if $e.icon}}<i class="fa fa-{{$e.icon}}"></i>{{/if}}
+	<button class="{{$e.class}} rounded-circle{{if $entry_class}} {{$entry_class}}{{/if}}" type="{{$e.type}}" title="{{$e.label}}"{{if $e.extra}} {{$e.extra}}{{/if}}>
+		{{if $e.icon}}<i class="fa fa-{{$e.icon}} mt-1 mb-1"></i>{{/if}}
 	</button>
 	{{/foreach}}
 </div>

view/tpl/notifications_widget.tpl

@@ -354,8 +354,8 @@
 			if($('#nav-' + notifyType + '-menu .notification[data-b64mid=\'' + this.b64mid + '\']').length)
 				return true;
 
-			if(!replace && !followup && this.thread_top && notifyType == 'network') {
-				sse_dektop_notification($('<p>' + this.message + '</p>').text(), this.name);
+			if(!replace && !followup && (this.thread_top && notifyType === 'network')) {
+				$(document).trigger('hz:handleNetworkNotificationsItems', this);
 			}
 
 			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);
@@ -471,19 +471,6 @@
 			sse_handleNotifications(obj, false, false);
 		});
 	}
-
-	function sse_dektop_notification(body, title) {
-		let options = {
-			body: body,
-			icon: '/images/hz-64.png',
-			silent: false
-		}
-		let n = new Notification(title, options);
-		n.onclick = function (event) {
-			setTimeout(n.close.bind(n), 300);
-		}
-	}
-
 </script>
 
 <div id="notifications_wrapper" class="mb-4">