WIP exif summary panel

src/website/helpers/join.js

@@ -0,0 +1,15 @@
+/*
+  Render elements of an array joined by a separator
+  Usage:
+    {{#join list ","}}
+      {{.}}
+    {{/join}}
+*/
+module.exports = function (array, separator, options) {
+  const data = require('handlebars').createFrame({})
+  const blocks = array.map((item, index) => {
+    data.index = index
+    return options.fn(item, {data: data})
+  })
+  return blocks.join(separator)
+}

src/website/template.js

@@ -27,6 +27,7 @@ exports.create = function (options) {
   // common partials
   handlebars.registerPartial('analytics', compileTemplate(path.join(DIR_TEMPLATES, 'analytics.hbs')))
   handlebars.registerPartial('thumbnail', compileTemplate(path.join(DIR_TEMPLATES, 'thumbnail.hbs')))
+  handlebars.registerPartial('exif', compileTemplate(path.join(DIR_TEMPLATES, 'exif.hbs')))
 
   // theme partials
   const partials = fs.readdirSync(DIR_THEME)

templates/exif.hbs

@@ -0,0 +1,72 @@
+<table>
+  <!-- Filename -->
+  <tr><td>
+    <i class="fa file-photo-o"></i>Filename</td>
+    <td>{{ filename }}</td>
+  </tr>
+  <!-- Date taken -->
+  <tr>
+    <td><i class="fa calendar-check-o"></i>Date taken</td>
+    <td>{{date date "DD MMM YYYY"}}</td>
+  </tr>
+  <!-- Image resolution -->
+  <tr>
+    <td><i class="fa arrows-h"></i>Resolution</td>
+    <td>{{ width }} x {{ height }}</td>
+  </tr>
+  <!-- Make -->
+  <tr>
+    <td><i class="fa camera"></i>Camera</td>
+    <td>{{ make }}</td>
+  </tr>
+  <!-- Model -->
+  <tr>
+    <td><i class="fa camera"></i>Model</td>
+    <td>{{ model }}</td>
+  </tr>
+  <!-- ISO -->
+  <tr>
+    <td><i class="fa low-vision"></i>ISO</td>
+    <td>{{ iso }}</td>
+  </tr>
+  <!-- Aperture -->
+  <tr>
+    <td><i class="fa bullseye"></i>Aperture</td>
+    <td>{{ aperture }}</td>
+  </tr>
+  <!-- Exposure -->
+  <tr>
+    <td><i class="fa clock"></i>Exposure</td>
+    <td>{{ exposure }}</td>
+  </tr>
+  <!-- Flash -->
+  <tr>
+    <td><i class="fa flash"></i>Flash</td>
+    <td>{{ flash }}</td>
+  </tr>
+  <!-- GPS coordinates -->
+  <tr>
+    <td><i class="fa map-o"></i>GPS</td>
+    <td>{{ lat }}, {{ long }}</td>
+  </tr>
+  <!-- Title -->
+  <tr>
+    <td><i class="fa header"></i>Title</td>
+    <td>{{ caption }}</td>
+  </tr>
+  <!-- Description -->
+  <tr>
+    <td><i class="fa align-left"></i>Description</td>
+    <td>{{ description }}</td>
+  </tr>
+  <!-- Keywords -->
+  <tr>
+    <td><i class="fa list-ul"></i>Keywords</td>
+    <td>{{#join keywords ","}}{{.}}{{/join}}</td>
+  </tr>
+  <!-- Star rating -->
+  <tr>
+    <td><i class="fa star-o"></i>Rating</td>
+    <td>{{#times rating}}<i class="fa star"></i>{{/times}}</td>
+  </tr>
+</table>

templates/themes/classic/theme.hbs

@@ -39,6 +39,7 @@
 <ul id="media">
   {{#each album.files}}
     {{> thumbnail}}
+    {{> exif meta }}
   {{/each}}
 </ul>
 

test/website/helpers/join.spec.js

@@ -0,0 +1,29 @@
+const handlebars = require('handlebars')
+const should = require('should/as-function')
+const join = require('../../../src/website/helpers/join')
+
+describe('Handlebars helpers: join', () => {
+  handlebars.registerHelper('join', join)
+
+  it('joins items with the separator', () => {
+    const template = handlebars.compile(`{{#join list ","}}{{.}}{{/join}}`)
+    const res = template({list: [1, 2, 3]})
+    should(res).eql('1,2,3')
+  })
+
+  it('renders the child block for each item', () => {
+    const template = handlebars.compile(`{{#join list ","}}{{value}}{{/join}}`)
+    const res = template({list: [
+      { value: 1 },
+      { value: 2 },
+      { value: 3 }
+    ]})
+    should(res).eql('1,2,3')
+  })
+
+  it('passes the @index to the block', () => {
+    const template = handlebars.compile(`{{#join list ","}}{{@index}}{{/join}}`)
+    const res = template({list: [1, 2, 3]})
+    should(res).eql('0,1,2')
+  })
+})