da-js 0.0.1 → 0.0.2
Sign up to get free protection for your applications and to get access to all the features.
- data/CHANGELOG.md +4 -1
- data/features/change_tracker.feature +9 -3
- data/features/step_definitions/change_tracker_steps.rb +30 -16
- data/features/support/testapp/views/form_change_tracker.erb +122 -1
- data/lib/assets/javascripts/da-js/form_change_tracker.js +4 -4
- data/lib/da-js/version.rb +1 -1
- metadata +3 -3
data/CHANGELOG.md
CHANGED
|
@@ -37,6 +37,7 @@ Feature: Change tracker for forms
|
|
|
37
37
|
| Form | Element |
|
|
38
38
|
| simple_form | form element and label |
|
|
39
39
|
| scaffold_form | field container |
|
|
40
|
+
| formtastic | field container |
|
|
40
41
|
|
|
41
42
|
|
|
42
43
|
Scenario: Radiobuttons in an empty simple form
|
|
@@ -92,6 +93,7 @@ Feature: Change tracker for forms
|
|
|
92
93
|
| Form | Element |
|
|
93
94
|
| simple_form | form element and label |
|
|
94
95
|
| scaffold_form | field container |
|
|
96
|
+
| formtastic | field container |
|
|
95
97
|
|
|
96
98
|
|
|
97
99
|
Scenario: Radiobuttons in an prefilled simple form
|
|
@@ -107,8 +109,8 @@ Feature: Change tracker for forms
|
|
|
107
109
|
Then no form element and label should be marked as changed
|
|
108
110
|
|
|
109
111
|
|
|
110
|
-
Scenario: Radiobuttons in an prefilled
|
|
111
|
-
Given an prefilled
|
|
112
|
+
Scenario Outline: Radiobuttons in an prefilled form
|
|
113
|
+
Given an prefilled <Form>
|
|
112
114
|
Then no form element and label should be marked as changed
|
|
113
115
|
|
|
114
116
|
When I choose the second radiobutton
|
|
@@ -116,4 +118,8 @@ Feature: Change tracker for forms
|
|
|
116
118
|
|
|
117
119
|
When I choose the first radiobutton
|
|
118
120
|
Then no form element and label should be marked as changed
|
|
119
|
-
|
|
121
|
+
|
|
122
|
+
Examples:
|
|
123
|
+
| Form |
|
|
124
|
+
| scaffold_form |
|
|
125
|
+
| formtastic |
|
|
@@ -1,10 +1,24 @@
|
|
|
1
|
+
RSpec::Matchers.define :be_marked_as_changed do
|
|
2
|
+
match do |element|
|
|
3
|
+
element["class"].split(" ").include?("changed")
|
|
4
|
+
end
|
|
5
|
+
end
|
|
6
|
+
|
|
1
7
|
def find_element_and_label(element)
|
|
2
8
|
id = "#{@form}_#{element}"
|
|
3
9
|
[find("##{@form} ##{id}"), find("##{@form} label[for='#{id}']")]
|
|
4
10
|
end
|
|
5
11
|
|
|
6
12
|
def find_container(element)
|
|
7
|
-
|
|
13
|
+
container = case @form
|
|
14
|
+
when /^scaffold_form/ then "div[contains(@class, 'field')]"
|
|
15
|
+
when /^formtastic/ then "li[contains(@class, 'input')]"
|
|
16
|
+
else raise "I don't know about '#{@form}' forms ..."
|
|
17
|
+
end
|
|
18
|
+
within "##{@form}" do
|
|
19
|
+
element_id = find_field(element)["id"]
|
|
20
|
+
find :xpath, ".//#{container}[.//*[@id='#{element_id}']]"
|
|
21
|
+
end
|
|
8
22
|
end
|
|
9
23
|
|
|
10
24
|
Given /^an? (empty|prefilled) (\w+)$/ do |type, form|
|
|
@@ -72,7 +86,7 @@ end
|
|
|
72
86
|
Then /^no form element and label should be marked as changed$/ do
|
|
73
87
|
within "##{@form}" do
|
|
74
88
|
all("input,textarea,select,label").each do |element|
|
|
75
|
-
element
|
|
89
|
+
element.should_not be_marked_as_changed
|
|
76
90
|
end
|
|
77
91
|
end
|
|
78
92
|
end
|
|
@@ -80,7 +94,7 @@ end
|
|
|
80
94
|
Then /^no field container should be marked as changed$/ do
|
|
81
95
|
within "##{@form}" do
|
|
82
96
|
all(".field").each do |element|
|
|
83
|
-
element
|
|
97
|
+
element.should_not be_marked_as_changed
|
|
84
98
|
end
|
|
85
99
|
end
|
|
86
100
|
end
|
|
@@ -89,40 +103,40 @@ Then /^the (first|second|third) radiobutton's form element and label should( not
|
|
|
89
103
|
button = (which == "first" ? "1" : (which == "second" ? "2" : "3"))
|
|
90
104
|
element, label = find_element_and_label("radiobutton_#{button}")
|
|
91
105
|
if no_longer
|
|
92
|
-
element
|
|
93
|
-
label
|
|
106
|
+
element.should_not be_marked_as_changed
|
|
107
|
+
label.should_not be_marked_as_changed
|
|
94
108
|
else
|
|
95
|
-
element
|
|
96
|
-
label
|
|
109
|
+
element.should be_marked_as_changed
|
|
110
|
+
label.should be_marked_as_changed
|
|
97
111
|
end
|
|
98
112
|
end
|
|
99
113
|
|
|
100
114
|
Then /^the (first|second|third) radiobutton's field container should( not| no longer)? be marked as changed$/ do |which, no_longer|
|
|
101
115
|
button = (which == "first" ? "1" : (which == "second" ? "2" : "3"))
|
|
102
|
-
container = find_container("
|
|
116
|
+
container = find_container("radiobutton #{button}")
|
|
103
117
|
if no_longer
|
|
104
|
-
container
|
|
118
|
+
container.should_not be_marked_as_changed
|
|
105
119
|
else
|
|
106
|
-
container
|
|
120
|
+
container.should be_marked_as_changed
|
|
107
121
|
end
|
|
108
122
|
end
|
|
109
123
|
|
|
110
124
|
Then /^the (\w+)'s form element and label should( no longer)? be marked as changed$/ do |element, no_longer|
|
|
111
125
|
element, label = find_element_and_label(element)
|
|
112
126
|
if no_longer
|
|
113
|
-
element
|
|
114
|
-
label
|
|
127
|
+
element.should_not be_marked_as_changed
|
|
128
|
+
label.should_not be_marked_as_changed
|
|
115
129
|
else
|
|
116
|
-
element
|
|
117
|
-
label
|
|
130
|
+
element.should be_marked_as_changed
|
|
131
|
+
label.should be_marked_as_changed
|
|
118
132
|
end
|
|
119
133
|
end
|
|
120
134
|
|
|
121
135
|
Then /^the (\w+)'s field container should( no longer)? be marked as changed$/ do |element, no_longer|
|
|
122
136
|
container = find_container(element)
|
|
123
137
|
if no_longer
|
|
124
|
-
container
|
|
138
|
+
container.should_not be_marked_as_changed
|
|
125
139
|
else
|
|
126
|
-
container
|
|
140
|
+
container.should be_marked_as_changed
|
|
127
141
|
end
|
|
128
142
|
end
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
<title>Test</title>
|
|
5
5
|
<%= "<script src='../vendor/jquery-#{@jquery_version}.js'></script>" %>
|
|
6
|
-
<script src="/assets/javascripts/da.js"></script>
|
|
6
|
+
<script src="/assets/javascripts/da-js.js"></script>
|
|
7
7
|
<style type="text/css">
|
|
8
8
|
form {
|
|
9
9
|
background: #eee;
|
|
@@ -143,6 +143,127 @@
|
|
|
143
143
|
</div>
|
|
144
144
|
</form>
|
|
145
145
|
|
|
146
|
+
<form accept-charset="UTF-8" action="" id="formtastic" novalidate="novalidate">
|
|
147
|
+
<h2>Formtastic Form</h2>
|
|
148
|
+
<p>
|
|
149
|
+
A form generated by <a href="https://github.com/justinfrench/formtastic">Formtastic</a>.
|
|
150
|
+
</p>
|
|
151
|
+
<div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" /><input name="authenticity_token" type="hidden" value="XKE2QlUw7L5WK3oez+nORpWaoGb76jO/8gPEEZlELm0="></div>
|
|
152
|
+
<fieldset class="inputs">
|
|
153
|
+
<ol>
|
|
154
|
+
<li class="string input optional stringish" id="formtastic_textfield_input">
|
|
155
|
+
<label class=" label" for="formtastic_textfield">textfield</label>
|
|
156
|
+
<input id="formtastic_textfield" maxlength="255" name="formtastic[textfield]" type="text">
|
|
157
|
+
</li>
|
|
158
|
+
<li class="text input optional" id="formtastic_textarea_input">
|
|
159
|
+
<label class=" label" for="formtastic_textarea">textarea</label>
|
|
160
|
+
<textarea id="formtastic_textarea" name="formtastic[textarea]" rows="20"></textarea>
|
|
161
|
+
</li>
|
|
162
|
+
<li class="check_boxes input optional" id="formtastic_checkbox_input">
|
|
163
|
+
<fieldset class="choices">
|
|
164
|
+
<legend class="label"><label>checkbox</label></legend>
|
|
165
|
+
<input id="formtastic_checkbox_none" name="formtastic[checkbox][]" type="hidden" value="">
|
|
166
|
+
<ol class="choices-group">
|
|
167
|
+
<li class="choice">
|
|
168
|
+
<label for="formtastic_checkbox_1">
|
|
169
|
+
<input id="formtastic_checkbox_1" name="formtastic[checkbox][]" type="checkbox" value="1">checkbox
|
|
170
|
+
</label>
|
|
171
|
+
</li>
|
|
172
|
+
</ol>
|
|
173
|
+
</fieldset>
|
|
174
|
+
</li>
|
|
175
|
+
<li class="radio input optional" id="formtastic_radiobutton_input">
|
|
176
|
+
<fieldset class="choices"><legend class="label"><label>radiobuttons</label></legend>
|
|
177
|
+
<ol class="choices-group">
|
|
178
|
+
<li class="choice">
|
|
179
|
+
<label for="formtastic_radiobutton_1">
|
|
180
|
+
<input id="formtastic_radiobutton_1" name="formtastic[radiobutton]" type="radio" value="1">radiobutton 1
|
|
181
|
+
</label>
|
|
182
|
+
</li>
|
|
183
|
+
<li class="choice">
|
|
184
|
+
<label for="formtastic_radiobutton_2">
|
|
185
|
+
<input id="formtastic_radiobutton_2" name="formtastic[radiobutton]" type="radio" value="2">radiobutton 2
|
|
186
|
+
</label>
|
|
187
|
+
</li>
|
|
188
|
+
<li class="choice">
|
|
189
|
+
<label for="formtastic_radiobutton_3">
|
|
190
|
+
<input id="formtastic_radiobutton_3" name="formtastic[radiobutton]" type="radio" value="3">radiobutton 3
|
|
191
|
+
</label>
|
|
192
|
+
</li>
|
|
193
|
+
</ol>
|
|
194
|
+
</fieldset>
|
|
195
|
+
</li>
|
|
196
|
+
<li class="select input optional" id="formtastic_select_input">
|
|
197
|
+
<label class=" label" for="formtastic_select">select</label>
|
|
198
|
+
<select id="formtastic_select" name="formtastic[select]">
|
|
199
|
+
<option value=""></option>
|
|
200
|
+
<option value="1">option 1</option>
|
|
201
|
+
<option value="2">option 2</option>
|
|
202
|
+
</select>
|
|
203
|
+
</li>
|
|
204
|
+
</ol>
|
|
205
|
+
</fieldset>
|
|
206
|
+
</form>
|
|
207
|
+
|
|
208
|
+
<form accept-charset="UTF-8" action="" id="formtastic_prefilled" novalidate="novalidate">
|
|
209
|
+
<h2>Formtastic Form (prefilled)</h2>
|
|
210
|
+
<div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" /><input name="authenticity_token" type="hidden" value="XKE2QlUw7L5WK3oez+nORpWaoGb76jO/8gPEEZlELm0="></div>
|
|
211
|
+
<fieldset class="inputs">
|
|
212
|
+
<ol>
|
|
213
|
+
<li class="string input optional stringish" id="formtastic_prefilled_textfield_input">
|
|
214
|
+
<label class=" label" for="formtastic_prefilled_textfield">textfield</label>
|
|
215
|
+
<input id="formtastic_prefilled_textfield" maxlength="255" name="formtastic_prefilled[textfield]" type="text" value="text">
|
|
216
|
+
</li>
|
|
217
|
+
<li class="text input optional" id="formtastic_prefilled_textarea_input">
|
|
218
|
+
<label class=" label" for="formtastic_prefilled_textarea">textarea</label>
|
|
219
|
+
<textarea id="formtastic_prefilled_textarea" name="formtastic_prefilled[textarea]" rows="20">text</textarea>
|
|
220
|
+
</li>
|
|
221
|
+
<li class="check_boxes input optional" id="formtastic_prefilled_checkbox_input">
|
|
222
|
+
<fieldset class="choices">
|
|
223
|
+
<legend class="label"><label>checkbox</label></legend>
|
|
224
|
+
<input id="formtastic_prefilled_checkbox_none" name="formtastic_prefilled[checkbox][]" type="hidden" value="">
|
|
225
|
+
<ol class="choices-group">
|
|
226
|
+
<li class="choice">
|
|
227
|
+
<label for="formtastic_prefilled_checkbox_1">
|
|
228
|
+
<input id="formtastic_prefilled_checkbox_1" name="formtastic_prefilled[checkbox][]" type="checkbox" value="1" checked>checkbox
|
|
229
|
+
</label>
|
|
230
|
+
</li>
|
|
231
|
+
</ol>
|
|
232
|
+
</fieldset>
|
|
233
|
+
</li>
|
|
234
|
+
<li class="radio input optional" id="formtastic_prefilled_radiobutton_input">
|
|
235
|
+
<fieldset class="choices"><legend class="label"><label>radiobuttons</label></legend>
|
|
236
|
+
<ol class="choices-group">
|
|
237
|
+
<li class="choice">
|
|
238
|
+
<label for="formtastic_prefilled_radiobutton_1">
|
|
239
|
+
<input id="formtastic_prefilled_radiobutton_1" name="formtastic_prefilled[radiobutton]" type="radio" value="1" checked>radiobutton 1
|
|
240
|
+
</label>
|
|
241
|
+
</li>
|
|
242
|
+
<li class="choice">
|
|
243
|
+
<label for="formtastic_prefilled_radiobutton_2">
|
|
244
|
+
<input id="formtastic_prefilled_radiobutton_2" name="formtastic_prefilled[radiobutton]" type="radio" value="2">radiobutton 2
|
|
245
|
+
</label>
|
|
246
|
+
</li>
|
|
247
|
+
<li class="choice">
|
|
248
|
+
<label for="formtastic_prefilled_radiobutton_3">
|
|
249
|
+
<input id="formtastic_prefilled_radiobutton_3" name="formtastic_prefilled[radiobutton]" type="radio" value="3">radiobutton 3
|
|
250
|
+
</label>
|
|
251
|
+
</li>
|
|
252
|
+
</ol>
|
|
253
|
+
</fieldset>
|
|
254
|
+
</li>
|
|
255
|
+
<li class="select input optional" id="formtastic_prefilled_select_input">
|
|
256
|
+
<label class=" label" for="formtastic_prefilled_select">select</label>
|
|
257
|
+
<select id="formtastic_prefilled_select" name="formtastic_prefilled[select]">
|
|
258
|
+
<option value=""></option>
|
|
259
|
+
<option value="1" selected>option 1</option>
|
|
260
|
+
<option value="2">option 2</option>
|
|
261
|
+
</select>
|
|
262
|
+
</li>
|
|
263
|
+
</ol>
|
|
264
|
+
</fieldset>
|
|
265
|
+
</form>
|
|
266
|
+
|
|
146
267
|
<script>
|
|
147
268
|
$("form").formChangeTracker();
|
|
148
269
|
</script>
|
|
@@ -4,13 +4,13 @@
|
|
|
4
4
|
// Usage:
|
|
5
5
|
// $("#myform").formChangeTracker();
|
|
6
6
|
//
|
|
7
|
-
// If the form element is wrapped in an element with the class "field", the class "changed" is set/reset on this wrapper element. Otherwise, "changed" is set/reset on the form element itself and its label (if present).
|
|
7
|
+
// If the form element is wrapped in an element with the class "field" (rails scaffold) or "input" (formtastic), the class "changed" is set/reset on this wrapper element. Otherwise, "changed" is set/reset on the form element itself and its label (if present).
|
|
8
8
|
|
|
9
9
|
$.fn.formChangeTracker = function() {
|
|
10
10
|
|
|
11
11
|
var elementSelector = "input[type!=hidden],textarea,select";
|
|
12
12
|
|
|
13
|
-
this.each(function() {
|
|
13
|
+
return this.each(function() {
|
|
14
14
|
|
|
15
15
|
var form = $(this);
|
|
16
16
|
saveInitialValues(elementSelector);
|
|
@@ -50,8 +50,8 @@
|
|
|
50
50
|
|
|
51
51
|
// Return the element(s) on that the "changed" class should be set/removed.
|
|
52
52
|
function targetsForElement(element) {
|
|
53
|
-
// use wrapping element with class .field if present ...
|
|
54
|
-
var targets = $(element).closest("form .field");
|
|
53
|
+
// use wrapping element with class .field or .input (formtastic) if present ...
|
|
54
|
+
var targets = $(element).closest("form .field, form .input");
|
|
55
55
|
|
|
56
56
|
// ... or fallback to the form element itself (and its label)
|
|
57
57
|
if (targets.length == 0) targets = $(element).add("label[for=" + element.id + "]");
|
data/lib/da-js/version.rb
CHANGED
metadata
CHANGED