npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

em-helpers

v0.8.0

Published

As set of handlebar helpers for Ember.

Downloads

2,541

Readme

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