em-helpers

Em-helpers

As set of handlebar helpers for Ember 1.13.11 and higher. Uses bootstrap for styling.

Installation

npm install --save em-helpers

Running UTs & integration tests

ember test

Running demo app

• ember server
• Visit your app at http://localhost:4200.

Helpers

1. txt - for formatting text

{{txt <value> [type={string} ..extra properties depended on type.. formatter={Function} ]}}

• When value is undefined or null, txt displays a 'Not Available' message
• If the formatter function (built-in/external) throws an error; the error will be logged and an 'Error!' message will be displayed

type:

• Supported values = date, duration, number or memory
• txt uses momentjs for formatting date & duration, and numeraljs for formatting numbers
• Other parameters depend on the type

type='date'

• momentjs is used for formatting
• With date, value can be a date object, date string or number of milliseconds
• internal date formatter will perform all the parsing, and conversions
• Supported extra properties
  • format - Displayed date format. Default value is DD MMM YYYY HH:mm
  • timeZone - Displayed date time zone. Default is local time zone.
  • valueFormat - Format of incoming date string
  • valueTimeZone - Time zone of incoming value. Default value is UTC

type='duration'

• momentjs is used for formatting
• Expects value to be of number type
• End result will be of the format Y years M months D days h hours m minutes s seconds
• Supported extra properties
  • valueUnit - Can be used to specify the unit of incoming value. It can be either of the string mentioned here

type='number'

• numeraljs is used for formatting
• Supported extra properties
  • format - Can be any of the format strings mentioned here. Default value is 0,0.

type='memory'

• A short had for type='number' & format='0 b'

type='json'

• Pretty prints an object in an indented JSON representation. Uses JSON.stringify internally.
• Supported extra properties
  • replacer - Same as JSON.stringify replacer
  • space - Same as JSON.stringify space. Defaults to 4 spaces

formatter:

• An optional callback function to create custom formatting.
• Will be called with two values; value and property hash passed into the helper
• Returned value must support toString method.

Examples

{{txt}} // Not Available!

{{txt "Bat Man"}} // Bat Man

{{txt 1399919400000 type="date"}} // 13 May 2014 00:00

{{txt 3333 type="duration"}} // 3 seconds

{{txt 10000000000 type="number"}} // 10,000,000,000

{{txt 10000000000 type="memory"}} // 9 GB

{{txt obj type="json"}}
// With obj={x: 1, y:2}
// Value displayed is
// {
//     "x": 1,
//     "y": 2
// }

2. em-progress - A simple progress bar

{{em-progress value=0 striped=true}}

value

• Current value to be displayed

valueMin

• Defaults to 0
• Progress would be calculated from this value

valueMax

• Defaults to 1
• Progress would be calculated to this value

striped

• Adds candy stripes to the progress-bar
• Also the bar is animates when valueMin < value < valueMax

style

• Use this param to color the progress bar
• All styles provided by bootstrap are supported
• Available values are success, info, warning & danger

2. em-breadcrumbs

{{em-progress items=[array of item objects]}}

Each item object can have the following properties.

text

• The link display text

routeName

• When specified the item will be a link-to the respective route

model

• If you want to route to a specific model/id as dynamic segment
• To have multiple dynamic segments pass an object of values, and use a serialize hook

href

• This creates an anchor tag instead of ember's link-to
• Useful for linking to external resources

classNames

• Must be an array of css class names