Desktop notifications in auto-reload.js

inc/config.php

@@ -1230,7 +1230,7 @@
 	// $config['url_javascript'] = 'http://static.example.org/main.js';
 
 	// Website favicon.
-	// $config['url_favicon'] = '/favicon.gif';
+	$config['url_favicon'] = 'static/favicon.ico';
 	
 	// EXPERIMENTAL: Try not to build pages when we shouldn't have to.
 	$config['try_smarter'] = true;

inc/instance-config.php

@@ -113,7 +113,6 @@
 	$config['additional_javascript'][] = 'js/local-time.js';
 	$config['additional_javascript'][] = 'js/no-animated-gif.js';
 	$config['additional_javascript'][] = 'js/expand.js';
-	$config['additional_javascript'][] = 'js/titlebar-notifications.js';
 	$config['additional_javascript'][] = 'js/auto-reload.js';
 	$config['additional_javascript'][] = 'js/options/user-css.js';
 	$config['additional_javascript'][] = 'js/options/user-js.js';

js/auto-reload.js

@@ -8,7 +8,7 @@
  * Copyright (c) 2012 Michael Save <savetheinternet@tinyboard.org>
  * Copyright (c) 2013-2014 Marcin Łabanowski <marcin@6irc.net>
  * Copyright (c) 2013 undido <firekid109@hotmail.com>
- * Copyright (c) 2014 Fredrick Brennan <admin@8chan.co>
+ * Copyright (c) 2014-2015 Fredrick Brennan <admin@8chan.co>
  *
  * Usage:
  *   $config['additional_javascript'][] = 'js/jquery.min.js';
@@ -17,16 +17,20 @@
  *
  */
 
+function makeIcon(mode){
+	var favicon = $("link[rel='shortcut icon']");
 
-au = false;
-auto_reload_enabled = true; // for watch.js to interop
+	if (!favicon.length) {
+		var favicon = $('<link rel="shortcut icon"></link>').appendTo('head');
+	}
 
-function makeIcon(){
-	if(au) return;
-	au = true;
-	$("link[rel='icon']").attr("href", "../static/favicon_au.png");
+	$("link[rel='shortcut icon']").attr("href", configRoot+"static/favicon"+(mode?"-"+mode:"")+".ico");
 }
 
++function(){
+var notify = false;
+auto_reload_enabled = true; // for watch.js to interop
+
 $(document).ready(function(){
 
 	// Adds Options panel item
@@ -34,7 +38,12 @@ $(document).ready(function(){
 		localStorage.auto_thread_update = 'true'; //default value
 	}
 	if (window.Options && Options.get_tab('general')) {
-		Options.extend_tab('general', '<label id="auto-thread-update"><input type="checkbox">' + _('Auto update thread') + '</label>');
+		Options.extend_tab("general", "<fieldset><legend>"+_("Auto update")+"</legend>"
+		+ ('<label id="auto-thread-update"><input type="checkbox">' + _('Auto update thread') + '</label>')
+		+ ('<label id="auto_thread_desktop_notifications"><input type="checkbox">' + _('Show desktop notifications when users quote me') + '</label>')
+		+ ('<label id="auto_thread_desktop_notifications_all"><input type="checkbox">' + _('Show desktop notifications on all replies') + '</label>')
+		+ '</fieldset>');
+
 		$('#auto-thread-update>input').on('click', function() {
 			if ($('#auto-thread-update>input').is(':checked')) {
 				localStorage.auto_thread_update = 'true';
@@ -42,9 +51,35 @@ $(document).ready(function(){
 				localStorage.auto_thread_update = 'false';
 			}
 		});
+
+		$('#auto_thread_desktop_notifications>input,#auto_thread_desktop_notifications_all>input').on('click', function() {
+			if (!("Notification" in window)) return;
+	
+			var setting = $(this).parent().attr('id');
+
+			if ($(this).is(':checked')) {
+				Notification.requestPermission();
+				if (Notification.permission === "granted") {
+					localStorage[setting] = 'true';
+				}
+			} else {
+				localStorage[setting] = 'false';
+			}
+		});
+
 		if (localStorage.auto_thread_update === 'true') {
 			$('#auto-thread-update>input').prop('checked', true);
 		}
+
+		if (localStorage.auto_thread_desktop_notifications === 'true') {
+			$('#auto_thread_desktop_notifications>input').prop('checked', true);
+			notify = "mention";
+		}
+
+		if (localStorage.auto_thread_desktop_notifications_all === 'true') {
+			$('#auto_thread_desktop_notifications_all>input').prop('checked', true);
+			notify = "all";
+		}
 	}
 
 	// not thread
@@ -84,6 +119,7 @@ $(document).ready(function(){
 				document.title = "("+new_posts+") "+title;
 			} else {
 				document.title = title;
+				makeIcon(false);
 			}
 		};
 	}
@@ -178,7 +214,11 @@ $(document).ready(function(){
 					if($('#' + id).length == 0) {
 						if (!new_posts) {
 							first_new_post = this;
-							makeIcon();
+							makeIcon('reply');
+							if (notify === "all" || (notify === "mention" && $(this).find('.own_post').length)) {
+								var body = $(this).children('.body').html().replace(/<br\s*[\/]?>/gi, "\n");
+								var n = new Notification("New reply to "+$('title').text(), {body: $('<div/>').html(body).text()});
+							}
 						}
 						$(this).insertAfter($('div.post:not(.post-hover):last').next()).after('<br class="clear">');
 						new_posts++;
@@ -264,4 +304,4 @@ $(document).ready(function(){
 		auto_update(poll_interval_delay);
 	}
 });
-
+}();

templates/header.html

@@ -1,5 +1,5 @@
 		<link rel="stylesheet" media="screen" href="{{ config.url_stylesheet }}">
-		{% if config.url_favicon %}<link rel="shortcut icon" href="{{ config.url_favicon }}">{% endif %}
+		{% if config.url_favicon %}<link rel="shortcut icon" href="{{ config.root }}{{ config.url_favicon }}">{% endif %}
 		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
 		{% if config.meta_keywords %}<meta name="keywords" content="{{ config.meta_keywords }}">{% endif %}