add search
This commit is contained in:
parent
5d09498ccb
commit
ec8d4960cd
@ -12,6 +12,33 @@
|
|||||||
display: inline;
|
display: inline;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#searchBox {
|
||||||
|
position: absolute;
|
||||||
|
right: 10px;
|
||||||
|
top: 7px;
|
||||||
|
text-align: right;
|
||||||
|
width: 400px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#searchBox input {
|
||||||
|
width: 300px;
|
||||||
|
font-size: 16px;
|
||||||
|
background: #f9f8ed;
|
||||||
|
padding: 2px 5px;
|
||||||
|
border: none;
|
||||||
|
border-bottom: 2px solid #d8d0a0;
|
||||||
|
font-family: 'Libre Baskerville', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
#searchBox input:focus {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#searchBox input::placeholder {
|
||||||
|
font-family: 'Libre Baskerville', sans-serif;
|
||||||
|
color: #d8d0a0;
|
||||||
|
}
|
||||||
|
|
||||||
#current {
|
#current {
|
||||||
background-color: #f7f3dc;
|
background-color: #f7f3dc;
|
||||||
width: calc(40vw - 40px);
|
width: calc(40vw - 40px);
|
||||||
|
44
index.html
44
index.html
@ -13,28 +13,41 @@
|
|||||||
<script type='text/javascript'>
|
<script type='text/javascript'>
|
||||||
var publicSpreadsheetUrl = 'https://docs.google.com/spreadsheets/d/1w5Dc57wV0_rrKFsG7KM-qdPWEpqYk6lFu3JzAA0cSv0/pubhtml';
|
var publicSpreadsheetUrl = 'https://docs.google.com/spreadsheets/d/1w5Dc57wV0_rrKFsG7KM-qdPWEpqYk6lFu3JzAA0cSv0/pubhtml';
|
||||||
|
|
||||||
function init() {
|
function showInfo(data, tabletop) {
|
||||||
$("#reloadLink").unbind('click');
|
$("#reloadLink").unbind('click');
|
||||||
$("#reloadLink").on("click", function() { init(); });
|
$("#reloadLink").on("click", function() { init(); });
|
||||||
|
|
||||||
Tabletop.init({
|
$("#search").unbind('input');
|
||||||
key: publicSpreadsheetUrl,
|
$("#search").on("input", function(e) { search(data, e.target.value); });
|
||||||
callback: showInfo,
|
|
||||||
simpleSheet: true
|
renderTable(data, 'authorLast'); //default sorting on load is author's last name
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function showInfo(data, tabletop) {
|
function search(data, searchString) {
|
||||||
renderTable(data, 'authorLast'); //default sorting on load is author's last name
|
searchBy = searchString.toLowerCase();
|
||||||
|
relevantFields = ['title', 'author', 'genre', 'publisher', 'series', 'year'];
|
||||||
|
|
||||||
|
if (!searchString) {
|
||||||
|
renderTable(data, 'authorLast');
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
renderTable(_.filter(data, function(book) {
|
||||||
|
return _.find(_.pick(book, relevantFields), function(field) {
|
||||||
|
return field.toLowerCase().indexOf(searchBy) !== -1;
|
||||||
|
});
|
||||||
|
}));
|
||||||
}
|
}
|
||||||
|
|
||||||
function renderTable(data, sortField) {
|
function renderTable(data, sortField) {
|
||||||
data = _.sortBy(data, 'title');
|
data = _.sortBy(data, 'title');
|
||||||
data = _.sortBy(data, sortField);
|
if (sortField) { data = _.sortBy(data, sortField); }
|
||||||
|
|
||||||
$.each(data, function(key, value) {
|
$.each(data, function(key, value) {
|
||||||
value.rowNumber = key; // re-key for new sort
|
value.rowNumber = key; // re-key for new sort
|
||||||
value.sortTitle = titleCleaner(value.title);
|
if (!value.sortTitle) {
|
||||||
|
value.sortTitle = titleCleaner(value.title);
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
var template = $('#Table').html();
|
var template = $('#Table').html();
|
||||||
@ -61,7 +74,13 @@
|
|||||||
.replace(/^(An?|The)\s/i, '');
|
.replace(/^(An?|The)\s/i, '');
|
||||||
}
|
}
|
||||||
|
|
||||||
window.addEventListener('DOMContentLoaded', init);
|
window.addEventListener('DOMContentLoaded', function() {
|
||||||
|
Tabletop.init({
|
||||||
|
key: publicSpreadsheetUrl,
|
||||||
|
callback: showInfo,
|
||||||
|
simpleSheet: true
|
||||||
|
});
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
@ -71,6 +90,9 @@
|
|||||||
<a target="_blank" href="https://docs.google.com/spreadsheets/d/1w5Dc57wV0_rrKFsG7KM-qdPWEpqYk6lFu3JzAA0cSv0/edit">spreadsheet</a>
|
<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 target="_blank" href="https://github.com/deltamualpha/my-library">github</a>
|
||||||
<a id="reloadLink" href="#">reload</a>
|
<a id="reloadLink" href="#">reload</a>
|
||||||
|
<div id="searchBox">
|
||||||
|
<input id="search" type="text" name="search" placeholder="Search..."/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="current">No Book Selected</div>
|
<div id="current">No Book Selected</div>
|
||||||
<div id="books"></div> <!-- Table goes here -->
|
<div id="books"></div> <!-- Table goes here -->
|
||||||
|
Loading…
Reference in New Issue
Block a user