library/index.html

127 lines
4.3 KiB
HTML
Raw Normal View History

2017-05-09 01:56:35 +00:00
<!DOCTYPE html>
<html>
<head>
2017-05-09 01:58:16 +00:00
<title>Library</title>
2017-05-09 01:56:35 +00:00
<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>
2017-05-09 01:58:16 +00:00
<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>
2017-05-09 02:58:29 +00:00
<link href="https://fonts.googleapis.com/css?family=Libre+Baskerville:400,700" rel="stylesheet">
2017-05-09 01:56:35 +00:00
<script type='text/javascript'>
var publicSpreadsheetUrl = 'https://docs.google.com/spreadsheets/d/1w5Dc57wV0_rrKFsG7KM-qdPWEpqYk6lFu3JzAA0cSv0/pubhtml';
function init() {
2017-05-14 01:36:32 +00:00
$("#reloadLink").unbind('click');
$("#reloadLink").on("click", function() { init(); });
2017-05-09 01:56:35 +00:00
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');
2017-05-09 01:56:35 +00:00
data = _.sortBy(data, sortField);
$.each(data, function(key, value) {
value.rowNumber = key; // re-key for new sort
2017-05-17 18:47:35 +00:00
value.sortTitle = titleCleaner(value.title);
2017-05-09 01:56:35 +00:00
});
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);
}
2017-05-17 18:47:35 +00:00
function titleCleaner(title) {
return title
.replace('"', '')
.replace(':', '')
.replace(/^(An?|The)\s/i, '');
}
2017-05-14 01:36:32 +00:00
window.addEventListener('DOMContentLoaded', init);
2017-05-09 01:56:35 +00:00
</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>
2017-05-14 01:36:32 +00:00
<a id="reloadLink" href="#">reload</a>
2017-05-09 01:56:35 +00:00
</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>
2017-05-17 18:47:35 +00:00
<th data-sort-by="sortTitle" class="tHeader title">Title</th>
2017-05-09 01:56:35 +00:00
<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}}">
2017-05-14 20:19:14 +00:00
<td class="title">{{title}}{{#signed}}&nbsp;<span title="Signed by the author"></span>{{/signed}}</td>
2017-05-09 01:56:35 +00:00
<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}}
2017-05-14 20:10:46 +00:00
<img src="{{coverurl}}"/>
2017-05-09 01:56:35 +00:00
{{/coverurl}}
<h1>{{title}}</h1>
<h2>{{author}}</h2>
<span>{{isbn-13}}</span><br/>
2017-05-09 02:17:59 +00:00
<span>{{publisher}}, {{year}}</span><br/>
2017-05-14 01:36:32 +00:00
{{#series}}
<span>{{series}}, Volume {{volume}}</span><br/>
{{/series}}
2017-05-14 20:10:46 +00:00
{{#signed}}
<span>Signed by the author</span><br/>
{{/signed}}
2017-05-09 02:17:59 +00:00
<span>{{format}}</span>
2017-05-09 01:56:35 +00:00
<div class="description">
<p>{{description}}</p>
{{#notes}}
<span>Notes:</span>
2017-05-14 01:36:32 +00:00
<p>{{notes}}</p>
2017-05-09 01:56:35 +00:00
{{/notes}}
</div>
{{/book}}
</script>
</body>
</html>