Remplace main.phtml non-cachable par main.js cachable

Amélioration des performances en permettant la mise en cache de 10Ko de
JavaScript et en évitant une requête HTTP à chaque action de
l'utilisateur.

1 files changed, 16 insertions, 412 deletions

diff --git a/app/views/javascript/main.phtml b/app/views/javascript/main.phtml
index 03c60cc52..82ed8ff18 100644
--- a/app/views/javascript/main.phtml
+++ b/app/views/javascript/main.phtml
@@ -1,415 +1,19 @@
-<?php if ($this->conf->displayPosts () == 'no') { ?>
-var hide_posts = true;
-<?php } else { ?>
-var hide_posts = false;
-<?php } ?>
-
 <?php
-	$s = $this->conf->shortcuts ();
 	$mark = $this->conf->markWhen ();
-	$auto_load_more = $this->conf->autoLoadMore ()
-?>
-
-function is_reader_mode() {
-	var stream = $("#stream.reader");
-	return stream.html() != null;
-}
-
-function is_normal_mode() {
-	var stream = $("#stream.normal");
-	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) {
-			window.open (url);
-		} else {
-			location.href = url;
-		}
-	}
-}
-
-function toggleContent (new_active, old_active) {
-	old_active.removeClass ("active");
-	if (old_active[0] != new_active[0]) {
-		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;
-	}
-
-	var new_pos = new_active.position ().top,
-		old_scroll = $(box_to_move).scrollTop (),
-		new_scroll = old_scroll;
-	if (hide_posts) {
-		old_active.children (".flux_content").toggle (0);
-
-		new_pos = new_active.position ().top;
-		old_scroll = $(box_to_move).scrollTop ();
-
-		if(relative_move) {
-			new_pos += old_scroll;
-		}
-
-		if (old_active[0] != new_active[0]) {
-			new_active.children (".flux_content").toggle (0, function () {
-				new_scroll = $(box_to_move).scrollTop (new_pos).scrollTop ();
-			});
-		}
-	} else {
-		if(relative_move) {
-			new_pos += old_scroll;
-		}
-
-		new_scroll = $(box_to_move).scrollTop (new_pos).scrollTop ();
-	}
-
-	if ((new_scroll === old_scroll) && $.fn.lazyload) {
-		$(window).trigger ("scroll");	//When no scroll was done, generate fake scroll event for LazyLoad to load images
-	}
-
-	<?php if ($mark['article'] == 'yes') { ?>
-	mark_read(new_active, true);
-	<?php } ?>
-}
-
-function mark_read (active, only_not_read) {
-	if (active[0] === undefined || (
-	    only_not_read === true && !active.hasClass("not_read"))) {
-		return false;
-	}
-
-	url =  active.find ("a.read").attr ("href");
-	if (url === undefined) {
-		return false;
-	}
-
-	$.ajax ({
-		type: 'POST',
-		url: url,
-		data : { ajax: true }
-	}).done (function (data) {
-		res = jQuery.parseJSON(data);
-
-		active.find ("a.read").attr ("href", res.url);
-
-		if (active.hasClass ("not_read")) {
-			active.removeClass ("not_read");
-		} else if(only_not_read !== true || active.hasClass("not_read")) {
-			active.addClass ("not_read");
-		}
-	});
-}
-
-function mark_favorite (active) {
-	if (active[0] === undefined) {
-		return false;
-	}
-
-	url = active.find ("a.bookmark").attr ("href");
-	if (url === undefined) {
-		return false;
-	}
-
-	$.ajax ({
-		type: 'POST',
-		url: url,
-		data : { ajax: true }
-	}).done (function (data) {
-		res = jQuery.parseJSON(data);
-
-		active.find ("a.bookmark").attr ("href", res.url);
-		if (active.hasClass ("favorite")) {
-			active.removeClass ("favorite");
-		} else {
-			active.addClass ("favorite");
-		}
-	});
-}
-
-function prev_entry() {
-	old_active = $(".flux.active");
-	last_active = $(".flux:last");
-	new_active = old_active.prevAll (".flux:first");
-
-	if (new_active.hasClass("flux")) {
-		toggleContent (new_active, old_active);
-	} else if (old_active[0] === undefined &&
-	           new_active[0] === undefined) {
-		toggleContent (last_active, old_active);
-	}
-}
-
-function next_entry() {
-	old_active = $(".flux.active");
-	first_active = $(".flux:first");
-	last_active = $(".flux:last");
-	new_active = old_active.nextAll (".flux:first");
-
-	if (new_active.hasClass("flux")) {
-		toggleContent (new_active, old_active);
-	} else if (old_active[0] === undefined &&
-	           new_active[0] === undefined) {
-		toggleContent (first_active, old_active);
-	}
-
-	<?php if ($auto_load_more !== 'yes') { ?>
-	if(last_active.attr("id") == new_active.attr("id")) {
-		load_more_posts ();
-	}
-	<?php } ?>
-}
-
-function init_img () {
-	var maxWidth = $(".flux_content .content").width() / 2;
-	$(".flux_content .content img").each (function () {
-		if ($(this).width () > maxWidth) {
-			$(this).addClass("big");
-		}
-	});
-}
-
-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);
+	echo 'var ',
+		'hide_posts=', $this->conf->displayPosts () === 'no' ? 'true,' : 'false,',
+		'hide_posts=', $this->conf->displayPosts () === 'no' ? 'true,' : 'false,',
+		'auto_mark_article=', $mark['article'] === 'yes' ? 'true,' : 'false,',
+		'auto_mark_site=', $mark['site'] === 'yes' ? 'true,' : 'false,',
+		'auto_mark_scroll=', $mark['scroll'] === 'yes' ? 'true,' : 'false,',
+		'auto_load_more=', $this->conf->autoLoadMore () === 'yes' ? 'true,' : 'false,',
+		'does_lazyload=', $this->conf->lazyload() === 'yes' ? 'true' : 'false', ";\n";
 
