From 4bbe82ff01145f22f20eef90a612dbd588ae1689 Mon Sep 17 00:00:00 2001 From: Alexandre Alapetite Date: Sun, 13 Oct 2013 17:11:13 +0200 Subject: Remplace main.phtml non-cachable par main.js cachable MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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. --- app/views/javascript/main.phtml | 428 ++-------------------------------------- 1 file changed, 16 insertions(+), 412 deletions(-) (limited to 'app/views/javascript/main.phtml') 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 @@ -conf->displayPosts () == 'no') { ?> -var hide_posts = true; - -var hide_posts = false; - - 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 - } - - - mark_read(new_active, true); - -} - -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); - } - - - if(last_active.attr("id") == new_active.attr("id")) { - load_more_posts (); - } - -} - -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 (); - conf->lazyload() == 'yes') { ?> - if(is_global_mode()) { - $(".flux .content img").lazyload({ - container: $("#panel") - }); - } else { - $(".flux .content img").lazyload(); - } - - - 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; - } - - - 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); - } - }); - }); - - - - 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 (); - } - }); - -} - -function init_column_categories () { - if(!is_normal_mode()) { - return; - } - - $(".category").addClass ("stick"); - $(".categories .category .btn:first-child").width ("160px"); - $(".category").append (""); - - $(".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("", function () { - // on marque comme lu ou non lu - active = $(".flux.active"); - mark_read (active, false); - }, { - 'disable_in_input':true - }); - shortcut.add("shift+", function () { - // on marque tout comme lu - url = $(".nav_menu a.read_all").attr ("href"); - redirect (url, false); - }, { - 'disable_in_input':true - }); - shortcut.add("", function () { - // on marque comme favori ou non favori - active = $(".flux.active"); - mark_favorite (active); - }, { - 'disable_in_input':true - }); - - // Touches de navigation - shortcut.add("", prev_entry, { - 'disable_in_input':true - }); - shortcut.add("shift+", function () { - old_active = $(".flux.active"); - first = $(".flux:first"); - - if (first.hasClass("flux")) { - toggleContent (first, old_active); - } - }, { - 'disable_in_input':true - }); - shortcut.add("", next_entry, { - 'disable_in_input':true - }); - shortcut.add("shift+", function () { - old_active = $(".flux.active"); - last = $(".flux:last"); - - if (last.hasClass("flux")) { - toggleContent (last, old_active); - } - }, { - 'disable_in_input':true - }); - shortcut.add("", function () { - url_website = $(".flux.active .link a").attr ("href"); - - - $(".flux.active").each (function () { - mark_read($(this), true); - }); - - - 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 - - mark_read(new_active, true); - - 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; - }); - - - divStream.on('click', '.flux .link a', function () { - mark_read($(this).parent().parent().parent(), true); - }); - -} - -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"; -- cgit v1.2.3