Fix issue #130 : amélioration vue globale

Désormais, en cliquant sur une catégorie ou un flux, une "popup" s'ouvre
nous proposant les flux à lire directement. Les mêmes actions que la vue
normale sont alors possibles

Cela a impliqué de gros changements javascript en aval puisque les
articles n'étaient plus repérés en fonction de la fenêtre, mais en
fonction du popup (#panel)

Le code va vraiment devoir être repris pour avoir une architecture
logique (voir issue #121)

app/controllers/indexController.php

@@ -11,13 +11,19 @@ class indexController extends ActionController {
 		if ($output == 'rss') {
 			$this->view->_useLayout (false);
 		} else {
+			View::appendScript (Url::display (array ('c' => 'javascript', 'a' => 'actualize')));
+
+			if(!$output) {
+				$output = $this->view->conf->viewMode();
+				Request::_param ('output', $output);
+			}
+
 			View::appendScript (Url::display ('/scripts/shortcut.js'));
 			View::appendScript (Url::display (array ('c' => 'javascript', 'a' => 'main')));
-			View::appendScript (Url::display (array ('c' => 'javascript', 'a' => 'actualize')));
 			View::appendScript (Url::display ('/scripts/endless_mode.js'));
 
-			if(!$output) {
-				Request::_param ('output', $this->view->conf->viewMode());
+			if ($output == 'global') {
+				View::appendScript (Url::display ('/scripts/global_view.js'));
 			}
 		}
 

app/layout/nav_menu.phtml

@@ -19,7 +19,7 @@
 		}
 	?>
 
-	<div class="stick">
+	<div class="stick" id="nav_menu_read_all">
 		<a class="read_all btn" href="<?php echo _url ('entry', 'read', 'is_read', 1, 'get', $get); ?>"><?php echo Translate::t ('mark_read'); ?></a>
 		<div class="dropdown">
 			<div id="dropdown-read" class="dropdown-target"></div>
@@ -53,7 +53,7 @@
 			'params' => $params
 		);
 	?>
-	<div class="dropdown">
+	<div class="dropdown" id="nav_menu_views">
 		<div id="dropdown-views" class="dropdown-target"></div>
 		<a class="dropdown-toggle btn" href="#dropdown-views"><?php echo Translate::t ('display'); ?> <i class="icon i_down"></i></a>
 		<ul class="dropdown-menu">

app/views/helpers/view/global_view.phtml

@@ -34,4 +34,8 @@
 		}
 	}
 ?>
+</div>
+
+<div id="panel">
+	<a class="close" href="#"><i class="icon i_close"></i></a>
 </div>

app/views/javascript/main.phtml

@@ -20,6 +20,11 @@ function is_normal_mode() {
 	return stream.html() != null;
 }
 
