Fix desktop notification

use on/off field for enable/disable desktop notification
show only new notifications after enable
use localstorage to save enabled/disalbed and last notification id
hide settings on browsers without desktop notification
This commit is contained in:
Fabrixxm 2015-06-24 09:49:53 +02:00
parent 2112b9cacc
commit 4036ad2554
7 changed files with 113 additions and 26 deletions

View file

@ -75,14 +75,14 @@
setupFieldRichtext(); setupFieldRichtext();
/* popup menus */ /* popup menus */
function close_last_popup_menu() { function close_last_popup_menu() {
if(last_popup_menu) { if(last_popup_menu) {
last_popup_menu.hide(); last_popup_menu.hide();
last_popup_button.removeClass("selected"); last_popup_button.removeClass("selected");
last_popup_menu = null; last_popup_menu = null;
last_popup_button = null; last_popup_button = null;
} }
} }
$('a[rel^=#]').click(function(e){ $('a[rel^=#]').click(function(e){
e.preventDefault(); e.preventDefault();
var parent = $(this).parent(); var parent = $(this).parent();
@ -105,7 +105,7 @@
return false; return false;
}); });
$('html').click(function() { $('html').click(function() {
close_last_popup_menu(); close_last_popup_menu();
}); });
// fancyboxes // fancyboxes
@ -181,24 +181,33 @@
nnm = $("#nav-notifications-menu"); nnm = $("#nav-notifications-menu");
nnm.html(notifications_all + notifications_mark); nnm.html(notifications_all + notifications_mark);
//nnm.attr('popup','true'); //nnm.attr('popup','true');
eNotif.children("note").each(function(){
var notification_lastitem = localStorage.getItem("notification-lastitem");
var notification_id = 0;
eNotif.children("note").each(function(){
e = $(this); e = $(this);
text = e.text().format("<span class='contactname'>"+e.attr('name')+"</span>"); text = e.text().format("<span class='contactname'>"+e.attr('name')+"</span>");
html = notifications_tpl.format(e.attr('href'),e.attr('photo'), text, e.attr('date'), e.attr('seen')); html = notifications_tpl.format(e.attr('href'),e.attr('photo'), text, e.attr('date'), e.attr('seen'));
nnm.append(html); nnm.append(html);
if(e.text().search('&rarr;') == 0) { notification_id = e.attr('href').match(/\d+$/)[0];
var notification = new Notification(document.title, {
body: e.text().replace('&rarr; ',''), if (notification_lastitem!== null && notification_id>notification_lastitem) {
icon: e.attr('photo') notification_lastitem = notification_id;
}); if (getNotificationPermission()==="granted") {
var notification = new Notification(document.title, {
// TODO (yet unsupported by most browsers): body: e.text().replace('&rarr; ','').format(e.attr('name')),
// Implement notification.onclick() icon: e.attr('photo')
});
// notifyMarkAll(); // TODO (yet unsupported by most browsers):
} // Implement notification.onclick()
}
}
}); });
if (notification_lastitem===null) notification_lastitem = notification_id;
localStorage.setItem("notification-lastitem", notification_lastitem)
$("img[data-src]", nnm).each(function(i, el){ $("img[data-src]", nnm).each(function(i, el){
// Add src attribute for images with a data-src attribute // Add src attribute for images with a data-src attribute
@ -762,3 +771,16 @@ function previewTheme(elm) {
}); });
} }
// notification permission settings in localstorage
// set by settings page
function getNotificationPermission() {
if (window.Notification === undefined) {
return null;
}
if (Notification.permission === 'granted') {
return localStorage.getItem('notification-permissions');
} else {
return Notification.permission;
}
}

View file

