Let templates handle their own dependencies
This commit is contained in:
parent
4b984491c3
commit
8f72c4ecf9
@ -3,22 +3,60 @@
|
|||||||
const mustache = require('mustache');
|
const mustache = require('mustache');
|
||||||
const readFileSync = require('fs').readFileSync;
|
const readFileSync = require('fs').readFileSync;
|
||||||
|
|
||||||
|
var template_dir = undefined;
|
||||||
|
|
||||||
class View {
|
class View {
|
||||||
constructor(base_dir, path) {
|
constructor() {
|
||||||
this.path = base_dir + '/templates/' + path;
|
this.template = readFileSync(template_dir + this.path(), {encoding: 'utf8'})
|
||||||
this.template = readFileSync(this.path, {encoding: 'utf8'})
|
|
||||||
mustache.parse(this.template)
|
mustache.parse(this.template)
|
||||||
}
|
}
|
||||||
|
|
||||||
render(vars, partials) {
|
render(vars) {
|
||||||
return mustache.render(this.template, vars, partials);
|
return mustache.render(this.template, vars, this.partials());
|
||||||
|
}
|
||||||
|
|
||||||
|
path() {
|
||||||
|
throw 'Subclasses must define a template path';
|
||||||
|
}
|
||||||
|
|
||||||
|
partials() {
|
||||||
|
return {};
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
module.exports = function(base_dir) {
|
class BaseView extends View {
|
||||||
return {
|
path() {
|
||||||
base: new View(base_dir, 'base.mustache')
|
return 'base.mustache';
|
||||||
, index: new View(base_dir, 'index.mustache')
|
}
|
||||||
, log: new View(base_dir, 'log.mustache')
|
}
|
||||||
};
|
|
||||||
|
class IndexView extends View {
|
||||||
|
path() {
|
||||||
|
return 'index.mustache';
|
||||||
|
}
|
||||||
|
|
||||||
|
partials() {
|
||||||
|
console.log(views.log);
|
||||||
|
return {
|
||||||
|
log: views.log.template
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class LogView extends View {
|
||||||
|
path() {
|
||||||
|
return 'log.mustache';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const views = {};
|
||||||
|
|
||||||
|
module.exports = function(tpl_dir) {
|
||||||
|
template_dir = tpl_dir;
|
||||||
|
|
||||||
|
views.base = new BaseView();
|
||||||
|
views.index = new IndexView();
|
||||||
|
views.log = new LogView();
|
||||||
|
|
||||||
|
return views;
|
||||||
}
|
}
|
||||||
|
@ -1,8 +1,8 @@
|
|||||||
{
|
{
|
||||||
"ext": "js mustache css",
|
"ext": "js mustache css",
|
||||||
"watch": [
|
"watch": [
|
||||||
"player.js",
|
"player.js"
|
||||||
"source",
|
, "jukebox"
|
||||||
"jukebox"
|
, "templates"
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
17
player.js
17
player.js
@ -1,9 +1,10 @@
|
|||||||
|
"use strict";
|
||||||
|
|
||||||
const config = require('./config.json')
|
const config = require('./config.json')
|
||||||
|
|
||||||
const glob = require('glob');
|
const glob = require('glob');
|
||||||
|
|
||||||
const views = require('./jukebox/views')(__dirname);
|
const views = require('./jukebox/views')(__dirname + '/templates/');
|
||||||
|
|
||||||
const express = require('express');
|
const express = require('express');
|
||||||
const logger = require('morgan')
|
const logger = require('morgan')
|
||||||
@ -106,15 +107,17 @@ app.use(express.static(__dirname + '/static'))
|
|||||||
|
|
||||||
app.get('/', function (req, res, next) {
|
app.get('/', function (req, res, next) {
|
||||||
try {
|
try {
|
||||||
|
var index = views.index.render({
|
||||||
|
last_tag: last_tag
|
||||||
|
, config: config
|
||||||
|
, play_log: play_log
|
||||||
|
});
|
||||||
|
|
||||||
var html = views.base.render({
|
var html = views.base.render({
|
||||||
title: 'Home'
|
title: 'Home'
|
||||||
, last_tag: last_tag
|
, content: index
|
||||||
, play_log: play_log
|
|
||||||
, config: config
|
|
||||||
}, {
|
|
||||||
content: views.index.template
|
|
||||||
, log: views.log.template
|
|
||||||
})
|
})
|
||||||
|
|
||||||
res.send(html)
|
res.send(html)
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
next(e)
|
next(e)
|
||||||
|
@ -11,7 +11,7 @@
|
|||||||
<h1 class=page-title>jukebox.stop.wtf</h1>
|
<h1 class=page-title>jukebox.stop.wtf</h1>
|
||||||
</div>
|
</div>
|
||||||
<div class="main-content">
|
<div class="main-content">
|
||||||
{{> content}}
|
{{{ content }}}
|
||||||
</div>
|
</div>
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
<p>made with love by annika</p>
|
<p>made with love by annika</p>
|
||||||
|
Loading…
Reference in New Issue
Block a user