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, 56 insertions, 46 deletions

diff --git a/public/themes/default/freshrss.css b/public/themes/default/freshrss.css
index 144c77c92..168417312 100644
--- a/public/themes/default/freshrss.css
+++ b/public/themes/default/freshrss.css
@@ -107,6 +107,9 @@
 			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;
@@ -120,6 +123,9 @@
 			box-shadow: 1px 3px 3px #aaa inset;
 			text-shadow: 0 0 1px #aaa;
 		}
+		.category + .feeds:not(.active) {
+			display:none;
+		}
 	.categories .feeds {
 		width: 100%;
 		margin: 0;
@@ -403,11 +409,11 @@
 	.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 {
@@ -473,6 +479,10 @@
 	text-align: center;
 }
 
+.hide_posts > :not(.active) > .flux_content {
+	display:none;
+}
+
 /*** PAGINATION ***/
 .pagination {
 	display: table;
@@ -493,10 +503,10 @@
 			font-weight: bold;
 			font-size: 140%;
 		}
-		.pagination .item.pager-first,
-		.pagination .item.pager-previous,
-		.pagination .item.pager-next,
-		.pagination .item.pager-last {
+		.pagination .pager-first,
+		.pagination .pager-previous,
+		.pagination .pager-next,
+		.pagination .pager-last {
 			width: 100px;
 		}
 		.pagination .item a {
@@ -511,7 +521,7 @@
 		border-top: 1px solid #aaa;
 	}
 
-.nav_entries {
+#nav_entries {
 	display: table;
 	width: 250px;
 	height: 40px;
@@ -525,14 +535,14 @@
 	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;
 		}
@@ -720,7 +730,7 @@
 			margin: 30px 0;
 		}
 
-	.nav_entries {
+	#nav_entries {
 		width: 100%;
 	}
 
@@ -769,27 +779,27 @@
 		background: -o-linear-gradient(top, #f8f8f8 0%, #f0f0f0 100%);
 		background: -ms-linear-gradient(top, #f8f8f8 0%, #f0f0f0 100%);
 	}
-	.btn.btn-important {
+	.btn-important {
 		background: #0084CC;
 		background: -moz-linear-gradient(top, #0084CC 0%, #0045CC 100%);
 		background: -webkit-linear-gradient(top, #0084CC 0%, #0045CC 100%);
 		background: -o-linear-gradient(top, #0084CC 0%, #0045CC 100%);
 		background: -ms-linear-gradient(top, #0084CC 0%, #0045CC 100%);
 	}
-		.btn.btn-important:hover {
+		.btn-important:hover {
 			background: -moz-linear-gradient(top, #0066CC 0%, #0045CC 100%);
 			background: -webkit-linear-gradient(top, #0066CC 0%, #0045CC 100%);
 			background: -o-linear-gradient(top, #0066CC 0%, #0045CC 100%);
 			background: -ms-linear-gradient(top, #0066CC 0%, #0045CC 100%);
 		}
-	.btn.btn-attention {
+	.btn-attention {
 		background: #E95B57;
 		background: -moz-linear-gradient(top, #E95B57 0%, #BD362F 100%);
 		background: -webkit-linear-gradient(top, #E95B57 0%, #BD362F 100%);
 		background: -o-linear-gradient(top, #E95B57 0%, #BD362F 100%);
 		background: -ms-linear-gradient(top, #E95B57 0%, #BD362F 100%);
 	}
-		.btn.btn-attention:hover {
+		.btn-attention:hover {
 			background: -moz-linear-gradient(top, #D14641 0%, #BD362F 100%);
 			background: -webkit-linear-gradient(top, #D14641 0%, #BD362F 100%);
 			background: -o-linear-gradient(top, #D14641 0%, #BD362F 100%);
diff --git a/public/themes/default/global.css b/public/themes/default/global.css
index 8685b4e92..f6fb1bcf2 100644
--- a/public/themes/default/global.css
+++ b/public/themes/default/global.css
@@ -161,7 +161,7 @@ input, select, textarea {
 	.stick input:first-child {
 		border-radius: 3px 0 0 3px;
 	}
-		.stick .btn.btn-important:first-child {
+		.stick .btn-important:first-child {
 			border-right: 1px solid #06f;
 		}
 	.stick .btn:last-child,
@@ -217,30 +217,30 @@ input, select, textarea {
 		background: #eee;
 	}
 
-	.btn.btn-important {
+	.btn-important {
 		background: linear-gradient(to bottom, #0084CC, #0045CC);
 		color: #fff;
 		border: 1px solid #0062B7;
 		text-shadow: 0px -1px 0 #aaa;
 	}
-		.btn.btn-important:hover {
+		.btn-important:hover {
 			background: linear-gradient(to bottom, #0066CC, #0045CC);
 		}
-		.btn.btn-important:active {
+		.btn-important:active {
 			background: #0044CB;
 			box-shadow: none;
 		}
 
-	.btn.btn-attention {
+	.btn-attention {
 		background: linear-gradient(to bottom, #E95B57, #BD362F);
 		color: #fff;
 		border: 1px solid #C44742;
 		text-shadow: 0px -1px 0px #666;
 	}
-		.btn.btn-attention:hover {
+		.btn-attention:hover {
 			background: linear-gradient(to bottom, #D14641, #BD362F);
 		}
-		.btn.btn-attention:active {
+		.btn-attention:active {
 			background: #BD362F;
 			box-shadow: none;
 		}
@@ -486,99 +486,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");
 	}