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

diff --git a/js/main.js b/js/main.js
index 25029c1b055c536e401152a6a929d71a85cfa9cc..8a37961a798d6d98d9987bd1275d4bde1137ff75 100644 (file)
--- 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("<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('&rarr;') == 0) {
-                                         var notification = new Notification(document.title, {
-                                          body: e.text().replace('&rarr; ',''),
-                                          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('&rarr; ','').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 a003401dffeccd39c3ebfa387a415120713d19f6..9d2e2871578e0e6122211f224ca0831e263fcc5b 100644 (file)
--- 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 95ee0f6fbc4cdc5ed18f81c88f0257509dd14872..26c44f91c35803ac0f24126cf63452a59e075151 100644 (file)
--- a/view/templates/settings.tpl
+++ b/view/templates/settings.tpl
@@ -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_checkbox.tpl" field=$email_textonly}}
+-->
+{{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');
+
+                } else {
+                    localStorage.setItem('notification-permissions', 'denied');
+                    ckbox.val(0);
+                    elm.find(".on").addClass("hidden");
+                    elm.find(".off").removeClass("hidden");
+                }
+            });
+        }
+               
+               //console.log(getNotificationPermission());
+               
+        
+    })
+})();
+</script>
 
 </div>
 

diff --git a/view/theme/quattro/dark/style.css b/view/theme/quattro/dark/style.css
index 865e9b5f5e50443f70c5637c65f52a72da0da447..8160e22816522efe412eca2c22e4d16ebc78446c 100644 (file)
--- 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 7a9326c67181a862f6fd9144779adf17cb588093..61c49b168af5c9e5f738eed27f104a82445fd0ad 100644 (file)
--- 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 baaa44c0a3479937f25becd6b8358623b1c7f9eb..d5821671d73e6d43178f18eae18a5643d42c2f78 100644 (file)
--- 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 f29e38fb0edfbe4d2a046232381d1472dadff735..b8f972603819df6a98a1e0db01781203e9212003 100644 (file)
--- 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;
        }