Factorize JS
This commit is contained in:
parent
7b78861384
commit
606afb279d
@ -1,51 +1,90 @@
|
||||
var bus = new Vue();
|
||||
|
||||
// COMMONS //
|
||||
|
||||
var BOOKS = 'books', AUTHORS = 'authors', SERIES = 'series';
|
||||
var BOUQUINS_TYPES = {
|
||||
books: { icon: 'book', singular: 'livre', plural: 'livres',
|
||||
tab_cols: [ { id: 'title', name: 'Titre', sort: 'title' },
|
||||
{ id: 'authors', name: 'Auteur(s)' },
|
||||
{ id: 'series', name: 'Serie' } ] },
|
||||
authors: { icon: 'user', singular: 'auteur', plural: 'auteurs',
|
||||
tab_cols: [ { id: 'author_name', name: 'Nom', sort: 'name' },
|
||||
{ id: 'count', name: 'Livre(s)' } ] },
|
||||
series: { icon: 'list', singular: 'serie', plural: 'series',
|
||||
tab_cols: [ { id: 'serie_name', name: 'Nom', sort: 'name' },
|
||||
{ id: 'count', name: 'Livre(s)' },
|
||||
{ id: 'authors', name: 'Auteur(s)' } ] }
|
||||
};
|
||||
function ty(type) {
|
||||
if (BOUQUINS_TYPES[type]) return BOUQUINS_TYPES[type]
|
||||
console.log("ERROR: Unknown type: " + type);
|
||||
return {}
|
||||
}
|
||||
function icon(type) {
|
||||
return ty(type).icon;
|
||||
}
|
||||
function iconClass(type) {
|
||||
return 'glyphicon glyphicon-' + icon(type);
|
||||
}
|
||||
function url(type, id) {
|
||||
if (id) return ty(type) ? '/'+type+'/'+id:'';
|
||||
return ty(type) ? '/'+type+'/':'';
|
||||
}
|
||||
function label(type, count) {
|
||||
return count == 1 ? ty(type).singular : ty(type).plural;
|
||||
}
|
||||
function stdError(code, resp) {
|
||||
console.log('ERROR ' + code + ': ' + resp);
|
||||
}
|
||||
function sendQuery(url, error, success) {
|
||||
var xmh = new XMLHttpRequest();
|
||||
var v;
|
||||
xmh.onreadystatechange = function() {
|
||||
v = xmh.responseText;
|
||||
if (xmh.readyState === 4 && xmh.status === 200) {
|
||||
var res;
|
||||
try {
|
||||
res = JSON.parse(v);
|
||||
} catch (err) {
|
||||
if (null !== error)
|
||||
error(err.name, err.message);
|
||||
}
|
||||
if (null !== success)
|
||||
success(res);
|
||||
} else if (xmh.readyState === 4) {
|
||||
if (null !== error)
|
||||
error(xmh.status, v);
|
||||
}
|
||||
};
|
||||
xmh.open('GET', url, true);
|
||||
xmh.setRequestHeader('Accept','application/json');
|
||||
xmh.send(null);
|
||||
}
|
||||
|
||||
// COMPONENTS //
|
||||
|
||||
Vue.component('results-list', {
|
||||
template: '#results-list-template',
|
||||
props: ['results', 'count', 'type'],
|
||||
methods: {
|
||||
url: function(item) {
|
||||
return '/'+this.type+'/'+item.id;
|
||||
},
|
||||
url: function(item) { return url(this.type, item.id); },
|
||||
label: function(item) {
|
||||
switch (this.type) {
|
||||
case 'books':
|
||||
case BOOKS:
|
||||
return item.title;
|
||||
case 'authors':
|
||||
case 'series':
|
||||
case AUTHORS:
|
||||
case SERIES:
|
||||
return item.name;
|
||||
default:
|
||||
return '';
|
||||
}
|
||||
},
|
||||
iconClass: function() {
|
||||
return 'glyphicon glyphicon-' + this.icon();
|
||||
},
|
||||
icon: function() {
|
||||
switch (this.type) {
|
||||
case 'books':
|
||||
return 'book';
|
||||
case 'authors':
|
||||
return 'user';
|
||||
case 'series':
|
||||
return 'list';
|
||||
default:
|
||||
return '';
|
||||
}
|
||||
return iconClass(this.type);
|
||||
},
|
||||
countlabel: function() {
|
||||
switch (this.type) {
|
||||
case 'books':
|
||||
return this.count > 1 ? 'livres' : 'livre';
|
||||
case 'authors':
|
||||
return this.count > 1 ? 'auteurs' : 'auteur';
|
||||
case 'series':
|
||||
return this.count > 1 ? 'series' : 'serie';
|
||||
default:
|
||||
return '';
|
||||
}
|
||||
return label(this.type, this.count);
|
||||
}
|
||||
}
|
||||
});
|
||||
@ -64,20 +103,11 @@ Vue.component('result-cell', {
|
||||
},
|
||||
props: ['item', 'col'],
|
||||
methods: {
|
||||
bookUrl: function(id) {
|
||||
return '/books/' + id;
|
||||
},
|
||||
authorUrl: function(id) {
|
||||
return '/authors/' + id;
|
||||
},
|
||||
seriesUrl: function(id) {
|
||||
return '/series/' + id;
|
||||
},
|
||||
link: function(h, icon, text, url) {
|
||||
link: function(h, type, text, id) {
|
||||
return [
|
||||
h('span',{ attrs: { class: 'glyphicon glyphicon-'+icon } },''),
|
||||
h('span',{ attrs: { class: iconClass(type) } },''),
|
||||
' ',
|
||||
h('a', { attrs: { href: url } }, text)
|
||||
h('a', { attrs: { href: url(type, id) } }, text)
|
||||
];
|
||||
},
|
||||
badge: function(h, num) {
|
||||
@ -86,19 +116,19 @@ Vue.component('result-cell', {
|
||||
cellContent: function(h) {
|
||||
switch (this.col.id) {
|
||||
case 'author_name':
|
||||
return this.link(h, 'user', this.item.name, this.authorUrl(this.item.id));
|
||||
return this.link(h, AUTHORS, this.item.name, this.item.id);
|
||||
case 'serie_name':
|
||||
return this.link(h, 'list', this.item.name, this.authorUrl(this.item.id));
|
||||
return this.link(h, SERIES, this.item.name, this.item.id);
|
||||
case 'count':
|
||||
return this.item.count;
|
||||
case 'title':
|
||||
return this.link(h, 'book', this.item.title, this.bookUrl(this.item.id));
|
||||
return this.link(h, BOOKS, this.item.title, this.item.id);
|
||||
case 'authors':
|
||||
var elts = [];
|
||||
var authors = this.item.authors;
|
||||
if (authors) {
|
||||
for (i=0;i<authors.length;i++) {
|
||||
elts[i] = this.link(h, 'user', authors[i].name, this.authorUrl(authors[i].id));
|
||||
elts[i] = this.link(h, AUTHORS, authors[i].name, authors[i].id);
|
||||
}
|
||||
}
|
||||
return elts;
|
||||
@ -106,7 +136,7 @@ Vue.component('result-cell', {
|
||||
var series = this.item.series;
|
||||
if (series) {
|
||||
return [
|
||||
this.link(h, 'list', series.name, this.seriesUrl(series.id)),
|
||||
this.link(h, SERIES, series.name, series.id),
|
||||
h('span', { attrs: { class: 'badge' } }, this.item.series_idx)
|
||||
];
|
||||
}
|
||||
@ -166,14 +196,10 @@ if (document.getElementById("index")) {
|
||||
this.updateResults();
|
||||
},
|
||||
order: function(query) {
|
||||
if (this.order_desc)
|
||||
return query + '&order=desc';
|
||||
return query;
|
||||
return query + (this.order_desc ? '&order=desc' : '');
|
||||
},
|
||||
sort: function(query) {
|
||||
if (this.sort_by)
|
||||
return query + '&sort=' + this.sort_by;
|
||||
return query;
|
||||
return query + (this.sort_by ? '&sort=' + this.sort_by : '');
|
||||
},
|
||||
paginate: function(query) {
|
||||
return query + '?page=' + this.page + '&perpage=' + this.perpage;
|
||||
@ -182,43 +208,22 @@ if (document.getElementById("index")) {
|
||||
return this.order(this.sort(this.paginate(url)));
|
||||
},
|
||||
updateResults: function() {
|
||||
this.sendQuery(this.params(this.url), this.stdError, this.loadResults);
|
||||
sendQuery(this.params(this.url), stdError, this.loadResults);
|
||||
},
|
||||
showSeries: function() {
|
||||
this.url = '/series/';
|
||||
this.url = url(SERIES);
|
||||
this.updateResults();
|
||||
},
|
||||
showAuthors: function() {
|
||||
this.url = '/authors/';
|
||||
this.url = url(AUTHORS);
|
||||
this.updateResults();
|
||||
},
|
||||
showBooks: function() {
|
||||
this.url = '/books/';
|
||||
this.url = url(BOOKS);
|
||||
this.updateResults();
|
||||
},
|
||||
loadCols: function(type) {
|
||||
switch (type) {
|
||||
case 'books':
|
||||
this.cols = [
|
||||
{ id: 'title', name: 'Titre', sort: 'title' },
|
||||
{ id: 'authors', name: 'Auteur(s)' },
|
||||
{ id: 'series', name: 'Serie' }
|
||||
];
|
||||
break;
|
||||
case 'series':
|
||||
this.cols = [
|
||||
{ id: 'serie_name', name: 'Nom', sort: 'name' },
|
||||
{ id: 'count', name: 'Livre(s)' },
|
||||
{ id: 'authors', name: 'Auteur(s)' }
|
||||
];
|
||||
break;
|
||||
case 'authors':
|
||||
this.cols = [
|
||||
{ id: 'author_name', name: 'Nom', sort: 'name' },
|
||||
{ id: 'count', name: 'Livre(s)' }
|
||||
];
|
||||
break;
|
||||
}
|
||||
this.cols = ty(type).tab_cols;
|
||||
},
|
||||
loadResults(resp) {
|
||||
this.results = [];
|
||||
@ -230,33 +235,6 @@ if (document.getElementById("index")) {
|
||||
} else {
|
||||
this.page = 0;
|
||||
}
|
||||
},
|
||||
sendQuery: function(url, error, success) {
|
||||
var xmh = new XMLHttpRequest();
|
||||
var v;
|
||||
xmh.onreadystatechange = function() {
|
||||
v = xmh.responseText;
|
||||
if (xmh.readyState === 4 && xmh.status === 200) {
|
||||
var res;
|
||||
try {
|
||||
res = JSON.parse(v);
|
||||
} catch (err) {
|
||||
if (null !== error)
|
||||
error(err.name, err.message);
|
||||
}
|
||||
if (null !== success)
|
||||
success(res);
|
||||
} else if (xmh.readyState === 4) {
|
||||
if (null !== error)
|
||||
error(xmh.status, v);
|
||||
}
|
||||
};
|
||||
xmh.open('GET', url, true);
|
||||
xmh.setRequestHeader('Accept','application/json');
|
||||
xmh.send(null);
|
||||
},
|
||||
stdError: function(code, resp) {
|
||||
console.log('ERROR ' + code + ': ' + resp);
|
||||
}
|
||||
},
|
||||
mounted: function() {
|
||||
@ -269,17 +247,17 @@ if (document.getElementById("author")) {
|
||||
new Vue({
|
||||
el: '#author',
|
||||
data: {
|
||||
tab: "books"
|
||||
tab: BOOKS
|
||||
},
|
||||
methods: {
|
||||
showBooks: function() {
|
||||
this.tab = "books";
|
||||
this.tab = BOOKS;
|
||||
},
|
||||
showAuthors: function() {
|
||||
this.tab = "authors";
|
||||
this.tab = AUTHORS;
|
||||
},
|
||||
showSeries: function() {
|
||||
this.tab = "series";
|
||||
this.tab = SERIES;
|
||||
}
|
||||
}
|
||||
});
|
||||
@ -303,8 +281,7 @@ if (document.getElementById("search")) {
|
||||
},
|
||||
methods: {
|
||||
searchParams: function(url) {
|
||||
var res = url;
|
||||
res += '?perpage=' + this.perpage;
|
||||
var res = url + '?perpage=' + this.perpage;
|
||||
for (var i=0; i<this.terms.length; i++) {
|
||||
var t = this.terms[i];
|
||||
if (t.trim())
|
||||
@ -317,24 +294,23 @@ if (document.getElementById("search")) {
|
||||
this.authors = res.results;
|
||||
},
|
||||
searchAuthors: function() {
|
||||
this.sendQuery(this.searchParams('/authors/'), this.stdError, this.searchAuthorsSuccess);
|
||||
sendQuery(this.searchParams(url(AUTHORS)), stdError, this.searchAuthorsSuccess);
|
||||
},
|
||||
searchBooksSuccess: function(res) {
|
||||
this.booksCount = res.count;
|
||||
this.books = res.results;
|
||||
},
|
||||
searchBooks: function() {
|
||||
this.sendQuery(this.searchParams('/books/'), this.stdError, this.searchBooksSuccess);
|
||||
sendQuery(this.searchParams(url(BOOKS)), stdError, this.searchBooksSuccess);
|
||||
},
|
||||
searchSeriesSuccess: function(res) {
|
||||
this.seriesCount = res.count;
|
||||
this.series = res.results;
|
||||
},
|
||||
searchSeries: function() {
|
||||
this.sendQuery(this.searchParams('/series/'), this.stdError, this.searchSeriesSuccess);
|
||||
sendQuery(this.searchParams(url(SERIES)), stdError, this.searchSeriesSuccess);
|
||||
},
|
||||
searchAll: function() {
|
||||
this.clear();
|
||||
this.searchAuthors();
|
||||
this.searchBooks();
|
||||
this.searchSeries();
|
||||
@ -350,22 +326,20 @@ if (document.getElementById("search")) {
|
||||
searchFull: function() {
|
||||
if (this.q) {
|
||||
this.terms = this.q.split(' ');
|
||||
switch (this.which) {
|
||||
case 'all':
|
||||
this.searchAll();
|
||||
break;
|
||||
case 'authors':
|
||||
this.clear();
|
||||
switch (this.which) {
|
||||
case AUTHORS:
|
||||
this.searchAuthors();
|
||||
break;
|
||||
case 'books':
|
||||
this.clear();
|
||||
case BOOKS:
|
||||
this.searchBooks();
|
||||
break;
|
||||
case 'series':
|
||||
this.clear();
|
||||
case SERIES:
|
||||
this.searchSeries();
|
||||
break;
|
||||
default:
|
||||
this.searchAll();
|
||||
break;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
@ -373,6 +347,7 @@ if (document.getElementById("search")) {
|
||||
searchUrl: function() {
|
||||
if (this.urlParams.q) {
|
||||
this.terms = this.urlParams.q.split(' ');
|
||||
this.clear();
|
||||
this.searchAll();
|
||||
this.q = this.urlParams.q;
|
||||
}
|
||||
@ -385,33 +360,6 @@ if (document.getElementById("search")) {
|
||||
query = window.location.search.substring(1);
|
||||
while (match = search.exec(query))
|
||||
this.urlParams[decode(match[1])] = decode(match[2]);
|
||||
},
|
||||
sendQuery: function(url, error, success) {
|
||||
var xmh = new XMLHttpRequest();
|
||||
var v;
|
||||
xmh.onreadystatechange = function() {
|
||||
v = xmh.responseText;
|
||||
if (xmh.readyState === 4 && xmh.status === 200) {
|
||||
var res;
|
||||
try {
|
||||
res = JSON.parse(v);
|
||||
} catch (err) {
|
||||
if (null !== error)
|
||||
error(err.name, err.message);
|
||||
}
|
||||
if (null !== success)
|
||||
success(res);
|
||||
} else if (xmh.readyState === 4) {
|
||||
if (null !== error)
|
||||
error(xmh.status, v);
|
||||
}
|
||||
};
|
||||
xmh.open('GET', url, true);
|
||||
xmh.setRequestHeader('Accept','application/json');
|
||||
xmh.send(null);
|
||||
},
|
||||
stdError: function(code, resp) {
|
||||
console.log('ERROR ' + code + ': ' + resp);
|
||||
}
|
||||
},
|
||||
created: function() {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user