Merge pull request #2199 from Alkarex/batch-scroll-as-read

Batch scroll as read + reducing jQuery

1 files changed, 484 insertions, 472 deletions

diff --git a/p/scripts/main.js b/p/scripts/main.js
index 4ba329dc1..7b49ebeb2 100644
--- a/p/scripts/main.js
+++ b/p/scripts/main.js
@@ -1,11 +1,41 @@
 "use strict";
-/* globals $, jQuery, context, i18n, shortcut, shortcuts, url */
-/* jshint strict:global */
+/* globals $, jQuery, shortcut */
+/* jshint esversion:6, strict:global */
+
+//<Polyfills>
+if (!NodeList.prototype.forEach) NodeList.prototype.forEach = Array.prototype.forEach;
+if (!Element.prototype.matches) Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.mozMatchesSelector || Element.prototype.webkitMatchesSelector;
+if (!Element.prototype.closest) Element.prototype.closest = function (s) {
+		let el = this;
+		do {
+			if (el.matches(s)) return el;
+			el = el.parentElement;
+		} while (el);
+		return null;
+	};
+if (!Element.prototype.remove) Element.prototype.remove = function () { if (this.parentNode) this.parentNode.removeChild(this); };
+//</Polyfills>
+
+//<Global variables>
+var context, i18n, icons, shortcuts, urls;
+
+(function parseJsonVars() {
+	const jsonVars = document.getElementById('jsonVars'),
+		json = JSON.parse(jsonVars.innerHTML);
+	jsonVars.outerHTML = '';
+	context = json.context;
+	i18n = json.i18n;
+	shortcuts = json.shortcuts;
+	urls = json.urls;
+	icons = json.icons;
+	icons.read = decodeURIComponent(icons.read);
+	icons.unread = decodeURIComponent(icons.unread);
+}());
 
 var $stream = null,
