kotovalexarian-likes-github
/
haml--haml
mirror of https://github.com/haml/haml.git
1
0
Fork 0
Code Releases Activity

[Haml] Added option for generating HTML5-style data-* attributes for elements. 

Since hyphens aren't allowed in Symbols, creating custom data attributes for
HTML5 is difficult. This patch lets you supply a :data attribute with a Hash,
which will generate data-* attributes for your elements.

For example:

  %a{:href=>"/posts", :data => {:author_id => 123}} Posts By Author

will render as:

  <a data-author_id='123' href='/posts'>Posts By Author</a>
This commit is contained in:
John Reilly 2010-03-14 16:13:53 -07:00 committed by Nathan Weizenbaum
parent 59781877bb
commit 62f05fcdad
4 changed files with 45 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
doc-src/HAML_CHANGELOG.md
View File

@ -65,7 +65,7 @@ won't do any indentation of their arguments.
* All attribute values may be non-String types.
Their `#to_s` method will be called to convert them to strings.
Previously, this only worked for attributes other than `class`.
### `:class` and `:id` Attributes Accept Ruby Arrays
In an attribute hash, the `:class` attribute now accepts an Array
@ -102,6 +102,20 @@ could render as either of:
Thanks to [Ronen Barzel](http://www.ronenbarzel.org/).
### HTML5 Custom Data Attributes
Creating an attribute named `:data` with a Hash value
will generate [HTML5 custom data attributes](http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#embedding-custom-non-visible-data).
For example:
%div{:data => {:author_id => 123, :post_id => 234}}
Will compile to:
<div data-author_id='123' data-post_id='234'></div>
Thanks to [John Reilly](http://twitter.com/johnreilly).
### More Powerful `:autoclose` Option
The {file:HAML_REFERENCE.md#attributes_option `:attributes`} option

15
doc-src/HAML_REFERENCE.md
View File

@ -472,6 +472,21 @@ or using `true` and `false`:
%input(selected=true)
#### HTML5 Custom Data Attributes
HTML5 allows for adding [custom non-visible data attributes](http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#embedding-custom-non-visible-data)
to elements using attribute names beginning with `data-`.
Custom data attributes can be used in Haml by using the key `:data` with a Hash value
in an attribute hash.
Each of the key/value pairs in the Hash will be transformed into a custom data attribute.
For example:
%a{:href=>"/posts", :data => {:author_id => 123}} Posts By Author
will render as:
<a data-author_id='123' href='/posts'>Posts By Author</a>
### Class and ID: `.` and `#`
The period and pound sign are borrowed from CSS.

3
lib/haml/precompiler.rb
View File

@ -553,6 +553,9 @@ END
next " #{attr}=#{attr_wrapper}#{attr}#{attr_wrapper}"
elsif value == false
next
elsif attr == 'data' && value.is_a?(Hash)
next build_attributes(is_html, attr_wrapper,
Haml::Util.map_keys(value) {|name| "data-#{name}"})
end
value = Haml::Helpers.preserve(Haml::Helpers.escape_once(value.to_s))

12
test/haml/engine_test.rb
View File

@ -1194,6 +1194,18 @@ SASS
assert_equal %{<!DOCTYPE html>\n}, render('!!!', :format => :html5)
end
# HTML5 custom data attributes
def test_html5_data_attributes
assert_equal("<div data-author_id='123' data-biz='baz' data-foo='bar'></div>\n",
render("%div{:data => {:author_id => 123, :foo => 'bar', :biz => 'baz'}}"))
assert_equal("<div data-one_plus_one='2'></div>\n",
render("%div{:data => {:one_plus_one => 1+1}}"))
assert_equal("<div data-foo='Here&apos;s a \"quoteful\" string.'></div>\n",
render(%{%div{:data => {:foo => %{Here's a "quoteful" string.}}}}))
end
# New attributes
def test_basic_new_attributes