From 4b984491c35362d6a9d571a3c4776c9632abb06b Mon Sep 17 00:00:00 2001
From: Annika Backstrom <annika@sixohthree.com>
Date: Sun, 9 Apr 2017 10:46:59 -0400
Subject: [PATCH] Move mustache templates into a module

---
 jukebox/views.js                              | 24 ++++++++
 player.js                                     | 20 ++-----
 source/stylesheets/index.styl                 | 56 -------------------
 {source/templates => templates}/base.mustache |  0
 .../templates => templates}/index.mustache    |  0
 {source/templates => templates}/log.mustache  |  0
 6 files changed, 30 insertions(+), 70 deletions(-)
 create mode 100644 jukebox/views.js
 delete mode 100644 source/stylesheets/index.styl
 rename {source/templates => templates}/base.mustache (100%)
 rename {source/templates => templates}/index.mustache (100%)
 rename {source/templates => templates}/log.mustache (100%)

diff --git a/jukebox/views.js b/jukebox/views.js
new file mode 100644
index 0000000..95e21e0
--- /dev/null
+++ b/jukebox/views.js
@@ -0,0 +1,24 @@
+"use strict";
+
+const mustache = require('mustache');
+const readFileSync = require('fs').readFileSync;
+
+class View {
+    constructor(base_dir, path) {
+        this.path = base_dir + '/templates/' + path;
+        this.template = readFileSync(this.path, {encoding: 'utf8'})
+        mustache.parse(this.template)
+    }
+
+    render(vars, partials) {
+        return mustache.render(this.template, vars, partials);
+    }
+}
+
+module.exports = function(base_dir) {
+    return {
+        base: new View(base_dir, 'base.mustache')
+        , index: new View(base_dir, 'index.mustache')
+        , log: new View(base_dir, 'log.mustache')
+    };
+}
diff --git a/player.js b/player.js
index df8c7b9..cfde805 100644
--- a/player.js
+++ b/player.js
@@ -3,11 +3,10 @@ const config = require('./config.json')
 
 const glob = require('glob');
 
+const views = require('./jukebox/views')(__dirname);
+
 const express = require('express');
 const logger = require('morgan')
-const mustache = require('mustache');
-
-const readFileSync = require('fs').readFileSync;
 
 const children = require('./jukebox/children');
 
@@ -18,13 +17,6 @@ const WebSocket = require('ws');
 const WebSocketServer = WebSocket.Server;
 var wss = new WebSocketServer({server: server});
 
-var base_tpl = readFileSync(__dirname + '/source/templates/base.mustache', {encoding: 'utf8'});
-var index_tpl = readFileSync(__dirname + '/source/templates/index.mustache', {encoding: 'utf8'});
-var log_tpl = readFileSync(__dirname + '/source/templates/log.mustache', {encoding: 'utf8'});
-
-mustache.parse(index_tpl),
-mustache.parse(log_tpl);
-
 var play_log = [];
 
 children.init(config);
@@ -81,7 +73,7 @@ function appendLog(message) {
   play_log.unshift(message);
 
   var data = {
-    html: mustache.render(log_tpl, { play_log: play_log }),
+    html: views.log.render({ play_log: play_log }),
     tag: last_tag
   };
 
@@ -114,14 +106,14 @@ app.use(express.static(__dirname + '/static'))
 
 app.get('/', function (req, res, next) {
   try {
-    var html = mustache.render(base_tpl, {
+    var html = views.base.render({
       title: 'Home'
       , last_tag: last_tag
       , play_log: play_log
       , config: config
     }, {
-      content: index_tpl
-      , log: log_tpl
+      content: views.index.template
+      , log: views.log.template
     })
     res.send(html)
   } catch (e) {
diff --git a/source/stylesheets/index.styl b/source/stylesheets/index.styl
deleted file mode 100644
index a8b2505..0000000
--- a/source/stylesheets/index.styl
+++ /dev/null
@@ -1,56 +0,0 @@
-@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro:400,200,700')
-
-*
-  margin 0
-  padding 0
-  box-sizing border-box
-
-body
-  font-family 'Source Code Pro', monospace
-
-.header
-  background url('https://images.unsplash.com/photo-1451337516015-6b6e9a44a8a3?crop=entropy&fit=crop&fm=jpg&h=975&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1925')
-  background-position center
-
-  .page-title
-    font-weight 200
-    font-size 80px
-    text-align center
-    padding 20px 100px
-    text-transform uppercase
-    color #fff
-
-.nav
-  background #000
-  text-align center
-
-  li
-    display inline-block
-
-  a
-    display inline-block
-    padding 20px
-    color #fff
-    text-decoration none
-
-    &:hover
-      background-color #3AB795
-      text-decoration underline
-
-.main-content
-  margin 50px auto
-  max-width 600px
-
-  p
-    line-height 1.6
-    margin-bottom 1.7em
-
-.footer
-  margin 50px auto
-  max-width 600px
-  border-top 1px solid #444
-  padding 20px 0
-
-  p
-    color #444
-    font-size 12px
diff --git a/source/templates/base.mustache b/templates/base.mustache
similarity index 100%
rename from source/templates/base.mustache
rename to templates/base.mustache
diff --git a/source/templates/index.mustache b/templates/index.mustache
similarity index 100%
rename from source/templates/index.mustache
rename to templates/index.mustache
diff --git a/source/templates/log.mustache b/templates/log.mustache
similarity index 100%
rename from source/templates/log.mustache
rename to templates/log.mustache