+function is_global_mode() {
+	var stream = $("#stream.global");
+	return stream.html() != null;
+}
+
 function redirect (url, new_tab) {
 	if (url) {
 		if (new_tab) {
@@ -36,16 +41,28 @@ function toggleContent (new_active, old_active) {
 		new_active.addClass ("active");
 	}
 
+	var box_to_move = "html,body";
+	var relative_move = false;
+	if(is_global_mode()) {
+		box_to_move = "#panel";
+		relative_move = true;
+	}
+
 	if (hide_posts) {
 		old_active.children (".flux_content").toggle (0);
 
+		var new_pos = new_active.position ().top;
+		if(relative_move) {
+			new_pos += $(box_to_move).scrollTop();
+		}
+
 		if (old_active[0] != new_active[0]) {
 			new_active.children (".flux_content").toggle (0, function () {
-				$("html,body").scrollTop (new_active.position ().top);
+				$(box_to_move).scrollTop (new_pos);
 			});
 		}
 	} else {
-		$("html,body").scrollTop (new_active.position ().top);
+		$(box_to_move).scrollTop (new_active.position ().top);
 	}
 
 	<?php if ($mark['article'] == 'yes') { ?>
@@ -146,14 +163,17 @@ function init_img () {
 	});
 }
 
-function inMarkViewport(flux) {
+function inMarkViewport(flux, box_to_follow, relative_follow) {
 	var top = flux.position().top;
+	if(relative_follow) {
+		top += box_to_follow.scrollTop();
+	}
 	var height = flux.height();
 	var begin = top + 3 * height / 4;
 	var bot = Math.min(begin + 75, top + height);
 
-	var windowTop = $(window).scrollTop();
-	var windowBot = windowTop + $(window).height() / 2;
+	var windowTop = box_to_follow.scrollTop();
+	var windowBot = windowTop + box_to_follow.height() / 2;
 
 	return (windowBot >= begin && windowBot <= bot);
 }
@@ -161,7 +181,13 @@ function inMarkViewport(flux) {
 function init_posts () {
 	init_img ();
 	<?php if($this->conf->lazyload() == 'yes') { ?>
-	$(".flux .content img").lazyload();
+	if(is_global_mode()) {
+		$(".flux .content img").lazyload({
+			container: $("#panel")
+		});
+	} else {
+		$(".flux .content img").lazyload();
+	}
 	<?php } ?>
 
 	if (hide_posts) {
@@ -201,11 +227,18 @@ function init_posts () {
 	});
 	<?php } ?>
 
+	var box_to_follow = $(window);
+	var relative_follow = false;
+	if(is_global_mode()) {
+		box_to_follow = $("#panel");
+		relative_follow = true;
+	}
+
 	<?php if ($mark['scroll'] == 'yes') { ?>
-	$(window).scroll(function() {
+	box_to_follow.scroll(function() {
 		$('.flux.not_read:visible').each(function() {
 			if($(this).children(".flux_content").is(':visible') &&
-			   inMarkViewport($(this))) {
+			   inMarkViewport($(this), box_to_follow, relative_follow)) {
 				mark_read($(this), true);
 			}
 		});
@@ -213,10 +246,14 @@ function init_posts () {
 	<?php } ?>
 
 	<?php if ($auto_load_more == 'yes') { ?>
-	$(window).scroll(function() {
-		var windowBot = $(window).scrollTop() + $(window).height();
+	box_to_follow.scroll(function() {
+		var boxBot = box_to_follow.scrollTop() + box_to_follow.height();
 		var load_more_top = $("#load_more").position().top;
-		if(windowBot >= load_more_top) {
+		if(relative_follow) {
+			load_more_top += box_to_follow.scrollTop();
+		}
+
+		if(boxBot >= load_more_top) {
 			load_more_posts ();
 		}
 	});

public/scripts/endless_mode.js

@@ -1,9 +1,11 @@
 var url_load_more = "";
 var load_more = false;
+var container = null;
 
-function init_load_more() {
+function init_load_more(block) {
 	url_load_more = $("a#load_more").attr("href");
-	
+	container = block;
+
 	$("#load_more").click (function () {
 		load_more_posts ();
 		
@@ -19,10 +21,10 @@ function load_more_posts () {
 	load_more = true;
 	$("#load_more").addClass("loading");
 	$.get (url_load_more, function (data) {
-		$("#stream .flux:last").after($("#stream .flux", data));
+		container.children(".flux:last").after($("#stream .flux", data));
 		$(".pagination").html($(".pagination", data).html());
-		
-		init_load_more();
+
+		init_load_more(container);
 		init_posts();
 		
 		$("#load_more").removeClass("loading");
@@ -31,5 +33,5 @@ function load_more_posts () {
 }
 
 $(document).ready (function () {
-	init_load_more();
+	init_load_more($("#stream"));
 });

public/scripts/global_view.js

@@ -0,0 +1,48 @@
+var panel_loading = false;
+
+function load_panel(link) {
+	if(panel_loading) {
+		return;
+	}
+
+	panel_loading = true;
+
+	$.get (link, function (data) {
+		$("#panel").append($(".nav_menu, #stream .day, #stream .flux, #stream .pagination", data));
+
+		$("#panel .nav_menu").children().not("#nav_menu_read_all").remove();
+
+		init_load_more($("#panel"));
+		init_posts();
+
+		$("#panel").slideToggle();
+
+		panel_loading = false;
+	});
+}
+
+function init_close_panel() {
+	$("#panel .close").click(function() {
+		$("#panel").html('<a class="close" href="#"><i class="icon i_close"></i></a>');
+		init_close_panel();
+		$("#panel").slideToggle();
+	});
+}
+
+function init_global_view() {
+	$("#stream .category a").click(function() {
+		var link = $(this).attr("href");
+
+		load_panel(link);
+
+		return false;
+	});
+
+	$(".nav_menu #nav_menu_read_all, .nav_menu .toggle_aside").remove();
+}
+
+
+$(document).ready (function () {
+	init_global_view();
+	init_close_panel();
+});

public/themes/default/freshrss.css

@@ -389,6 +389,30 @@
 			margin: 0;
 		}
 
+#panel {
+	display: none;
+	position: fixed;
+	top: 10px; bottom: 10px;
+	left: 100px; right: 100px;
+	overflow: auto;
+	background: #fff;
+	border: 1px solid #95a5a6;
+	border-radius: 5px;
+}
+	#panel .close {
+		position: absolute;
+		top: 10px; right: 0;
+		display: inline-block;
+		width: 26px;
+		height: 26px;
+		margin: 0 10px 0 0;
+		border: 1px solid #ccc;
+		border-radius: 20px;
+		text-align: center;
+		line-height: 26px;
+		background: #fff;
+	}
+
 .flux_content .bottom {
 	font-size: 90%;
 	text-align: center;
@@ -614,4 +638,8 @@
 	.nav_entries {
 		width: 100%;
 	}
+
+	#panel {
+		left: 5px; right: 5px;
+	}
 }

public/themes/flat-design/freshrss.css

@@ -283,6 +283,7 @@ body {
 				}
 
 #stream.reader .flux {
+	position: relative;
 	padding: 0 0 30px;
 	border: none;
 	background: #ecf0f1;
@@ -385,6 +386,32 @@ body {
 			margin: 0;
 		}
 
+#panel {
+	display: none;
+	position: fixed;
+	top: 10px; bottom: 10px;
+	left: 100px; right: 100px;
+	overflow: auto;
+	background: #fff;
+	border: 1px solid #95a5a6;
+	border-radius: 5px;
+}
+	#panel .close {
+		position: absolute;
+		top: 10px; right: 0px;
+		display: inline-block;
+		width: 26px;
+		height: 26px;
+		margin: 0 10px 0 0;
+		border-radius: 3px;
+		text-align: center;
+		line-height: 24px;
+		background: #95a5a6;
+	}
+		#panel .close:hover {
+			background: #7f8c8d;
+		}
+
 .flux_content .bottom {
 	font-size: 90%;
 	text-align: center;
@@ -633,4 +660,8 @@ body {
 	.nav_menu .stick .btn {
 		margin: 10px 0;
 	}
+
+	#panel {
+		left: 5px; right: 5px;
+	}
 }