From f5b763ab3889744c5775c1322f45f5f47a1e84b0 Mon Sep 17 00:00:00 2001
From: Meutel <meutel@meutel.net>
Date: Sun, 22 Jun 2014 12:23:16 +0200
Subject: [PATCH] refactoring home page

---
 public/js/home.js | 237 +++++++++++++++++++++++++++-------------------
 1 file changed, 137 insertions(+), 100 deletions(-)

diff --git a/public/js/home.js b/public/js/home.js
index c28a528..01695d5 100644
--- a/public/js/home.js
+++ b/public/js/home.js
@@ -1,8 +1,140 @@
-var url;
-var links;
-var cols;
-var headers;
-var urlp={};
+var ItemsCol = function(id, headers, cols) {
+	this.id = id;
+	this.url= '/'+id;
+	this.headers = headers;//table headers
+	this.cols = cols;//cell rendering functions
+};
+$.extend(ItemsCol.prototype,{
+	data: null, // loaded items
+	bind: function() {
+		var self = this;
+		$('#'+this.id) .click(function() {
+			window.location.hash=self.id;
+			home.pagination.page=0;
+			home.pagination.perpage=10;
+			self.load();
+		});
+	},
+	load: function() {
+		var self = this;
+		$.getJSON( this.url, home.pagination, function( data, textStatus, xhr ) {
+			self.data = data;
+			home.current = self;
+			home.update();
+			var linkHeader = xhr.getResponseHeader('link');
+			home.updatePager(parse_link_header(linkHeader));
+		});
+	},
+	renderRow: function(elt) {
+		var item = "<tr id='" + elt.id + "'>";
+		$.each(this.cols, function(icol, col) {
+			item+="<td>"+col(elt)+"</td>";
+		});
+		item += "</tr>";
+		return item;
+	},
+});
+var HomePage = function() {
+	this.books= new ItemsCol('book', ['Titre', 'Auteur(s)', 'Serie'], [
+		function(elt) {
+			return link(elt.title, '/book/'+elt.id, 'glyphicon-book');
+		},
+		function(elt) {
+			var links='';
+			if (Array.isArray(elt.authors)) {
+				$.each(elt.authors, function(ida, author) {
+					links+=link(author.name, '/author/'+author.id,'glyphicon-user');
+				});
+			}
+			return links;
+		},
+		function(elt) {
+			var content = elt.series_name == null ? '' : elt.series_name + '(' + elt.series_index + ')';
+			return link(content, '/serie/'+elt.series_id, 'glyphicon-list');
+		}
+	]);
+	this.authors= new ItemsCol('author', ['Nom', 'Livres'], [
+		function(elt){ return link(elt.name, '/author/'+elt.id,'glyphicon-user'); },
+		function(elt) { return elt.count; }
+	]);
+	this.series= new ItemsCol('serie', ['Nom', 'Auteur(s)', 'Livres'], [
+		function(elt) { return link(elt.name, '/serie/'+elt.id, 'glyphicon-list'); },
+		function(elt) {
+			var links='';
+			if (Array.isArray(elt.authors)) {
+				$.each(elt.authors, function(ida, author) {
+					links+=link(author.name, '/author/'+author.id,'glyphicon-user');
+				});
+			}
+			return links;
+		},
+		function(elt) { return elt.count; }
+	]);
+	this.pagination= {
+		perpage: 10,
+		page: 0,
+	};
+	this.table = $('#items');
+	// bind buttons events
+	$.each([this.books,this.authors,this.series], function(ind, itemsCol) {
+		itemsCol.bind();
+	});
+	$(".perpage").click(function() {
+		home.pagination.perpage = $(this).attr("value");
+		home.pagination.page = 0;
+		if (home.current)
+			home.current.load();
+	});
+};
+$.extend(HomePage.prototype,{
+	current: null,
+	table: null,
+	displayHeaders: function(headers) {
+		var row = "<tr>";
+		$.each(headers, function(ih, h) {
+			row+="<th>"+h+"</th>";
+		});
+		row += "</tr>";
+		this.table.append(row);
+	},
+	addRow: function(elt) {
+		var row = this.current.renderRow(elt);
+		this.table.append(row);
+	},
+	update: function() {
+		this.table.empty();
+		if (this.current) {
+			this.displayHeaders(this.current.headers);
+			var self = this;
+			$.each(this.current.data, function(ind, elt) {
+				self.addRow(elt);
+			});
+		}
+	},
+	updatePager: function(links) {
+		$.each(['prev','next'], function (i, elt) {
+			var btn = $('#'+elt);
+			if (links[elt]) {
+				btn.parent().removeClass('disabled');
+			} else {
+				btn.parent().addClass('disabled');
+			}
+			btn.click(function() {
+				var parsed = $.url(links[elt]);
+				var urlp = parsed.param();
+				home.pagination.page = urlp.page;
+				home.pagination.perpage = urlp.perpage;
+				home.current.load();
+			});
+		});
+	},
+});
+var home = new HomePage();
+
+
+/**
+ * Make link.
+ */
 function link(content, href, glyph) {
 	var link="";
 	if (content) {
@@ -12,101 +144,6 @@ function link(content, href, glyph) {
 	}
 	return link;
 }
-$('#book').click(function() {
-	headers = ['Titre', 'Auteur(s)', 'Serie'];
-	cols = [
-		function(elt) {
-			return link(elt.title, '/book/'+elt.id, 'glyphicon-book');
-		}, function(elt) {
-			var links="";
-			if (Array.isArray(elt.authors)) {
-				$.each(elt.authors, function(ida, author) {
-					links+=link(author.name, '/author/'+author.id,'glyphicon-user');
-				});
-			}
-			return links;
-		}, function(elt) {
-			var content = elt.series_name == null ? '' : elt.series_name + '(' + elt.series_index + ')';
-			return link(content, '/serie/'+elt.series_id, 'glyphicon-list');
-		}
-	];
-});
-$('#author').click(function() {
-	headers = ['Nom', 'Livres'];
-	cols = [ function(elt){
-		return link(elt.name, '/author/'+elt.id,'glyphicon-user');
-	}, function(elt) { return elt.count; } ];
-});
-$('#serie').click(function() {
-	headers = ['Nom', 'Auteur(s)', 'Livres'];
-	cols = [
-		function(elt) {
-			return link(elt.name, '/serie/'+elt.id, 'glyphicon-list');
-		}, function(elt) {
-			var links="";
-			if (Array.isArray(elt.authors)) {
-				$.each(elt.authors, function(ida, author) {
-					links+=link(author.name, '/author/'+author.id,'glyphicon-user');
-				});
-			}
-			return links;
-		}, function(elt) {
-			return elt.count;
-		}
-	];
-});
-$.each(['book','author','serie'], function (i, elt) {
-	$('#'+elt).click(function() {
-		window.location.hash=elt='s';
-		url = '/'+elt;
-		loadItems();
-	});
-});
-$.each(['prev','next'], function (i, elt) {
-	$('#'+elt).click(function() {
-		var parsed = $.url(links[elt]);
-		url = parsed.attr('path');
-		urlp = parsed.param();
-		loadItems();
-	});
-});
-$(".perpage").click(function() {
-	urlp.perpage = $(this).attr("value");
-	urlp.page = 0;
-	loadItems();
-});
-
-function loadItems() {
-	$.getJSON( url, urlp, function( data, textStatus, xhr ) {
-		var items = $('#items');
-		items.empty();
-		var item = "<tr>";
-		$.each(headers, function(ih, h) {
-			item+="<th>"+h+"</th>";
-		});
-		item += "</tr>";
-		items.append(item);
-		$.each( data, function(i, elt ) {
-			var item = "<tr id='" + elt.id + "'>";
-			$.each(cols, function(icol, col) {
-				item+="<td>"+col(elt)+"</td>";
-			});
-			item += "</tr>";
-			items.append(item);
-		});
-
-		var linkHeader = xhr.getResponseHeader('link');
-		links = parse_link_header(linkHeader);
-		$.each(['prev','next'], function (i, elt) {
-			var btn = $('#'+elt);
-			if (links[elt]) {
-				btn.parent().removeClass('disabled');
-			} else {
-				btn.parent().addClass('disabled');
-			}
-		});
-	});
-}
 /*
 * parse_link_header()
 *