Provides most of the helper methods provided by `ActionView::Helpers:: FormTagHelper`, but with relevant CSS classes, wrappers applied. Signed-off-by: Alex Coles <alex@alexbcoles.com>pull/2612/head
parent
3afed931e7
commit
21503e89e5
@ -0,0 +1,152 @@ |
||||
#-- encoding: UTF-8 |
||||
#-- copyright |
||||
# OpenProject is a project management system. |
||||
# Copyright (C) 2012-2015 the OpenProject Foundation (OPF) |
||||
# |
||||
# This program is free software; you can redistribute it and/or |
||||
# modify it under the terms of the GNU General Public License version 3. |
||||
# |
||||
# OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows: |
||||
# Copyright (C) 2006-2013 Jean-Philippe Lang |
||||
# Copyright (C) 2010-2013 the ChiliProject Team |
||||
# |
||||
# This program is free software; you can redistribute it and/or |
||||
# modify it under the terms of the GNU General Public License |
||||
# as published by the Free Software Foundation; either version 2 |
||||
# of the License, or (at your option) any later version. |
||||
# |
||||
# This program is distributed in the hope that it will be useful, |
||||
# but WITHOUT ANY WARRANTY; without even the implied warranty of |
||||
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
||||
# GNU General Public License for more details. |
||||
# |
||||
# You should have received a copy of the GNU General Public License |
||||
# along with this program; if not, write to the Free Software |
||||
# Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. |
||||
# |
||||
# See doc/COPYRIGHT.rdoc for more details. |
||||
#++ |
||||
|
||||
module OpenProject |
||||
module FormTagHelper |
||||
include ActionView::Helpers::FormTagHelper |
||||
|
||||
TEXT_LIKE_FIELDS = [ |
||||
'number_field', 'password_field', 'url_field', 'telephone_field', 'email_field' |
||||
].freeze |
||||
|
||||
def styled_form_tag(url_for_options = {}, options = {}, &block) |
||||
apply_css_class_to_options(options, 'form') |
||||
form_tag(url_for_options, options, &block) |
||||
end |
||||
|
||||
def styled_select_tag(name, styled_option_tags = nil, options = {}) |
||||
apply_css_class_to_options(options, 'form--select') |
||||
wrap_field 'select' do |
||||
select_tag(name, styled_option_tags, options) |
||||
end |
||||
end |
||||
|
||||
def styled_text_field_tag(name, value = nil, options = {}) |
||||
apply_css_class_to_options(options, 'form--text-field') |
||||
wrap_field 'text-field' do |
||||
text_field_tag(name, value, options) |
||||
end |
||||
end |
||||
|
||||
def styled_label_tag(name = nil, content_or_options = nil, options = nil, &block) |
||||
apply_css_class_to_options( |
||||
block_given? && content_or_options.is_a?(Hash) ? content_or_options : (options ||= {}), |
||||
'form--label' |
||||
) |
||||
label_tag(name, content_or_options, options, &block) |
||||
end |
||||
|
||||
def styled_file_field_tag(name, options = {}) |
||||
apply_css_class_to_options(options, 'form--file-field') |
||||
wrap_field 'file-field' do |
||||
file_field_tag(name, options) |
||||
end |
||||
end |
||||
|
||||
def styled_text_area_tag(name, content = nil, options = {}) |
||||
apply_css_class_to_options(options, 'form--text-area') |
||||
wrap_field 'text-area' do |
||||
text_area_tag(name, content, options) |
||||
end |
||||
end |
||||
|
||||
def styled_check_box_tag(name, value = '1', checked = false, options = {}) |
||||
apply_css_class_to_options(options, 'form--check-box') |
||||
wrap_field 'check-box' do |
||||
check_box_tag(name, value, checked, options) |
||||
end |
||||
end |
||||
|
||||
def styled_radio_button_tag(name, value, checked = false, options = {}) |
||||
apply_css_class_to_options(options, 'form--radio-button') |
||||
wrap_field 'radio-button' do |
||||
radio_button_tag(name, value, checked, options) |
||||
end |
||||
end |
||||
|
||||
def styled_submit_tag(value = 'Save changes', options = {}) |
||||
apply_css_class_to_options(options, 'button') |
||||
submit_tag(value, options) |
||||
end |
||||
|
||||
def styled_button_tag(content_or_options = nil, options = nil, &block) |
||||
apply_css_class_to_options( |
||||
block_given? && content_or_options.is_a?(Hash) ? content_or_options : (options ||= {}), |
||||
'button' |
||||
) |
||||
button_tag(content_or_options, options, &block) |
||||
end |
||||
|
||||
def styled_field_set_tag(legend = nil, options = nil, &block) |
||||
apply_css_class_to_options(options, 'form--fieldset') |
||||
field_set_tag(legend, options, &block) |
||||
end |
||||
|
||||
def styled_search_field_tag(name, value = nil, options = {}) |
||||
apply_css_class_to_options(options, 'form--search-field') |
||||
wrap_field 'search-field' do |
||||
search_field_tag(name, value, options) |
||||
end |
||||
end |
||||
|
||||
TEXT_LIKE_FIELDS.each do |field| |
||||
define_method :"styled_#{field}_tag" do |name, value = nil, options = {}| |
||||
apply_css_class_to_options(options, "form--text-field -#{field.gsub(/_field$/, '')}") |
||||
wrap_field field do |
||||
__send__(:"#{field}_tag", name, value, options) |
||||
end |
||||
end |
||||
end |
||||
|
||||
def styled_range_field_tag(name, value = nil, options = {}) |
||||
apply_css_class_to_options(options, 'form--range-field') |
||||
wrap_field 'range-field' do |
||||
range_field_tag(name, value, options) |
||||
end |
||||
end |
||||
|
||||
private |
||||
|
||||
def wrap_field(name, &block) |
||||
content_tag(:span, class: field_container_css_class(name), &block) |
||||
end |
||||
|
||||
def apply_css_class_to_options(options, css_class) |
||||
options[:class] = Array(options[:class]) + Array(css_class) |
||||
end |
||||
|
||||
def field_container_css_class(selector) |
||||
if TEXT_LIKE_FIELDS.include?(selector) |
||||
'form--text-field-container' |
||||
else |
||||
"form--#{selector.tr('_', '-')}-container" |
||||
end |
||||
end |
||||
end |
||||
end |
@ -0,0 +1,324 @@ |
||||
#-- encoding: UTF-8 |
||||
#-- copyright |
||||
# OpenProject is a project management system. |
||||
# Copyright (C) 2012-2015 the OpenProject Foundation (OPF) |
||||
# |
||||
# This program is free software; you can redistribute it and/or |
||||
# modify it under the terms of the GNU General Public License version 3. |
||||
# |
||||
# OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows: |
||||
# Copyright (C) 2006-2013 Jean-Philippe Lang |
||||
# Copyright (C) 2010-2013 the ChiliProject Team |
||||
# |
||||
# This program is free software; you can redistribute it and/or |
||||
# modify it under the terms of the GNU General Public License |
||||
# as published by the Free Software Foundation; either version 2 |
||||
# of the License, or (at your option) any later version. |
||||
# |
||||
# This program is distributed in the hope that it will be useful, |
||||
# but WITHOUT ANY WARRANTY; without even the implied warranty of |
||||
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
||||
# GNU General Public License for more details. |
||||
# |
||||
# You should have received a copy of the GNU General Public License |
||||
# along with this program; if not, write to the Free Software |
||||
# Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. |
||||
# |
||||
# See doc/COPYRIGHT.rdoc for more details. |
||||
#++ |
||||
|
||||
require 'spec_helper' |
||||
|
||||
describe OpenProject::FormTagHelper, type: :helper do |
||||
let(:options) { {} } |
||||
|
||||
describe '#styled_form_tag' do |
||||
subject(:output) { |
||||
helper.styled_form_tag('/feedback', options) do |
||||
content_tag(:p, 'Form content') |
||||
end |
||||
} |
||||
|
||||
it_behaves_like 'not wrapped in container', 'form-container' |
||||
|
||||
it 'should output element' do |
||||
expect(output).to eq %{ |
||||
<form accept-charset="UTF-8" action="/feedback" class="form" |
||||
method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" |
||||
type="hidden" value="✓" /></div><p>Form content</p></form> |
||||
}.squish |
||||
end |
||||
end |
||||
|
||||
describe '#styled_select_tag' do |
||||
subject(:output) { |
||||
helper.styled_select_tag('field', '<option value="33">FUN</option>'.html_safe, options) |
||||
} |
||||
|
||||
it_behaves_like 'wrapped in container', 'select-container' |
||||
|
||||
it 'should output element' do |
||||
expect(output).to include %{ |
||||
<select class="form--select" |
||||
id="field" name="field"><option value="33">FUN</option></select> |
||||
}.squish |
||||
end |
||||
end |
||||
|
||||
describe '#styled_text_field_tag' do |
||||
let(:value) { 'Something to be seen' } |
||||
|
||||
subject(:output) { |
||||
helper.styled_text_field_tag('field', value, options) |
||||
} |
||||
|
||||
it_behaves_like 'wrapped in container', 'text-field-container' |
||||
|
||||
it 'should output element' do |
||||
expect(output).to include %{ |
||||
<input class="form--text-field" |
||||
id="field" name="field" type="text" value="Something to be seen" /> |
||||
}.squish |
||||
end |
||||
end |
||||
|
||||
describe '#styled_label_tag' do |
||||
subject(:output) { |
||||
helper.styled_label_tag('field', nil, options) do |
||||
'Label content' |
||||
end |
||||
} |
||||
|
||||
it_behaves_like 'not wrapped in container', 'label-container' |
||||
|
||||
it 'should output element' do |
||||
expect(output).to eq %{ |
||||
<label class="form--label" for="field">Label content</label> |
||||
}.squish |
||||
end |
||||
end |
||||
|
||||
describe '#styled_file_field_tag' do |
||||
subject(:output) { |
||||
helper.styled_file_field_tag('file_field', options) |
||||
} |
||||
|
||||
it_behaves_like 'wrapped in container', 'file-field-container' |
||||
|
||||
it 'should output element' do |
||||
expect(output).to include %{ |
||||
<input class="form--file-field" |
||||
id="file_field" name="file_field" type="file" /> |
||||
}.squish |
||||
end |
||||
end |
||||
|
||||
describe '#styled_password_field_tag' do |
||||
subject(:output) { |
||||
helper.styled_password_field_tag('password', 'nopE3king!', options) |
||||
} |
||||
|
||||
it_behaves_like 'wrapped in container', 'text-field-container' |
||||
|
||||
it 'should output element' do |
||||
expect(output).to include %{ |
||||
<input class="form--text-field -password" |
||||
id="password" name="password" type="password" value="nopE3king!" /> |
||||
}.squish |
||||
end |
||||
end |
||||
|
||||
describe '#styled_text_area_tag' do |
||||
subject(:output) { |
||||
helper.styled_text_area_tag('field', 'Words are important', options) |
||||
} |
||||
|
||||
it_behaves_like 'wrapped in container', 'text-area-container' |
||||
|
||||
it 'should output element' do |
||||
expect(output).to include %{ |
||||
<textarea class="form--text-area" id="field" name="field"> |
||||
Words are important</textarea> |
||||
}.strip |
||||
end |
||||
end |
||||
|
||||
describe '#styled_check_box_tag' do |
||||
subject(:output) { |
||||
helper.styled_check_box_tag('field', '1', false, options) |
||||
} |
||||
|
||||
it_behaves_like 'wrapped in container', 'check-box-container' |
||||
|
||||
it 'should output element' do |
||||
expect(output).to include %{ |
||||
<input class="form--check-box" |
||||
id="field" name="field" type="checkbox" value="1" /> |
||||
}.squish |
||||
end |
||||
end |
||||
|
||||
describe '#styled_radio_button_tag' do |
||||
let(:value) { 'good choice' } |
||||
|
||||
subject(:output) { |
||||
helper.styled_radio_button_tag('field', value, false, options) |
||||
} |
||||
|
||||
it_behaves_like 'wrapped in container', 'radio-button-container' |
||||
|
||||
it 'should output element' do |
||||
expect(output).to include %{ |
||||
<input class="form--radio-button" |
||||
id="field_good_choice" name="field" type="radio" value="good choice" /> |
||||
}.squish |
||||
end |
||||
end |
||||
|
||||
describe '#styled_submit_tag' do |
||||
subject(:output) { |
||||
helper.styled_submit_tag('Save it!', options) |
||||
} |
||||
|
||||
it_behaves_like 'not wrapped in container', 'submit-container' |
||||
|
||||
it 'should output element' do |
||||
expect(output).to eq %{ |
||||
<input class="button" name="commit" type="submit" value="Save it!" /> |
||||
}.squish |
||||
end |
||||
end |
||||
|
||||
describe '#styled_button_tag' do |
||||
subject(:output) { |
||||
helper.styled_button_tag(options) do |
||||
"Don't save!" |
||||
end |
||||
} |
||||
|
||||
it_behaves_like 'not wrapped in container', 'button-container' |
||||
|
||||
it 'should output element' do |
||||
expect(output).to eq %{ |
||||
<button class="button">Don't save!</button> |
||||
}.squish |
||||
end |
||||
end |
||||
|
||||
describe '#styled_field_set_tag' do |
||||
subject(:output) { |
||||
helper.styled_field_set_tag('Fieldset Legend', options) do |
||||
content_tag(:p, 'Fieldset content') |
||||
end |
||||
} |
||||
|
||||
it_behaves_like 'not wrapped in container', 'fieldset-container' |
||||
|
||||
it 'should output element' do |
||||
expect(output).to eq %{ |
||||
<fieldset |
||||
class="form--fieldset"><legend>Fieldset Legend</legend><p>Fieldset content</p></fieldset> |
||||
}.squish |
||||
end |
||||
end |
||||
|
||||
describe '#styled_search_field_tag' do |
||||
let(:value) { 'Find me' } |
||||
|
||||
subject(:output) { |
||||
helper.styled_search_field_tag('field', value, options) |
||||
} |
||||
|
||||
it_behaves_like 'wrapped in container', 'search-field-container' |
||||
|
||||
it 'should output element' do |
||||
expect(output).to include %{ |
||||
<input class="form--search-field" |
||||
id="field" name="field" type="search" value="Find me" /> |
||||
}.squish |
||||
end |
||||
end |
||||
|
||||
describe '#styled_telephone_field_tag' do |
||||
let(:value) { '+49 555 111 999' } |
||||
|
||||
subject(:output) { |
||||
helper.styled_telephone_field_tag('field', value, options) |
||||
} |
||||
|
||||
it_behaves_like 'wrapped in container', 'text-field-container' |
||||
|
||||
it 'should output element' do |
||||
expect(output).to include %{ |
||||
<input class="form--text-field -telephone" |
||||
id="field" name="field" type="tel" value="+49 555 111 999" /> |
||||
}.squish |
||||
end |
||||
end |
||||
|
||||
describe '#styled_url_field_tag' do |
||||
let(:value) { 'https://blogger.org/' } |
||||
|
||||
subject(:output) { |
||||
helper.styled_url_field_tag('field', value, options) |
||||
} |
||||
|
||||
it_behaves_like 'wrapped in container', 'text-field-container' |
||||
|
||||
it 'should output element' do |
||||
expect(output).to include %{ |
||||
<input class="form--text-field -url" |
||||
id="field" name="field" type="url" value="https://blogger.org/" /> |
||||
}.squish |
||||
end |
||||
end |
||||
|
||||
describe '#styled_email_field_tag' do |
||||
let(:value) { 'joe@blogger.com' } |
||||
|
||||
subject(:output) { |
||||
helper.styled_email_field_tag('field', value, options) |
||||
} |
||||
|
||||
it_behaves_like 'wrapped in container', 'text-field-container' |
||||
|
||||
it 'should output element' do |
||||
expect(output).to include %{ |
||||
<input class="form--text-field -email" |
||||
id="field" name="field" type="email" value="joe@blogger.com" /> |
||||
}.squish |
||||
end |
||||
end |
||||
|
||||
describe '#styled_number_field_tag' do |
||||
let(:value) { 2 } |
||||
|
||||
subject(:output) { |
||||
helper.styled_number_field_tag('field', value, options) |
||||
} |
||||
|
||||
it_behaves_like 'wrapped in container', 'text-field-container' |
||||
|
||||
it 'should output element' do |
||||
expect(output).to include %{ |
||||
<input class="form--text-field -number" id="field" name="field" type="number" value="2" /> |
||||
}.squish |
||||
end |
||||
end |
||||
|
||||
describe '#styled_range_field_tag' do |
||||
let(:value) { 2 } |
||||
|
||||
subject(:output) { |
||||
helper.styled_range_field_tag('field', value, options) |
||||
} |
||||
|
||||
it_behaves_like 'wrapped in container', 'range-field-container' |
||||
|
||||
it 'should output element' do |
||||
expect(output).to include %{ |
||||
<input class="form--range-field" id="field" name="field" type="range" value="2" /> |
||||
}.squish |
||||
end |
||||
end |
||||
end |
Loading…
Reference in new issue