From d7b60544960399fd589770364c3e81a866593324 Mon Sep 17 00:00:00 2001 From: neumayr Date: Thu, 17 Mar 2016 17:57:57 +0100 Subject: date_select helper with_css_classes option also accept a hash MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit `date_select` helper `:with_css_classes` option now accepts a hash of strings for `:year`, `:month`, `:day`, `:hour`, `:minute`, `:second` that will extend the select type with the given css class value. ```erb <%= f.date_select :birthday, with_css_classes: { month: "my-month", year: "my-year" } %> ``` ```html ``` Optional, add global `html_options` to modify every select tag in the set. ```erb <%= f.date_select :birthday, with_css_classes: { month: "my-month", year: "my-year" }, { class: "my-date optional" } %> ``` Supported DateHelper methods: `select_day`, `select_month`, `select_year`, `select_hour`, `select_minute`, `select_second`, `select_datetime`, `select_time`, `time_select`, `date_select` and `datetime_select`. `:with_css_classes` option was added to the `date_select` with #7975. --- actionview/CHANGELOG.md | 16 + actionview/lib/action_view/helpers/date_helper.rb | 22 +- actionview/test/template/date_helper_test.rb | 404 ++++++++++++++++++++++ 3 files changed, 439 insertions(+), 3 deletions(-) (limited to 'actionview') diff --git a/actionview/CHANGELOG.md b/actionview/CHANGELOG.md index a1901e8a17..b023e79b66 100644 --- a/actionview/CHANGELOG.md +++ b/actionview/CHANGELOG.md @@ -1,3 +1,19 @@ +* `date_select` helper `:with_css_classes` option now accepts a hash of strings + for `:year`, `:month`, `:day`, `:hour`, `:minute`, `:second` that will extend + the select type with the given css class value. + + ```erb + <%= f.date_select :birthday, with_css_classes: { month: "my-month", year: "my-year" } %> + ``` + + ```html + + + + ``` + + *Matthias Neumayr* + * Deprecate `datetime_field` and `datetime_field_tag` helpers. Datetime input type was removed from HTML specification. One can use `datetime_local_field` and `datetime_local_field_tag` instead. diff --git a/actionview/lib/action_view/helpers/date_helper.rb b/actionview/lib/action_view/helpers/date_helper.rb index 233e613e97..43de922f74 100644 --- a/actionview/lib/action_view/helpers/date_helper.rb +++ b/actionview/lib/action_view/helpers/date_helper.rb @@ -226,8 +226,10 @@ module ActionView # for :year, :month, :day, :hour, :minute and :second. # Setting this option prepends a select option with a generic prompt (Day, Month, Year, Hour, Minute, Seconds) # or the given prompt string. - # * :with_css_classes - Set to true if you want assign different styles for 'select' tags. This option - # automatically set classes 'year', 'month', 'day', 'hour', 'minute' and 'second' for your 'select' tags. + # * :with_css_classes - Set to true or a hash of strings. Use true if you want assign generic styles for + # select tags. This automatically set classes 'year', 'month', 'day', 'hour', 'minute' and 'second'. A hash of + # strings for :year, :month, :day, :hour, :minute, :second + # will extend the select type with the given value. Use +html_options+ to modify every select tag in the set. # * :use_hidden - Set to true if you only want to generate hidden input tags. # # If anything is passed in the +html_options+ hash it will be applied to every select tag in the set. @@ -994,7 +996,7 @@ module ActionView :name => input_name_from_type(type) }.merge!(@html_options) select_options[:disabled] = 'disabled' if @options[:disabled] - select_options[:class] = [select_options[:class], type].compact.join(' ') if @options[:with_css_classes] + select_options[:class] = css_class_attribute(type, select_options[:class], @options[:with_css_classes]) if @options[:with_css_classes] select_html = "\n" select_html << content_tag("option".freeze, '', :value => '') + "\n" if @options[:include_blank] @@ -1004,6 +1006,20 @@ module ActionView (content_tag("select".freeze, select_html.html_safe, select_options) + "\n").html_safe end + # Builds the css class value for the select element + # css_class_attribute(:year, 'date optional', with_css_classes: { year: 'my-year' }) + # => "date optional my-year" + def css_class_attribute(type, html_options_class, options) + css_class = case options + when Hash + options[type.to_sym] + else + type + end + + [html_options_class, css_class].compact.join(' ') + end + # Builds a prompt option tag with supplied options or from default options. # prompt_option_tag(:month, prompt: 'Select month') # => "" diff --git a/actionview/test/template/date_helper_test.rb b/actionview/test/template/date_helper_test.rb index 4678998bdc..e67d5d0e8c 100644 --- a/actionview/test/template/date_helper_test.rb +++ b/actionview/test/template/date_helper_test.rb @@ -255,6 +255,22 @@ class DateHelperTest < ActionView::TestCase assert_dom_equal expected, select_day(16, :prompt => 'Choose day') end + def test_select_day_with_generic_with_css_classes + expected = %(\n" + + assert_dom_equal expected, select_day(16, with_css_classes: true) + end + + def test_select_day_with_custom_with_css_classes + expected = %(\n" + + assert_dom_equal expected, select_day(16, with_css_classes: { day: 'my-day' }) + end + def test_select_month expected = %(\n) + expected << %(\n\n\n\n\n\n\n\n\n\n\n\n) + expected << "\n" + + assert_dom_equal expected, select_month(8, with_css_classes: true) + end + + def test_select_month_with_custom_with_css_classes + expected = %(\n" + + assert_dom_equal expected, select_month(8, with_css_classes: { month: 'my-month' }) + end + def test_select_year expected = %(\n) + expected << %(\n\n\n) + expected << "\n" + + assert_dom_equal expected, select_year(nil, start_year: 2003, end_year: 2005, with_css_classes: true) + end + + def test_select_year_with_custom_with_css_classes + expected = %(\n" + + assert_dom_equal expected, select_year(nil, start_year: 2003, end_year: 2005, with_css_classes: { year: 'my-year' }) + end + def test_select_hour expected = %(\n) + expected << %(\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n) + expected << "\n" + + assert_dom_equal expected, select_hour(Time.mktime(2003, 8, 16, 8, 4, 18), with_css_classes: true) + end + + def test_select_hour_with_custom_with_css_classes + expected = %(\n" + + assert_dom_equal expected, select_hour(Time.mktime(2003, 8, 16, 8, 4, 18), with_css_classes: { hour: 'my-hour' }) + end + def test_select_minute expected = %(\n) + expected << %(\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n) + expected << "\n" + + assert_dom_equal expected, select_minute(Time.mktime(2003, 8, 16, 8, 4, 18), with_css_classes: true) + end + + def test_select_minute_with_custom_with_css_classes + expected = %(\n" + + assert_dom_equal expected, select_minute(Time.mktime(2003, 8, 16, 8, 4, 18), with_css_classes: { minute: 'my-minute' }) + end + def test_select_second expected = %(\n) + expected << %(\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n) + expected << "\n" + + assert_dom_equal expected, select_second(Time.mktime(2003, 8, 16, 8, 4, 18), with_css_classes: true) + end + + def test_select_second_with_custom_with_css_classes + expected = %(\n" + + assert_dom_equal expected, select_second(Time.mktime(2003, 8, 16, 8, 4, 18), with_css_classes: { second: 'my-second' }) + end + def test_select_date expected = %(\n) + expected << %(\n\n\n) + expected << "\n" + + expected << %(\n" + + expected << %(\n" + + assert_dom_equal expected, select_date(Time.mktime(2003, 8, 16), start_year: 2003, end_year: 2005, with_css_classes: { year: 'my-year', month: 'my-month', day: 'my-day' }) + end + def test_select_date_with_css_classes_option_and_html_class_option expected = %(\n) + expected << %(\n\n\n) + expected << "\n" + + expected << %(\n" + + expected << %(\n" + + assert_dom_equal expected, select_date(Time.mktime(2003, 8, 16), {start_year: 2003, end_year: 2005, with_css_classes: { year: 'my-year', month: 'my-month', day: 'my-day' }}, { class: 'date optional' }) + end + + def test_select_date_with_partial_with_css_classes_and_html_class_option + expected = %(\n" + + expected << %(\n" + + expected << %(\n" + + assert_dom_equal expected, select_date(Time.mktime(2003, 8, 16), {start_year: 2003, end_year: 2005, with_css_classes: { month: 'my-month custom-grid' }}, { class: 'date optional' }) + end + + def test_select_date_with_html_class_option + expected = %(\n" + + expected << %(\n" + + expected << %(\n" + + assert_dom_equal expected, select_date(Time.mktime(2003, 8, 16), { start_year: 2003, end_year: 2005 }, { class: 'date optional custom-grid' }) + end + def test_select_datetime expected = %(\n) + expected << %(\n\n\n) + expected << "\n" + + expected << %(\n" + + expected << %(\n" + + expected << " — " + + expected << %(\n" + + expected << " : " + + expected << %(\n" + + assert_dom_equal expected, select_datetime(Time.mktime(2003, 8, 16, 8, 4, 18), start_year: 2003, end_year: 2005, with_css_classes: true) + end + + def test_select_datetime_with_custom_with_css_classes + expected = %(\n" + + expected << %(\n" + + expected << %(\n" + + expected << " — " + + expected << %(\n" + + expected << " : " + + expected << %(\n" + + assert_dom_equal expected, select_datetime(Time.mktime(2003, 8, 16, 8, 4, 18), start_year: 2003, end_year: 2005, with_css_classes: { day: 'my-day', month: 'my-month', year: 'my-year', hour: 'my-hour', minute: 'my-minute' }) + end + def test_select_datetime_with_custom_hours expected = %(\n) + expected << %(\n) + expected << %(\n) + + expected << %(\n" + + expected << " : " + + expected << %(\n" + + expected << " : " + + expected << %(\n" + + assert_dom_equal expected, select_time(Time.mktime(2003, 8, 16, 8, 4, 18), include_seconds: true, with_css_classes: true) + end + + def test_select_time_with_custom_with_css_classes + expected = %(\n) + expected << %(\n) + expected << %(\n) + + expected << %(\n" + + expected << " : " + + expected << %(\n" + + expected << " : " + + expected << %(\n" + + assert_dom_equal expected, select_time(Time.mktime(2003, 8, 16, 8, 4, 18), include_seconds: true, with_css_classes: { hour: 'my-hour', minute: 'my-minute', second: 'my-second' }) + end + def test_select_time_with_hidden expected = %(\n) expected << %(\n) @@ -2014,6 +2278,46 @@ class DateHelperTest < ActionView::TestCase assert_dom_equal expected, date_select("post", "written_on", :prompt => {:year => 'Choose year', :month => 'Choose month', :day => 'Choose day'}) end + def test_date_select_with_generic_with_css_classes + @post = Post.new + @post.written_on = Date.new(2004, 6, 15) + + expected = %{\n" + + expected << %{\n" + + expected << %{\n" + + assert_dom_equal expected, date_select("post", "written_on", with_css_classes: true) + end + + def test_date_select_with_custom_with_css_classes + @post = Post.new + @post.written_on = Date.new(2004, 6, 15) + + expected = %{\n" + + expected << %{\n" + + expected << %{\n" + + assert_dom_equal expected, date_select("post", "written_on", with_css_classes: { year: 'my-year', month: 'my-month', day: 'my-day' }) + end + def test_time_select @post = Post.new @post.written_on = Time.local(2004, 6, 15, 15, 16, 35) @@ -2220,6 +2524,48 @@ class DateHelperTest < ActionView::TestCase assert_dom_equal expected, time_select("post", "written_on", :prompt => {:hour => 'Choose hour', :minute => 'Choose minute'}) end + def test_time_select_with_generic_with_css_classes + @post = Post.new + @post.written_on = Time.local(2004, 6, 15, 15, 16, 35) + + expected = %{\n} + expected << %{\n} + expected << %{\n} + + expected << %(\n" + + expected << " : " + + expected << %(\n" + + assert_dom_equal expected, time_select("post", "written_on", with_css_classes: true) + end + + def test_time_select_with_custom_with_css_classes + @post = Post.new + @post.written_on = Time.local(2004, 6, 15, 15, 16, 35) + + expected = %{\n} + expected << %{\n} + expected << %{\n} + + expected << %(\n" + + expected << " : " + + expected << %(\n" + + assert_dom_equal expected, time_select("post", "written_on", with_css_classes: { hour: 'my-hour', minute: 'my-minute' }) + end + def test_time_select_with_disabled_html_option @post = Post.new @post.written_on = Time.local(2004, 6, 15, 15, 16, 35) @@ -2493,6 +2839,64 @@ class DateHelperTest < ActionView::TestCase assert_dom_equal expected, datetime_select("post", "updated_at", :start_year=>1999, :end_year=>2009, :prompt => {:year => 'Choose year', :month => 'Choose month', :day => 'Choose day', :hour => 'Choose hour', :minute => 'Choose minute'}) end + def test_datetime_select_with_generic_with_css_classes + @post = Post.new + @post.written_on = Time.local(2004, 6, 15, 15, 16, 35) + + expected = %{\n" + + expected << %{\n" + + expected << %{\n" + + expected << " — " + + expected << %{\n" + expected << " : " + expected << %{\n" + + assert_dom_equal expected, datetime_select("post", "written_on", start_year: 1999, end_year: 2009, with_css_classes: true) + end + + def test_datetime_select_with_custom_with_css_classes + @post = Post.new + @post.written_on = Time.local(2004, 6, 15, 15, 16, 35) + + expected = %{\n" + + expected << %{\n" + + expected << %{\n" + + expected << " — " + + expected << %{\n" + expected << " : " + expected << %{\n" + + assert_dom_equal expected, datetime_select("post", "written_on", start_year: 1999, end_year: 2009, with_css_classes: { year: 'my-year', month: 'my-month', day: 'my-day', hour: 'my-hour', minute: 'my-minute' }) + end + def test_date_select_with_zero_value_and_no_start_year expected = %(