Add a button to toggle styled bookshelf

package.json

@@ -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",

public/js/little-library.js

@@ -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;
@@ -64,4 +70,9 @@ $(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() : ''
+}

routes/get_home.js

@@ -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) === '/' ? '../' : './'),

routes/middleware.js

@@ -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');
 
@@ -9,6 +10,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

yarn.lock

@@ -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"