Add possibility to open notification in JavaScript + new message

Notifications can be opened directly in JavaScript
Class .notification is now id #notification
New message when there is no feed to refresh
See 06abbd02c2 (comments)

app/Controllers/feedController.php

@@ -283,8 +283,8 @@ class FreshRSS_feed_Controller extends Minz_ActionController {
 		} else {
 			// aucun flux n'a été mis à jour, oups
 			$notif = array (
-				'type' => 'bad',
-				'content' => Minz_Translate::t ('no_feed_actualized')
+				'type' => 'good',
+				'content' => Minz_Translate::t ('no_feed_to_refresh')
 			);
 		}
 

app/i18n/en.php

@@ -248,6 +248,7 @@ return array (
 	'rss_feeds_of'			=> 'RSS feed of %s',
 
 	'refresh'			=> 'Refresh',
+	'no_feed_to_refresh'		=> 'There is no feed to refresh…',
 
 	'today'				=> 'Today',
 	'yesterday'			=> 'Yesterday',

app/i18n/fr.php

@@ -248,6 +248,7 @@ return array (
 	'rss_feeds_of'			=> 'Flux RSS de %s',
 
 	'refresh'			=> 'Actualisation',
+	'no_feed_to_refresh'		=> 'Il n’y a aucun flux à actualiser…',
 
 	'today'				=> 'Aujourd’hui',
 	'yesterday'			=> 'Hier',

app/layout/layout.phtml

@@ -36,13 +36,18 @@
 </div>
 
 <?php
+	$msg = '';
+	$status = 'closed';
 	if (isset ($this->notification)) {
+		$msg = $this->notification['content'];
+		$status = $this->notification['type'];
+
 		invalidateHttpCache();
+	}
 ?>
-<div class="notification <?php echo $this->notification['type']; ?>">
-	<?php echo $this->notification['content']; ?>
+<div id="notification" class="<?php echo $status; ?>">
+	<span class="msg"><?php echo $msg; ?></span>
 	<a class="close" href=""><?php echo FreshRSS_Themes::icon('close'); ?></a>
 </div>
-<?php } ?>
 	</body>
 </html>

app/views/javascript/actualize.phtml

@@ -24,6 +24,7 @@ function updateProgressBar(i) {
 
 function updateFeeds() {
 	if (feed_count === 0) {
+		openNotification("<?php echo Minz_Translate::t ('no_feed_to_refresh'); ?>", "good");
 		return;
 	}
 	initProgressBar(true);

p/scripts/main.js

@@ -665,23 +665,51 @@ function init_actualize() {
 	}
 }
 
+
+// <notification>
+var notification = null,
+	notification_interval = null,
+	notification_working = false;
+
+function openNotification(msg, status) {
+	if (notification_working === true) {
+		return false;
+	}
+
+	notification_working = true;
+
+	notification.removeClass();
+	notification.addClass(status);
+	notification.find(".msg").html(msg);
+	notification.fadeIn(300);
+
+	notification_interval = window.setInterval(closeNotification, 4000);
+}
+
 function closeNotification() {
-	$(".notification").fadeOut(600, function () {
-		$(".notification").remove();
+	notification.fadeOut(600, function() {
+		notification.removeClass();
+		notification.addClass('closed');
+
+		window.clearInterval(notification_interval);
+		notification_working = false;
 	});
 }
 
 function init_notifications() {
-	var notif = $(".notification");
-	if (notif.length > 0) {
-		window.setInterval(closeNotification, 4000);
+	notification = $("#notification");
 
-		notif.find("a.close").click(function () {
-			closeNotification();
-			return false;
-		});
+	notification.find("a.close").click(function () {
+		closeNotification();
+		return false;
+	});
+
+	if (notification.find(".msg").html().length > 0) {
+		notification_working = true;
+		notification_interval = window.setInterval(closeNotification, 4000);
 	}
 }
+// </notification>
 
 function refreshUnreads() {
 	$.getJSON('./?c=javascript&a=nbUnreadsPerFeed').done(function (data) {

p/themes/Dark/freshrss.css

@@ -558,7 +558,7 @@
 	}
 
 /*** NOTIFICATION ***/
-.notification {
+#notification {
 	position: absolute;
 	top: 10px;
 	left: 25%; right: 25%;
@@ -573,13 +573,16 @@
 	font-weight: bold;
 	z-index: 10;
 }
-	.notification.good {
+	#notification.closed {
+		display: none;
+	}
+	#notification.good {
 		border:1px solid #f4f899;
 	}
-	.notification.bad {
+	#notification.bad {
 		border:1px solid #f4a899;
 	}
-	.notification a.close {
+	#notification a.close {
 		display: inline-block;
 		width: 16px;
 		height: 16px;
@@ -590,10 +593,10 @@
 		border-radius: 50px;
 		line-height: 16px;
 	}
-	.notification.good a.close{
+	#notification.good a.close{
 		border:1px solid #f4f899;
 	}
-	.notification.bad a.close{
+	#notification.bad a.close{
 		border:1px solid #f4a899;
 	}
 

p/themes/Flat/freshrss.css

@@ -561,7 +561,7 @@ body {
 	}
 
 /*** NOTIFICATION ***/
-.notification {
+#notification {
 	position: absolute;
 	top: 10px;
 	left: 25%; right: 25%;
@@ -575,15 +575,18 @@ body {
 	font-weight: bold;
 	z-index: 10;
 }
-	.notification.good {
+	#notification.closed {
+		display: none;
+	}
+	#notification.good {
 		background: #1abc9c;
 		color: #fff;
 	}
-	.notification.bad {
+	#notification.bad {
 		background: #e74c3c;
 		color: #fff;
 	}
-	.notification a.close {
+	#notification a.close {
 		display: inline-block;
 		width: 16px;
 		height: 16px;
@@ -593,10 +596,10 @@ body {
 		border-radius: 3px;
 		line-height: 16px;
 	}
-		.notification.good a.close {
+		#notification.good a.close {
 			background: #1abc9c;
 		}
-		.notification.bad a.close {
+		#notification.bad a.close {
 			background: #e74c3c;
 		}
 

p/themes/Origine/freshrss.css

@@ -569,7 +569,7 @@
 	}
 
 /*** NOTIFICATION ***/
-.notification {
+#notification {
 	position: absolute;
 	top: 10px;
 	left: 25%; right: 25%;
@@ -584,13 +584,16 @@
 	font-weight: bold;
 	z-index: 10;
 }
-	.notification.good {
+	#notification.closed {
+		display: none;
+	}
+	#notification.good {
 		background: #f4f899;
 	}
-	.notification.bad {
+	#notification.bad {
 		background: #f4a899;
 	}
-	.notification a.close {
+	#notification a.close {
 		display: inline-block;
 		width: 16px;
 		height: 16px;