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.

2 files changed, 41 insertions, 31 deletions

diff --git a/public/themes/flat-design/freshrss.css b/public/themes/flat-design/freshrss.css
index 60c454bbe..81a5d684b 100644
--- a/public/themes/flat-design/freshrss.css
+++ b/public/themes/flat-design/freshrss.css
@@ -106,6 +106,9 @@ body {
 			width: 195px;
 			position: relative;
 		}
+		.category.stick .btn:first-child {
+			width:160px;
+		}
 		.category .btn:first-child:not([data-unread="0"]):after {
 			content: attr(data-unread);
 			position: absolute;
@@ -117,6 +120,9 @@ body {
 			border-left: 3px solid #2980B9;
 			border-radius: 5px 0 0 5px;
 		}
+		.category + .feeds:not(.active) {
+			display:none;
+		}
 	.categories .feeds {
 		width: 220px;
 		margin: 0 auto;
@@ -393,11 +399,11 @@ body {
 	.content p {
 		margin: 0 0 20px;
 	}
-	.content img.big {
+	img.big {
 		display: block;
 		margin: 10px auto;
 	}
-	.content figure img.big {
+	figure img.big {
 		margin: 0;
 	}
 	.content hr {
@@ -465,6 +471,10 @@ body {
 	text-align: center;
 }
 
+.hide_posts > :not(.active) > .flux_content {
+	display:none;
+}
+
 /*** PAGINATION ***/
 .pagination {
 	display: table;
@@ -507,7 +517,7 @@ body {
 				text-decoration: none;
 			}
 
-.nav_entries {
+#nav_entries {
 	display: table;
 	width: 250px;
 	height: 40px;
@@ -520,14 +530,14 @@ body {
 	line-height: 40px;
 	table-layout: fixed;
 }
-	.nav_entries .item {
+	#nav_entries .item {
 		display: table-cell;
 		width: 30%;
 	}
-		.nav_entries .item a {
+		#nav_entries a {
 			display: block;
 		}
-		.nav_entries .item .icon.i_up {
+		#nav_entries .i_up {
 			margin: 5px 0 0;
 			vertical-align: top;
 		}
@@ -727,7 +737,7 @@ body {
 			margin: 30px 0;
 		}
 
-	.nav_entries {
+	#nav_entries {
 		width: 100%;
 	}
 
diff --git a/public/themes/flat-design/global.css b/public/themes/flat-design/global.css
index 0824d1bb3..ef4b96e82 100644
--- a/public/themes/flat-design/global.css
+++ b/public/themes/flat-design/global.css
@@ -478,99 +478,99 @@ input, select, textarea {
 	line-height: 16px;
 	background: center center no-repeat;
 }
-	.icon.i_refresh {
+	.i_refresh {
 		background-image: url("icons/refresh.png");
 		background-image: url("icons/refresh.svg");
 	}
-	.icon.i_bookmark {
+	.i_bookmark {
 		background-image: url("icons/starred.png");
 		background-image: url("icons/starred.svg");
 	}
-	.icon.i_not_bookmark {
+	.i_not_bookmark {
 		background-image: url("icons/unstarred.png");
 		background-image: url("icons/unstarred.svg");
 	}
-	.icon.i_read {
+	.i_read {
 		background-image: url("icons/read.png");
 		background-image: url("icons/read.svg");
 	}
-	.icon.i_unread {
+	.i_unread {
 		background-image: url("icons/unread.png");
 		background-image: url("icons/unread.svg");
 	}
-	.icon.i_all {
+	.i_all {
 		background-image: url("icons/all.png");
 		background-image: url("icons/all.svg");
 	}
-	.icon.i_close {
+	.i_close {
 		background-image: url("icons/close.png");
 		background-image: url("icons/close.svg");
 	}
-	.icon.i_search {
+	.i_search {
 		background-image: url("icons/search.png");
 		background-image: url("icons/search.svg");
 	}
-	.icon.i_configure {
+	.i_configure {
 		background-image: url("icons/configure.png");
 		background-image: url("icons/configure.svg");
 	}
-	.icon.i_login {
+	.i_login {
 		background-image: url("icons/login.png");
 		background-image: url("icons/login.svg");
 	}
-	.icon.i_logout {
+	.i_logout {
 		background-image: url("icons/logout.png");
 		background-image: url("icons/logout.svg");
 	}
-	.icon.i_add {
+	.i_add {
 		background-image: url("icons/add.png");
 		background-image: url("icons/add.svg");
 	}
-	.icon.i_link {
+	.i_link {
 		background-image: url("icons/link.png");
 		background-image: url("icons/link.svg");
 	}
-	.icon.i_down {
+	.i_down {
 		background-image: url("icons/down.png");
 		background-image: url("icons/down.svg");
 	}
-	.icon.i_up {
+	.i_up {
 		background-image: url("icons/up.png");
 		background-image: url("icons/up.svg");
 	}
-	.icon.i_next {
+	.i_next {
 		background-image: url("icons/next.png");
 		background-image: url("icons/next.svg");
 	}
-	.icon.i_prev {
+	.i_prev {
 		background-image: url("icons/previous.png");
 		background-image: url("icons/previous.svg");
 	}
-	.icon.i_help {
+	.i_help {
 		background-image: url("icons/help.png");
 		background-image: url("icons/help.svg");
 	}
-	.icon.i_note {
+	.i_note {
 		background-image: url("icons/note.png");
 		background-image: url("icons/note.svg");
 	}
-	.icon.i_note_empty {
+	.i_note_empty {
 		background-image: url("icons/note_empty.png");
 		background-image: url("icons/note_empty.svg");
 	}
-	.icon.i_category {
+	.i_category {
 		background-image: url("icons/category.png");
 		background-image: url("icons/category.svg");
 	}
-	.icon.i_rss {
+	.i_rss {
 		background-image: url("icons/rss.png");
 		background-image: url("icons/rss.svg");
 	}
-	.icon.i_share {
+	.i_share {
 		background-image: url("icons/share.png");
 		background-image: url("icons/share.svg");
 	}
-	.icon.i_tag {
+	.i_tag {
 		background-image: url("icons/tag.png");
 		background-image: url("icons/tag.svg");
 	}