Options
All
  • Public
  • Public/Protected
  • All
Menu

Class HandlebarsHelpers

A collection of Handlebars template helpers which can be used within HTML templates.

Hierarchy

  • HandlebarsHelpers

Index

Constructors

Methods

Constructors

constructor

Methods

Static checked

  • checked(value: any): string

  • For checkboxes, if the value of the checkbox is true, add the "checked" property, otherwise add nothing.

    example
    <label>My Checkbox</label>
    <input type="checkbox" name="myCheckbox" {{checked myCheckbox}}>

    Parameters

    • value: any

    Returns string

Static disabled

  • disabled(value: any): string

  • For use in form inputs. If the supplied value is truthy, add the "disabled" property, otherwise add nothing.

    example
    <button type="submit" {{disabled myValue}}>Submit</button>

    Parameters

    • value: any

    Returns string

Static concat

  • concat(...values: string[]): SafeString

  • Concatenate a number of string terms into a single string. This is useful for passing arguments with variable names.

    example

    Concatenate several string parts to create a dynamic variable

    {{filePicker target=(concat "faces." i ".img") type="image"}}

    Parameters

    • Rest ...values: string[]

      The values to concatenate

    Returns SafeString

Static colorPicker

  • colorPicker(options: { name: string; value: string; default: string }): SafeString

  • Render a pair of inputs for selecting a color.

    example
    {{colorPicker name="myColor" value=myColor default="#000000"}}

    Parameters

    • options: { name: string; value: string; default: string }

      Helper options

      • name: string
      • value: string
      • default: string

    Returns SafeString

Static editor

  • Construct an editor element for rich text editing with TinyMCE or ProseMirror.

    example
    {{editor world.description target="description" button=false engine="prosemirror" collaborate=false}}

    Parameters

    • Rest ...args: [string, TextEditorOptions]

      The content to display and edit, followed by handlebars options.

    Returns SafeString

Static filePicker

  • filePicker(options: { type: string; target: string }): any

  • Render a file-picker button linked to an <input> field

    example
    {{filePicker type="image" target="img"}}

    Parameters

    • options: { type: string; target: string }

      Helper options

      • type: string
      • target: string

    Returns any

Static localize

  • localize(value: any, options: any): string

  • Translate a provided string key by using the loaded dictionary of localization strings.

    example

    Translate a provided localization string, optionally including formatting parameters

    <label>{{localize "ACTOR.Create"}}</label> <!-- "Create Actor" -->
    <label>{{localize "CHAT.InvalidCommand" command=foo}}</label> <!-- "foo is not a valid chat message command." -->

    Parameters

    • value: any
    • options: any

    Returns string

Static numberFormat

  • numberFormat(value: number, options: { decimals: number; sign: boolean }): SafeString

  • A string formatting helper to display a number with a certain fixed number of decimals and an explicit sign.

    example
    {{formatNumber 5.5}} <!-- 5.5 -->
    {{formatNumber 5.5 decimals=2}} <!-- 5.50 -->
    {{formatNumber 5.5 decimals=2 sign=true}} <!-- +5.50 -->

    Parameters

    • value: number

      A numeric value to format

    • options: { decimals: number; sign: boolean }

      Additional options which customize the resulting format

      • decimals: number
      • sign: boolean

    Returns SafeString

    The formatted string to be included in a template

Static numberInput

  • numberInput(value: any, options: any): SafeString

  • Render a form input field of type number with value appropriately rounded to step size.

    example
    {{numberInput value name="numberField" step=1 min=0 max=10}}

    Parameters

    • value: any
    • options: any

    Returns SafeString

