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
parent
2112b9cacc
commit
4036ad2554
32
js/main.js
32
js/main.js
|
|
@ -181,24 +181,33 @@
|
|||
nnm = $("#nav-notifications-menu");
|
||||
nnm.html(notifications_all + notifications_mark);
|
||||
//nnm.attr('popup','true');
|
||||
|
||||
var notification_lastitem = localStorage.getItem("notification-lastitem");
|
||||
var notification_id = 0;
|
||||
|
||||
eNotif.children("note").each(function(){
|
||||
e = $(this);
|
||||
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'));
|
||||
nnm.append(html);
|
||||
|
||||
if(e.text().search('→') == 0) {
|
||||
notification_id = e.attr('href').match(/\d+$/)[0];
|
||||
|
||||
if (notification_lastitem!== null && notification_id>notification_lastitem) {
|
||||
notification_lastitem = notification_id;
|
||||
if (getNotificationPermission()==="granted") {
|
||||
var notification = new Notification(document.title, {
|
||||
body: e.text().replace('→ ',''),
|
||||
body: e.text().replace('→ ','').format(e.attr('name')),
|
||||
icon: e.attr('photo')
|
||||
});
|
||||
|
||||
// TODO (yet unsupported by most browsers):
|
||||
// Implement notification.onclick()
|
||||
|
||||
// notifyMarkAll();
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
if (notification_lastitem===null) notification_lastitem = notification_id;
|
||||
localStorage.setItem("notification-lastitem", notification_lastitem)
|
||||
|
||||
$("img[data-src]", nnm).each(function(i, el){
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1207,9 +1207,7 @@ function settings_content(&$a) {
|
|||
'$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, ''),
|
||||
|
||||
'$desktop_notifications' => t('Activate desktop 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!'),
|
||||
'$desktop_notifications' => array('desktop_notifications', t('Activate desktop notifications') , false, t('Show desktop popup on new notifications')),
|
||||
|
||||
'$email_textonly' => array('email_textonly', t('Text-only notification emails'),
|
||||
get_pconfig(local_user(),'system','email_textonly'),
|
||||
|
|
|
|||
|
|
@ -133,12 +133,61 @@
|
|||
{{include file="field_intcheckbox.tpl" field=$notify8}}
|
||||
</div>
|
||||
|
||||
{{include file="field_checkbox.tpl" field=$email_textonly}}
|
||||
|
||||
|
||||
<!--
|
||||
<div class="field">
|
||||
<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>
|
||||
</div>
|
||||
-->
|
||||
{{include file="field_yesno.tpl" field=$desktop_notifications}}
|
||||
<script>
|
||||
(function(){
|
||||
var elm = $("#id_{{$desktop_notifications.0}}_onoff");
|
||||
var ckbox = $("#id_{{$desktop_notifications.0}}");
|
||||
|
||||
{{include file="field_checkbox.tpl" field=$email_textonly}}
|
||||
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');
|
||||
|
||||
} else {
|
||||
localStorage.setItem('notification-permissions', 'denied');
|
||||
ckbox.val(0);
|
||||
elm.find(".on").addClass("hidden");
|
||||
elm.find(".off").removeClass("hidden");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
//console.log(getNotificationPermission());
|
||||
|
||||
|
||||
})
|
||||
})();
|
||||
</script>
|
||||
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -514,6 +514,7 @@ header {
|
|||
margin: 0px;
|
||||
padding: 0px;
|
||||
/*width: 100%; height: 12px; */
|
||||
|
||||
z-index: 110;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
|
@ -846,6 +847,7 @@ aside .posted-date-selector-months {
|
|||
overflow: auto;
|
||||
height: auto;
|
||||
/*.contact-block-div { width:60px; height: 60px; }*/
|
||||
|
||||
}
|
||||
#contact-block .contact-block-h4 {
|
||||
float: left;
|
||||
|
|
@ -927,6 +929,7 @@ aside .posted-date-selector-months {
|
|||
margin-bottom: 2em;
|
||||
/*.action .s10 { width: 10px; overflow: hidden; padding: 0px;}
|
||||
.action .s16 { width: 16px; overflow: hidden; padding: 0px;}*/
|
||||
|
||||
}
|
||||
.widget h3 {
|
||||
padding: 0px;
|
||||
|
|
@ -1208,6 +1211,7 @@ section {
|
|||
height: 32px;
|
||||
margin-left: 16px;
|
||||
/*background: url(../../../images/icons/22/user.png) no-repeat center center;*/
|
||||
|
||||
}
|
||||
.comment-edit-preview .contact-photo-menu-button {
|
||||
top: 15px !important;
|
||||
|
|
@ -1848,6 +1852,7 @@ ul.tabs li .active {
|
|||
display: block;
|
||||
margin-left: 200px;
|
||||
color: #999999;
|
||||
clear: left;
|
||||
}
|
||||
.field .onoff {
|
||||
float: left;
|
||||
|
|
@ -2077,6 +2082,7 @@ ul.tabs li .active {
|
|||
min-height: 22px;
|
||||
padding-top: 6px;
|
||||
/* a { display: block;}*/
|
||||
|
||||
}
|
||||
#photo-caption {
|
||||
display: block;
|
||||
|
|
|
|||
|
|
@ -514,6 +514,7 @@ header {
|
|||
margin: 0px;
|
||||
padding: 0px;
|
||||
/*width: 100%; height: 12px; */
|
||||
|
||||
z-index: 110;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
|
@ -846,6 +847,7 @@ aside .posted-date-selector-months {
|
|||
overflow: auto;
|
||||
height: auto;
|
||||
/*.contact-block-div { width:60px; height: 60px; }*/
|
||||
|
||||
}
|
||||
#contact-block .contact-block-h4 {
|
||||
float: left;
|
||||
|
|
@ -927,6 +929,7 @@ aside .posted-date-selector-months {
|
|||
margin-bottom: 2em;
|
||||
/*.action .s10 { width: 10px; overflow: hidden; padding: 0px;}
|
||||
.action .s16 { width: 16px; overflow: hidden; padding: 0px;}*/
|
||||
|
||||
}
|
||||
.widget h3 {
|
||||
padding: 0px;
|
||||
|
|
@ -1208,6 +1211,7 @@ section {
|
|||
height: 32px;
|
||||
margin-left: 16px;
|
||||
/*background: url(../../../images/icons/22/user.png) no-repeat center center;*/
|
||||
|
||||
}
|
||||
.comment-edit-preview .contact-photo-menu-button {
|
||||
top: 15px !important;
|
||||
|
|
@ -1848,6 +1852,7 @@ ul.tabs li .active {
|
|||
display: block;
|
||||
margin-left: 200px;
|
||||
color: #999999;
|
||||
clear: left;
|
||||
}
|
||||
.field .onoff {
|
||||
float: left;
|
||||
|
|
@ -2077,6 +2082,7 @@ ul.tabs li .active {
|
|||
min-height: 22px;
|
||||
padding-top: 6px;
|
||||
/* a { display: block;}*/
|
||||
|
||||
}
|
||||
#photo-caption {
|
||||
display: block;
|
||||
|
|
|
|||
|
|
@ -514,6 +514,7 @@ header {
|
|||
margin: 0px;
|
||||
padding: 0px;
|
||||
/*width: 100%; height: 12px; */
|
||||
|
||||
z-index: 110;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
|
@ -846,6 +847,7 @@ aside .posted-date-selector-months {
|
|||
overflow: auto;
|
||||
height: auto;
|
||||
/*.contact-block-div { width:60px; height: 60px; }*/
|
||||
|
||||
}
|
||||
#contact-block .contact-block-h4 {
|
||||
float: left;
|
||||
|
|
@ -927,6 +929,7 @@ aside .posted-date-selector-months {
|
|||
margin-bottom: 2em;
|
||||
/*.action .s10 { width: 10px; overflow: hidden; padding: 0px;}
|
||||
.action .s16 { width: 16px; overflow: hidden; padding: 0px;}*/
|
||||
|
||||
}
|
||||
.widget h3 {
|
||||
padding: 0px;
|
||||
|
|
@ -1208,6 +1211,7 @@ section {
|
|||
height: 32px;
|
||||
margin-left: 16px;
|
||||
/*background: url(../../../images/icons/22/user.png) no-repeat center center;*/
|
||||
|
||||
}
|
||||
.comment-edit-preview .contact-photo-menu-button {
|
||||
top: 15px !important;
|
||||
|
|
@ -1848,6 +1852,7 @@ ul.tabs li .active {
|
|||
display: block;
|
||||
margin-left: 200px;
|
||||
color: #999999;
|
||||
clear: left;
|
||||
}
|
||||
.field .onoff {
|
||||
float: left;
|
||||
|
|
@ -2077,6 +2082,7 @@ ul.tabs li .active {
|
|||
min-height: 22px;
|
||||
padding-top: 6px;
|
||||
/* a { display: block;}*/
|
||||
|
||||
}
|
||||
#photo-caption {
|
||||
display: block;
|
||||
|
|
|
|||
|
|
@ -1197,7 +1197,7 @@ ul.tabs {
|
|||
display: block;
|
||||
margin-left: 200px;
|
||||
color: @FieldHelpColor;
|
||||
|
||||
clear: left;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user