Add a button to toggle styled bookshelf

This commit is contained in:
Robbie Antenesse 2019-01-26 12:59:01 -06:00
parent f95e5cd65c
commit 8cf1348fe0
6 changed files with 31 additions and 3 deletions

View File

@ -12,6 +12,7 @@
"dependencies": {
"body-parser": "^1.18.3",
"bulma": "^0.7.2",
"cookie-parser": "^1.4.3",
"express": "^4.16.4",
"express-fileupload": "^1.0.0",
"fecha": "^3.0.2",

View File

@ -33,6 +33,12 @@ $(document).ready(function() {
}
});
$('#readableToggle').click(function() {
var useReadable = getCookieValue('useReadable');
document.cookie = 'useReadable=' + (useReadable !== 'yes' ? 'yes' : 'no');
window.location.reload();
});
$('.modal-background, .modal-close, .modal-card-head .delete, .modal .close').click(function() {
$(this).closest('.modal').removeClass('is-active');
downloadButton = undefined;
@ -65,3 +71,8 @@ $(document).ready(function() {
$('#bookFileName').text(fileName ? fileName : 'None Selected');
});
});
function getCookieValue(key) {
var matches = document.cookie.match('(^|;)\\s*' + key + '\\s*=\\s*([^;]+)');
return matches ? matches.pop() : ''
}

View File

@ -8,6 +8,7 @@ const settings = require('../settings.json');
module.exports = function (app) {
app.server.get('/', (req, res) => {
const useReadable = req.cookies['useReadable'] === 'yes';
const files = fs.readdirSync(app.fileLocation).filter(fileName => fileName.includes('.json'))
.map(fileName => { // Cache the file data so sorting doesn't need to re-check each file
const stats = fs.statSync(path.resolve(app.fileLocation, fileName));
@ -50,7 +51,7 @@ module.exports = function (app) {
if (!spineColor.isValid()) {
spineColor = tinycolor.random();
}
return app.templater.fill('./templates/elements/book.html', {
return app.templater.fill(useReadable ? './templates/elements/book_readable.html' : './templates/elements/book.html', {
id,
title: bookData.title,
author: bookData.author,
@ -68,7 +69,11 @@ module.exports = function (app) {
books = '<div class="column"><div class="content">The shelf is empty. Would you like to <a href="/give">add a book</a>?</div></div>';
}
const body = '<h2 class="title">Available Books</h2><div class="bookshelf columns is-gapless is-multiline is-mobile">' + books + '</div>';
const body = '<h2 class="title is-inline">Available Books</h2>'
+ '<a id="readableToggle" class="button is-pulled-right">' + (!useReadable ? 'Make it readable' : 'Make it look cool') + '</a>'
+ '<div class="columns is-multiline' + (!useReadable ? ' is-gapless is-mobile bookshelf' : '') + '" style="margin-top:5px;">'
+ books
+ '</div>';
const html = app.templater.fill('./templates/htmlContainer.html', {
title: 'View',
resourcePath: (req.url.substr(-1) === '/' ? '../' : './'),

View File

@ -2,6 +2,7 @@ const path = require('path');
const fs = require('fs');
const express = require('express');
const helmet = require('helmet');
const cookieParser = require('cookie-parser');
const bodyParser = require('body-parser');
const fileUpload = require('express-fileupload');
@ -10,6 +11,8 @@ const settings = require('../settings.json');
module.exports = function (app) {
app.server.use(helmet());
app.server.use(cookieParser());
app.server.use(bodyParser.json()); // support json encoded bodies
app.server.use(bodyParser.urlencoded({ extended: true })); // support encoded bodies

View File

@ -164,6 +164,14 @@ content-type@~1.0.4:
resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.4.tgz#e138cc75e040c727b1966fe5e5f8c9aee256fe3b"
integrity sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==
cookie-parser@^1.4.3:
version "1.4.3"
resolved "https://registry.yarnpkg.com/cookie-parser/-/cookie-parser-1.4.3.tgz#0fe31fa19d000b95f4aadf1f53fdc2b8a203baa5"
integrity sha1-D+MfoZ0AC5X0qt8fU/3CuKIDuqU=
dependencies:
cookie "0.3.1"
cookie-signature "1.0.6"
cookie-signature@1.0.6:
version "1.0.6"
resolved "https://registry.yarnpkg.com/cookie-signature/-/cookie-signature-1.0.6.tgz#e303a882b342cc3ee8ca513a79999734dab3ae2c"