@ -1207,9 +1207,7 @@ function settings_content(&$a) {
'$notify7' => array('notify7', t('You are tagged in a post'), ($notify & NOTIFY_TAGSELF), NOTIFY_TAGSELF, ''), '$notify7' => array('notify7', t('You are tagged in a post'), ($notify & NOTIFY_TAGSELF), NOTIFY_TAGSELF, ''),
'$notify8' => array('notify8', t('You are poked/prodded/etc. in a post'), ($notify & NOTIFY_POKE), NOTIFY_POKE, ''), '$notify8' => array('notify8', t('You are poked/prodded/etc. in a post'), ($notify & NOTIFY_POKE), NOTIFY_POKE, ''),
'$desktop_notifications' => t('Activate desktop notifications'), '$desktop_notifications' => array('desktop_notifications', t('Activate desktop notifications') , false, t('Show desktop popup on new notifications')),
'$desktop_notifications_note' => t('Note: This is an experimental feature, as being not supported by each browser'),
'$desktop_notifications_success_message' => t('You will now receive desktop notifications!'),
'$email_textonly' => array('email_textonly', t('Text-only notification emails'), '$email_textonly' => array('email_textonly', t('Text-only notification emails'),
get_pconfig(local_user(),'system','email_textonly'), get_pconfig(local_user(),'system','email_textonly'),

View file

@ -133,12 +133,61 @@
{{include file="field_intcheckbox.tpl" field=$notify8}} {{include file="field_intcheckbox.tpl" field=$notify8}}
</div> </div>
{{include file="field_checkbox.tpl" field=$email_textonly}}
<!--
<div class="field"> <div class="field">
<button onclick="javascript:Notification.requestPermission(function(perm){if(perm === 'granted')alert('{{$desktop_notifications_success_message}}');});return false;">{{$desktop_notifications}}</button> <button onclick="javascript:Notification.requestPermission(function(perm){if(perm === 'granted')alert('{{$desktop_notifications_success_message}}');});return false;">{{$desktop_notifications}}</button>
<span class="field_help">{{$desktop_notifications_note}}</span> <span class="field_help">{{$desktop_notifications_note}}</span>
</div> </div>
-->
{{include file="field_yesno.tpl" field=$desktop_notifications}}
<script>
(function(){
var elm = $("#id_{{$desktop_notifications.0}}_onoff");
var ckbox = $("#id_{{$desktop_notifications.0}}");
if (getNotificationPermission() === 'granted') {
ckbox.val(1);
elm.find(".off").addClass("hidden");
elm.find(".on").removeClass("hidden");
}
if (getNotificationPermission() === null) {
elm.parent(".field.yesno").hide();
}
$("#id_{{$desktop_notifications.0}}_onoff").on("click", function(e){
if (Notification.permission === 'granted') {
localStorage.setItem('notification-permissions', ckbox.val()==1 ? 'granted' : 'denied');
} else if (Notification.permission === 'denied') {
localStorage.setItem('notification-permissions', 'denied');
ckbox.val(0);
elm.find(".on").addClass("hidden");
elm.find(".off").removeClass("hidden");
} else if (Notification.permission === 'default') {
Notification.requestPermission(function(choice) {
if (choice === 'granted') {
localStorage.setItem('notification-permissions', ckbox.val()==1 ? 'granted' : 'denied');
{{include file="field_checkbox.tpl" field=$email_textonly}} } else {
localStorage.setItem('notification-permissions', 'denied');
ckbox.val(0);
elm.find(".on").addClass("hidden");
elm.find(".off").removeClass("hidden");
}
});
}
//console.log(getNotificationPermission());
})
})();
</script>
</div> </div>

View file

@ -514,6 +514,7 @@ header {
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
/*width: 100%; height: 12px; */ /*width: 100%; height: 12px; */
z-index: 110; z-index: 110;
color: #ffffff; color: #ffffff;
} }
@ -846,6 +847,7 @@ aside .posted-date-selector-months {
overflow: auto; overflow: auto;
height: auto; height: auto;
/*.contact-block-div { width:60px; height: 60px; }*/ /*.contact-block-div { width:60px; height: 60px; }*/
} }
#contact-block .contact-block-h4 { #contact-block .contact-block-h4 {
float: left; float: left;
@ -927,6 +929,7 @@ aside .posted-date-selector-months {
margin-bottom: 2em; margin-bottom: 2em;
/*.action .s10 { width: 10px; overflow: hidden; padding: 0px;} /*.action .s10 { width: 10px; overflow: hidden; padding: 0px;}
.action .s16 { width: 16px; overflow: hidden; padding: 0px;}*/ .action .s16 { width: 16px; overflow: hidden; padding: 0px;}*/
} }
.widget h3 { .widget h3 {
padding: 0px; padding: 0px;
@ -1208,6 +1211,7 @@ section {
height: 32px; height: 32px;
margin-left: 16px; margin-left: 16px;
/*background: url(../../../images/icons/22/user.png) no-repeat center center;*/ /*background: url(../../../images/icons/22/user.png) no-repeat center center;*/
} }
.comment-edit-preview .contact-photo-menu-button { .comment-edit-preview .contact-photo-menu-button {
top: 15px !important; top: 15px !important;
@ -1848,6 +1852,7 @@ ul.tabs li .active {
display: block; display: block;
margin-left: 200px; margin-left: 200px;
color: #999999; color: #999999;
clear: left;
} }
.field .onoff { .field .onoff {
float: left; float: left;
@ -2077,6 +2082,7 @@ ul.tabs li .active {
min-height: 22px; min-height: 22px;
padding-top: 6px; padding-top: 6px;
/* a { display: block;}*/ /* a { display: block;}*/
} }
#photo-caption { #photo-caption {
display: block; display: block;

View file

@ -514,6 +514,7 @@ header {
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
/*width: 100%; height: 12px; */ /*width: 100%; height: 12px; */
z-index: 110; z-index: 110;
color: #ffffff; color: #ffffff;
} }
@ -846,6 +847,7 @@ aside .posted-date-selector-months {
overflow: auto; overflow: auto;
height: auto; height: auto;
/*.contact-block-div { width:60px; height: 60px; }*/ /*.contact-block-div { width:60px; height: 60px; }*/
} }
#contact-block .contact-block-h4 { #contact-block .contact-block-h4 {
float: left; float: left;
@ -927,6 +929,7 @@ aside .posted-date-selector-months {
margin-bottom: 2em; margin-bottom: 2em;
/*.action .s10 { width: 10px; overflow: hidden; padding: 0px;} /*.action .s10 { width: 10px; overflow: hidden; padding: 0px;}
.action .s16 { width: 16px; overflow: hidden; padding: 0px;}*/ .action .s16 { width: 16px; overflow: hidden; padding: 0px;}*/
} }
.widget h3 { .widget h3 {
padding: 0px; padding: 0px;
@ -1208,6 +1211,7 @@ section {
height: 32px; height: 32px;
margin-left: 16px; margin-left: 16px;
/*background: url(../../../images/icons/22/user.png) no-repeat center center;*/ /*background: url(../../../images/icons/22/user.png) no-repeat center center;*/
} }
.comment-edit-preview .contact-photo-menu-button { .comment-edit-preview .contact-photo-menu-button {
top: 15px !important; top: 15px !important;
@ -1848,6 +1852,7 @@ ul.tabs li .active {
display: block; display: block;
margin-left: 200px; margin-left: 200px;
color: #999999; color: #999999;
clear: left;
} }
.field .onoff { .field .onoff {
float: left; float: left;
@ -2077,6 +2082,7 @@ ul.tabs li .active {
min-height: 22px; min-height: 22px;
padding-top: 6px; padding-top: 6px;
/* a { display: block;}*/ /* a { display: block;}*/
} }
#photo-caption { #photo-caption {
display: block; display: block;

View file

@ -514,6 +514,7 @@ header {
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
/*width: 100%; height: 12px; */ /*width: 100%; height: 12px; */
z-index: 110; z-index: 110;
color: #ffffff; color: #ffffff;
} }
@ -846,6 +847,7 @@ aside .posted-date-selector-months {
overflow: auto; overflow: auto;
height: auto; height: auto;
/*.contact-block-div { width:60px; height: 60px; }*/ /*.contact-block-div { width:60px; height: 60px; }*/
} }
#contact-block .contact-block-h4 { #contact-block .contact-block-h4 {
float: left; float: left;
@ -927,6 +929,7 @@ aside .posted-date-selector-months {
margin-bottom: 2em; margin-bottom: 2em;
/*.action .s10 { width: 10px; overflow: hidden; padding: 0px;} /*.action .s10 { width: 10px; overflow: hidden; padding: 0px;}
.action .s16 { width: 16px; overflow: hidden; padding: 0px;}*/ .action .s16 { width: 16px; overflow: hidden; padding: 0px;}*/
} }
.widget h3 { .widget h3 {
padding: 0px; padding: 0px;
@ -1208,6 +1211,7 @@ section {
height: 32px; height: 32px;
margin-left: 16px; margin-left: 16px;
/*background: url(../../../images/icons/22/user.png) no-repeat center center;*/ /*background: url(../../../images/icons/22/user.png) no-repeat center center;*/
} }
.comment-edit-preview .contact-photo-menu-button { .comment-edit-preview .contact-photo-menu-button {
top: 15px !important; top: 15px !important;
@ -1848,6 +1852,7 @@ ul.tabs li .active {
display: block; display: block;
margin-left: 200px; margin-left: 200px;
color: #999999; color: #999999;
clear: left;
} }
.field .onoff { .field .onoff {
float: left; float: left;
@ -2077,6 +2082,7 @@ ul.tabs li .active {
min-height: 22px; min-height: 22px;
padding-top: 6px; padding-top: 6px;
/* a { display: block;}*/ /* a { display: block;}*/
} }
#photo-caption { #photo-caption {
display: block; display: block;

View file

@ -1197,7 +1197,7 @@ ul.tabs {
display: block; display: block;
margin-left: 200px; margin-left: 200px;
color: @FieldHelpColor; color: @FieldHelpColor;
clear: left;
} }