119 lines
4.1 KiB
HTML
119 lines
4.1 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<title>Library</title>
|
||
<script type="text/javascript" src='js/jquery.js'></script>
|
||
<script type="text/javascript" src='js/mustache.js'></script>
|
||
<script type="text/javascript" src='js/lodash.core.min.js'></script>
|
||
<script src='https://cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.5.1/tabletop.min.js'></script>
|
||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"></link>
|
||
<link rel="stylesheet" href="css/reset.css"></link>
|
||
<link rel="stylesheet" href="css/style.css"></link>
|
||
<link href="https://fonts.googleapis.com/css?family=Libre+Baskerville:400,700" rel="stylesheet">
|
||
<script type='text/javascript'>
|
||
var publicSpreadsheetUrl = 'https://docs.google.com/spreadsheets/d/1w5Dc57wV0_rrKFsG7KM-qdPWEpqYk6lFu3JzAA0cSv0/pubhtml';
|
||
|
||
function init() {
|
||
$("#reloadLink").unbind('click');
|
||
$("#reloadLink").on("click", function() { init(); });
|
||
|
||
Tabletop.init({
|
||
key: publicSpreadsheetUrl,
|
||
callback: showInfo,
|
||
simpleSheet: true
|
||
});
|
||
}
|
||
|
||
function showInfo(data, tabletop) {
|
||
renderTable(data, 'authorLast'); //default sorting on load is author's last name
|
||
}
|
||
|
||
function renderTable(data, sortField) {
|
||
data = _.sortBy(data, 'title');
|
||
data = _.sortBy(data, sortField);
|
||
|
||
$.each(data, function(key, value) {
|
||
value.rowNumber = key; // re-key for new sort
|
||
});
|
||
|
||
var template = $('#Table').html();
|
||
var rendered = Mustache.render(template, {books: data});
|
||
$('#books').html(rendered);
|
||
$("#books tbody tr").not(':first').on("click", function() {
|
||
updateCurrentBook(data[$(this)[0].id]); // ignore the headers
|
||
});
|
||
$("#books tbody tr th[data-sort-by]").on("click", function() {
|
||
renderTable(data, $(this).data('sortBy')); // only add callback when there's a sortBy attribute
|
||
});
|
||
}
|
||
|
||
function updateCurrentBook(book) {
|
||
var template = $('#View').html();
|
||
var rendered = Mustache.render(template, {book: book});
|
||
$('#current').html(rendered);
|
||
}
|
||
|
||
window.addEventListener('DOMContentLoaded', init);
|
||
</script>
|
||
</head>
|
||
<body>
|
||
<div class="wrapper">
|
||
<div id="header">
|
||
<h1>Library</h1>
|
||
<a target="_blank" href="https://docs.google.com/spreadsheets/d/1w5Dc57wV0_rrKFsG7KM-qdPWEpqYk6lFu3JzAA0cSv0/edit">spreadsheet</a>
|
||
<a target="_blank" href="https://github.com/deltamualpha/my-library">github</a>
|
||
<a id="reloadLink" href="#">reload</a>
|
||
</div>
|
||
<div id="current">No Book Selected</div>
|
||
<div id="books"></div> <!-- Table goes here -->
|
||
</div>
|
||
|
||
<script id="Table" type="text/html">
|
||
<table class="bookTable">
|
||
<tr>
|
||
<th data-sort-by="title" class="tHeader title">Title</th>
|
||
<th data-sort-by="authorLast" class="tHeader author">Author</th>
|
||
<th data-sort-by="publisher" class="tHeader publisher">Publisher</th>
|
||
<th data-sort-by="year" class="tHeader year">Year</th>
|
||
<th class="tHeader isbn">ISBN</th>
|
||
</tr>
|
||
{{#books}}
|
||
<tr class="tRow" id="{{rowNumber}}">
|
||
<td class="title">{{title}}{{#signed}} <span title="Signed by the author">✔</span>︎{{/signed}}</td>
|
||
<td class="author">{{author}}</td>
|
||
<td class="publisher">{{publisher}}</td>
|
||
<td class="year">{{year}}</td>
|
||
<td class="isbn">{{isbn-13}}</td>
|
||
</tr>
|
||
{{/books}}
|
||
</table>
|
||
</script>
|
||
|
||
<script id="View" type="text/html">
|
||
{{#book}}
|
||
{{#coverurl}}
|
||
<img src="{{coverurl}}"/>
|
||
{{/coverurl}}
|
||
<h1>{{title}}</h1>
|
||
<h2>{{author}}</h2>
|
||
<span>{{isbn-13}}</span><br/>
|
||
<span>{{publisher}}, {{year}}</span><br/>
|
||
{{#series}}
|
||
<span>{{series}}, Volume {{volume}}</span><br/>
|
||
{{/series}}
|
||
{{#signed}}
|
||
<span>Signed by the author</span><br/>
|
||
{{/signed}}
|
||
<span>{{format}}</span>
|
||
<div class="description">
|
||
<p>{{description}}</p>
|
||
{{#notes}}
|
||
<span>Notes:</span>
|
||
<p>{{notes}}</p>
|
||
{{/notes}}
|
||
</div>
|
||
{{/book}}
|
||
</script>
|
||
</body>
|
||
</html>
|