Handlebars helpers used for various Cloud Four projects.
Output a block (or its inverse) based on whether or not all of the supplied arguments are truthy.
Name | Type | Description | |
---|---|---|---|
values | One or more values to test against. |
||
options |
Object
|
var a = true;
var b = 1;
var c = false;
{{#all a b}}✔︎{{else}}✘{{/all}} //=> ✔︎
{{#all b c}}✔︎{{else}}✘{{/all}} //=> ✘
{{#if (all a b)}}
Also works inline!
{{/if}}
String
Boolean
Output a block (or its inverse) based on whether or not both of the supplied arguments are truthy.
Name | Type | Description | |
---|---|---|---|
left | |||
right | |||
options |
Object
|
var a = true;
var b = 1;
var c = false;
{{#and a b}}✔︎{{else}}✘{{/and}} //=> ✔︎
{{#and b c}}✔︎{{else}}✘{{/and}} //=> ✘
String
Output a block (or its inverse) based on whether or not any of the supplied arguments are truthy.
Name | Type | Description | |
---|---|---|---|
values | One or more values to test against. |
||
options |
Object
|
var a = true;
var b = 0;
var c = false;
{{#any a b}}✔︎{{else}}✘{{/all}} //=> ✔︎
{{#any b c}}✔︎{{else}}✘{{/all}} //=> ✘
{{#if (any a b)}}
Also works inline!
{{/if}}
String
Boolean
Slices a list based on a center-point and a maximum amount of "padding" before and after. Useful for pagination.
Supports an optional offset
hash option in case your center
value isn't matching up with your array indexes.
Name | Type | Description | |
---|---|---|---|
items |
Array
|
|
|
center |
Number
|
|
|
padding |
Number
|
|
|
block |
Object
|
<ul>
{{#around pages 5 2 offset=-1}}
<li><a href="/page/{{num}}">Page {{num}}</a></li>
{{/around}}
</ul>
{{! Output: }}
<ul>
<li><a href="/page/3">Page 3</a></li>
<li><a href="/page/4">Page 4</a></li>
<li><a href="/page/5">Page 5</a></li>
<li><a href="/page/6">Page 6</a></li>
<li><a href="/page/7">Page 7</a></li>
</ul>
String
Average an array of numeric values.
Name | Type | Description | |
---|---|---|---|
arr |
Array
|
var numbers = [1, 2, 3];
var products = [{rating: 1}, {rating: 2}, {rating: 3}];
{{average ratings}} //=> 2
{{average products key="rating"}} //=> 2
Number
Returns the average of all values.
Capitalize the first letter of a String.
Name | Type | Description | |
---|---|---|---|
str |
String
|
|
String
Capitalize each word in a String. Works with punctuation and international characters.
Name | Type | Description | |
---|---|---|---|
str |
String
|
|
String
Compare two values using logical operators.
Name | Type | Description | |
---|---|---|---|
left | |||
operator |
String
|
||
right | |||
options |
Object
|
String
Boolean
formatted html if block, true/false if inline
Concatenate items into a single string.
Name | Type | Description | |
---|---|---|---|
items |
{{concat "foo" "bar"}} //=> "foobar"
string
Output the first provided value that exists, or fallback to a default if none do.
Name | Type | Description | |
---|---|---|---|
value |
var doesExist = 'Hello';
{{defaultTo doesExist "Goodbye"}} // => "Hello"
{{defaultTo doesNotExist "Goodbye"}} // => "Goodbye"
{{defaultTo doesNotExist}} // => ""
{{defaultTo doesNotExist doesExist "Goodbye"}} // => "Hello"
String
Repeat a block a given amount of times.
{{#iterate 10}}
<li>Index: {{@index}} Count: {{@count}}</li>
{{/iterate}}
Void
Perform mathematical operations on one or two values.
Name | Type | Description | |
---|---|---|---|
left | |||
operator |
String
|
||
right | |||
options |
Object
|
Number
Output a block randomly (50% chance of being output). Useful for prototyping multiple content scenarios, outputting one or two "dummy" blocks of markup.
{{#maybe}}
Heads!
{{else}}
Tails!
{{/maybe}}
Void
Output a block (or its inverse) based on whether or not either of the supplied arguments are truthy.
Name | Type | Description | |
---|---|---|---|
left | |||
right | |||
options |
Object
|
var a = true;
var b = 1;
var c = false;
var d = 0;
{{#or a c}}✔︎{{else}}✘{{/or}} //=> ✔︎
{{#or b c}}✔︎{{else}}✘{{/or}} //=> ✔︎
{{#or c d}}✔︎{{else}}✘{{/or}} //=> ✘
String
Generate a random integer or any other type of random content supported by Chance.js.
Name | Type | Description | |
---|---|---|---|
method=integer |
String
|
|
Optional |
options |
Object
|
||
options.hash |
Object
|
|
{{random}} //=> 1839473434
{{random min=5 max=10}} //=> 7
{{random "state"}} //=> WA
{{random "dollar" max=20}} //=> $17.42
Return only one random item. If only one argument is provided and it is an array, it will return a random item from that array. Otherwise it will return one of the arguments.
Name | Type | Description | |
---|---|---|---|
items |
var beatles = ["John", "Paul", "George", "Ringo"];
{{randomItem beatles}} //=> "George"
{{randomItem "John" "Paul" "George" "Ringo"}} //=> "Ringo"
One random item.
Replace all occurrences of a string in another string Can also be used on numbers, though they'll be treated as strings. Case sensitive
Name | Type | Description | |
---|---|---|---|
input |
Number
String
|
||
find |
Number
String
|
||
replace |
Number
String
|
{{replaceAll "9:00" ":00" ""}} //=> "9"
{{replaceAll "excellent" "e" ""}} //=> xcllnt
{{replaceAll "She sells sea shells by the seashore" "sh" "barb"}} //=> "She sells sea barbells by the seabarbore"
{{replaceAll "30 bucks" 30, 1000000000}} //=> "1000000000 bucks"
String
Splits a string or number by a separator string or number Returns an array that can be iterated over
Name | Type | Description | |
---|---|---|---|
input |
Number
String
|
||
separator |
Number
String
|
{{split "hello" ""}} //=> ["h", "e", "l", "l", "o"]
{{split "hello world" " "}} //=> ["hello", "world"]
{{split "lions, tigers, and bears" ", "}} //=> ["lions", "tigers", "and bears"]
{{split 2020 2}} //=> ["", "0", "0"]
{{split 1.35 "."}} //=> ["1", "35"]
Array
Returns the contents of the SVG at the specified path, with any attributes passed along via the hash included on the root element.
Inspired by https://github.com/aredridel/npm-handlebars-helper-svg
Name | Type | Description | |
---|---|---|---|
name |
String
|
|
|
options |
Object
|
{{svg "foo/test.svg"}}
{{svg "foo/test"}}
{{svg "foo/test" class="foo" width="24" height="24"}}
{{#svg "foo/test" aria-labelledby="foo-title"}}
<title id="foo-title">Hello world</title>
{{/svg}}
String
Returns a new instance of the svg helper with settings applied. Useful for defining a base path for the project so you don't have to specify it for every usage of the helper.
Name | Type | Description | |
---|---|---|---|
settings |
Object
|
Optional | |
settings.basePath |
String
|
|
Optional |
settings.extName |
String
|
|
Optional |
settings.omitAttr |
Array
|
|
Optional |
var svgHelper = require('path/to/module').create({
basePath: './src/assets/images'
});
Void
Format a date or time using Moment.js.
Defaults to UTC mode since most use-cases in markup-land do not take timezones into account, which results in some counter-intuitive output and inconsistent behavior.
Name | Type | Description | |
---|---|---|---|
context |
Date
String
Number
Array
Object
|
Optional |
{{timestamp "2015-10-21" format="MMM Do, YYYY"}} //=> "Oct 21st, 2015"
{{timestamp "Oct 21 15" inputFormat="MMM DD YY" format="YYYY-MM-DD"}} //=> "2015-10-21"
{{timestamp "2000-01-01" format="YYYY" utc=false}} //=> "1999"
String
Format number to two fixed decimal points (like a price).
Name | Type | Description | |
---|---|---|---|
num |
Number
String
|
{{toFixed 1}} //=> 1.00
String
Format a decimal as a fractional HTML entity if possible.
Name | Type | Description | |
---|---|---|---|
value |
Number
|
{{toFraction 1.25}} //=> "1¼"
{{toFraction 3.1666}} //=> "3⅙"
{{toFraction 2.7}} //=> 2.7
String
Number
Converts a string to JSON; useful when used in helper sub-expressions.
Name | Type | Description | |
---|---|---|---|
str |
String
|
{{#each (toJSON '[1,2,3]')}}{{this}}{{/each}} //=> '123'
Array
Object
Format a string as a lowercase, URL-friendly value.
Name | Type | Description | |
---|---|---|---|
str |
String
|
{{toSlug "Well, hello there!"}} //=> "well-hello-there"
String
Strip leading alphanumeric characters plus spaces from a string. Useful for converting filenames to more usable strings or IDs.
Name | Type | Description | |
---|---|---|---|
name |
String
|
{{toTitle "01 Introduction"}} //=> "Introduction"
String