coffeecup-helpers

A coffeecup module of html helpers

coffeecup helpers

coffeecup helpers project is a set of helpers to add some sugar to generating forms and twitter bootstrap classes

npm install coffeecup-helpers

cc = require 'coffeecup'
helpers = require 'coffeecup-helpers'
 
template = ->
  form ->
    p ->
      textField 'name'class: 'small'
 
cc.render templatehardcode: helpers
<form>
  <p>
    <label for="name">Name</label>
    <input name="name" id="name" type="text" />
  </p>
</form>

textField(name, value, attributes)

generate label and input type text element.

params

ParameterTypeRequiredDescription
namestringoptionalinput element name attribute and label display
valuestringoptionalinput element value attribute
attributesobjectoptionalobject containing both input and label attributes

usage

template = ->
 form ->
   p ->
     textField 'name'label: { class: 'foo' }input: { class: 'bar'}

output

<form>
  <p>
    <label class="foo" for="name">Name</label>
    <input class="bar" name="name" id="name" type="text" />
  </p>
</form>

passwordField(name, value, attributes)

generate label and input type text element.

params

ParameterTypeRequiredDescription
namestringoptionalinput element name attribute and label display
valuestringoptionalinput element value attribute
attributesobjectoptionalobject containing both input and label attributes

usage

template = ->
 form ->
   p ->
     textField 'name'label: { class: 'foo' }input: { class: 'bar'}

output

<form>
  <p>
    <label class="foo" for="name">Name</label>
    <input class="bar" name="name" id="name" type="password" />
  </p>
</form>

generates form text control with help text

params

ParameterTypeRequiredDescription
namestringoptionalinput element name attribute and label display
valuestringoptionalinput element value attribute
attributesobjectoptionalobject containing both input and label attributes as well as help text

usage

= ->
  textControl 'foo'help: 'Help text here'
coffeecup.render(t{hardcode})

output

<div class="control-group">
  <label for="foo" class="control-label">Foo</label>
  <div class="controls">
    <input name="foo" id="foo" type="text" />
    <p class="help-block">Help text here</p>
  </div>
</div>

generates form password control with help text

params

ParameterTypeRequiredDescription
namestringoptionalinput element name attribute and label display
valuestringoptionalinput element value attribute
attributesobjectoptionalobject containing both input and label attributes as well as help text

usage

= ->
  textControl 'foo'help: 'Help text here'
coffeecup.render(t{hardcode})

output

<div class="control-group">
  <label for="foo" class="control-label">Foo</label>
  <div class="controls">
    <input name="foo" id="foo" type="password" />
    <p class="help-block">Help text here</p>
  </div>
</div>