-	isCollapsed = true,
-	shares = 0,
-	ajax_loading = false;
+	ajax_loading = false,
+	$nav_entries = null;
+//</Global variables>
 
 function redirect(url, new_tab) {
 	if (url) {
@@ -17,14 +47,12 @@ function redirect(url, new_tab) {
 	}
 }
 
-function needsScroll($elem) {
-	var $win = $(window),
-		winTop = $win.scrollTop(),
-		winHeight = $win.height(),
-		winBottom = winTop + winHeight,
-		elemTop = $elem.offset().top,
-		elemBottom = elemTop + $elem.outerHeight();
-	return (elemTop < winTop || elemBottom > winBottom) ? elemTop - (winHeight / 2) : 0;
+function needsScroll(elem) {
+	const winBottom = document.documentElement.scrollTop + document.documentElement.clientHeight,
+		elemTop = elem.offsetParent.offsetTop + elem.offsetTop,
+		elemBottom = elemTop + elem.offsetHeight;
+	return (elemTop < document.documentElement.scrollTop || elemBottom > winBottom) ?
+		elemTop - (document.documentElement.clientHeight / 2) : 0;
 }
 
 function str2int(str) {
@@ -40,10 +68,10 @@ function numberFormat(nStr) {
 	}
 	// http://www.mredkj.com/javascript/numberFormat.html
 	nStr += '';
-	var x = nStr.split('.'),
-		x1 = x[0],
+	const x = nStr.split('.'),
 		x2 = x.length > 1 ? '.' + x[1] : '',
 		rgx = /(\d+)(\d{3})/;
+	let x1 = x[0];
 	while (rgx.test(x1)) {
 		x1 = x1.replace(rgx, '$1' + ' ' + '$2');
 	}
@@ -51,29 +79,29 @@ function numberFormat(nStr) {
 }
 
 function incLabel(p, inc, spaceAfter) {
-	var i = str2int(p) + inc;
+	const i = str2int(p) + inc;
 	return i > 0 ? ((spaceAfter ? '' : ' ') + '(' + numberFormat(i) + ')' + (spaceAfter ? ' ' : '')) : '';
 }
 
 function incUnreadsFeed(article, feed_id, nb) {
 	//Update unread: feed
-	var elem = $('#' + feed_id).get(0),
+	let elem = document.getElementById(feed_id),
 		feed_unreads = elem ? str2int(elem.getAttribute('data-unread')) : 0,
 		feed_priority = elem ? str2int(elem.getAttribute('data-priority')) : 0;
 	if (elem) {
 		elem.setAttribute('data-unread', feed_unreads + nb);
-		elem = $(elem).children('.item-title').get(0);
+		elem = elem.querySelector('.item-title');
 		if (elem) {
 			elem.setAttribute('data-unread', numberFormat(feed_unreads + nb));
 		}
 	}
 
 	//Update unread: category
-	elem = $('#' + feed_id).parents('.category').get(0);
+	elem = document.getElementById(feed_id).closest('.category');
 	feed_unreads = elem ? str2int(elem.getAttribute('data-unread')) : 0;
 	if (elem) {
 		elem.setAttribute('data-unread', feed_unreads + nb);
-		elem = $(elem).find('.title').get(0);
+		elem = elem.querySelector('.title');
 		if (elem) {
 			elem.setAttribute('data-unread', numberFormat(feed_unreads + nb));
 		}
@@ -81,7 +109,7 @@ function incUnreadsFeed(article, feed_id, nb) {
 
 	//Update unread: all
 	if (feed_priority > 0) {
-		elem = $('#aside_feed .all .title').get(0);
+		elem = document.querySelector('#aside_feed .all .title');
 		if (elem) {
 			feed_unreads = elem ? str2int(elem.getAttribute('data-unread')) : 0;
 			elem.setAttribute('data-unread', numberFormat(feed_unreads + nb));
@@ -89,22 +117,22 @@ function incUnreadsFeed(article, feed_id, nb) {
 	}
 
 	//Update unread: favourites
-	if (article && article.closest('div').hasClass('favorite')) {
-		elem = $('#aside_feed .favorites .title').get(0);
+	if (article && article.closest('div').classList.contains('favorite')) {
+		elem = document.querySelector('#aside_feed .favorites .title');
 		if (elem) {
 			feed_unreads = elem ? str2int(elem.getAttribute('data-unread')) : 0;
 			elem.setAttribute('data-unread', numberFormat(feed_unreads + nb));
 		}
 	}
 
-	var isCurrentView = false;
+	let isCurrentView = false;
 	// Update unread: title
 	document.title = document.title.replace(/^((?:\([ 0-9]+\) )?)/, function (m, p1) {
-		var $feed = $('#' + feed_id);
-		if (article || ($feed.closest('.active').length > 0 && $feed.siblings('.active').length === 0)) {
+		const feed = document.getElementById(feed_id);
+		if (article || feed.closest('.active')) {
 			isCurrentView = true;
 			return incLabel(p1, nb, true);
-		} else if ($('.all.active').length > 0) {
+		} else if (document.querySelector('.all.active')) {
 			isCurrentView = feed_priority > 0;
 			return incLabel(p1, feed_priority > 0 ? nb : 0, true);
 		} else {
@@ -115,86 +143,118 @@ function incUnreadsFeed(article, feed_id, nb) {
 }
 
 function incUnreadsTag(tag_id, nb) {
-	var $t = $('#t_' + tag_id);
-	var unreads = str2int($t.attr('data-unread'));
-	$t.attr('data-unread', unreads + nb)
-		.children('.item-title').attr('data-unread', numberFormat(unreads + nb));
-
-	$t = $('.category.tags').find('.title');
-	unreads = str2int($t.attr('data-unread'));
-	$t.attr('data-unread', numberFormat(unreads + nb));
-}
-
-var pending_entries = {};
-function mark_read(active, only_not_read) {
-	if ((active.length === 0) || (!active.attr('id')) ||
-		context.anonymous ||
-		(only_not_read && !active.hasClass("not_read"))) {
-		return false;
+	let t = document.getElementById(tag_id);
+	if (t) {
+		let unreads = str2int(t.getAttribute('data-unread'));
+		t.setAttribute('data-unread', unreads + nb);
+		t.querySelector('.item-title').setAttribute('data-unread', numberFormat(unreads + nb));
 	}
-
-	if (pending_entries[active.attr('id')]) {
-		return false;
+	t = document.querySelector('.category.tags .title');
+	if (t) {
+		let unreads = str2int(t.getAttribute('data-unread'));
+		t.setAttribute('data-unread', numberFormat(unreads + nb));
 	}
-	pending_entries[active.attr('id')] = true;
+}
 
-	var url = '.?c=entry&a=read&id=' + active.attr('id').replace(/^flux_/, '') +
-		(active.hasClass('not_read') ? '' : '&is_read=0');
+var pending_entries = {},
+	mark_read_queue = [];
 
+function send_mark_read_queue(queue, asRead) {
 	$.ajax({
 		type: 'POST',
-		url: url,
+		url: '.?c=entry&a=read' + (asRead ? '' : '&is_read=0'),
 		data: {
 			ajax: true,
 			_csrf: context.csrf,
+			'id[]': queue,
 		},
 	}).done(function (data) {
-		var $r = active.find("a.read").attr("href", data.url),
-			inc = 0;
-		if (active.hasClass("not_read")) {
-			active.removeClass("not_read");
-			inc--;
-		} else {
-			active.addClass("not_read");
-			active.addClass("keep_unread");
-			inc++;
-		}
-		$r.find('.icon').replaceWith(data.icon);
-
-		var feed_url = active.find(".website>a").attr("href");
-		if (feed_url) {
-			var feed_id = feed_url.substr(feed_url.lastIndexOf('f_'));
-			incUnreadsFeed(active, feed_id, inc);
+		for (let i = queue.length - 1; i >= 0; i--) {
+			const div = document.getElementById('flux_' + queue[i]),
+				myIcons = icons;
+			let inc = 0;
+			if (div.classList.contains('not_read')) {
+				div.classList.remove('not_read');
+				div.querySelectorAll('a.read').forEach(function (a) { a.setAttribute('href', a.getAttribute('href').replace('&is_read=0', '') + '&is_read=1'); });
+				div.querySelectorAll('a.read > .icon').forEach(function (img) { img.outerHTML = myIcons.read; });
+				inc--;
+			} else {
+				div.classList.add('not_read');
+				div.classList.add('keep_unread');	//Split for IE11
+				div.querySelectorAll('a.read').forEach(function (a) { a.setAttribute('href', a.getAttribute('href').replace('&is_read=1', '')); });
+				div.querySelectorAll('a.read > .icon').forEach(function (img) { img.outerHTML = myIcons.unread; });
+				inc++;
+			}
+			let feed_link = div.querySelector('.website > a');
+			if (feed_link) {
+				let feed_url = feed_link.getAttribute('href');
+				let feed_id = feed_url.substr(feed_url.lastIndexOf('f_'));
+				incUnreadsFeed(div, feed_id, inc);
+			}
+			delete pending_entries['flux_' + queue[i]];
 		}
 		faviconNbUnread();
-
 		if (data.tags) {
-			for (var i = data.tags.length - 1; i >= 0; i--) {
-				incUnreadsTag(data.tags[i], inc);
+			let tagIds = Object.keys(data.tags);
+			for (let i = tagIds.length - 1; i >= 0; i--) {
+				let tagId = tagIds[i];
+				incUnreadsTag(tagId, (asRead ? -1 : 1) * data.tags[tagId].length);
 			}
 		}
-
-		delete pending_entries[active.attr('id')];
+		onScroll();
 	}).fail(function (data) {
 		openNotification(i18n.notif_request_failed, 'bad');
-		delete pending_entries[active.attr('id')];
+		for (let i = queue.length - 1; i >= 0; i--) {
+			delete pending_entries['flux_' + queue[i]];
+		}
 	});
 }
 
-function mark_favorite(active) {
-	if (active.length === 0) {
+var send_mark_read_queue_timeout = 0;
+
+function mark_read(div, only_not_read) {
+	if (!div || !div.id || context.anonymous ||
+		(only_not_read && !div.classList.contains('not_read'))) {
 		return false;
 	}
+	if (pending_entries[div.id]) {
+		return false;
+	}
+	pending_entries[div.id] = true;
+
+	const asRead = div.classList.contains('not_read'),
+		entryId = div.id.replace(/^flux_/, '');
+	if (asRead) {
+		mark_read_queue.push(entryId);
+		if (send_mark_read_queue_timeout == 0) {
+			send_mark_read_queue_timeout = setTimeout(function () {
+					send_mark_read_queue_timeout = 0;
+					const queue = mark_read_queue.slice(0);
+					mark_read_queue = [];
+					send_mark_read_queue(queue, asRead);
+				}, 1000);
+		}
+	} else {
+		const queue = [ entryId ];
+		send_mark_read_queue(queue, asRead);
+	}
+}
 
-	var url = active.find("a.bookmark").attr("href");
-	if (url === undefined) {
+function mark_favorite(div) {
+	if (!div) {
 		return false;
 	}
 
-	if (pending_entries[active.attr('id')]) {
+	let a = div.querySelector('a.bookmark'),
+		url = a ? a.getAttribute('href') : '';
+	if (!url) {
 		return false;
 	}
-	pending_entries[active.attr('id')] = true;
+
+	if (pending_entries[div.id]) {
+		return false;
+	}
+	pending_entries[div.id] = true;
 
 	$.ajax({
 		type: 'POST',
@@ -204,187 +264,147 @@ function mark_favorite(active) {
 			_csrf: context.csrf,
 		},
 	}).done(function (data) {
-		var $b = active.find("a.bookmark").attr("href", data.url),
-			inc = 0;
-		if (active.hasClass("favorite")) {
-			active.removeClass("favorite");
+		let inc = 0;
+		if (div.classList.contains('favorite')) {
+			div.classList.remove('favorite');
 			inc--;
 		} else {
-			active.addClass("favorite").find('.bookmark');
+			div.classList.add('favorite');
 			inc++;
 		}
-		$b.find('.icon').replaceWith(data.icon);
+		div.querySelectorAll('a.bookmark').forEach(function (a) { a.setAttribute('href', data.url); });
+		div.querySelectorAll('a.bookmark > .icon').forEach(function (img) { img.outerHTML = data.icon; });
 
-		var favourites = $('#aside_feed .favorites .title').contents().last().get(0);
-		if (favourites && favourites.textContent) {
+		const favourites = document.querySelector('#aside_feed .favorites .title');
+		if (favourites) {
 			favourites.textContent = favourites.textContent.replace(/((?: \([ 0-9]+\))?\s*)$/, function (m, p1) {
 				return incLabel(p1, inc, false);
 			});
 		}
 
-		if (active.closest('div').hasClass('not_read')) {
-			var elem = $('#aside_feed .favorites .title').get(0),
+		if (div.classList.contains('not_read')) {
+			const elem = document.querySelector('#aside_feed .favorites .title'),
 				feed_unreads = elem ? str2int(elem.getAttribute('data-unread')) : 0;
 			if (elem) {
 				elem.setAttribute('data-unread', numberFormat(feed_unreads + inc));
 			}
 		}
 
-		delete pending_entries[active.attr('id')];
+		delete pending_entries[div.id];
 	}).fail(function (data) {
 		openNotification(i18n.notif_request_failed, 'bad');
-		delete pending_entries[active.attr('id')];
+		delete pending_entries[div.id];
 	});
 }
 
 function toggleContent(new_active, old_active, skipping) {
 	// If skipping, move current without activating or marking as read
-	if (new_active.length === 0) {
+	if (!new_active) {
 		return;
 	}
 
 	if (context.does_lazyload && !skipping) {
-		new_active.find('img[data-original], iframe[data-original]').each(function () {
-			this.setAttribute('src', this.getAttribute('data-original'));
-			this.removeAttribute('data-original');
+		new_active.querySelectorAll('img[data-original], iframe[data-original]').forEach(function (elem) {
+			elem.setAttribute('src', elem.getAttribute('data-original'));
+			elem.removeAttribute('data-original');
 		});
 	}
 
-	if (old_active[0] !== new_active[0]) {
-		if (isCollapsed && !skipping) { // BUG?: isCollapsed can only ever be true
-			new_active.addClass("active");
+	if (old_active !== new_active) {
+		if (!skipping) {
+			new_active.classList.add('active');
 		}
-		old_active.removeClass("active current");
-		new_active.addClass("current");
-		if (context.auto_remove_article && !old_active.hasClass('not_read') && !skipping) {
-			auto_remove(old_active);
+		new_active.classList.add('current');
+		if (old_active) {
+			old_active.classList.remove('active');
+			old_active.classList.remove('current');	//Split for IE11
 		}
 	} else { // collapse_entry calls toggleContent(flux_current, flux_current, false)
-		new_active.toggleClass('active');
+		new_active.classList.toggle('active');
 	}
 
-	var relative_move = context.current_view === 'global',
-		box_to_move = $(relative_move ? "#panel" : "html,body");
+	const relative_move = context.current_view === 'global',
+		box_to_move = relative_move ? document.getElementById('#panel') : document.documentElement;
 
 	if (context.sticky_post) {
-		var prev_article = new_active.prevAll('.flux'),
-			new_pos = new_active.offset().top,
-			old_scroll = box_to_move.scrollTop();
+		let prev_article = new_active.previousElementSibling,
+			new_pos = new_active.offsetTop + document.documentElement.scrollTop,
+			old_scroll = box_to_move.scrollTop;
 
-		if (prev_article.length > 0 && new_pos - prev_article.offset().top <= 150) {
-			new_pos = prev_article.offset().top;
+		if (prev_article && new_active.offsetTop - prev_article.offsetTop <= 150) {
+			new_pos = prev_article.offsetTop;
 			if (relative_move) {
-				new_pos -= box_to_move.offset().top;
+				new_pos -= box_to_move.offsetTop;
 			}
 		}
 
 		if (skipping) {
 			// when skipping, this feels more natural if it's not so near the top
-			new_pos -= $(window).height() / 4;
+			new_pos -= document.body.clientHeight / 4;
 		}
-		if (context.hide_posts) {
-			if (relative_move) {
-				new_pos += old_scroll;
-			}
-
-			new_active.children(".flux_content").first().each(function () {
-				box_to_move.scrollTop(new_pos).scrollTop();
-			});
-		} else {
-			if (relative_move) {
-				new_pos += old_scroll;
-			}
-
-			box_to_move.scrollTop(new_pos).scrollTop();
+		if (relative_move) {
+			new_pos += old_scroll;
 		}
+		box_to_move.scrollTop = new_pos;
 	}
 
-	if (context.auto_mark_article && new_active.hasClass('active') && !skipping) {
+	if (context.auto_mark_article && new_active.classList.contains('active') && !skipping) {
 		mark_read(new_active, true);
 	}
+	onScroll();
 }
 
-function auto_remove(element) {
-	var p = element.prev();
-	var n = element.next();
-	if (p.hasClass('day') && n.hasClass('day')) {
-		p.remove();
-	}
-	element.remove();
-	$('#stream > .flux:not(.not_read):not(.active)').remove();
+function prev_entry(skipping) {
+	const old_active = document.querySelector('.flux.current'),
+		new_active = old_active ? old_active.previousElementSibling : document.querySelector('.flux');
+	toggleContent(new_active, old_active, skipping);
 }
 
-function prev_entry() {
-	var old_active = $(".flux.current"),
-		new_active = old_active.length === 0 ? $(".flux:last") : old_active.prevAll(".flux:first");
-	toggleContent(new_active, old_active, false);
-}
-
-function next_entry() {
-	var old_active = $(".flux.current"),
-		new_active = old_active.length === 0 ? $(".flux:first") : old_active.nextAll(".flux:first");
-	toggleContent(new_active, old_active, false);
-
-	if (new_active.nextAll().length < 3) {
-		load_more_posts();
-	}
-}
-
-function skip_prev_entry() {
-	var old_active = $(".flux.current"),
-		new_active = old_active.length === 0 ? $(".flux:last") : old_active.prevAll(".flux:first");
-	toggleContent(new_active, old_active, true);
-}
-
-function skip_next_entry() {
-	var old_active = $(".flux.current"),
-		new_active = old_active.length === 0 ? $(".flux:first") : old_active.nextAll(".flux:first");
-	toggleContent(new_active, old_active, true);
-
-	if (new_active.nextAll().length < 3) {
-		load_more_posts();
-	}
+function next_entry(skipping) {
+	const old_active = document.querySelector('.flux.current'),
+		new_active = old_active ? old_active.nextElementSibling : document.querySelector('.flux');
+	toggleContent(new_active, old_active, skipping);
 }
 
 function prev_feed() {
-	var active_feed = $("#aside_feed .tree-folder-items .item.active");
-	if (active_feed.length > 0) {
-		active_feed.prevAll(':visible:first').find('a').each(function(){this.click();});
+	const $active_feed = $('#aside_feed .tree-folder-items .item.active');
+	if ($active_feed.length > 0) {
+		$active_feed.prevAll(':visible:first').find('a').each(function () { this.click(); });
 	} else {
 		last_feed();
 	}
 }
 
 function next_feed() {
-	var active_feed = $("#aside_feed .tree-folder-items .item.active");
-	if (active_feed.length > 0) {
-		active_feed.nextAll(':visible:first').find('a').each(function(){this.click();});
+	const $active_feed = $('#aside_feed .tree-folder-items .item.active');
+	if ($active_feed.length > 0) {
+		$active_feed.nextAll(':visible:first').find('a').each(function () { this.click(); });
 	} else {
 		first_feed();
 	}
 }
 
 function first_feed() {
-	var feed = $("#aside_feed .tree-folder-items.active .item:visible:first");
-	if (feed.length > 0) {
-		feed.find('a')[1].click();
+	const a = document.querySelector('#aside_feed .category.active .feed:not([data-unread="0"]) a.item-title');
+	if (a) {
+		a.click();
 	}
 }
 
 function last_feed() {
-	var feed = $("#aside_feed .tree-folder-items.active .item:visible:last");
-	if (feed.length > 0) {
-		feed.find('a')[1].click();
+	const links = document.querySelectorAll('#aside_feed .category.active .feed:not([data-unread="0"]) a.item-title');
+	if (links && links.length > 0) {
+		links[links.length - 1].click();
 	}
 }
 
 function prev_category() {
-	var active_cat = $("#aside_feed .tree-folder.active");
+	const $active_cat = $('#aside_feed .tree-folder.active');
 
-	if (active_cat.length > 0) {
-		var prev_cat = active_cat.prevAll(':visible:first').find('.tree-folder-title .title');
-		if (prev_cat.length > 0) {
-			prev_cat[0].click();
+	if ($active_cat.length > 0) {
+		const $prev_cat = $active_cat.prevAll(':visible:first').find('.tree-folder-title .title');
+		if ($prev_cat.length > 0) {
+			$prev_cat[0].click();
 		}
 	} else {
 		last_category();
@@ -393,12 +413,12 @@ function prev_category() {
 }
 
 function next_category() {
-	var active_cat = $("#aside_feed .tree-folder.active");
+	const $active_cat = $('#aside_feed .tree-folder.active');
 
-	if (active_cat.length > 0) {
-		var next_cat = active_cat.nextAll(':visible:first').find('.tree-folder-title .title');
-		if (next_cat.length > 0) {
-			next_cat[0].click();
+	if ($active_cat.length > 0) {
+		const $next_cat = $active_cat.nextAll(':visible:first').find('.tree-folder-title .title');
+		if ($next_cat.length > 0) {
+			$next_cat[0].click();
 		}
 	} else {
 		first_category();
@@ -407,40 +427,40 @@ function next_category() {
 }
 
 function first_category() {
-	var cat = $("#aside_feed .tree-folder:visible:first");
-	if (cat.length > 0) {
-		cat.find('.tree-folder-title .title')[0].click();
+	const a = document.querySelector('#aside_feed .category:not([data-unread="0"]) a.title');
+	if (a) {
+		a.click();
 	}
 }
 
 function last_category() {
-	var cat = $("#aside_feed .tree-folder:visible:last");
-	if (cat.length > 0) {
-		cat.find('.tree-folder-title .title')[0].click();
+	const links = document.querySelectorAll('#aside_feed .category:not([data-unread="0"]) a.title');
+	if (links && links.length > 0) {
+		links[links.length - 1].click();
 	}
 }
 
 function collapse_entry() {
-	var flux_current = $(".flux.current");
+	const flux_current = document.querySelector('.flux.current');
 	toggleContent(flux_current, flux_current, false);
 }
 
 function user_filter(key) {
-	var filter = $('#dropdown-query');
-	var filters = filter.siblings('.dropdown-menu').find('.item.query a');
-	if (typeof key === "undefined") {
-		if (!filter.length) {
+	const $filter = $('#dropdown-query'),
+		$filters = $filter.siblings('.dropdown-menu').find('.item.query a');
+	if (typeof key === 'undefined') {
+		if (!$filters.length) {
 			return;
 		}
 		// Display the filter div
-		window.location.hash = filter.attr('id');
+		location.hash = $filters.attr('id');
 		// Force scrolling to the filter div
-		var scroll = needsScroll($('.header'));
+		const scroll = needsScroll(document.querySelector('.header'));
 		if (scroll !== 0) {
-			$('html,body').scrollTop(scroll);
+			document.documentElement.scrollTop = scroll;
 		}
 		// Force the key value if there is only one action, so we can trigger it automatically
-		if (filters.length === 1) {
+		if ($filters.length === 1) {
 			key = 1;
 		} else {
 			return;
@@ -448,24 +468,24 @@ function user_filter(key) {
 	}
 	// Trigger selected share action
 	key = parseInt(key);
-	if (key <= filters.length) {
-		filters[key - 1].click();
+	if (key <= $filters.length) {
+		$filters[key - 1].click();
 	}
 }
 
 function auto_share(key) {
-	var share = $(".flux.current.active").find('.dropdown-target[id^="dropdown-share"]');
-	var shares = share.siblings('.dropdown-menu').find('.item a');
-	if (typeof key === "undefined") {
-		if (!share.length) {
-			return;
-		}
+	const share = document.querySelector('.flux.current.active .dropdown-target[id^="dropdown-share"]');
+	if (!share) {
+		return;
+	}
+	const shares = share.parentElement.querySelectorAll('.dropdown-menu .item a');
+	if (typeof key === 'undefined') {
 		// Display the share div
-		window.location.hash = share.attr('id');
+		location.hash = share.id;
 		// Force scrolling to the share div
-		var scroll = needsScroll(share.closest('.bottom'));
-		if (scroll !== 0) {
-			$('html,body').scrollTop(scroll);
+		const scrollTop = needsScroll(share.closest('.bottom'));
+		if (scrollTop !== 0) {
+			document.documentElement.scrollTop = scrollTop;
 		}
 		// Force the key value if there is only one action, so we can trigger it automatically
 		if (shares.length === 1) {
@@ -478,52 +498,70 @@ function auto_share(key) {
 	key = parseInt(key);
 	if (key <= shares.length) {
 		shares[key - 1].click();
-		share.siblings('.dropdown-menu').find('.dropdown-close a')[0].click();
+		share.parentElement.querySelector('.dropdown-menu .dropdown-close a').click();
 	}
 }
 
-function scrollAsRead(box_to_follow) {
-	var minTop = 40 + (context.current_view === 'global' ? box_to_follow.offset().top : box_to_follow.scrollTop());
-	$('.not_read:not(.keep_unread):visible').each(function () {
-			var $this = $(this);
-			if ($this.offset().top + $this.height() < minTop) {
-				mark_read($this, true);
-			}
-		});
+var box_to_follow;
+
+function onScroll() {
+	if (!box_to_follow) {
+		return;
+	}
+	if (context.auto_mark_scroll) {
+		const minTop = 40 + box_to_follow.scrollTop;
+		document.querySelectorAll('.not_read:not(.keep_unread)').forEach(function (div) {
+				if (div.offsetHeight > 0 &&
+					div.offsetParent.offsetTop + div.offsetTop + div.offsetHeight < minTop) {
+					mark_read(div, true);
+				}
+			});
+	}
+	if (context.auto_remove_article) {
+		let maxTop = box_to_follow.scrollTop,
+			scrollOffset = 0;
+		document.querySelectorAll('.flux:not(.active):not(.keep_unread)').forEach(function (div) {
+				if (!pending_entries[div.id] && div.offsetHeight > 0 &&
+					div.offsetParent.offsetTop + div.offsetTop + div.offsetHeight < maxTop) {
+					const p = div.previousElementSibling,
+						n = div.nextElementSibling;
+					if (p && p.classList.contains('day') && n && n.classList.contains('day')) {
+						p.remove();
+					}
+					maxTop -= div.offsetHeight;
+					scrollOffset -= div.offsetHeight;
+					div.remove();
+				}
+			});
+		if (scrollOffset != 0) {
+			box_to_follow.scrollTop += scrollOffset;
+			return;	//onscroll will be called again
+		}
+	}
+	if (context.auto_load_more) {
+		const load_more = document.getElementById('mark-read-pagination');
+		if (load_more && box_to_follow.scrollTop > 0 &&
+			box_to_follow.scrollTop + box_to_follow.offsetHeight >= load_more.offsetTop) {
+			load_more_posts();
+		}
+	}
 }
 
 function init_posts() {
-	var box_to_follow = context.current_view === 'global' ? $("#panel") : $(window);
-
-	if (context.auto_mark_scroll) {
-		var lastScroll = 0,	//Throttle
+	if (context.auto_load_more || context.auto_mark_scroll || context.auto_remove_article) {
+		box_to_follow = context.current_view === 'global' ? document.getElementById('panel') : document.documentElement;
+		let lastScroll = 0,	//Throttle
 			timerId = 0;
-		box_to_follow.scroll(function () {
-			window.clearTimeout(timerId);
+		(box_to_follow === document.documentElement ? window : box_to_follow).onscroll = function () {
+			clearTimeout(timerId);
 			if (lastScroll + 500 < Date.now()) {
 				lastScroll = Date.now();
-				scrollAsRead(box_to_follow);
+				onScroll();
 			} else {
-				timerId = window.setTimeout(function() {
-						scrollAsRead(box_to_follow);
-					}, 500);
-			}
-		});
-	}
-
-	if (context.auto_load_more) {
-		box_to_follow.scroll(function () {
-			var load_more = $("#load_more");
-			if (!load_more.is(':visible')) {
-				return;
+				timerId = setTimeout(onScroll, 500);
 			}
-			var boxBot = box_to_follow.scrollTop() + box_to_follow.height(),
-				load_more_top = load_more.offset().top;
-			if (boxBot >= load_more_top) {
-				load_more_posts();
-			}
-		});
-		box_to_follow.scroll();
+		};
+		onScroll();
 	}
 }
 
@@ -533,7 +571,7 @@ function init_column_categories() {
 	}
 
 	$('#aside_feed').on('click', '.tree-folder>.tree-folder-title>a.dropdown-toggle', function () {
-		$(this).children().each(function() {
+		$(this).children().each(function () {
 			if (this.alt === '▽') {
 				this.src = this.src.replace('/icons/down.', '/icons/up.');
 				this.alt = '△';
@@ -542,9 +580,9 @@ function init_column_categories() {
 				this.alt = '▽';
 			}
 		});
-		$(this).parent().next(".tree-folder-items").slideToggle(300, function () {
+		$(this).parent().next('.tree-folder-items').slideToggle(300, function () {
 			//Workaround for Gecko bug in Firefox 64-65(+?):
-			var sidebar = document.getElementById('sidebar');
+			const sidebar = document.getElementById('sidebar');
 			if (sidebar && sidebar.scrollHeight > sidebar.clientHeight &&	//if needs scrollbar
 				sidebar.scrollWidth >= sidebar.offsetWidth) {	//but no scrollbar
 				sidebar.style['overflow-y'] = 'scroll';	//then force scrollbar
@@ -555,7 +593,7 @@ function init_column_categories() {
 	});
 
 	$('#aside_feed').on('click', '.tree-folder-items .feed .dropdown-toggle', function () {
-		var itemId = $(this).closest('.item').attr('id'),
+		const itemId = $(this).closest('.item').attr('id'),
 			templateId = itemId.substring(0, 2) === 't_' ? 'tag_config_template' : 'feed_config_template',
 			id = itemId.substr(2),
 			feed_web = $(this).data('fweb'),
@@ -566,41 +604,39 @@ function init_column_categories() {
 				.append(template).find('button.confirm').removeAttr('disabled');
 		} else {
 			if ($(this).next('.dropdown-menu').css('display') === 'none') {
-				id = $(this).closest('.item').attr('id').substr(2);
-				$(this).attr('href', '#dropdown-' + id);
+				const id2 = $(this).closest('.item').attr('id').substr(2);
+				$(this).attr('href', '#dropdown-' + id2);
 			} else {
-				$(this).attr('href', "#close");
+				$(this).attr('href', '#close');
 			}
 		}
 	});
 }
 
 function init_shortcuts() {
-	if (!(window.shortcut && window.shortcuts)) {
+	if (!(window.shortcut)) {
 		if (window.console) {
 			console.log('FreshRSS waiting for shortcut.js…');
 		}
-		window.setTimeout(init_shortcuts, 200);
+		setTimeout(init_shortcuts, 200);
 		return;
 	}
 	// Manipulation shortcuts
 	shortcut.add(shortcuts.mark_read, function () {
 		// Toggle the read state
-		var active = $(".flux.current");
-		mark_read(active, false);
+		mark_read(document.querySelector('.flux.current'), false);
 	}, {
 		'disable_in_input': true
 	});
-	shortcut.add("shift+" + shortcuts.mark_read, function () {
+	shortcut.add('shift+' + shortcuts.mark_read, function () {
 		// Mark everything as read
-		$(".nav_menu .read_all").click();
+		$('.nav_menu .read_all').click();
 	}, {
 		'disable_in_input': true
 	});
 	shortcut.add(shortcuts.mark_favorite, function () {
 		// Toggle the favorite state
-		var active = $(".flux.current");
-		mark_favorite(active);
+		mark_favorite(document.querySelector('.flux.current'));
 	}, {
 		'disable_in_input': true
 	});
@@ -631,78 +667,78 @@ function init_shortcuts() {
 			auto_share(String.fromCharCode(evt.keyCode));
 		}
 	}
-	for (var i = 1; i < 10; i++) {
+	for (let i = 1; i < 10; i++) {
 		shortcut.add(i.toString(), addShortcut, {
 			'disable_in_input': true
 		});
 	}
 
 	// Entry navigation shortcuts
-	shortcut.add(shortcuts.prev_entry, prev_entry, {
+	shortcut.add(shortcuts.prev_entry, function () { prev_entry(false); }, {
 		'disable_in_input': true
 	});
-	shortcut.add(shortcuts.skip_prev_entry, skip_prev_entry, {
+	shortcut.add(shortcuts.skip_prev_entry,  function () { prev_entry(true); }, {
 		'disable_in_input': true
 	});
 	shortcut.add(shortcuts.first_entry, function () {
-		var old_active = $(".flux.current"),
-			first = $(".flux:first");
+		const $old_active = $('.flux.current'),
+			$first = $('.flux:first');
 
-		if (first.hasClass("flux")) {
-			toggleContent(first, old_active, false);
+		if ($first.hasClass('flux')) {
+			toggleContent($first, $old_active, false);
 		}
 	}, {
 		'disable_in_input': true
 	});
-	shortcut.add(shortcuts.next_entry, next_entry, {
+	shortcut.add(shortcuts.next_entry, function () { next_entry(false); }, {
 		'disable_in_input': true
 	});
-	shortcut.add(shortcuts.skip_next_entry, skip_next_entry, {
+	shortcut.add(shortcuts.skip_next_entry, function () { next_entry(true); }, {
 		'disable_in_input': true
 	});
 	shortcut.add(shortcuts.last_entry, function () {
-		var old_active = $(".flux.current"),
-			last = $(".flux:last");
+		const $old_active = $('.flux.current'),
+			$last = $('.flux:last');
 
-		if (last.hasClass("flux")) {
-			toggleContent(last, old_active, false);
+		if ($last.hasClass('flux')) {
+			toggleContent($last, $old_active, false);
 		}
 	}, {
 		'disable_in_input': true
 	});
 	// Feed navigation shortcuts
-	shortcut.add("shift+" + shortcuts.prev_entry, prev_feed, {
+	shortcut.add('shift+' + shortcuts.prev_entry, prev_feed, {
 		'disable_in_input': true
 	});
-	shortcut.add("shift+" + shortcuts.next_entry, next_feed, {
+	shortcut.add('shift+' + shortcuts.next_entry, next_feed, {
 		'disable_in_input': true
 	});
-	shortcut.add("shift+" + shortcuts.first_entry, first_feed, {
+	shortcut.add('shift+' + shortcuts.first_entry, first_feed, {
 		'disable_in_input': true
 	});
-	shortcut.add("shift+" + shortcuts.last_entry, last_feed, {
+	shortcut.add('shift+' + shortcuts.last_entry, last_feed, {
 		'disable_in_input': true
 	});
 	// Category navigation shortcuts
-	shortcut.add("alt+" + shortcuts.prev_entry, prev_category, {
+	shortcut.add('alt+' + shortcuts.prev_entry, prev_category, {
 		'disable_in_input': true
 	});
-	shortcut.add("alt+" + shortcuts.next_entry, next_category, {
+	shortcut.add('alt+' + shortcuts.next_entry, next_category, {
 		'disable_in_input': true
 	});
-	shortcut.add("alt+" + shortcuts.first_entry, first_category, {
+	shortcut.add('alt+' + shortcuts.first_entry, first_category, {
 		'disable_in_input': true
 	});
-	shortcut.add("alt+" + shortcuts.last_entry, last_category, {
+	shortcut.add('alt+' + shortcuts.last_entry, last_category, {
 		'disable_in_input': true
 	});
 
 	shortcut.add(shortcuts.go_website, function () {
-		var url_website = $('.flux.current a.go_website').attr("href");
+		const url_website = $('.flux.current a.go_website').attr('href');
 
 		if (context.auto_mark_site) {
-			$(".flux.current").each(function () {
-				mark_read($(this), true);
+			$('.flux.current').each(function () {
+				mark_read(this, true);
 			});
 		}
 
@@ -711,26 +747,22 @@ function init_shortcuts() {
 		'disable_in_input': true
 	});
 
-	shortcut.add(shortcuts.load_more, function () {
-		load_more_posts();
-	}, {
+	shortcut.add(shortcuts.load_more, load_more_posts, {
 		'disable_in_input': true
 	});
 
-	shortcut.add(shortcuts.focus_search, function () {
-		focus_search();
-	}, {
+	shortcut.add(shortcuts.focus_search, focus_search, {
 		'disable_in_input': true
 	});
 
 	shortcut.add(shortcuts.help, function () {
-		redirect(url.help, true);
+		redirect(urls.help, true);
 	}, {
 		'disable_in_input': true
 	});
 
 	shortcut.add(shortcuts.close_dropdown, function () {
-		window.location.hash = null;
+		location.hash = null;
 	}, {
 		'disable_in_input': true
 	});
@@ -769,9 +801,8 @@ function init_stream(divStream) {
 			// setting for not-closing after clicking outside article area
 			return;
 		}
-		var old_active = $(".flux.current"),
-			new_active = $(this).parent();
-		isCollapsed = true;
+		const old_active = document.querySelector('.flux.current'),
+			new_active = this.parentNode;
 		if (e.target.tagName.toUpperCase() === 'A') {	//Leave real links alone
 			if (context.auto_mark_article) {
 				mark_read(new_active, true);
@@ -782,17 +813,12 @@ function init_stream(divStream) {
 	});
 
 	divStream.on('click', '.flux a.read', function () {
-		var active = $(this).parents(".flux");
-		if (context.auto_remove_article && active.hasClass('not_read')) {
-			auto_remove(active);
-		}
-		mark_read(active, false);
+		mark_read(this.closest('.flux'), false);
 		return false;
 	});
 
 	divStream.on('click', '.flux a.bookmark', function () {
-		var active = $(this).parents(".flux");
-		mark_favorite(active);
+		mark_favorite(this.closest('.flux'));
 		return false;
 	});
 
@@ -809,10 +835,10 @@ function init_stream(divStream) {
 
 		if (e.which == 2) {
 			// If middle click, we want same behaviour as CTRL+click.
-			var ev = jQuery.Event("click");
+			const ev = jQuery.Event('click');
 			ev.ctrlKey = true;
 			$(this).trigger(ev);
-		} else if(e.which == 1) {
+		} else if (e.which == 1) {
 			// Normal click, just toggle article.
 			$(this).parent().click();
 		}
@@ -832,32 +858,30 @@ function init_stream(divStream) {
 				return;
 			}
 
-			mark_read($(this).parents(".flux"), true);
+			mark_read(this.closest('.flux'), true);
 		});
 	}
 }
 
-var $nav_entries = null;
-
 function init_nav_entries() {
 	$nav_entries = $('#nav_entries');
 	$nav_entries.find('.previous_entry').click(function () {
-		prev_entry();
+		prev_entry(false);
 		return false;
 	});
 	$nav_entries.find('.next_entry').click(function () {
-		next_entry();
+		next_entry(false);
 		return false;
 	});
 	$nav_entries.find('.up').click(function () {
-		var active_item = $(".flux.current"),
+		const $active_item = $('.flux.current'),
 			windowTop = $(window).scrollTop(),
-			item_top = active_item.offset().top;
+			item_top = $active_item.offset().top;
 
 		if (windowTop > item_top) {
-			$("html,body").scrollTop(item_top);
+			$('html,body').scrollTop(item_top);
 		} else {
-			$("html,body").scrollTop(0);
+			$('html,body').scrollTop(0);
 		}
 		return false;
 	});
@@ -866,14 +890,14 @@ function init_nav_entries() {
 function loadDynamicTags($div) {
 	$div.removeClass('dynamictags');
 	$div.find('li.item').remove();
-	var entryId = $div.closest('div.flux').attr('id').replace(/^flux_/, '');
+	const entryId = $div.closest('div.flux').attr('id').replace(/^flux_/, '');
 	$.getJSON('./?c=tag&a=getTagsForEntry&id_entry=' + entryId)
 		.done(function (data) {
-			var $ul = $div.find('.dropdown-menu');
+			const $ul = $div.find('.dropdown-menu');
 			$ul.append('<li class="item"><label><input class="checkboxTag" name="t_0" type="checkbox" /> <input type="text" name="newTag" /></label></li>');
 			if (data && data.length) {
-				for (var i = 0; i < data.length; i++) {
-					var tag = data[i];
+				for (let i = 0; i < data.length; i++) {
+					const tag = data[i];
 					$ul.append('<li class="item"><label><input class="checkboxTag" name="t_' + tag.id + '" type="checkbox"' +
 						(tag.checked ? ' checked="checked"' : '') + '> ' + tag.name + '</label></li>');
 				}
@@ -891,13 +915,13 @@ function init_dynamic_tags() {
 	});
 
 	$stream.on('change', '.checkboxTag', function (ev) {
-		var $checkbox = $(this);
+		const $checkbox = $(this),
+			isChecked = $checkbox.prop('checked'),
+			tagId = $checkbox.attr('name').replace(/^t_/, ''),
+			tagName = $checkbox.siblings('input[name]').val(),
+			$entry = $checkbox.closest('div.flux'),
+			entryId = $entry.attr('id').replace(/^flux_/, '');
 		$checkbox.prop('disabled', true);
-		var isChecked = $checkbox.prop('checked');
-		var tagId = $checkbox.attr('name').replace(/^t_/, '');
-		var tagName = $checkbox.siblings('input[name]').val();
-		var $entry = $checkbox.closest('div.flux');
-		var entryId = $entry.attr('id').replace(/^flux_/, '');
 		$.ajax({
 				type: 'POST',
 				url: './?c=tag&a=tagEntry',
@@ -911,7 +935,7 @@ function init_dynamic_tags() {
 			})
 			.done(function () {
 				if ($entry.hasClass('not_read')) {
-					incUnreadsTag(tagId, isChecked ? 1 : -1);
+					incUnreadsTag('t_' + tagId, isChecked ? 1 : -1);
 				}
 			})
 			.fail(function () {
@@ -930,7 +954,7 @@ function init_dynamic_tags() {
 var feed_processed = 0;
 
 function updateFeed(feeds, feeds_count) {
-	var feed = feeds.pop();
+	const feed = feeds.pop();
 	if (!feed) {
 		return;
 	}
@@ -943,8 +967,8 @@ function updateFeed(feeds, feeds_count) {
 		},
 	}).always(function (data) {
 		feed_processed++;
-		$("#actualizeProgress .progress").html(feed_processed + " / " + feeds_count);
-		$("#actualizeProgress .title").html(feed.title);
+		$('#actualizeProgress .progress').html(feed_processed + ' / ' + feeds_count);
+		$('#actualizeProgress .title').html(feed.title);
 
 		if (feed_processed === feeds_count) {
 			$.ajax({	//Empty request to commit new articles
@@ -955,7 +979,7 @@ function updateFeed(feeds, feeds_count) {
 						noCommit: 0,
 					},
 				}).always(function (data) {
-					window.location.reload();
+					location.reload();
 				});
 		} else {
 			updateFeed(feeds, feeds_count);
@@ -964,9 +988,9 @@ function updateFeed(feeds, feeds_count) {
 }
 
 function init_actualize() {
-	var auto = false;
+	let auto = false;
 
-	$("#actualize").click(function () {
+	$('#actualize').click(function () {
 		if (ajax_loading) {
 			return false;
 		}
@@ -979,7 +1003,7 @@ function init_actualize() {
 				return false;
 			}
 			if (data.feeds.length === 0) {
-				openNotification(data.feedback_no_refresh, "good");
+				openNotification(data.feedback_no_refresh, 'good');
 				$.ajax({	//Empty request to force refresh server database cache
 					type: 'POST',
 					url: './?c=feed&a=actualize&id=-1&ajax=1',
@@ -993,11 +1017,11 @@ function init_actualize() {
 				return;
 			}
 			//Progress bar
-			var feeds_count = data.feeds.length;
+			const feeds_count = data.feeds.length;
 			$('body').after('<div id="actualizeProgress" class="notification good">' + data.feedback_actualize +
 				'<br /><span class="title">/</span><br /><span class="progress">0 / ' + feeds_count +
 				'</span></div>');
-			for (var i = 10; i > 0; i--) {
+			for (let i = 10; i > 0; i--) {
 				updateFeed(data.feeds, feeds_count);
 			}
 		});
@@ -1007,13 +1031,13 @@ function init_actualize() {
 
 	if (context.auto_actualize_feeds) {
 		auto = true;
-		$("#actualize").click();
+		$('#actualize').click();
 	}
 }
 // </actualize>
 
 // <notification>
-var notification = null,
+var $notification = null,
 	notification_interval = null,
 	notification_working = false;
 
@@ -1024,36 +1048,36 @@ function openNotification(msg, status) {
 
 	notification_working = true;
 
-	notification.removeClass();
-	notification.addClass("notification");
-	notification.addClass(status);
-	notification.find(".msg").html(msg);
-	notification.fadeIn(300);
+	$notification.removeClass();
+	$notification.addClass('notification');
+	$notification.addClass(status);
+	$notification.find('.msg').html(msg);
+	$notification.fadeIn(300);
 
-	notification_interval = window.setTimeout(closeNotification, 4000);
+	notification_interval = setTimeout(closeNotification, 4000);
 }
 
 function closeNotification() {
-	notification.fadeOut(600, function() {
-		notification.removeClass();
-		notification.addClass('closed');
+	$notification.fadeOut(600, function () {
+		$notification.removeClass();
+		$notification.addClass('closed');
 
-		window.clearInterval(notification_interval);
+		clearInterval(notification_interval);
 		notification_working = false;
 	});
 }
 
 function init_notifications() {
-	notification = $("#notification");
+	$notification = $('#notification');
 
-	notification.find("a.close").click(function () {
+	$notification.find('a.close').click(function () {
 		closeNotification();
 		return false;
 	});
 
-	if (notification.find(".msg").html().length > 0) {
+	if ($notification.find('.msg').html().length > 0) {
 		notification_working = true;
-		notification_interval = window.setTimeout(closeNotification, 4000);
+		notification_interval = setTimeout(closeNotification, 4000);
 	}
 }
 // </notification>
@@ -1072,24 +1096,24 @@ function notifs_html5_ask_permission() {
 }
 
 function notifs_html5_show(nb) {
-	if (notifs_html5_permission !== "granted") {
+	if (notifs_html5_permission !== 'granted') {
 		return;
 	}
 
-	var notification = new window.Notification(i18n.notif_title_articles, {
-		icon: "../themes/icons/favicon-256.png",
+	const notification = new window.Notification(i18n.notif_title_articles, {
+		icon: '../themes/icons/favicon-256.png',
 		body: i18n.notif_body_articles.replace('%d', nb),
-		tag: "freshRssNewArticles"
+		tag: 'freshRssNewArticles',
 	});
 
-	notification.onclick = function() {
-		window.location.reload();
+	notification.onclick = function () {
+		location.reload();
 		window.focus();
 		notification.close();
 	};
 
 	if (context.html5_notif_timeout !== 0) {
-		setTimeout(function() {
+		setTimeout(function () {
 			notification.close();
 		}, context.html5_notif_timeout * 1000);
 	}
@@ -1106,12 +1130,12 @@ function init_notifs_html5() {
 
 function refreshUnreads() {
 	$.getJSON('./?c=javascript&a=nbUnreadsPerFeed').done(function (data) {
-		var isAll = $('.category.all.active').length > 0,
-			new_articles = false;
+		const isAll = document.querySelector('.category.all.active');
+		let new_articles = false;
 
-		$.each(data.feeds, function(feed_id, nbUnreads) {
+		$.each(data.feeds, function (feed_id, nbUnreads) {
 			feed_id = 'f_' + feed_id;
-			var elem = $('#' + feed_id).get(0),
+			const elem = document.getElementById(feed_id),
 				feed_unreads = elem ? str2int(elem.getAttribute('data-unread')) : 0;
 
 			if ((incUnreadsFeed(null, feed_id, nbUnreads - feed_unreads) || isAll) &&	//Update of current view?
@@ -1121,9 +1145,9 @@ function refreshUnreads() {
 			}
 		});
 
-		var nbUnreadTags = 0;
+		let nbUnreadTags = 0;
 
-		$.each(data.tags, function(tag_id, nbUnreads) {
+		$.each(data.tags, function (tag_id, nbUnreads) {
 			nbUnreadTags += nbUnreads;
 			$('#t_' + tag_id).attr('data-unread', nbUnreads)
 				.children('.item-title').attr('data-unread', numberFormat(nbUnreads));
@@ -1132,7 +1156,7 @@ function refreshUnreads() {
 		$('.category.tags').attr('data-unread', nbUnreadTags)
 			.find('.title').attr('data-unread', numberFormat(nbUnreadTags));
 
-		var nb_unreads = str2int($('.category.all .title').attr('data-unread'));
+		const nb_unreads = str2int($('.category.all .title').attr('data-unread'));
 
 		if (nb_unreads > 0 && new_articles) {
 			faviconNbUnread(nb_unreads);
@@ -1142,7 +1166,7 @@ function refreshUnreads() {
 }
 
 //<endless_mode>
-var url_load_more = "",
+var url_load_more = '',
 	load_more = false,
 	box_load_more = null;
 
@@ -1152,7 +1176,7 @@ function load_more_posts() {
 	}
 
 	load_more = true;
-	$('#load_more').addClass('loading');
+	document.getElementById('load_more').classList.add('loading');
 	$.get(url_load_more, function (data) {
 		box_load_more.children('.flux:last').after($('#stream', data).children('.flux, .day'));
 		$('.pagination').replaceWith($('.pagination', data));
@@ -1167,7 +1191,7 @@ function load_more_posts() {
 		}
 
 		$('[id^=day_]').each(function (i) {
-			var ids = $('[id="' + this.id + '"]');
+			const ids = $('[id="' + this.id + '"]');
 			if (ids.length > 1) {
 				$('[id="' + this.id + '"]:gt(0)').remove();
 			}
@@ -1175,8 +1199,15 @@ function load_more_posts() {
 
 		init_load_more(box_load_more);
 
-		$('#load_more').removeClass('loading');
-		$('#bigMarkAsRead').removeAttr('disabled');
+		const bigMarkAsRead = document.getElementById('bigMarkAsRead'),
+			div_load_more = document.getElementById('load_more');
+		if (bigMarkAsRead) {
+			bigMarkAsRead.removeAttribute('disabled');
+		}
+		if (div_load_more) {
+			div_load_more.classList.remove('loading');
+		}
+
 		load_more = false;
 	});
 }
@@ -1192,14 +1223,14 @@ function init_load_more(box) {
 	box_load_more = box;
 	document.body.dispatchEvent(freshrssLoadMoreEvent);
 
-	var $next_link = $("#load_more");
+	const $next_link = $('#load_more');
 	if (!$next_link.length) {
 		// no more article to load
-		url_load_more = "";
+		url_load_more = '';
 		return;
 	}
 
-	url_load_more = $next_link.attr("href");
+	url_load_more = $next_link.attr('href');
 
 	$next_link.click(function () {
 		load_more_posts();
@@ -1210,9 +1241,9 @@ function init_load_more(box) {
 
 //<crypto form (Web login)>
 function poormanSalt() {	//If crypto.getRandomValues is not available
-	var text = '$2a$04$',
-		base = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ.0123456789/abcdefghijklmnopqrstuvwxyz';
-	for (var i = 22; i > 0; i--) {
+	const base = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ.0123456789/abcdefghijklmnopqrstuvwxyz';
+	let text = '$2a$04$';
+	for (let i = 22; i > 0; i--) {
 		text += base.charAt(Math.floor(Math.random() * 64));
 	}
 	return text;
@@ -1220,7 +1251,7 @@ function poormanSalt() {	//If crypto.getRandomValues is not available
 
 function init_crypto_form() {
 	/* globals dcodeIO */
-	var $crypto_form = $('#crypto-form');
+	const $crypto_form = $('#crypto-form');
 	if ($crypto_form.length === 0) {
 		return;
 	}
@@ -1229,15 +1260,15 @@ function init_crypto_form() {
 		if (window.console) {
 			console.log('FreshRSS waiting for bcrypt.js…');
 		}
-		window.setTimeout(init_crypto_form, 100);
+		setTimeout(init_crypto_form, 100);
 		return;
 	}
 
-	$crypto_form.on('submit', function() {
-		var $submit_button = $(this).find('button[type="submit"]');
+	$crypto_form.on('submit', function () {
+		const $submit_button = $(this).find('button[type="submit"]');
 		$submit_button.attr('disabled', '');
 
-		var success = false;
+		let success = false;
 		$.ajax({
 			url: './?c=javascript&a=nonce&user=' + $('#username').val(),
 			dataType: 'json',
@@ -1247,7 +1278,7 @@ function init_crypto_form() {
 				openNotification('Invalid user!', 'bad');
 			} else {
 				try {
-					var strong = window.Uint32Array && window.crypto && (typeof window.crypto.getRandomValues === 'function'),
+					const strong = window.Uint32Array && window.crypto && (typeof window.crypto.getRandomValues === 'function'),
 						s = dcodeIO.bcrypt.hashSync($('#passwordPlain').val(), data.salt1),
 						c = dcodeIO.bcrypt.hashSync(data.nonce + s, strong ? dcodeIO.bcrypt.genSaltSync(4) : poormanSalt());
 					$('#challenge').val(c);
@@ -1260,7 +1291,7 @@ function init_crypto_form() {
 					openNotification('Crypto exception! ' + e, 'bad');
 				}
 			}
-		}).fail(function() {
+		}).fail(function () {
 			openNotification('Communication error!', 'bad');
 		});
 
@@ -1272,7 +1303,7 @@ function init_crypto_form() {
 
 function init_confirm_action() {
 	$('body').on('click', '.confirm', function () {
-		var str_confirmation = $(this).attr('data-str-confirm');
+		let str_confirmation = $(this).attr('data-str-confirm');
 		if (!str_confirmation) {
 			str_confirmation = i18n.confirmation_default;
 		}
@@ -1284,15 +1315,15 @@ function init_confirm_action() {
 
 function init_print_action() {
 	$('.item.share > a[href="#"]').click(function (e) {
-		var content = "<html><head><style>" +
-			"body { font-family: Serif; text-align: justify; }" +
-			"a { color: #000; text-decoration: none; }" +
-			"a:after { content: ' [' attr(href) ']'}" +
-			"</style></head><body>" +
+		const content = '<html><head><style>' +
+			'body { font-family: Serif; text-align: justify; }' +
+			'a { color: #000; text-decoration: none; }' +
+			'a:after { content: " [" attr(href) "]"}' +
+			'</style></head><body>' +
 			$(e.target).closest('.flux_content').find('.content').html() +
-			"</body></html>";
+			'</body></html>';
 
-		var tmp_window = window.open();
+		const tmp_window = window.open();
 		tmp_window.document.writeln(content);
 		tmp_window.document.close();
 		tmp_window.focus();
@@ -1304,25 +1335,27 @@ function init_print_action() {
 }
 
 function init_post_action() {
-	$('.item.share > a[href="POST"]').click(function (event) {
-		event.preventDefault();
-		var form = $(this).next('form');
-		$.post(form.data('url'), form.serialize());
+	$('.item.share > a[href="POST"]').click(function (e) {
+		e.preventDefault();
+		const $form = $(this).next('form');
+		$.post($form.data('url'), $form.serialize());
 	});
 }
 
+var shares = 0;
+
 function init_share_observers() {
 	shares = $('.group-share').length;
 
-	$('.share.add').on('click', function(e) {
-		var opt = $(this).siblings('select').find(':selected');
-		var row = $(this).parents('form').data(opt.data('form'));
-		row = row.replace(/##label##/g, opt.html().trim());
-		row = row.replace(/##type##/g, opt.val());
-		row = row.replace(/##help##/g, opt.data('help'));
+	$('.share.add').on('click', function (e) {
+		const $opt = $(this).siblings('select').find(':selected');
+		let row = $(this).parents('form').data($opt.data('form'));
+		row = row.replace(/##label##/g, $opt.html().trim());
+		row = row.replace(/##type##/g, $opt.val());
+		row = row.replace(/##help##/g, $opt.data('help'));
 		row = row.replace(/##key##/g, shares);
-		row = row.replace(/##method##/g, opt.data('method'));
-		row = row.replace(/##field##/g, opt.data('field'));
+		row = row.replace(/##method##/g, $opt.data('method'));
+		row = row.replace(/##field##/g, $opt.data('field'));
 		$(this).parents('.form-group').before(row);
 		shares++;
 
@@ -1331,50 +1364,45 @@ function init_share_observers() {
 }
 
 function init_stats_observers() {
-	$('.select-change').on('change', function(e) {
+	$('.select-change').on('change', function (e) {
 		redirect($(this).find(':selected').data('url'));
 	});
 }
 
 function init_remove_observers() {
-	$('.post').on('click', 'a.remove', function(e) {
-		var remove_what = $(this).attr('data-remove');
-
+	$('.post').on('click', 'a.remove', function (e) {
+		const remove_what = $(this).attr('data-remove');
 		if (remove_what !== undefined) {
-			var remove_obj = $('#' + remove_what);
-			remove_obj.remove();
+			$('#' + remove_what).remove();
 		}
-
 		return false;
 	});
 }
 
 function init_feed_observers() {
-	$('select[id="category"]').on('change', function() {
-		var detail = $('#new_category_name').parent();
+	$('select[id="category"]').on('change', function () {
+		const $detail = $('#new_category_name').parent();
 		if ($(this).val() === 'nc') {
-			detail.attr('aria-hidden', 'false').show();
-			detail.find('input').focus();
+			$detail.attr('aria-hidden', 'false').show();
+			$detail.find('input').focus();
 		} else {
-			detail.attr('aria-hidden', 'true').hide();
+			$detail.attr('aria-hidden', 'true').hide();
 		}
 	});
 }
 
 function init_password_observers() {
-	$('.toggle-password').on('mousedown', function(e) {
-		var button = $(this);
-		var passwordField = $('#' + button.attr('data-toggle'));
-		passwordField.attr('type', 'text');
-		button.addClass('active');
-
+	$('.toggle-password').on('mousedown', function (e) {
+		const $button = $(this),
+			$passwordField = $('#' + $button.attr('data-toggle'));
+		$passwordField.attr('type', 'text');
+		$button.addClass('active');
 		return false;
-	}).on('mouseup', function(e) {
-		var button = $(this);
-		var passwordField = $('#' + button.attr('data-toggle'));
-		passwordField.attr('type', 'password');
-		button.removeClass('active');
-
+	}).on('mouseup', function (e) {
+		const $button = $(this),
+			$passwordField = $('#' + $button.attr('data-toggle'));
+		$passwordField.attr('type', 'password');
+		$button.removeClass('active');
 		return false;
 	});
 }
@@ -1384,16 +1412,16 @@ function faviconNbUnread(n) {
 		n = str2int($('.category.all .title').attr('data-unread'));
 	}
 	//http://remysharp.com/2010/08/24/dynamic-favicons/
-	var canvas = document.createElement('canvas'),
+	const canvas = document.createElement('canvas'),
 		link = document.getElementById('favicon').cloneNode(true);
 	if (canvas.getContext && link) {
 		canvas.height = canvas.width = 16;
-		var img = document.createElement('img');
+		const img = document.createElement('img');
 		img.onload = function () {
-			var ctx = canvas.getContext('2d');
+			const ctx = canvas.getContext('2d');
 			ctx.drawImage(this, 0, 0, canvas.width, canvas.height);
 			if (n > 0) {
-				var text = '';
+				let text = '';
 				if (n < 1000) {
 					text = n;
 				} else if (n < 100000) {
@@ -1416,63 +1444,59 @@ function faviconNbUnread(n) {
 }
 
 function init_slider_observers() {
-	var slider = $('#slider'),
-		closer = $('#close-slider');
-	if (slider.length < 1) {
+	const $slider = $('#slider'),
+		$closer = $('#close-slider');
+	if ($slider.length < 1) {
 		return;
 	}
 
-	$('.post').on('click', '.open-slider', function() {
+	$('.post').on('click', '.open-slider', function () {
 		if (ajax_loading) {
 			return false;
 		}
 
 		ajax_loading = true;
-		var url_slide = $(this).attr('href');
 
 		$.ajax({
 			type: 'GET',
-			url: url_slide,
+			url: $(this).attr('href'),
 			data: { ajax: true }
 		}).done(function (data) {
-			slider.html(data);
-			closer.addClass('active');
-			slider.addClass('active');
+			$slider.html(data);
+			$closer.addClass('active');
+			$slider.addClass('active');
 			ajax_loading = false;
 		});
 
 		return false;
 	});
 
-	closer.on('click', function() {
-		closer.removeClass('active');
-		slider.removeClass('active');
+	$closer.on('click', function () {
+		$closer.removeClass('active');
+		$slider.removeClass('active');
 		return false;
 	});
 }
 
 function init_configuration_alert() {
-	$(window).on('submit', function(e) {
+	$(window).on('submit', function (e) {
 		window.hasSubmit = true;
 	});
-	$(window).on('beforeunload', function(e) {
+	$(window).on('beforeunload', function (e) {
 		if (window.hasSubmit) {
 			return;
 		}
-		var fields = $("[data-leave-validation]");
-		for (var i = 0; i < fields.length; i++) {
-			if ($(fields[i]).attr('type') === 'checkbox' || $(fields[i]).attr('type') === 'radio') {
-				// The use of != is done on purpose to check boolean against integer
-				if ($(fields[i]).is(':checked') != $(fields[i]).attr('data-leave-validation')) {
-					return false;
-				}
-			} else {
-				if ($(fields[i]).attr('data-leave-validation') !== $(fields[i]).val()) {
+		const inputs = document.querySelectorAll('[data-leave-validation]');
+		for (let i = inputs.length - 1; i >= 0; i--) {
+			const input = inputs[i];
+			if (input.type === 'checkbox' || input.type === 'radio') {
+				if (input.checked != input.getAttribute('data-leave-validation')) {
 					return false;
 				}
+			} else if (input.value != input.getAttribute('data-leave-validation')) {
+				return false;
 			}
 		}
-		return;
 	});
 }
 
@@ -1482,24 +1506,13 @@ function init_subscription() {
 	});
 }
 
-function parseJsonVars() {
-	var jsonVars = document.getElementById('jsonVars'),
-		json = JSON.parse(jsonVars.innerHTML);
-	jsonVars.outerHTML = '';
-	window.context = json.context;
-	window.shortcuts = json.shortcuts;
-	window.url = json.url;
-	window.i18n = json.i18n;
-	window.icons = json.icons;
-}
-
 function init_normal() {
 	$stream = $('#stream');
 	if ($stream.length < 1) {
 		if (window.console) {
 			console.log('FreshRSS waiting for content…');
 		}
-		window.setTimeout(init_normal, 100);
+		setTimeout(init_normal, 100);
 		return;
 	}
 	init_column_categories();
@@ -1514,7 +1527,7 @@ function init_beforeDOM() {
 		if (window.console) {
 			console.log('FreshRSS waiting for jQuery…');
 		}
-		window.setTimeout(init_beforeDOM, 100);
+		setTimeout(init_beforeDOM, 100);
 		return;
 	}
 	if (['normal', 'reader', 'global'].indexOf(context.current_view) >= 0) {
@@ -1527,7 +1540,7 @@ function init_afterDOM() {
 		if (window.console) {
 			console.log('FreshRSS waiting again for jQuery…');
 		}
-		window.setTimeout(init_afterDOM, 100);
+		setTimeout(init_afterDOM, 100);
 		return;
 	}
 	init_notifications();
@@ -1541,7 +1554,7 @@ function init_afterDOM() {
 		init_print_action();
 		init_post_action();
 		init_notifs_html5();
-		window.setInterval(refreshUnreads, 120000);
+		setInterval(refreshUnreads, 120000);
 	} else {
 		init_subscription();
 		init_crypto_form();
@@ -1559,7 +1572,6 @@ function init_afterDOM() {
 	}
 }
 
-parseJsonVars();
 init_beforeDOM();	//Can be called before DOM is fully loaded
 
 if (document.readyState && document.readyState !== 'loading') {