-	var windowTop = box_to_follow.scrollTop();
-	var windowBot = windowTop + box_to_follow.height() / 2;
-
-	return (windowBot >= begin && windowBot <= bot);
-}
-
-function init_posts () {
-	init_img ();
-	<?php if($this->conf->lazyload() == 'yes') { ?>
-	if(is_global_mode()) {
-		$(".flux .content img").lazyload({
-			container: $("#panel")
-		});
-	} else {
-		$(".flux .content img").lazyload();
-	}
-	<?php } ?>
-
-	if (hide_posts) {
-		$(".flux:not(.active) .flux_content").hide ();
-	}
-
-	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') { ?>
-	box_to_follow.scroll(function() {
-		$('.flux.not_read:visible').each(function() {
-			if($(this).children(".flux_content").is(':visible') &&
-			   inMarkViewport($(this), box_to_follow, relative_follow)) {
-				mark_read($(this), true);
-			}
-		});
-	});
-	<?php } ?>
-
-	<?php if ($auto_load_more == 'yes') { ?>
-	box_to_follow.scroll(function() {
-		var load_more = $("#load_more");
-		if (!load_more.is(':visible')) return;
-		var boxBot = box_to_follow.scrollTop() + box_to_follow.height();
-		var load_more_top = load_more.position().top;
-		if(relative_follow) {
-			load_more_top += box_to_follow.scrollTop();
-		}
-
-		if(boxBot >= load_more_top) {
-			load_more_posts ();
-		}
-	});
-	<?php } ?>
-}
-
-function init_column_categories () {
-	if(!is_normal_mode()) {
-		return;
-	}
-
-	$(".category").addClass ("stick");
-	$(".categories .category .btn:first-child").width ("160px");
-	$(".category").append ("<a class=\"btn dropdown-toggle\" href=\"#\"><i class=\"icon i_down\"></i></a>");
-
-	$(".category + .feeds").not(".active").hide();
-	$(".category.active a.dropdown-toggle i").toggleClass ("i_up");
-
-	$(".category a.dropdown-toggle").click (function () {
-		$(this).children ().toggleClass ("i_up");
-		$(this).parent ().next (".feeds").slideToggle();
-		return false;
-	});
-}
-
-function init_shortcuts () {
-	// Touches de manipulation
-	shortcut.add("<?php echo $s['mark_read']; ?>", function () {
-		// on marque comme lu ou non lu
-		active = $(".flux.active");
-		mark_read (active, false);
-	}, {
-		'disable_in_input':true
-	});
-	shortcut.add("shift+<?php echo $s['mark_read']; ?>", function () {
-		// on marque tout comme lu
-		url = $(".nav_menu a.read_all").attr ("href");
-		redirect (url, false);
-	}, {
-		'disable_in_input':true
-	});
-	shortcut.add("<?php echo $s['mark_favorite']; ?>", function () {
-		// on marque comme favori ou non favori
-		active = $(".flux.active");
-		mark_favorite (active);
-	}, {
-		'disable_in_input':true
-	});
-
-	// Touches de navigation
-	shortcut.add("<?php echo $s['prev_entry']; ?>", prev_entry, {
-		'disable_in_input':true
-	});
-	shortcut.add("shift+<?php echo $s['prev_entry']; ?>", function () {
-		old_active = $(".flux.active");
-		first = $(".flux:first");
-
-		if (first.hasClass("flux")) {
-			toggleContent (first, old_active);
-		}
-	}, {
-		'disable_in_input':true
-	});
-	shortcut.add("<?php echo $s['next_entry']; ?>", next_entry, {
-		'disable_in_input':true
-	});
-	shortcut.add("shift+<?php echo $s['next_entry']; ?>", function () {
-		old_active = $(".flux.active");
-		last = $(".flux:last");
-
-		if (last.hasClass("flux")) {
-			toggleContent (last, old_active);
-		}
-	}, {
-		'disable_in_input':true
-	});
-	shortcut.add("<?php echo $s['go_website']; ?>", function () {
-		url_website = $(".flux.active .link a").attr ("href");
-
-		<?php if ($mark['site'] == 'yes') { ?>
-		$(".flux.active").each (function () {
-			mark_read($(this), true);
-		});
-		<?php } ?>
-
-		redirect (url_website, true);
-	}, {
-		'disable_in_input':true
-	});
-}
-
-function init_stream_delegates(divStream) {
-	divStream.on('click', '.flux_header .item.title, .flux_header .item.date', function (e) {	//flux_header_toggle
-		old_active = $(".flux.active");
-		new_active = $(this).parent ().parent ();
-		if (e.target.tagName.toUpperCase() === 'A') {	//Leave real links alone
-			<?php if ($mark['article'] == 'yes') { ?>
-			mark_read(new_active, true);
-			<?php } ?>
-			return true;
-		}
-		toggleContent (new_active, old_active);
-	});
-
-	divStream.on('click', '.flux a.read', function () {
-		active = $(this).parents (".flux");
-		mark_read (active, false);
-
-		return false;
-	});
-
-	divStream.on('click', '.flux a.bookmark', function () {
-		active = $(this).parents (".flux");
-		mark_favorite (active);
-
-		return false;
-	});
-
-	divStream.on('click', '.flux .content a', function () {
-		$(this).attr ('target', '_blank');
-	});
-
-	divStream.on('click', '.item.title>a',function (e) {
-		if (e.ctrlKey) return true;	//Allow default control-click behaviour such as open in backround-tab
-		$(this).parent ().click ();	//Will perform toggle flux_content
-		return false;
-	});
-
-	divStream.on('click', '.bigMarkAsRead', function() {
-		url = $(".nav_menu a.read_all").attr ("href");
-		redirect (url, false);
-		return false;
-	});
-
-	<?php if ($mark['site'] == 'yes') { ?>
-	divStream.on('click', '.flux .link a', function () {
-		mark_read($(this).parent().parent().parent(), true);
-	});
-	<?php } ?>
-}
-
-function init_nav_entries() {
-	$('.nav_entries a.previous_entry').click(function() {
-		prev_entry();
-		return false;
-	});
-	$('.nav_entries a.next_entry').click(function() {
-		next_entry();
-		return false;
-	});
-	$('.nav_entries a.up').click(function() {
-		var active_item = $(".flux.active");
-		var windowTop = $(window).scrollTop();
-		var item_top = active_item.position ().top;
-
-		if(windowTop > item_top) {
-			$("html,body").scrollTop (item_top);
-		} else {
-			$("html,body").scrollTop (0);
-		}
-		return false;
-	});
-}
-
-$(document).ready (function () {
-	if(is_reader_mode()) {
-		hide_posts = false;
-	}
-	init_posts ();
-	init_column_categories ();
-	init_shortcuts ();
-	init_stream_delegates($('#stream'));
-	init_nav_entries();
-});
+	$s = $this->conf->shortcuts ();
+	echo 'var shortcuts={',
+			'mark_read:"', $s['mark_read'], '",',
+			'mark_favorite:"', $s['mark_favorite'], '",',
+			'go_website:"', $s['go_website'], '",',
+			'prev_entry:"', $s['prev_entry'], '",',
+			'next_entry:"', $s['next_entry'], '"',
+		"};\n";