Skip to content

Instantly share code, notes, and snippets.

@elfacht
Created January 5, 2022 09:53
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save elfacht/1906dd757ab9bdee58212f41c0eaa0bf to your computer and use it in GitHub Desktop.
Save elfacht/1906dd757ab9bdee58212f41c0eaa0bf to your computer and use it in GitHub Desktop.
Handlebars Helper
/**
* Returns the base path of the environment
*
* @type {Function}
* @return {String}
*/
var path = require('path');
module.exports = function (context) {
return path.dirname(path.relative(context.data.file.history.toString(), context.data.file.base.toString())) + '/';
};
/**
* Return all of the items in the collection before the specified count.
*
* @see https://stackoverflow.com/a/10377854
*/
module.exports = function (array, max, options) {
if (!array || array.length == 0)
return options.inverse(this);
var result = [ ];
for(var i = 0; i < max && i < array.length; ++i)
result.push(options.fn(array[i]));
return result.join('');
};
/**
* The {{#exists}} helper checks if a variable is defined.
*
* @see http://stackoverflow.com/questions/17095813/handlebars-if-and-numeric-zeroes
*/
module.exports = function (variable, options) {
if (typeof variable !== 'undefined') {
return options.fn(this);
} else {
return options.inverse(this);
}
};
/**
* Adding operator conditionals to handlebars
*
* @example {{#ifCond 'foo' '==' 'bar'}} … {{/ifCond}}
*
* @see http://stackoverflow.com/questions/8853396/logical-operator-in-a-handlebars-js-if-conditional
*
* @param {String} v1 [value 1]
* @param {String} operator [the operator]
* @param {String} v2 [value 2]
* @param {String} options [options]
* @return {Function}
*/
module.exports = function (v1, operator, v2, options) {
switch (operator) {
case '==':
return (v1 == v2) ? options.fn(this) : options.inverse(this);
case '!=':
return (v1 != v2) ? options.fn(this) : options.inverse(this);
case '===':
return (v1 === v2) ? options.fn(this) : options.inverse(this);
case '<':
return (v1 < v2) ? options.fn(this) : options.inverse(this);
case '<=':
return (v1 <= v2) ? options.fn(this) : options.inverse(this);
case '>':
return (v1 > v2) ? options.fn(this) : options.inverse(this);
case '>=':
return (v1 >= v2) ? options.fn(this) : options.inverse(this);
case '&&':
return (v1 && v2) ? options.fn(this) : options.inverse(this);
case '||':
return (v1 || v2) ? options.fn(this) : options.inverse(this);
default:
return options.inverse(this);
}
};
/**
* Value is even
*
* @example {{#ifEven @index}}
*
* @param {Number} value – required
* @param {Object} options – optional
*
* @author Martin Szymanski
*/
module.exports = function(value, options) {
if ((value % 2) === 0) {
return options.fn(this);
} else {
return options.inverse(this);
}
}
/**
* Math operators for handlebars
*
* @example {{math 1 '+' 2}}
*
* @param {Number} lvalue [value 1]
* @param {String} operator [description]
* @param {Number} rvalue [value 2]
* @param {String} options [options]
* @return {Number} [result]
*/
module.exports = function(lvalue, operator, rvalue, options) {
lvalue = parseFloat(lvalue);
rvalue = parseFloat(rvalue);
return {
"+": lvalue + rvalue,
"-": lvalue - rvalue,
"*": lvalue * rvalue,
"/": lvalue / rvalue,
"%": lvalue % rvalue
}[operator];
}
/**
* Defined media queries (Foundation settings) for responsive images
*
* @see http://stackoverflow.com/a/25658716
*
* @example {{mediaQueries 'medium'}}
*
* @param {String} size [size]
* @return {String} [string]
*/
module.exports = function (size) {
var out;
if (size === 'medium') {
out = '(min-width: 520px)';
}
if (size === 'large') {
out = '(min-width: 769px)';
}
return out;
}
/**
* picturePadding
*
* calculate aspect ratio of images
* by height/width * 100 = %
*
* @see http://localhost:3000/styleguide/section-general.html#kssref-general-images
*
* @see https://css-tricks.com/aspect-ratio-boxes/
* @see https://voormedia.com/blog/2012/11/responsive-background-images-with-fixed-or-fluid-aspect-ratios
*
* @example {{picturePadding 300 400}}
*
* @param {Number} height [image height]
* @param {Number} width [image width]
* @return {String} [inline CSS property]
*/
module.exports = function (height, width) {
var out = (height / width) * 100;
var string = 'padding-top: ' + out + '%;'
return string;
}
/**
* Image placeholder path
*
* @type {String}
*/
var path = require('path');
module.exports = function (context) {
return path.dirname(path.relative(context.data.file.history.toString(), context.data.file.base.toString())) + '/assets/img/';
};
/**
* Helper to display handlebars variables without rendering.
*
* @see https://stackoverflow.com/a/39414465
*
* @param {String} options
* @return {String}
*/
module.exports = function (options) {
return options.fn();
}
/**
* Default value for a Handlebars` template placeholder
*
* @see http://stackoverflow.com/a/25658716
*
* @param {String} value
* @param {String} safeValue
* @return {String}
*/
module.exports = function (value, safeValue) {
var out = value || safeValue;
return new Handlebars.SafeString(out);
}
/**
* Set date of SVG file by md5 hashing
*
* @type {String}
*/
var md5File = require('md5-file'),
path = require('path')
;
module.exports = function (context) {
return md5File.sync(path.join(context.data.file.base.toString(), '../assets/svg/svg.html'));
};
/**
* {{tabindex}} - auto tabindex
*/
var tabindex = [];
module.exports = function (context) {
var inode = context.data.file.stat.ino;
if (!tabindex[inode]) {
tabindex[inode] = 1;
}
return tabindex[inode]++;
};
/**
* Loop through any given value (number)
*
* @example {{#times 50}} {{this}} {{/times}}
*
* @type {Number}
*/
'use strict';
module.exports = function(n, block) {
var accum = '';
for(var i = 0; i < n; ++i)
accum += block.fn(i);
return accum;
};
/**
* Define vars in templates
*
* @example {{var 'var_name' 'value'}}
* {{var_name}}
*
* @param {String} name
* @param {String} value
* @return {String}
*/
'use strict';
module.exports = function(name, value) {
var path, key, current = this;
try {
path = name.split('.');
key = path.pop();
path.forEach(function (part) {
if ("undefined" === typeof current[part]) {
current[part] = {};
}
current = current[part];
});
current[key] = value;
} catch (e) {}
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment