Grosse optimisation JavaScript
* Fusion de endless_mode.js dans main.js car endless_mode.js est
toujours chargé et assez petit.
* Suppression des changements de style en JavaScript lors du chargement
(genre boucle de .hide(), ou d'ajout de classe ".stick") et
implémentation en PHP + CSS à la place.
* Chargement JavaScript asynchrone (defer + async) pour de meilleurs
performances.
* Utilisation préférable des événements globaux plutôt que des
événements pour chaque élément avec jQuery.on(events, selector) pour un
chargement plus rapide et moins de mémoire utilisée.
* Optimisation manuelle du JavaScript (sélecteurs CSS plus performants,
méthodes jQuery plus appropriées, etc.).
* Désactivation de init_img() qui était coûteux, lancé à un moment où
les images ne sont de toute manière pas encore chargées, et qui
n'apporte rien car il y a déjà un img {max-width:100%} en CSS.
* JavaScript en mode strict.
* Enfin, passage du code JavaScript dans JSLint et du coup nombreuses
corrections (syntaxe, variables, méthodes dépréciées...).
* Devrait permettre de fermer
https://github.com/marienfressinaud/FreshRSS/issues/121
* Au passage, quelques simplifications CSS pour de meilleures
performances.
11 years ago
|
|
|
"use strict";
|
|
|
|
/* globals context, init_load_more, init_posts, init_stream */
|
|
|
|
/* jshint esversion:6, strict:global */
|
|
|
|
|
|
|
|
var panel_loading = false;
|
|
|
|
|
|
|
|
function load_panel(link) {
|
Grosse optimisation JavaScript
* Fusion de endless_mode.js dans main.js car endless_mode.js est
toujours chargé et assez petit.
* Suppression des changements de style en JavaScript lors du chargement
(genre boucle de .hide(), ou d'ajout de classe ".stick") et
implémentation en PHP + CSS à la place.
* Chargement JavaScript asynchrone (defer + async) pour de meilleurs
performances.
* Utilisation préférable des événements globaux plutôt que des
événements pour chaque élément avec jQuery.on(events, selector) pour un
chargement plus rapide et moins de mémoire utilisée.
* Optimisation manuelle du JavaScript (sélecteurs CSS plus performants,
méthodes jQuery plus appropriées, etc.).
* Désactivation de init_img() qui était coûteux, lancé à un moment où
les images ne sont de toute manière pas encore chargées, et qui
n'apporte rien car il y a déjà un img {max-width:100%} en CSS.
* JavaScript en mode strict.
* Enfin, passage du code JavaScript dans JSLint et du coup nombreuses
corrections (syntaxe, variables, méthodes dépréciées...).
* Devrait permettre de fermer
https://github.com/marienfressinaud/FreshRSS/issues/121
* Au passage, quelques simplifications CSS pour de meilleures
performances.
11 years ago
|
|
|
if (panel_loading) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
panel_loading = true;
|
|
|
|
|
|
|
|
const req = new XMLHttpRequest();
|
|
|
|
req.open('GET', link, true);
|
|
|
|
req.responseType = 'document';
|
|
|
|
req.onload = function (e) {
|
|
|
|
if (this.status != 200) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
const html = this.response,
|
|
|
|
foreign = html.querySelectorAll('.nav_menu, #stream .day, #stream .flux, #stream .pagination, #stream.prompt'),
|
|
|
|
panel = document.getElementById('panel');
|
|
|
|
foreign.forEach(function (el) {
|
|
|
|
panel.appendChild(document.adoptNode(el));
|
|
|
|
});
|
|
|
|
panel.querySelectorAll('.nav_menu > :not([id="nav_menu_read_all"])').forEach(function (el) {
|
|
|
|
el.remove();
|
|
|
|
});
|
|
|
|
|
|
|
|
init_load_more(panel);
|
|
|
|
init_posts();
|
|
|
|
|
|
|
|
document.getElementById('overlay').classList.add('visible');
|
|
|
|
panel.classList.add('visible');
|
|
|
|
|
|
|
|
// force le démarrage du scroll en haut.
|
|
|
|
// Sans ça, si l'on scroll en lisant une catégorie par exemple,
|
|
|
|
// en en ouvrant une autre ensuite, on se retrouve au même point de scroll
|
|
|
|
panel.scrollTop = 0;
|
|
|
|
document.documentElement.scrollTop = 0;
|
|
|
|
|
|
|
|
//We already have a click listener in main.js
|
|
|
|
panel.addEventListener('click', function (ev) {
|
|
|
|
const b = ev.target.closest('#nav_menu_read_all button, #bigMarkAsRead');
|
|
|
|
if (b) {
|
|
|
|
console.log(b.formAction);
|
|
|
|
|
|
|
|
const req2 = new XMLHttpRequest();
|
|
|
|
req2.open('POST', b.formAction, false);
|
|
|
|
req2.setRequestHeader('Content-Type', 'application/json');
|
|
|
|
req2.send(JSON.stringify({
|
|
|
|
_csrf: context.csrf,
|
|
|
|
}));
|
|
|
|
if (req2.status == 200) {
|
|
|
|
location.reload(false);
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
panel_loading = false;
|
|
|
|
};
|
|
|
|
req.send();
|
|
|
|
}
|
|
|
|
|
|
|
|
function init_close_panel() {
|
|
|
|
const panel = document.getElementById('panel');
|
|
|
|
document.querySelector('#overlay .close').onclick = function (ev) {
|
|
|
|
panel.innerHTML = '';
|
|
|
|
panel.classList.remove('visible');
|
|
|
|
document.getElementById('overlay').classList.remove('visible');
|
|
|
|
return false;
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
function init_global_view() {
|
|
|
|
// TODO: should be based on generic classes
|
|
|
|
document.querySelectorAll('.box a').forEach(function (a) {
|
|
|
|
a.onclick = function (ev) {
|
|
|
|
load_panel(a.href);
|
|
|
|
return false;
|
|
|
|
};
|
|
|
|
});
|
|
|
|
|
|
|
|
document.querySelectorAll('.nav_menu #nav_menu_read_all, .nav_menu .toggle_aside').forEach(function (el) {
|
|
|
|
el.remove();
|
|
|
|
});
|
|
|
|
|
|
|
|
const panel = document.getElementById('panel');
|
|
|
|
init_stream(panel);
|
|
|
|
}
|
|
|
|
|
|
|
|
function init_all_global_view() {
|
|
|
|
if (!window.context) {
|
|
|
|
if (window.console) {
|
|
|
|
console.log('FreshRSS Global view waiting for JS…');
|
|
|
|
}
|
|
|
|
window.setTimeout(init_all_global_view, 50); //Wait for all js to be loaded
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
init_global_view();
|
|
|
|
init_close_panel();
|
|
|
|
}
|
|
|
|
|
|
|
|
if (document.readyState && document.readyState !== 'loading') {
|
|
|
|
init_all_global_view();
|
|
|
|
} else {
|
|
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
|
|
init_all_global_view();
|
Grosse optimisation JavaScript
* Fusion de endless_mode.js dans main.js car endless_mode.js est
toujours chargé et assez petit.
* Suppression des changements de style en JavaScript lors du chargement
(genre boucle de .hide(), ou d'ajout de classe ".stick") et
implémentation en PHP + CSS à la place.
* Chargement JavaScript asynchrone (defer + async) pour de meilleurs
performances.
* Utilisation préférable des événements globaux plutôt que des
événements pour chaque élément avec jQuery.on(events, selector) pour un
chargement plus rapide et moins de mémoire utilisée.
* Optimisation manuelle du JavaScript (sélecteurs CSS plus performants,
méthodes jQuery plus appropriées, etc.).
* Désactivation de init_img() qui était coûteux, lancé à un moment où
les images ne sont de toute manière pas encore chargées, et qui
n'apporte rien car il y a déjà un img {max-width:100%} en CSS.
* JavaScript en mode strict.
* Enfin, passage du code JavaScript dans JSLint et du coup nombreuses
corrections (syntaxe, variables, méthodes dépréciées...).
* Devrait permettre de fermer
https://github.com/marienfressinaud/FreshRSS/issues/121
* Au passage, quelques simplifications CSS pour de meilleures
performances.
11 years ago
|
|
|
}, false);
|
|
|
|
}
|