Recipe timings

_includes/timings.html

@@ -0,0 +1,28 @@
+{% assign thisRecipe = include.recipe %}
+<div class="center ml2 mr2">
+    {% if thisRecipe.preptime %}
+  <div class="inline-block xs-m1 sm-m2">
+    <svg class="gray align-middle" xmlns="http://www.w3.org/2000/svg" width="1.5rem" height="1.5rem" viewBox="0 0 512 512" fill="currentColor"><circle cx="256" cy="256" r="256"/><rect x="246.21" y="52.09" width="19.58" height="214.26" rx="9.79" fill="#fff"/><rect x="290.06" y="228.55" width="19.58" height="143.63" rx="9.79" transform="translate(724.26 300.72) rotate(135)" fill="#fff"/></svg>
+    <span class="blue caps align-middle">Prep</span>
+    <span class="nowrap align-middle" id="prepTime_{{ thisRecipe.id }}" data-iso8601="{{ thisRecipe.preptime | upcase }}"></span>
+  </div>
+  <meta itemprop="prepTime" content="{{ thisRecipe.preptime | upcase }}">
+  {% endif %}
+  {% if thisRecipe.cooktime %}
+  <div class="inline-block xs-m1 sm-m2">
+    <svg class="gray align-middle" xmlns="http://www.w3.org/2000/svg" width="1.5rem" height="1.5rem" viewBox="0 0 512 512" fill="currentColor"><circle cx="256" cy="256" r="256"/><rect x="246.21" y="52.09" width="19.58" height="214.26" rx="9.79" fill="#fff"/><rect x="290.06" y="228.55" width="19.58" height="143.63" rx="9.79" transform="translate(724.26 300.72) rotate(135)" fill="#fff"/></svg>
+    <span class="h4 blue caps align-middle">Cook</span>
+    <span class="nowrap align-middle" id="cookTime_{{ thisRecipe.id }}" data-iso8601="{{ thisRecipe.cooktime | upcase }}"></span>
+  </div>
+  <meta itemprop="cookTime" content="{{ thisRecipe.cooktime | upcase }}">
+  {% endif %}
+  {% if thisRecipe.totaltime %}
+<div class="inline-block xs-m1 sm-m2">
+  <svg class="gray align-middle" xmlns="http://www.w3.org/2000/svg" width="1.5rem" height="1.5rem" viewBox="0 0 512 512" fill="currentColor"><circle cx="256" cy="256" r="256"/><rect x="246.21" y="52.09" width="19.58" height="214.26" rx="9.79" fill="#fff"/><rect x="290.06" y="228.55" width="19.58" height="143.63" rx="9.79" transform="translate(724.26 300.72) rotate(135)" fill="#fff"/></svg>
+  <span class="blue caps align-middle">Total</span>
+  <span class="nowrap align-middle" id="totalTime_{{ thisRecipe.id }}" data-iso8601="{{ thisRecipe.totaltime | upcase }}"></span>
+</div>
+<meta itemprop="totalTime" content="{{ thisRecipe.totaltime | upcase }}">
+{% endif %}
+</div>
+{% assign thisRecipe = nil %}

_layouts/recipe.html

@@ -22,6 +22,7 @@
 <!-- call up the main recipe title and content -->
   <header class="post-header">
     <h1 class="post-title center m1 sm-mt3" itemprop="name">{{ page.title }}</h1>
+    {% include timings.html recipe=page %}
   </header>
 
   <div class="px2 mt3 clearfix">
@@ -100,6 +101,8 @@ <h4 class="blue center">{{recipe.title}}</h4>
         {% endif %}
       {% endfor %}
 
+      {% include timings.html recipe=recipe %}
+
       <h4 class="blue regular xs-center">{{ site.translation[site.language].ingredients }}</h4>
         <ul class="ingredients" itemprop="ingredients">
         {% for item in recipe.ingredients %}
@@ -157,3 +160,4 @@ <h4 class="blue regular xs-center">{{ site.translation[site.language].directions
   });
 
 </script>
+<script src="/js/duration.js" charset="utf-8"></script>

css/main.scss

@@ -51,3 +51,4 @@ a:hover .image{opacity:0.2;}
 .border-1 { border-width: 1px; }
 .border-1:active { border-width: 1px; }
 .capitalize { text-transform: capitalize; }
+.align-middle { vertical-align: middle; } // imported from basscss 8

js/duration.js

@@ -0,0 +1,52 @@
+let en_GB = {
+    map: {Y: 'yr', B: 'mth', W: 'wk', D: 'day', H: 'hr', M: 'min', S: 'sec'},
+    counted: function(i, c){
+      res = this.map[i];
+      if(c > 1) { res += 's' }
+      return res;
+    }
+  };
+
+function Duration(el) {
+  this.element = document.getElementById(el);
+  this.lang = en_GB;
+  this.result = { Y: 0, B: 0, W: 0, D: 0, H: 0, M: 0, S: 0 };
+  this._rex = /(\d+(?:\.\d+)?)([YBWDHMS])/ig;
+  this.parts = function () {
+    let iso8601 = this.element.dataset.iso8601;
+    let parts = iso8601.substr(1).replace(/M(.*?)T/, 'B$1');
+    parts.match(this._rex).forEach((p) => {
+      let scale = p.substring(0, p.length - 1);
+      let unit = p.substring(p.length - 1).toUpperCase();
+      this.result[unit] = Number(scale);
+    });
+    return this.result;
+  };
+  this.format = function () {
+    const nonZero = (v) => v > 0;
+    let words = [];
+    let parts = this.parts();
+    for (var p in parts) {
+      if (parts.hasOwnProperty(p) && nonZero(parts[p])) {
+        words.push(`${parts[p]} ${this.lang.counted(p, parts[p])}`);
+      }
+    }
+    return words.join(' ');
+  };
+  this.update = function () {
+    this.element.innerHTML = this.format();
+  };
+}
+
+/*
+  Update the page either via object calls passing in the dom ID:
+    new Duration('prepTime').update();
+    new Duration('cookTime').update();
+  or use jquery to find them:
+    $('*[data-iso8601]').each(function (){
+      new Duration(this.id).update();
+    });
+*/
+$('*[data-iso8601]').each(function (){
+  new Duration(this.id).update();
+});