Skip to content

Commit

Permalink
added many HTML5 tag helpers
Browse files Browse the repository at this point in the history
  • Loading branch information
@kraih
kraih committed Dec 18, 2012
1 parent 9810edf commit 670f616
Show file tree
Hide file tree
Showing 4 changed files with 259 additions and 12 deletions.
15 changes: 15 additions & 0 deletions Changes
View file
@@ -1,4 +1,19 @@

3.69 2012-12-18
- Added color_field helper to Mojolicious::Plugin::TagHelpers.
- Added date_field helper to Mojolicious::Plugin::TagHelpers.
- Added datetime_field helper to Mojolicious::Plugin::TagHelpers.
- Added email_field helper to Mojolicious::Plugin::TagHelpers.
- Added month_field helper to Mojolicious::Plugin::TagHelpers.
- Added number_field helper to Mojolicious::Plugin::TagHelpers.
- Added range_field helper to Mojolicious::Plugin::TagHelpers.
- Added search_field helper to Mojolicious::Plugin::TagHelpers.
- Added tel_field helper to Mojolicious::Plugin::TagHelpers.
- Added time_field helper to Mojolicious::Plugin::TagHelpers.
- Added url_field helper to Mojolicious::Plugin::TagHelpers.
- Added week_field helper to Mojolicious::Plugin::TagHelpers.
- Improved documentation.

3.68 2012-12-16
- Added monkey_patch function to Mojo::Util.
- Added ".travis.yml".
Expand Down
2 changes: 1 addition & 1 deletion lib/Mojolicious.pm
View file
Expand Up @@ -38,7 +38,7 @@ has static => sub { Mojolicious::Static->new };
has types => sub { Mojolicious::Types->new };

our $CODENAME = 'Rainbow';
our $VERSION = '3.68';
our $VERSION = '3.69';

