Files
FreshRSS/app/views/javascript/main.phtml
Alexandre Alapetite 1b8b72b81d Corrige images qui ne se chargent pas avec LazyLoad
Tel qu'utilisé, LazyLoad charge les nouvelles images lors d'un scroll. Hors dans certains cas (navigation clavier ou clic souris sur un article pour l'ouvrir), aucun scroll n'est généré et du coup les images ne sont pas chargées.
Ce patch ajoute un événement scroll artificiel dans ces cas là.

Exemple de cas sans scroll: bas de liste d'articles (ex: non lus), avec des articles plus petits que la taille verticale de la fenêtre, il n'y a pas de matière pour scroller plus haut.
2013-10-07 21:26:13 +02:00

411 lines
9.7 KiB
PHTML

<?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);
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 {
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);
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() {
var divStream = $('#stream');
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();
init_nav_entries();
});