From 4036ad255497912c4c45560db1ca114a470ed6f7 Mon Sep 17 00:00:00 2001 From: Fabrixxm Date: Wed, 24 Jun 2015 09:49:53 +0200 Subject: [PATCH] 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 --- js/main.js | 64 ++++++++++++++++++++---------- mod/settings.php | 4 +- view/templates/settings.tpl | 53 ++++++++++++++++++++++++- view/theme/quattro/dark/style.css | 6 +++ view/theme/quattro/green/style.css | 6 +++ view/theme/quattro/lilac/style.css | 6 +++ view/theme/quattro/quattro.less | 2 +- 7 files changed, 114 insertions(+), 27 deletions(-) diff --git a/js/main.js b/js/main.js index 25029c1b05..8a37961a79 100644 --- a/js/main.js +++ b/js/main.js @@ -75,14 +75,14 @@ setupFieldRichtext(); /* popup menus */ - function close_last_popup_menu() { - if(last_popup_menu) { - last_popup_menu.hide(); - last_popup_button.removeClass("selected"); - last_popup_menu = null; - last_popup_button = null; - } - } + function close_last_popup_menu() { + if(last_popup_menu) { + last_popup_menu.hide(); + last_popup_button.removeClass("selected"); + last_popup_menu = null; + last_popup_button = null; + } + } $('a[rel^=#]').click(function(e){ e.preventDefault(); var parent = $(this).parent(); @@ -105,7 +105,7 @@ return false; }); $('html').click(function() { - close_last_popup_menu(); + close_last_popup_menu(); }); // fancyboxes @@ -181,24 +181,33 @@ nnm = $("#nav-notifications-menu"); nnm.html(notifications_all + notifications_mark); //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); text = e.text().format(""+e.attr('name')+""); 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) { - var notification = new Notification(document.title, { - body: e.text().replace('→ ',''), - icon: e.attr('photo') - }); - - // TODO (yet unsupported by most browsers): - // Implement notification.onclick() - - // notifyMarkAll(); - } + 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('→ ','').format(e.attr('name')), + icon: e.attr('photo') + }); + // 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){ // 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; + } +} diff --git a/mod/settings.php b/mod/settings.php index a003401dff..9d2e287157 100644 --- a/mod/settings.php +++ b/mod/settings.php @@ -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'), diff --git a/view/templates/settings.tpl b/view/templates/settings.tpl index 95ee0f6fbc..26c44f91c3 100644 --- a/view/templates/settings.tpl +++ b/view/templates/settings.tpl @@ -133,12 +133,61 @@ {{include file="field_intcheckbox.tpl" field=$notify8}} +{{include file="field_checkbox.tpl" field=$email_textonly}} + + + +{{include file="field_yesno.tpl" field=$desktop_notifications}} + diff --git a/view/theme/quattro/dark/style.css b/view/theme/quattro/dark/style.css index 865e9b5f5e..8160e22816 100644 --- a/view/theme/quattro/dark/style.css +++ b/view/theme/quattro/dark/style.css @@ -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; diff --git a/view/theme/quattro/green/style.css b/view/theme/quattro/green/style.css index 7a9326c671..61c49b168a 100644 --- a/view/theme/quattro/green/style.css +++ b/view/theme/quattro/green/style.css @@ -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; diff --git a/view/theme/quattro/lilac/style.css b/view/theme/quattro/lilac/style.css index baaa44c0a3..d5821671d7 100644 --- a/view/theme/quattro/lilac/style.css +++ b/view/theme/quattro/lilac/style.css @@ -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; diff --git a/view/theme/quattro/quattro.less b/view/theme/quattro/quattro.less index f29e38fb0e..b8f9726038 100644 --- a/view/theme/quattro/quattro.less +++ b/view/theme/quattro/quattro.less @@ -1197,7 +1197,7 @@ ul.tabs { display: block; margin-left: 200px; color: @FieldHelpColor; - + clear: left; } -- 2.39.5