sub AUTOLOAD {
my $self = shift;
Expand Down
181 changes: 170 additions & 11 deletions lib/Mojolicious/Plugin/TagHelpers.pm
View file
Expand Up @@ -7,6 +7,12 @@ use Mojo::Util 'xml_escape';
sub register {
my ($self, $app) = @_;

# Text field variations
my @time = qw(date datetime month time week);
for my $name (@time, qw(color email number range search tel text url)) {
$app->helper("${name}_field" => sub { _input(@_, type => $name) });
}

# Add "base_tag" helper
$app->helper(
base_tag => sub { _tag('base', href => shift->req->url->base, @_) });
Expand Down Expand Up @@ -59,9 +65,6 @@ sub register {

# Add "text_area" helper
$app->helper(text_area => \&_text_area);

# Add "text_field" helper
$app->helper(text_field => sub { _input(@_, type => 'text') });
}

sub _form_for {
Expand Down Expand Up @@ -315,6 +318,58 @@ picked up and shown as default.
<input name="employed" type="checkbox" value="1" />
<input id="foo" name="employed" type="checkbox" value="1" />
=head2 C<color_field>
%= color_field 'background'
%= color_field background => '#ffffff'
%= color_field background => '#ffffff', id => 'foo'
Generate color input element. Previous input values will automatically get
picked up and shown as default.
<input name="background" type="color" />
<input name="background" type="color" value="#ffffff" />
<input id="foo" name="background" type="color" value="#ffffff" />
=head2 C<date_field>
%= date_field 'end'
%= date_field end => '2012-12-21'
%= date_field end => '2012-12-21', id => 'foo'
Generate date input element. Previous input values will automatically get
picked up and shown as default.
<input name="end" type="date" />
<input name="end" type="date" value="2012-12-21" />
<input id="foo" name="end" type="date" value="2012-12-21" />
=head2 C<datetime_field>
%= datetime_field 'end'
%= datetime_field end => '2012-12-21T23:59:59Z'
%= datetime_field end => '2012-12-21T23:59:59Z', id => 'foo'
Generate datetime input element. Previous input values will automatically get
picked up and shown as default.
<input name="end" type="datetime" />
<input name="end" type="datetime" value="2012-12-21T23:59:59Z" />
<input id="foo" name="end" type="datetime" value="2012-12-21T23:59:59Z" />
=head2 C<email_field>
%= email_field 'notify'
%= email_field notify => 'nospam@example.com'
%= email_field notify => 'nospam@example.com', id => 'foo'
Generate email input element. Previous input values will automatically get
picked up and shown as default.
<input name="notify" type="email" />
<input name="notify" type="email" value="nospam@example.com" />
<input id="foo" name="notify" type="email" value="nospam@example.com" />
=head2 C<file_field>
%= file_field 'avatar'
Expand Down Expand Up @@ -436,6 +491,32 @@ capitalized link target as content.
<a href="http://mojolicio.us">Mojolicious</a>
<a href="http://127.0.0.1:3000/current/path?foo=bar">Retry</a>
=head2 C<month_field>
%= month_field 'vacation'
%= month_field vacation => '2012-12'
%= month_field vacation => '2012-12', id => 'foo'
Generate month input element. Previous input values will automatically get
picked up and shown as default.
<input name="vacation" type="month" />
<input name="vacation" type="month" value="2012-12" />
<input id="foo" name="vacation" type="month" value="2012-12" />
=head2 C<number_field>
%= number_field 'age'
%= number_field age => 25
%= number_field age => 25, id => 'foo', min => 0, max => 200
Generate number input element. Previous input values will automatically get
picked up and shown as default.
<input name="age" type="number" />
<input name="age" type="number" value="25" />
<input id="foo" max="200" min="0" name="age" type="number" value="25" />
=head2 C<password_field>
%= password_field 'pass'
Expand All @@ -457,6 +538,32 @@ picked up and shown as default.
<input name="country" type="radio" value="germany" />
<input id="foo" name="country" type="radio" value="germany" />
=head2 C<range_field>
%= range_field 'age'
%= range_field age => 25
%= range_field age => 25, id => 'foo', min => 0, max => 200
Generate range input element. Previous input values will automatically get
picked up and shown as default.
<input name="age" type="range" />
<input name="age" type="range" value="25" />
<input id="foo" max="200" min="200" name="age" type="range" value="25" />
=head2 C<search_field>
%= search_field 'q'
%= search_field q => 'perl'
%= search_field q => 'perl', id => 'foo'
Generate search input element. Previous input values will automatically get
picked up and shown as default.
<input name="q" type="search" />
<input name="q" type="search" value="perl" />
<input id="foo" name="q" type="search" value="perl" />
=head2 C<select_field>
%= select_field language => [qw(de en)]
Expand Down Expand Up @@ -546,18 +653,18 @@ Very useful for reuse in more specific tag helpers.
Results are automatically wrapped in L<Mojo::ByteStream> objects to prevent
accidental double escaping.
=head2 C<text_field>
=head2 C<tel_field>
%= text_field 'first_name'
%= text_field first_name => 'Default name'
%= text_field first_name => 'Default name', class => 'user'
%= tel_field 'work'
%= tel_field work => '123456789'
%= tel_field work => '123456789', id => 'foo'
Generate text input element. Previous input values will automatically get
Generate tel input element. Previous input values will automatically get
picked up and shown as default.
<input name="first_name" type="text" />
<input name="first_name" type="text" value="Default name" />
<input class="user" name="first_name" type="text" value="Default name" />
<input name="work" type="tel" />
<input name="work" type="tel" value="123456789" />
<input id="foo" name="work" type="tel" value="123456789" />
=head2 C<text_area>
Expand All @@ -578,6 +685,58 @@ up and shown as default.
Default!
</textarea>
=head2 C<text_field>
%= text_field 'first_name'
%= text_field first_name => 'Default name'
%= text_field first_name => 'Default name', class => 'user'
Generate text input element. Previous input values will automatically get
picked up and shown as default.
<input name="first_name" type="text" />
<input name="first_name" type="text" value="Default name" />
<input class="user" name="first_name" type="text" value="Default name" />
=head2 C<time_field>
%= time_field 'start'
%= time_field start => '23:59:59'
%= time_field start => '23:59:59', id => 'foo'
Generate time input element. Previous input values will automatically get
picked up and shown as default.
<input name="start" type="time" />
<input name="start" type="time" value="23:59:59" />
<input id="foo" name="start" type="time" value="23:59:59" />
=head2 C<url_field>
%= url_field 'address'
%= url_field address => 'http://mojolicio.us'
%= url_field address => 'http://mojolicio.us', id => 'foo'
Generate url input element. Previous input values will automatically get
picked up and shown as default.
<input name="address" type="url" />
<input name="address" type="url" value="http://mojolicio.us" />
<input id="foo" name="address" type="url" value="http://mojolicio.us" />
=head2 C<week_field>
%= week_field 'vacation'
%= week_field vacation => '2012-W17'
%= week_field vacation => '2012-W17', id => 'foo'
Generate week input element. Previous input values will automatically get
picked up and shown as default.
<input name="vacation" type="week" />
<input name="vacation" type="week" value="2012-W17" />
<input id="foo" name="vacation" type="week" value="2012-W17" />
=head1 METHODS
L<Mojolicious::Plugin::TagHelpers> inherits all methods from
Expand Down
73 changes: 73 additions & 0 deletions t/mojolicious/tag_helper_lite_app.t
View file
Expand Up @@ -33,6 +33,9 @@ get 'style';
# GET /basicform
get '/basicform';

# POST /text
post '/text';

# GET /multibox
get '/multibox';

Expand Down Expand Up @@ -136,6 +139,59 @@ $t->get_ok('/basicform')->status_is(200)->content_is(<<EOF);
</form>
EOF

# POST /text
$t->post_ok('/text')->status_is(200)->content_is(<<'EOF');
<form action="/text" method="POST">
<input class="foo" name="color" type="color" value="#ffffff" />
<input class="foo" name="date" type="date" value="2012-12-12" />
<input class="foo" name="dt" type="datetime" value="2012-12-12T23:59:59Z" />
<input class="foo" name="email" type="email" value="nospam@example.com" />
<input class="foo" name="month" type="month" value="2012-12" />
<input class="foo" name="number" type="number" value="23" />
<input class="foo" name="range" type="range" value="24" />
<input class="foo" name="search" type="search" value="perl" />
<input class="foo" name="tel" type="tel" value="123456789" />
<input class="foo" name="time" type="time" value="23:59:59" />
<input class="foo" name="url" type="url" value="http://mojolicio.us" />
<input class="foo" name="week" type="week" value="2012-W16" />
<input type="submit" value="Ok" />
</form>
EOF

# POST /text (with values)
$t->post_form_ok(
'/text' => {
color => '#000000',
date => '2012-12-13',
dt => '2012-12-13T23:59:59Z',
email => 'spam@example.com',
month => '2012-11',
number => 25,
range => 26,
search => 'c',
tel => '987654321',
time => '23:59:58',
url => 'http://kraih.com',
week => '2012-W17'
}
)->status_is(200)->content_is(<<'EOF');
<form action="/text" method="POST">
<input class="foo" name="color" type="color" value="#000000" />
<input class="foo" name="date" type="date" value="2012-12-13" />
<input class="foo" name="dt" type="datetime" value="2012-12-13T23:59:59Z" />
<input class="foo" name="email" type="email" value="spam@example.com" />
<input class="foo" name="month" type="month" value="2012-11" />
<input class="foo" name="number" type="number" value="25" />
<input class="foo" name="range" type="range" value="26" />
<input class="foo" name="search" type="search" value="c" />
<input class="foo" name="tel" type="tel" value="987654321" />
<input class="foo" name="time" type="time" value="23:59:58" />
<input class="foo" name="url" type="url" value="http://kraih.com" />
<input class="foo" name="week" type="week" value="2012-W17" />
<input type="submit" value="Ok" />
</form>
EOF

# GET /multibox
$t->get_ok('/multibox')->status_is(200)->content_is(<<EOF);
<form action="/multibox">
Expand Down Expand Up @@ -433,6 +489,23 @@ __DATA__
%= submit_button
%= end
@@ text.html.ep
%= form_for text => begin
%= color_field color => '#ffffff', class => 'foo'
%= date_field date => '2012-12-12', class => 'foo'
%= datetime_field dt => '2012-12-12T23:59:59Z', class => 'foo'
%= email_field email => 'nospam@example.com', class => 'foo'
%= month_field month => '2012-12', class => 'foo'
%= number_field number => 23, class => 'foo'
%= range_field range => 24, class => 'foo'
%= search_field search => 'perl', class => 'foo'
%= tel_field tel => '123456789', class => 'foo'
%= time_field time => '23:59:59', class => 'foo'
%= url_field url => 'http://mojolicio.us', class => 'foo'
%= week_field week => '2012-W16', class => 'foo'
%= submit_button
%= end
@@ multibox.html.ep
%= form_for multibox => begin
%= check_box foo => 'one'
Expand Down

0 comments on commit 670f616

Please sign in to comment.