Skip to content

Commit

Permalink
finished documentation, and updated readme
Browse files Browse the repository at this point in the history
  • Loading branch information
@tanema
tanema committed Mar 18, 2012
1 parent 2bf47e8 commit 85e057b
Show file tree
Hide file tree
Showing 45 changed files with 627 additions and 252 deletions.
12 changes: 11 additions & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,17 @@ If you want to only use some helpers require without the app and register necess
date_tag: helpers.date_tag
});

for helpers usage see the wiki https://github.com/tanema/express-helpers/wiki
Then use it in a ejs view like a rails view

<% form_for("user", function(f){ %>
<%- f.label_for("username") %>
<%- f.text_field("username") %><br />

<%- f.submit() %><br />
<% }) %>


For more help and usage instructions see the [WIKI](https://github.com/tanema/express-helpers/wiki)

## License

Expand Down
256 changes: 42 additions & 214 deletions docs/index.txt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,226 +13,54 @@ into html attributes

<input id='input' type='url' name='input' class='url_field' />

*NOTE: options listed for each helper are to be put into the html_options

#Markup and Utility
* [doctype_tag](#doctype_tag)
* [cdata](#cdata)
* [escape_js](#escape_js)
* [js_tag](#js_tag)
* [css_tag](#css_tag)
* [sanitize_css](#sanitize_css)
* [doctype_tag](https://github.com/tanema/express-helpers/wiki/doctype_tag)
* [cdata](https://github.com/tanema/express-helpers/wiki/cdata)
* [escape_js](https://github.com/tanema/express-helpers/wiki/escape_js)
* [js_tag](https://github.com/tanema/express-helpers/wiki/js_tag)
* [css_tag](https://github.com/tanema/express-helpers/wiki/css_tag)
* [sanitize_css](https://github.com/tanema/express-helpers/wiki/sanitize_css)
* [strip_tags](https://github.com/tanema/express-helpers/wiki/strip_tags)
* [strip_links](https://github.com/tanema/express-helpers/wiki/strip_links)

#Buttons
* [button_to / button_link_to](#button_to)
* [js_button](#js_button)
* [button_to / button_link_to](https://github.com/tanema/express-helpers/wiki/button_to)
* [js_button](https://github.com/tanema/express-helpers/wiki/js_button)

#Links
* [link_to](#link_to)
* [link_to_if](#link_to_if)
* [link_to_unless](#link_to_unless)
* [link_to_unless_current](#link_to_unless_current)
* [mail_to](#mail_to)
* [link_to](https://github.com/tanema/express-helpers/wiki/link_to)
* [link_to_if](https://github.com/tanema/express-helpers/wiki/link_to_if)
* [link_to_unless](https://github.com/tanema/express-helpers/wiki/link_to_unless)
* [link_to_unless_current](https://github.com/tanema/express-helpers/wiki/link_to_unless_current)
* [mail_to](https://github.com/tanema/express-helpers/wiki/mail_to)

#Form_For
* [form_for](#form_for)
* [form_for](https://github.com/tanema/express-helpers/wiki/form_for)

#Inputs and form elements
* [checkbox_tag](#checkbox_tag)
* [color_field_tag](#color_field_tag)
* [date_tag](#date_tag)
* [date_time_tag](#date_time_tag)
* [email_field_tag](#email_field_tag)
* [file_field_tag](#file_field_tag)
* [form_tag](#form_tag)
* [form_end_tag](#form_end_tag)
* [hidden_field_tag](#hidden_field_tag)
* [img_tag](#img_tag)
* [image_submit_tag](#image_submit_tag)
* [label_for](#label_for)
* [number_field_tag](#number_field_tag)
* [password_field_tag](#password_field_tag)
* [phone_field_tag / telephone_field_tag](#phone_field_tag)
* [radio_tag](#radio_tag)
* [reset_form_tag](#reset_form_tag)
* [search_field_tag](#search_field_tag)
* [select_tag](#select_tag)
* [strip_links](#strip_links)
* [strip_tags](#strip_tags)
* [submit_tag](#submit_tag)
* [text_area_tag / text_tag](#text_area_tag)
* [text_field_tag](#text_field_tag)
* [time_tag](#time_tag)
* [url_field_tag](#url_field_tag)

## Details

### <a name="doctype_tag"/>doctype_tag ##

doctype that are define are:

* HTML5
* HTML4s
* HTML4t
* HTML4f
* XHTML1s
* XHTML1t
* XHTML1f
* XHTML1_1

doctype_tag(HTML4s) =>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
doctype_tag() =>
<!DOCTYPE HTML>

### <a name="date_tag"/>date_tag(name, [value, html_options])
Creates a date tag

date_tag('Installation[date]', new Date(1982, 10,20) )
date_tag('Installation[date]') // just on current time

### <a name="time_tag"/>time_tag(name, [value, html_options])
Creates a time tag

time_tag('Installation[time]', new Date(1982, 10,20) )
time_tag('Installation[time]') // just on current time

### <a name="date_time_tag"/>date_time_tag(name, [value, html_options])
Creates a time tag

date_time_tag('Installation[time]', new Date(1982, 10,20) )
date_time_tag('Installation[time]') // just on current time

### <a name="css_tag"/>css_tag(src[, html_options])
Creates a css tag

css_tag('/stylesheet/style.css') =>
"<link rel='stylesheet'
href='/stylesheet/style.css'
type='text/css'
charset='utf-8' />"

### <a name="checkbox_tag"/>checkbox_tag(name, value[, html_options])
Creates a checkbox

checkbox_tag('user_check_box', 'user') =>
"<input id='user_check_box' value='user' type='checkbox' name='user_check_box' />"

### <a name="radio_tag"/>radio_tag(name, value[, html_options])
Creates a radio button

radio_tag('user_radio', 'user') =>
"<input id='user_radio' value='user' type='radio' name='user_radio' />"

### <a name="form_tag"/>form_tag(action[, html_options])
Creates a start form tag.

form_tag('/myaction',{multipart: true})


### <a name="end_form_tag"/>end_form_tag()
Creates a end form tag.

form_end_tag()


### <a name="hidden_field_tag"/>hidden_field_tag( name, value[, html_options])
Creates a hidden field.

hidden_field_tag('something[interesting]', 5) =>

"<input id=\'something[interesting]\'
value=\'5\'
type=\'hidden\'
name=\'something[interesting]\'/>"


### <a name="img_tag"/>img_tag(image_location, alt[, html_options])
Creates an image tag.

img_tag('/some.png', 'something') => "<img src='/some.png' alt='something' />"

### <a name="js_tag"/>js_tag(url[, html_options])
Creates a javascript script tag

js_tag('/javascript/script.js') =>
"<script type='text/javascript'
src='/javascript/script.js'
charset='utf-8' ></script>"

### <a name="label_for"/>label_for(name[, text, html_options])
Creates a label for tag

label_for('user_id') => "<label for=\'user_id\' >User</label>"

label_for('book[user_id]') => "<label for=\'book[user_id]\' >User</label>"

### <a name="link_to"/>link_to(name[, url, html_options])
Creates a link to another page.

link_to('hello world', '/something/here') => "<a href='/something/here' >hello world</a>"

### <a name="link_to_if"/>link_to_if(condition, name, url, html_options, post, block)
Just like link_to if the condition is true. If condition is false it returns name.

### <a name="link_to_unless"/>link_to_unless(condition, name, url, html_options, block)
Just like link_to if the condition is false. If condition is true it returns name.

### <a name="password_field_tag"/>password_field_tag(name, value, html_options)
Returns a password field.

password_field_tag('something[interesting]', 5) =>

"<input id='something[interesting]'
value='5'
type='password'
name='something[interesting]'/>"



### <a name="select_tag"/>select_tag(name, value, choices[, html_options])
Returns a select tag.

var choices = [ {value: 1, text: 'First Choice' },
{value: 2, text: 'Second Choice'},
{value: 3, text: 'Third Choice'} ]
select_tag('mySelectElement', 2, choices) =>

"<select id='mySelectElement' value='2' name='mySelectElement'>
<option value='1' >First Choice</option>
<option value='2' selected='selected'>Second Choice</option>
<option value='3'>Third Choice</option>
</select>"

### <a name="submit_tag"/>submit_tag([text, url, html_options])
Creates a submit tag.

submit_tag('Submit This') => "<input type=\'submit\' value=\'Submit This\' />"
submit_tag() => "<input type=\'submit\' value=\'Submit\' />"
submit_tag({class:'button'}) => "<input class='button' type=\'submit\' value=\'Submit\' />"

submit_tag('holla', '/new/location') =>

"<input onclick='window.location=\"/new/location\";return false;'
value='holla'
type='submit' />"

### <a name="text_area_tag"/>text_area_tag(name[, value, html_options]) / text_tag(name[, value, html_options])
Both create a text area tag

text_area_tag('task[description]', 'Here is some text.\nA new line.') =>
text_tag('task[description]', 'Here is some text.\nA new line.') =>

"<textarea id='task[description]'
name='task[description]'
cols='50'
rows='4' >Here is some text.\nA new line.</textarea>"



### <a name="text_field_tag"/>text_field_tag(name[, value, html_options])

text_field_tag('something[interesting]', 5) =>

"<input id='something[interesting]'
value='5'
type='text'
name='something[interesting]'/>"
* [checkbox_tag](https://github.com/tanema/express-helpers/wiki/checkbox_tag)
* [color_field_tag](https://github.com/tanema/express-helpers/wiki/color_field_tag)
* [date_tag](https://github.com/tanema/express-helpers/wiki/date_tag)
* [date_time_tag](https://github.com/tanema/express-helpers/wiki/date_time_tag)
* [email_field_tag](https://github.com/tanema/express-helpers/wiki/email_field_tag)
* [file_field_tag](https://github.com/tanema/express-helpers/wiki/file_field_tag)
* [form_tag](https://github.com/tanema/express-helpers/wiki/form_tag)
* [form_end_tag](https://github.com/tanema/express-helpers/wiki/form_end_tag)
* [hidden_field_tag](https://github.com/tanema/express-helpers/wiki/hidden_field_tag)
* [img_tag](https://github.com/tanema/express-helpers/wiki/img_tag)
* [image_submit_tag](https://github.com/tanema/express-helpers/wiki/image_submit_tag)
* [label_for](https://github.com/tanema/express-helpers/wiki/label_for)
* [number_field_tag](https://github.com/tanema/express-helpers/wiki/number_field_tag)
* [password_field_tag](https://github.com/tanema/express-helpers/wiki/password_field_tag)
* [phone_field_tag / telephone_field_tag](https://github.com/tanema/express-helpers/wiki/phone_field_tag)
* [radio_tag](https://github.com/tanema/express-helpers/wiki/radio_tag)
* [reset_form_tag](https://github.com/tanema/express-helpers/wiki/reset_form_tag)
* [search_field_tag](https://github.com/tanema/express-helpers/wiki/search_field_tag)
* [select_tag](https://github.com/tanema/express-helpers/wiki/select_tag)
* [submit_tag](https://github.com/tanema/express-helpers/wiki/submit_tag)
* [text_area_tag / text_tag](https://github.com/tanema/express-helpers/wiki/text_area_tag)
* [text_field_tag](https://github.com/tanema/express-helpers/wiki/text_field_tag)
* [time_tag](https://github.com/tanema/express-helpers/wiki/time_tag)
* [url_field_tag](https://github.com/tanema/express-helpers/wiki/url_field_tag)
21 changes: 11 additions & 10 deletions docs/outputdoc.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
var helpers = require('../lib/express-helpers.js')();
var generate_docs = true,
var generate_docs = false,
generate_tests = false;
var date = new Date(2007,10,20,1,1,1,1);
var date_string = JSON.stringify(date);
Expand All @@ -13,7 +13,6 @@ var methods = [
{helper: "checkbox_tag", args: ['user_check_box', {value:'user'}]},
{helper: "color_field_tag", args: ['color', {value: 5}]},
{helper: "css_tag", args: ['/stylesheet/style.css']},
{helper: "css_tag", args: ['/stylesheet/style.css']},
{helper: "date_tag", args: ['Installation[date]', {value: date}]},
{helper: "date_time_tag", args: ['Installation[datetime]', {value: date}]},
{helper: "doctype_tag", args: []},
Expand All @@ -23,7 +22,7 @@ var methods = [
{helper: "form_tag", args: ['/myaction']},
{helper: "form_end_tag", args: []},
{helper: "hidden_field_tag", args: ['something[interesting]', {value:5}]},
{helper: "img_tag", args: ['/some.png', 'something']},
{helper: "img_tag", args: ['/some.png']},
{helper: "image_submit_tag", args: ['/some.png', {alt: 'submit'}]},
{helper: "js_tag", args: ['/javascript/script.js']},
{helper: "js_button", args: ["google", "http://www.google.com"]},
Expand Down Expand Up @@ -66,13 +65,15 @@ for(var i = 0; i < methods.length; i++){
text += " => \n \n";
text += helpers[methods[i].helper].apply(this, methods[i].args) + "\n";

fs.open("./wiki/" + methods[i].helper + ".txt", 'a', undefined, function(err, fd) {
if(err) throw err;
fs.write(fd, text, undefined, undefined, function(err, written) {
if(err) throw err;
fs.close(fd);
});
});
(function(helper, text){
fs.open("./wiki/" + helper + ".txt", 'a', undefined, function(err, fd) {
if(err) throw err;
fs.write(fd, text, undefined, undefined, function(err, written) {
if(err) throw err;
fs.close(fd);
});
});
})(methods[i].helper, text);
}

if(generate_tests){
Expand Down
8 changes: 8 additions & 0 deletions docs/wiki/button_to.txt
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
## button_to(value, url [,html_options])
This creates a hyperlink in the form of a button

button_to("google","http://www.google.com")

=>

<input onclick="window.location.href='http://www.google.com'" value='google' id='' type='button' name='' />
8 changes: 8 additions & 0 deletions docs/wiki/cdata.txt
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
## cdata(content)
This will put the content within cdata tags

cdata("this is cdata")

=>

<![CDATA[this is cdata]]>
8 changes: 8 additions & 0 deletions docs/wiki/checkbox_tag.txt
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
## checkbox_tag(name, [[value,] html_options])
Creates a checkbox

checkbox_tag("user_check_box",{"value":"user"})

=>

<input value='user' id='user_check_box' type='checkbox' name='user_check_box' />
8 changes: 8 additions & 0 deletions docs/wiki/color_field_tag.txt
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
## color_field_tag(name, [[value,] html_options])
Creates a color input

color_field_tag("color",{"value":5})

=>

<input value='5' id='color' type='color' name='color' />
8 changes: 8 additions & 0 deletions docs/wiki/css_tag.txt
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
## css_tag(src[, html_options])
Creates a css tag

css_tag("/stylesheet/style.css")

=>

<link rel='stylesheet' href='/stylesheet/style.css' type='text/css' charset='utf-8' />
16 changes: 16 additions & 0 deletions docs/wiki/date_tag.txt
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
## date_tag(name, [[value,] html_options])

Creates a date select sequence

options

* start_year
* end_year

if no date is given it will default to the current date

date_tag("Installation[date]",new Date(2007,10,20))

=>

<select id='Installation[date][year]' value='2007' name='Installation[date][year]' ><option value='1960' >1960</option><option value='1961' >1961</option><option value='1962' >1962</option><option value='1963' >1963</option><option value='1964' >1964</option><option value='1965' >1965</option><option value='1966' >1966</option><option value='1967' >1967</option><option value='1968' >1968</option><option value='1969' >1969</option><option value='1970' >1970</option><option value='1971' >1971</option><option value='1972' >1972</option><option value='1973' >1973</option><option value='1974' >1974</option><option value='1975' >1975</option><option value='1976' >1976</option><option value='1977' >1977</option><option value='1978' >1978</option><option value='1979' >1979</option><option value='1980' >1980</option><option value='1981' >1981</option><option value='1982' >1982</option><option value='1983' >1983</option><option value='1984' >1984</option><option value='1985' >1985</option><option value='1986' >1986</option><option value='1987' >1987</option><option value='1988' >1988</option><option value='1989' >1989</option><option value='1990' >1990</option><option value='1991' >1991</option><option value='1992' >1992</option><option value='1993' >1993</option><option value='1994' >1994</option><option value='1995' >1995</option><option value='1996' >1996</option><option value='1997' >1997</option><option value='1998' >1998</option><option value='1999' >1999</option><option value='2000' >2000</option><option value='2001' >2001</option><option value='2002' >2002</option><option value='2003' >2003</option><option value='2004' >2004</option><option value='2005' >2005</option><option value='2006' >2006</option><option value='2007' selected='selected' >2007</option><option value='2008' >2008</option><option value='2009' >2009</option><option value='2010' >2010</option><option value='2011' >2011</option><option value='2012' >2012</option><option value='2013' >2013</option><option value='2014' >2014</option><option value='2015' >2015</option><option value='2016' >2016</option><option value='2017' >2017</option><option value='2018' >2018</option><option value='2019' >2019</option><option value='2020' >2020</option><option value='2021' >2021</option></select><select id='Installation[date][month]' value='10' name='Installation[date][month]' ><option value='0' >January</option><option value='1' >February</option><option value='2' >March</option><option value='3' >April</option><option value='4' >May</option><option value='5' >June</option><option value='6' >July</option><option value='7' >August</option><option value='8' >September</option><option value='9' >October</option><option value='10' selected='selected' >November</option><option value='11' >December</option></select><select id='Installation[date][day]' value='20' name='Installation[date][day]' ><option value='1' >1</option><option value='2' >2</option><option value='3' >3</option><option value='4' >4</option><option value='5' >5</option><option value='6' >6</option><option value='7' >7</option><option value='8' >8</option><option value='9' >9</option><option value='10' >10</option><option value='11' >11</option><option value='12' >12</option><option value='13' >13</option><option value='14' >14</option><option value='15' >15</option><option value='16' >16</option><option value='17' >17</option><option value='18' >18</option><option value='19' >19</option><option value='20' selected='selected' >20</option><option value='21' >21</option><option value='22' >22</option><option value='23' >23</option><option value='24' >24</option><option value='25' >25</option><option value='26' >26</option><option value='27' >27</option><option value='28' >28</option><option value='29' >29</option><option value='30' >30</option><option value='31' >31</option></select>
Loading

0 comments on commit 85e057b

Please sign in to comment.