Merge pull request #23 from cloudfour/feat-dummyImgSrc

Add dummyImgSrc helper

Author: tylersticka

lib/dummyImgSrc.js

@@ -0,0 +1,79 @@
+'use strict';
+
+var R = require('ramda');
+var Handlebars = require('handlebars');
+var tinycolor = require('tinycolor2');
+
+var source = '<svg xmlns="http://www.w3.org/2000/svg" width="{{width}}" height="{{height}}" viewBox="0 0 {{width}} {{height}}">' +
+  '<rect fill="{{bg}}" width="100%" height="100%"/>' +
+  '<text fill="{{fg}}" font-family="{{font}}" font-size="{{size}}" dy="{{dy}}" font-weight="{{weight}}" x="50%" y="50%" text-anchor="middle">{{{text}}}</text>' +
+'</svg>';
+
+var template = Handlebars.compile(source);
+
+function encode (svgString) {
+  // Thanks to: filamentgroup/directory-encoder
+  return 'data:image/svg+xml;charset=US-ASCII,' + encodeURIComponent(svgString
+    // strip newlines and tabs
+    .replace(/[\n\r]/gmi, '')
+    .replace(/\t/gmi, ' ')
+    // strip comments
+    .replace(/<\!\-\-(.*(?=\-\->))\-\->/gmi, '')
+    // replace
+    .replace(/'/gmi, '\\i'))
+    // encode brackets
+    .replace(/\(/g, '%28').replace(/\)/g, '%29');
+}
+
+function create (width, height, options) {
+  options = R.merge({
+    width: width,
+    height: height,
+    text: width + ' &#215; ' + height,
+    bg: '#ddd',
+    size: Math.floor(height * 0.2),
+    dy: Math.floor(height * 0.2 * 0.4),
+    weight: 'bold',
+    font: 'sans-serif'
+  }, options || {});
+
+  if (R.isNil(options.fg)) {
+    options.fg = (function (bg) {
+      var color = tinycolor(bg);
+      var method = color.isDark() ? 'lighten' : 'darken';
+      return color[method](50).toString();
+    })(options.bg);
+  }
+
+  return template(options);
+}
+
+/**
+ * Returns an escaped data URI for a placeholder image that can be used as the
+ * src attribute of an img element.
+ *
+ * @since v0.3.0
+ * @param {Number} width
+ * @param {Number} height
+ * @param {Object} options
+ * @return {String}
+ * @example
+ *
+ *   <img src="{{placeholder 150 50}}">
+ *
+ *   <img src="{{placeholder 150 50 text="foo"}}">
+ *
+ *   <img src="{{placeholder 150 50 bg="#000"}}">
+ *
+ *   <img src="{{placeholder 150 50 fg="pink"}}">
+ */
+
+module.exports = function dummyImgSrc (width, height, options) {
+  if (!R.is(Number, width) || !R.is(Number, height)) {
+    throw new Error('The "dummyImgSrc" helper must be passed two numeric dimensions.');
+  }
+
+  var result = encode(create(width, height, options.hash));
+
+  return new Handlebars.SafeString(result);
+};

package.json

@@ -1,6 +1,6 @@
 {
   "name": "core-hbs-helpers",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Handlebars helpers that we usually need.",
   "main": "index.js",
   "files": [
@@ -30,7 +30,8 @@
     "handlebars": "^4.0.3",
     "moment": "^2.10.6",
     "ramda": "^0.18.0",
-    "require-dir": "^0.3.0"
+    "require-dir": "^0.3.0",
+    "tinycolor2": "^1.3.0"
   },
   "devDependencies": {
     "html-entities": "^1.2.0",

test/dummyImgSrc.spec.js

@@ -0,0 +1,46 @@
+'use strict';
+
+var dummyImgSrc = require('../').dummyImgSrc;
+var tape = require('tape');
+var Handlebars = require('handlebars');
+
+Handlebars.registerHelper(dummyImgSrc.name, dummyImgSrc);
+
+tape('dummyImgSrc', function (test) {
+  var template;
+  var expected;
+  var actual;
+
+  test.plan(5);
+
+  template = Handlebars.compile('{{dummyImgSrc 48 48}}');
+  expected = 'data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2248%22%20height%3D%2248%22%20viewBox%3D%220%200%2048%2048%22%3E%3Crect%20fill%3D%22%23ddd%22%20width%3D%22100%25%22%20height%3D%22100%25%22%2F%3E%3Ctext%20fill%3D%22%235d5d5d%22%20font-family%3D%22sans-serif%22%20font-size%3D%229%22%20dy%3D%223%22%20font-weight%3D%22bold%22%20x%3D%2250%25%22%20y%3D%2250%25%22%20text-anchor%3D%22middle%22%3E48%20%26%23215%3B%2048%3C%2Ftext%3E%3C%2Fsvg%3E';
+  actual = template();
+  test.equal(actual, expected, 'Works with width and height');
+
+  template = Handlebars.compile('{{dummyImgSrc 48 48 text="foo" bg="#333" fg="#fff" font="serif"}}');
+  expected = 'data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2248%22%20height%3D%2248%22%20viewBox%3D%220%200%2048%2048%22%3E%3Crect%20fill%3D%22%23333%22%20width%3D%22100%25%22%20height%3D%22100%25%22%2F%3E%3Ctext%20fill%3D%22%23fff%22%20font-family%3D%22serif%22%20font-size%3D%229%22%20dy%3D%223%22%20font-weight%3D%22bold%22%20x%3D%2250%25%22%20y%3D%2250%25%22%20text-anchor%3D%22middle%22%3Efoo%3C%2Ftext%3E%3C%2Fsvg%3E';
+  actual = template();
+  test.equal(actual, expected, 'Works with options');
+
+  template = Handlebars.compile('{{dummyImgSrc}}');
+  test.throws(
+    template,
+    /two numeric dimensions\.$/,
+    'Errors when passed no dimensions'
+  );
+
+  template = Handlebars.compile('{{dummyImgSrc 48}}');
+  test.throws(
+    template,
+    /two numeric dimensions\.$/,
+    'Errors when passed only one dimension'
+  );
+
+  template = Handlebars.compile('{{dummyImgSrc "foo" "bar"}}');
+  test.throws(
+    template,
+    /two numeric dimensions\.$/,
+    'Errors when passed non-numeric dimensions'
+  );
+});