da-js 0.0.1 → 0.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- 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