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

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_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>
 

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;

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;

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;

view/theme/quattro/quattro.less

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