Ajout mode lecture (en js par contre) fix issue #6

6 files changed, 137 insertions, 4 deletions

diff --git a/app/controllers/indexController.php b/app/controllers/indexController.php
index 57d37e0f5..7d42de67a 100755
--- a/app/controllers/indexController.php
+++ b/app/controllers/indexController.php
@@ -6,6 +6,7 @@ class indexController extends ActionController {
 		View::appendScript (Url::display ('/scripts/shortcut.js'));
 		View::appendScript (Url::display (array ('c' => 'javascript', 'a' => 'main')));
 		View::appendScript (Url::display ('/scripts/endless_mode.js'));
+		View::appendScript (Url::display ('/scripts/read_mode.js'));
 		
 		$entryDAO = new EntryDAO ();
 		$catDAO = new CategoryDAO ();
diff --git a/app/views/javascript/main.phtml b/app/views/javascript/main.phtml
index 1fb30feb1..2bc6f4abb 100644
--- a/app/views/javascript/main.phtml
+++ b/app/views/javascript/main.phtml
@@ -20,7 +20,7 @@ function slide (new_active, old_active) {
 	old_active.removeClass ("active");
 	new_active.addClass ("active");
 	
-	if (hide_posts) {
+	if (hide_posts && !read_mode_on ) {
 		old_active.children (".content").slideUp (500);
 		new_active.children (".content").slideDown (500, function () {
 			$.smoothScroll({
@@ -29,7 +29,7 @@ function slide (new_active, old_active) {
 		});
 	} else {
 		$.smoothScroll({
-			offset: new_active.position ().top - 50
+			offset: new_active.position ().top
 		});
 	}
 }
@@ -104,7 +104,7 @@ function mark_favorite (active) {
 }
 
 function init_posts () {
-	if (hide_posts) {
+	if (hide_posts && !read_mode_on) {
 		$(".post.flux:not(.active) .content").slideUp ();
 	}
 	
diff --git a/public/scripts/endless_mode.js b/public/scripts/endless_mode.js
index 30b91822c..7a9840cd4 100644
--- a/public/scripts/endless_mode.js
+++ b/public/scripts/endless_mode.js
@@ -10,7 +10,7 @@ function load_more_refresh () {
 	}
 }
 
-function load_more_posts () {
+function load_more_posts (f_callback) {
 	load = true;
 	$.get (url_next_page, function (data) {
 		$("#load_more").before ($("#stream .post", data));
@@ -19,6 +19,9 @@ function load_more_posts () {
 		
 		init_posts ();
 		load_more_refresh ();
+		if (typeof f_callback == 'function') {
+			f_callback.call (this);
+		}
 		load = false;
 	});
 }
diff --git a/public/scripts/read_mode.js b/public/scripts/read_mode.js
new file mode 100644
index 000000000..13b3ecf5a
--- /dev/null
+++ b/public/scripts/read_mode.js
@@ -0,0 +1,85 @@
+var read_mode_on = false;
+var scroll_auto = false;
+
+function read_mode () {
+	read_mode_on = true;
+	
+	// global
+	$('#global').css({
+		'background': '#ddd'
+	});
+	$('#main_aside').animate ({width: 0}, 500, function () {
+		$('#main_aside').hide ();
+	});
+	$('#top').animate ({height: 0}, 500, function () {
+		$('#top').hide ();
+	});
+	$('#main').animate({
+		'width': 800,
+		'padding-left': ($(window).width() - 800) / 2,
+	});
+	$('#main').css({
+		'background': '#ddd'
+	});
+	$('#stream').addClass ('read_mode');
+	$('ul.pagination').fadeOut (500);
+	
+	// posts
+	$('.post.flux .content').slideDown (500);
+	
+	// mode endless auto
+	scroll_auto = true;
+	$(window).scroll (function () {
+		offset = $('#load_more').offset ();
+		
+		if (offset.top - $(window).height () <= $(window).scrollTop ()
+		 && !load
+		 && url_next_page !== undefined
+		 && scroll_auto) {
+			load_more_posts ();
+		}
+	});
+}
+function un_read_mode () {
+	read_mode_on = false;
+	
+	// global
+	$('#global').css({
+		'background': '#fafafa'
+	});
+	$('#main_aside').show ();
+	$('#main_aside').animate ({width: 250});
+	$('#top').show ();
+	$('#top').animate ({height: 50});
+	$('#main').animate({
+		'width': '100%',
+		'padding-left': 250,
+	});
+	$('#main').css({
+		'background': '#fafafa'
+	});
+	$('#stream').removeClass ('read_mode');
+	$('ul.pagination').fadeIn (500);
+	
+	// posts
+	if (hide_posts) {
+		$('.post.flux .content').slideUp (500);
+	}
+	
+	// mode endless auto desactivé
+	scroll_auto = false;
+}
+
+$(document).ready (function () {
+	$('#global').append ('<a id="read_mode" href="#">&nbsp;</a>');
+	
+	$('a#read_mode').click (function () {
+		if (read_mode_on) {
+			un_read_mode ();
+		} else {
+			read_mode ();
+		}
+		
+		return false;
+	});
+});
diff --git a/public/theme/base.css b/public/theme/base.css
index 9a0cce46d..1956303c9 100644
--- a/public/theme/base.css
+++ b/public/theme/base.css
@@ -104,6 +104,7 @@ form {
 	display: table;
 	width: 100%;
 	height: 100%;
+	background: #fafafa;
 }
 	.aside {
 		display: table-cell;
@@ -311,6 +312,28 @@ form {
 			border-left: 10px solid #FFC300;
 			background: #FFF6DA;
 		}
+		
+#stream.read_mode {
+	background: #fff;
+	box-shadow: 0 0 5px #000;
+}
+	#stream.read_mode .post.flux {
+		border-left: 0;
+		padding: 50px 20px;
+		background: #fff;
+	}
+	#stream.read_mode .post.flux a {
+		color: #363;
+	}
+	#stream.read_mode .post.flux .content a {
+		text-decoration: underline;
+	}
+		#stream.read_mode .post.flux .content a:hover {
+			text-decoration: none;
+		}
+	#stream.read_mode .post.flux .after {
+		display: none;
+	}
 
 /*** PAGINATION ***/
 .pagination {
@@ -355,6 +378,27 @@ a#load_more {
 		color: #666;
 	}
 
+a#read_mode {
+	display: block;
+	position: fixed;
+	bottom: 0;
+	right: 0;
+	width: 50px;
+	height: 50px;
+	background: url("read_mode.png") 9px 9px no-repeat #ddd;
+	border-top: 1px solid #aaa;
+	border-left: 1px solid #aaa;
+	border-radius: 20px 0 0 0;
+	box-shadow: -2px -2px 5px #aaa;
+	transition: all 100ms linear 0s;
+}
+	a#read_mode:hover {
+		width: 60px;
+		height: 60px;
+		background-color: #eee;
+		text-decoration: none;
+	}
+
 /*** NOTIFICATION ***/
 #notification {
 	position: fixed;
diff --git a/public/theme/read_mode.png b/public/theme/read_mode.png
new file mode 100644
index 000000000..881399237
--- /dev/null
+++ b/public/theme/read_mode.png