Static radioBoxes

  • radioBoxes(name: string, choices: any, options: { checked: string; localize: boolean }): SafeString

  • A helper to create a set of radio checkbox input elements in a named set. The provided keys are the possible radio values while the provided values are human readable labels.

    example

    The provided input data

    let groupName = "importantChoice";
    let choices = {a: "Choice A", b: "Choice B"};
    let chosen = "a";
    example

    The template HTML structure

    <div class="form-group">
      <label>Radio Group Label</label>
      <div class="form-fields">
        {{radioBoxes groupName choices checked=chosen localize=true}}
      </div>
    </div>

    Parameters

    • name: string

      The radio checkbox field name

    • choices: any

      A mapping of radio checkbox values to human readable labels

    • options: { checked: string; localize: boolean }

      Options which customize the radio boxes creation

      • checked: string

        Which key is currently checked?

      • localize: boolean

        Pass each label through string localization?

    Returns SafeString

Static rangePicker

  • rangePicker(options: { name: string; value: number; min: number; max: number; step: number }): SafeString

  • Render a pair of inputs for selecting a value in a range.

    example
    {{rangePicker name="foo" value=bar min=0 max=10 step=1}}

    Parameters

    • options: { name: string; value: number; min: number; max: number; step: number }

      Helper options

      • name: string
      • value: number
      • min: number
      • max: number
      • step: number

    Returns SafeString

Static select

  • select(selected: any, options: any): SafeString

  • A helper to assign an <option> within a <select> block as selected based on its value Escape the string as handlebars would, then escape any regexp characters in it

    example
    <select>
    {{#select selected}}
      <option value="a">Choice A</option>
      <option value="b">Choice B</option>
    {{/select}}
    </select>

    Parameters

    • selected: any
    • options: any

    Returns SafeString

Static selectOptions

  • selectOptions(choices: any, options: { selected: string | string[]; localize: boolean; blank: string; sort: boolean; nameAttr: string; labelAttr: string; inverted: boolean }): SafeString

  • A helper to create a set of <option> elements in a <select> block based on a provided dictionary. The provided keys are the option values while the provided values are human readable labels. This helper supports both single-select as well as multi-select input fields.

    example

    The provided input data

    let choices = {a: "Choice A", b: "Choice B"};
    let value = "a";

    The template HTML structure

    <select name="importantChoice">
      {{selectOptions choices selected=value localize=true}}
    </select>

    The resulting HTML

    <select name="importantChoice">
      <option value="a" selected>Choice A</option>
      <option value="b">Choice B</option>
    </select>
    example

    Using an Array as choices

    let choices = [{a: "Choice A"}, {b: "Choice B"}];
    let value = "a";

    The template HTML structure

    <select name="importantChoice">
      {{selectOptions choices selected=value localize=true}}
    </select>

    The resulting HTML

    <select name="importantChoice">
      <option value="a" selected>Choice A</option>
      <option value="b">Choice B</option>
    </select>
    example

    Using inverted choices

    let choices = {"Choice A": "a", "Choice B": "b"};
    let value = "a";

    The template HTML structure

    <select name="importantChoice">
     {{selectOptions choices selected=value inverted=true}}
    </select>
    example

    Using nameAttr and labelAttr with objects

    let choices = {foo: {key: "a", label: "Choice A"}, bar: {key: "b", label: "Choice B"}};
    let value = "b";

    The template HTML structure

    <select name="importantChoice">
      {{selectOptions choices selected=value nameAttr="key" labelAttr="label"}}
    </select>
    example

    Using nameAttr and labelAttr with arrays

    let choices = [{key: "a", label: "Choice A"}, {key: "b", label: "Choice B"}];
    let value = "b";

    The template HTML structure

    <select name="importantChoice">
      {{selectOptions choices selected=value nameAttr="key" labelAttr="label"}}
    </select>

    Parameters

    • choices: any

      A mapping of radio checkbox values to human-readable labels

    • options: { selected: string | string[]; localize: boolean; blank: string; sort: boolean; nameAttr: string; labelAttr: string; inverted: boolean }

      Helper options

      • selected: string | string[]
      • localize: boolean
      • blank: string
      • sort: boolean
      • nameAttr: string
      • labelAttr: string
      • inverted: boolean

    Returns SafeString