Browse Source

Add book columns and simple modals

activitypub
Robbie Antenesse 3 years ago
parent
commit
c0b154e1f6
  1. 7
      public/js/little-library.js
  2. 31
      server.js
  3. 7
      templates/elements/book.html
  4. 2
      templates/elements/modal.html
  5. 3
      templates/pages/booksList.html

7
public/js/little-library.js

@ -15,5 +15,10 @@ $(document).ready(function() {
fileName = fileName.substr(lastIndexOfSlash + 1);
}
$('#bookFileName').text(fileName ? fileName : 'None Selected');
})
});
$('.book').click(function() {
var modal = $(this).data('modal');
$('#' + modal).addClass('is-active');
});
});

31
server.js

@ -19,6 +19,8 @@ function Server () {
this.fileLocation = path.resolve(settings.fileLocation);
this.historyLocation = path.resolve(settings.historyLocation);
this.templateCache = {};
this.takenBooks = [];
this.server.use(helmet());
@ -42,7 +44,20 @@ function Server () {
this.server.use('/css', express.static(path.join(__dirname, './public/css/')));
this.server.get('/', (req, res) => {
const body = this.fillTemplate('./templates/pages/uploadForm.html');
const files = fs.readdirSync(this.fileLocation).filter(fileName => fileName.includes('.json'));
const books = files.map(fileName => {
const bookData = JSON.parse(fs.readFileSync(path.resolve(this.fileLocation, fileName), 'utf8'));
const id = fileName.replace('.json', '');
const content = '<div class="box">' + bookData.summary + '</div>';
const modal = this.fillTemplate('./templates/elements/modal.html', { content, id });
return this.fillTemplate('./templates/elements/book.html', {
id,
title: bookData.title,
author: bookData.author,
modal,
})
}).join('');
const body = this.fillTemplate('./templates/pages/booksList.html', { books });
const html = this.fillTemplate('./templates/htmlContainer.html', { body });
if (html) {
res.send(html);
@ -65,6 +80,7 @@ function Server () {
message: 'Thank you for your contribution!'
});
const modal = this.fillTemplate('./templates/elements/modal.html', {
isActive: 'is-active',
content: messageBox,
});
const body = this.fillTemplate('./templates/pages/uploadForm.html');
@ -77,6 +93,7 @@ function Server () {
message: err,
});
const modal = this.fillTemplate('./templates/elements/modal.html', {
isActive: 'is-active',
content: messageBox,
});
const body = this.fillTemplate('./templates/pages/uploadForm.html');
@ -125,9 +142,17 @@ function Server () {
}
Server.prototype.fillTemplate = function (file, templateVars = {}) {
const page = path.join(__dirname, file);
const data = fs.readFileSync(page, 'utf8');
let data;
if (this.templateCache.hasOwnProperty(file)) {
data = this.templateCache[file];
} else {
data = fs.readFileSync(path.join(__dirname, file), 'utf8');
}
if (data) {
if (!this.templateCache.hasOwnProperty(file)) {
this.templateCache[file] = data;
}
let filledTemplate = data.replace(/\{\{allowedFormats\}\}/g, settings.allowedFormats.join(','))
.replace(/\{\{maxFileSize\}\}/g, (settings.maxFileSize > 0 ? settings.maxFileSize + 'MB' : 'no'));

7
templates/elements/book.html

@ -0,0 +1,7 @@
<div class="column is-one-quarter">
<div class="box book has-text-centered" data-modal="{{id}}">
<h2 class="title">{{title}}</h2>
<h4 class="subtitle">{{author}}</h4>
</div>
{{modal}}
</div>

2
templates/elements/modal.html

@ -1,4 +1,4 @@
<div class="modal is-active">
<div class="modal {{isActive}}" id="{{id}}">
<div class="modal-background"></div>
<div class="modal-content">
{{content}}

3
templates/pages/booksList.html

@ -0,0 +1,3 @@
<div class="columns is-multiline">
{{books}}
</div>
Loading…
Cancel
Save