formbuilder 0.0.1.beta → 0.0.2
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +53 -22
- data/lib/formbuilder/version.rb +1 -1
- data/vendor/assets/javascripts/formbuilder.js +491 -0
- metadata +5 -4
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 45237499f2d6e3c0a8759a271b972b0ea2ab6494
|
|
4
|
+
data.tar.gz: fbf187bdad64d5eb7819ce676abd3822abcfb847
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: f3b268bce46438fe07c874d990b9ce57f1b2cf5aa0fe4b0fd3355c61c4d2e812fd888c385aeeba48d60e697dcb0fe2b49fb4b75821eacc438c1bf504d0f68cd6
|
|
7
|
+
data.tar.gz: 36d181887d7ec007e96456c8acec4875fac4c12b738a75c7fdc6ebcafd5689eaa0203d96b33fe8f64d9dd58d1442553f8238facb65c44baa25621e33b3ad4a67
|
data/README.md
CHANGED
|
@@ -14,48 +14,65 @@ var defaults = {
|
|
|
14
14
|
// must have jquery ui included to make sortable.
|
|
15
15
|
sortable: false,
|
|
16
16
|
save: {
|
|
17
|
-
|
|
17
|
+
input: false,
|
|
18
18
|
complete_function: function(xhr, status) {},
|
|
19
|
-
|
|
19
|
+
success_function: function(data, status) {},
|
|
20
|
+
},
|
|
21
|
+
load: {
|
|
22
|
+
input: false
|
|
20
23
|
},
|
|
21
|
-
load_url: false,
|
|
22
24
|
control_box_target: false,
|
|
25
|
+
save_button_target: false,
|
|
23
26
|
save_button_classes: false,
|
|
27
|
+
classes_of_save_buttons: false, //override this with an array of classes of buttons you want to save the form
|
|
24
28
|
serialize_prefix: 'frmb',
|
|
25
29
|
types: {
|
|
26
30
|
text: {
|
|
27
|
-
icon:
|
|
28
|
-
|
|
29
|
-
|
|
31
|
+
icon: '',
|
|
32
|
+
title: 'Text Field',
|
|
33
|
+
label: '',
|
|
34
|
+
value: 'input_text',
|
|
35
|
+
placeholder: 'Enter your question or text here'
|
|
30
36
|
},
|
|
31
37
|
paragraph: {
|
|
32
|
-
icon:
|
|
33
|
-
|
|
34
|
-
|
|
38
|
+
icon: '',
|
|
39
|
+
title: 'Paragraph Field',
|
|
40
|
+
label: '',
|
|
41
|
+
value: 'textarea',
|
|
42
|
+
placeholder: 'Enter your question or text here'
|
|
35
43
|
},
|
|
36
44
|
checkbox: {
|
|
37
|
-
icon:
|
|
38
|
-
|
|
39
|
-
|
|
45
|
+
icon: '',
|
|
46
|
+
title: 'Checkbox',
|
|
47
|
+
label: '',
|
|
48
|
+
value: 'checkbox',
|
|
49
|
+
placeholder: 'Enter your question or text here'
|
|
40
50
|
},
|
|
41
51
|
radio: {
|
|
42
|
-
icon:
|
|
43
|
-
|
|
44
|
-
|
|
52
|
+
icon: '',
|
|
53
|
+
title: 'Radio Group',
|
|
54
|
+
label: '',
|
|
55
|
+
value: 'radio',
|
|
56
|
+
placeholder: 'Enter your question or text here',
|
|
57
|
+
option_placeholder: 'Option'
|
|
45
58
|
},
|
|
46
59
|
select: {
|
|
47
|
-
icon:
|
|
48
|
-
|
|
49
|
-
|
|
60
|
+
icon: '',
|
|
61
|
+
title: 'Select Box',
|
|
62
|
+
label: '',
|
|
63
|
+
value: 'select',
|
|
64
|
+
placeholder: 'Enter your question or text here',
|
|
65
|
+
option_placeholder: 'Option'
|
|
50
66
|
}
|
|
51
67
|
},
|
|
52
68
|
messages: {
|
|
69
|
+
controls_label: 'Add an item',
|
|
53
70
|
save: "Save",
|
|
54
71
|
add_new_field: "Add New Field...",
|
|
55
72
|
title: "Title",
|
|
56
73
|
label: "Label",
|
|
57
|
-
select_options: "
|
|
58
|
-
add: "Add",
|
|
74
|
+
select_options: "Options",
|
|
75
|
+
add: "Add Option",
|
|
59
76
|
remove_message: "Are you sure you want to remove this element?",
|
|
60
77
|
remove: "Remove",
|
|
61
78
|
selections_message: "Allow Multiple Selections",
|
|
@@ -74,11 +91,25 @@ var defaults = {
|
|
|
74
91
|
|
|
75
92
|
Usage
|
|
76
93
|
-----
|
|
94
|
+
This is now a gem. So:
|
|
77
95
|
```
|
|
78
|
-
|
|
96
|
+
gem install formbuilder || gem 'formbuilder' # in Gemfile
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
CSS
|
|
100
|
+
```
|
|
101
|
+
*= require formbuilder
|
|
79
102
|
```
|
|
80
103
|
|
|
81
|
-
|
|
104
|
+
JS
|
|
105
|
+
```
|
|
106
|
+
//= require formbuilder
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
```
|
|
110
|
+
$('any_element').formbuilder({options_to_override_defaults})
|
|
111
|
+
```
|
|
112
|
+
Use the `Formbuilder` class to render html from the json that the javascript generates.
|
|
82
113
|
|
|
83
114
|
Contributing
|
|
84
115
|
------------
|
data/lib/formbuilder/version.rb
CHANGED
|
@@ -0,0 +1,491 @@
|
|
|
1
|
+
(function ($) {
|
|
2
|
+
$.fn.formbuilder = function (options) {
|
|
3
|
+
var defaults = {
|
|
4
|
+
// must have jquery ui included to make sortable.
|
|
5
|
+
sortable: false,
|
|
6
|
+
save: {
|
|
7
|
+
input: false,
|
|
8
|
+
complete_function: function(xhr, status) {},
|
|
9
|
+
success_function: function(data, status) {},
|
|
10
|
+
},
|
|
11
|
+
load: {
|
|
12
|
+
input: false
|
|
13
|
+
},
|
|
14
|
+
control_box_target: false,
|
|
15
|
+
save_button_target: false,
|
|
16
|
+
save_button_classes: false,
|
|
17
|
+
classes_of_save_buttons: false, //override this with an array of classes of buttons you want to save the form
|
|
18
|
+
serialize_prefix: 'frmb',
|
|
19
|
+
types: {
|
|
20
|
+
text: {
|
|
21
|
+
icon: '',
|
|
22
|
+
title: 'Text Field',
|
|
23
|
+
label: '',
|
|
24
|
+
value: 'input_text',
|
|
25
|
+
placeholder: 'Enter your question or text here'
|
|
26
|
+
},
|
|
27
|
+
paragraph: {
|
|
28
|
+
icon: '',
|
|
29
|
+
title: 'Paragraph Field',
|
|
30
|
+
label: '',
|
|
31
|
+
value: 'textarea',
|
|
32
|
+
placeholder: 'Enter your question or text here'
|
|
33
|
+
},
|
|
34
|
+
checkbox: {
|
|
35
|
+
icon: '',
|
|
36
|
+
title: 'Checkbox',
|
|
37
|
+
label: '',
|
|
38
|
+
value: 'checkbox',
|
|
39
|
+
placeholder: 'Enter your question or text here'
|
|
40
|
+
},
|
|
41
|
+
radio: {
|
|
42
|
+
icon: '',
|
|
43
|
+
title: 'Radio Group',
|
|
44
|
+
label: '',
|
|
45
|
+
value: 'radio',
|
|
46
|
+
placeholder: 'Enter your question or text here',
|
|
47
|
+
option_placeholder: 'Option'
|
|
48
|
+
},
|
|
49
|
+
select: {
|
|
50
|
+
icon: '',
|
|
51
|
+
title: 'Select Box',
|
|
52
|
+
label: '',
|
|
53
|
+
value: 'select',
|
|
54
|
+
placeholder: 'Enter your question or text here',
|
|
55
|
+
option_placeholder: 'Option'
|
|
56
|
+
}
|
|
57
|
+
},
|
|
58
|
+
messages: {
|
|
59
|
+
controls_label: 'Add an item',
|
|
60
|
+
save: "Save",
|
|
61
|
+
add_new_field: "Add New Field...",
|
|
62
|
+
title: "Title",
|
|
63
|
+
label: "Label",
|
|
64
|
+
select_options: "Options",
|
|
65
|
+
add: "Add Option",
|
|
66
|
+
remove_message: "Are you sure you want to remove this element?",
|
|
67
|
+
remove: "Remove",
|
|
68
|
+
selections_message: "Allow Multiple Selections",
|
|
69
|
+
hide: "Hide",
|
|
70
|
+
required: "Required",
|
|
71
|
+
show: "Show",
|
|
72
|
+
checked: 'Checked'
|
|
73
|
+
}
|
|
74
|
+
};
|
|
75
|
+
|
|
76
|
+
var opts = $.extend(true, defaults, options);
|
|
77
|
+
var frmb_id = 'frmb-' + $('ul[id^=frmb-]').length++;
|
|
78
|
+
|
|
79
|
+
var ul_obj = $(this).append('<ul id="' + frmb_id + '" class="frmb"></ul>').find('ul');
|
|
80
|
+
var field = '',
|
|
81
|
+
field_type = '',
|
|
82
|
+
last_id = 1,
|
|
83
|
+
help, form_db_id;
|
|
84
|
+
|
|
85
|
+
// add a unique class to the current element
|
|
86
|
+
$(ul_obj).addClass(frmb_id);
|
|
87
|
+
|
|
88
|
+
// create form control select box and add into the editor
|
|
89
|
+
var control_box = "<div class='frmb-controls'></div>"
|
|
90
|
+
var controls = '';
|
|
91
|
+
var save_button = '';
|
|
92
|
+
var save_id = frmb_id + '-save-button';
|
|
93
|
+
$.each(opts.types, function(i, t) {
|
|
94
|
+
if (t.icon) {
|
|
95
|
+
controls += "<li class='" + t.value + "'>" +
|
|
96
|
+
"<span data-icon='" + t.icon + "'></span>" +
|
|
97
|
+
"<div>" +
|
|
98
|
+
t.title +
|
|
99
|
+
"</div>" +
|
|
100
|
+
"</li>"
|
|
101
|
+
} else {
|
|
102
|
+
controls += "<li class='" + t.value + "'>" +
|
|
103
|
+
"<div>" +
|
|
104
|
+
t.title +
|
|
105
|
+
"</div>" +
|
|
106
|
+
"</li>"
|
|
107
|
+
}
|
|
108
|
+
});
|
|
109
|
+
|
|
110
|
+
// insert the control box and its label into page
|
|
111
|
+
frmbControls = $(control_box).append('<label class="controls-label">' + opts.messages.controls_label + '</label>' ).append(controls);
|
|
112
|
+
if (!opts.control_box_target) {
|
|
113
|
+
$(ul_obj).before(frmbControls);
|
|
114
|
+
} else {
|
|
115
|
+
$(opts.control_box_target).append(frmbControls);
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
// build the save button content
|
|
119
|
+
save_button = '<input type="submit" id="' + save_id + '" class="frmb-submit ' + opts.save_button_classes + '" value="' + opts.messages.save + '"/>';
|
|
120
|
+
// Insert the save button
|
|
121
|
+
if (!opts.save_button_target) {
|
|
122
|
+
$(ul_obj).after(save_button);
|
|
123
|
+
} else {
|
|
124
|
+
$(opts.save_button_target).append(save_button);
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
// set the form save action
|
|
128
|
+
$('#' + save_id).on('click', function () {
|
|
129
|
+
save();
|
|
130
|
+
return false;
|
|
131
|
+
});
|
|
132
|
+
|
|
133
|
+
// add a callback to each li element
|
|
134
|
+
$('.frmb-controls li').each(function() {
|
|
135
|
+
$(this).on('click', function() {
|
|
136
|
+
appendNewField($(this).attr('class'));
|
|
137
|
+
});
|
|
138
|
+
});
|
|
139
|
+
|
|
140
|
+
// json parser to build the form builder
|
|
141
|
+
var fromJson = function(json) {
|
|
142
|
+
var values = '';
|
|
143
|
+
var options = false;
|
|
144
|
+
// Parse json
|
|
145
|
+
$.each(json, function () {
|
|
146
|
+
// radio type
|
|
147
|
+
if (this.cssClass === 'radio') {
|
|
148
|
+
values = [];
|
|
149
|
+
$.each(this.values, function () {
|
|
150
|
+
values.push([this.value, this.baseline]);
|
|
151
|
+
});
|
|
152
|
+
}
|
|
153
|
+
// select type
|
|
154
|
+
else if (this.cssClass === 'select') {
|
|
155
|
+
values = [];
|
|
156
|
+
$.each(this.values, function () {
|
|
157
|
+
values.push([this.value, this.baseline]);
|
|
158
|
+
});
|
|
159
|
+
} else {
|
|
160
|
+
values = [this.values];
|
|
161
|
+
}
|
|
162
|
+
options = {
|
|
163
|
+
title: this.title,
|
|
164
|
+
multiple: this.multiple,
|
|
165
|
+
baseline: this.baseline
|
|
166
|
+
}
|
|
167
|
+
appendNewField(this.cssClass, values, options, this.required);
|
|
168
|
+
});
|
|
169
|
+
};
|
|
170
|
+
|
|
171
|
+
// wrapper for adding a new field
|
|
172
|
+
var appendNewField = function (type, values, options, required) {
|
|
173
|
+
field = '';
|
|
174
|
+
field_type = type;
|
|
175
|
+
if (typeof (values) === 'undefined') {
|
|
176
|
+
values = '';
|
|
177
|
+
}
|
|
178
|
+
if (typeof(options) == 'undefined') {
|
|
179
|
+
options = {
|
|
180
|
+
title: '',
|
|
181
|
+
multiple: 'false',
|
|
182
|
+
baseline: 'false'
|
|
183
|
+
}
|
|
184
|
+
}
|
|
185
|
+
switch (type) {
|
|
186
|
+
case 'input_text':
|
|
187
|
+
appendTextInput(values, options, required);
|
|
188
|
+
break;
|
|
189
|
+
case 'textarea':
|
|
190
|
+
appendTextarea(values, options, required);
|
|
191
|
+
break;
|
|
192
|
+
case 'checkbox':
|
|
193
|
+
appendCheckbox(values, options, required);
|
|
194
|
+
break;
|
|
195
|
+
case 'radio':
|
|
196
|
+
appendRadioGroup(values, options, required);
|
|
197
|
+
break;
|
|
198
|
+
case 'select':
|
|
199
|
+
appendSelectList(values, options, required);
|
|
200
|
+
break;
|
|
201
|
+
}
|
|
202
|
+
};
|
|
203
|
+
// single line input type="text"
|
|
204
|
+
var appendTextInput = function (values, options, required) {
|
|
205
|
+
field += '<label>' + opts.types.text.label + '</label>';
|
|
206
|
+
field += '<input class="fld-title" id="title-' + last_id + '" type="text" value="' + options.title + '" placeholder="' + opts.types.text.placeholder + '" />';
|
|
207
|
+
help = '';
|
|
208
|
+
appendFieldLi(opts.types.text.title, field, required, help);
|
|
209
|
+
};
|
|
210
|
+
// multi-line textarea
|
|
211
|
+
var appendTextarea = function (values, options, required) {
|
|
212
|
+
field += '<label>' + opts.types.paragraph.label + '</label>';
|
|
213
|
+
field += '<input type="text" value="' + options.title + '" placeholder="' + opts.types.paragraph.placeholder + '" />';
|
|
214
|
+
help = '';
|
|
215
|
+
appendFieldLi(opts.types.paragraph.title, field, required, help);
|
|
216
|
+
};
|
|
217
|
+
// adds a checkbox element
|
|
218
|
+
var appendCheckbox = function (values, options, required) {
|
|
219
|
+
var checked = false;
|
|
220
|
+
checked = options.baseline
|
|
221
|
+
field += '<div class="chk_group">';
|
|
222
|
+
field += '<div class="frm-fld"><label>' + opts.types.checkbox.label + '</label>';
|
|
223
|
+
field += '<input type="text" name="title" value="' + options.title + '" placeholder="' + opts.types.checkbox.placeholder + '" /></div>';
|
|
224
|
+
field += "<div class='frm-fld'>";
|
|
225
|
+
field += '<input id="checked-' + last_id + '" class="checked" name="checked" type="checkbox"' + (checked ? ' checked="checked"' : '') + ' />';
|
|
226
|
+
field += '<label for="checked-' + last_id + '">' + opts.messages.checked + '</label>';
|
|
227
|
+
field += '</div>';
|
|
228
|
+
help = '';
|
|
229
|
+
appendFieldLi(opts.types.checkbox.title, field, required, help);
|
|
230
|
+
};
|
|
231
|
+
// adds a radio element
|
|
232
|
+
var appendRadioGroup = function (values, options, required) {
|
|
233
|
+
field += '<div class="rd_group">';
|
|
234
|
+
field += '<div class="frm-fld"><label>' + opts.types.radio.label + '</label>';
|
|
235
|
+
field += '<input type="text" name="title" value="' + options.title + '" placeholder="' + opts.types.radio.placeholder + '" /></div>';
|
|
236
|
+
field += '<div class="false-label">' + opts.messages.select_options + '</div>';
|
|
237
|
+
field += '<div class="fields">';
|
|
238
|
+
if (typeof (values) === 'object') {
|
|
239
|
+
for (i = 0; i < values.length; i++) {
|
|
240
|
+
field += radioFieldHtml(values[i], 'frm-' + last_id + '-fld');
|
|
241
|
+
}
|
|
242
|
+
} else {
|
|
243
|
+
field += radioFieldHtml('', 'frm-' + last_id + '-fld');
|
|
244
|
+
}
|
|
245
|
+
field += '<div class="add-area"><a href="#" class="add add_rd">' + opts.messages.add + '</a></div>';
|
|
246
|
+
field += '</div>';
|
|
247
|
+
field += '</div>';
|
|
248
|
+
help = '';
|
|
249
|
+
appendFieldLi(opts.types.radio.title, field, required, help);
|
|
250
|
+
};
|
|
251
|
+
// Radio field html, since there may be multiple
|
|
252
|
+
var radioFieldHtml = function (values, name) {
|
|
253
|
+
var checked = false;
|
|
254
|
+
var value = '';
|
|
255
|
+
if (typeof (values) === 'object') {
|
|
256
|
+
value = values[0];
|
|
257
|
+
checked = (values[1] === 'false' || values[1] === 'undefined') ? false : true;
|
|
258
|
+
}
|
|
259
|
+
field = '';
|
|
260
|
+
field += '<div>';
|
|
261
|
+
field += '<input type="radio"' + (checked ? ' checked="checked"' : '') + ' name="radio_' + name + '" />';
|
|
262
|
+
field += '<input type="text" value="' + value + '" placeholder="' + opts.types.radio.option_placeholder + '" />';
|
|
263
|
+
field += '<a href="#" class="remove" title="' + opts.messages.remove_message + '">' + opts.messages.remove + '</a>';
|
|
264
|
+
field += '</div>';
|
|
265
|
+
return field;
|
|
266
|
+
};
|
|
267
|
+
// adds a select/option element
|
|
268
|
+
var appendSelectList = function (values, options, required) {
|
|
269
|
+
var multiple = false;
|
|
270
|
+
multiple = options.multiple === 'true'
|
|
271
|
+
field += '<div class="opt_group">';
|
|
272
|
+
field += '<div class="frm-fld"><label>' + opts.types.select.label + '</label>';
|
|
273
|
+
field += '<input type="text" name="title" value="' + options.title + '" placeholder="' + opts.types.select.placeholder + '" /></div>';
|
|
274
|
+
field += '';
|
|
275
|
+
field += '<div class="false-label">' + opts.messages.select_options + '</div>';
|
|
276
|
+
field += '<div class="frm-fld">';
|
|
277
|
+
field += '<input class="multiple" type="checkbox" name="multiple"' + (multiple ? 'checked="checked"' : '') + '>';
|
|
278
|
+
field += '<label class="">' + opts.messages.selections_message + '</label>';
|
|
279
|
+
field += '</div>';
|
|
280
|
+
field += '<div class="fields">';
|
|
281
|
+
if (typeof (values) === 'object') {
|
|
282
|
+
for (i = 0; i < values.length; i++) {
|
|
283
|
+
field += selectFieldHtml(values[i], multiple);
|
|
284
|
+
}
|
|
285
|
+
} else {
|
|
286
|
+
field += selectFieldHtml('', multiple);
|
|
287
|
+
}
|
|
288
|
+
field += '<div class="add-area"><a href="#" class="add add_opt">' + opts.messages.add + '</a></div>';
|
|
289
|
+
field += '</div>';
|
|
290
|
+
field += '</div>';
|
|
291
|
+
help = '';
|
|
292
|
+
appendFieldLi(opts.types.select.title, field, required, help);
|
|
293
|
+
};
|
|
294
|
+
var multipleSelectHtml = function (values) {
|
|
295
|
+
var checked = false;
|
|
296
|
+
var value = '';
|
|
297
|
+
if (typeof (values) === 'object') {
|
|
298
|
+
value = values[0];
|
|
299
|
+
checked = (values[1] === 'false' || values[1] === 'undefined') ? false : true;
|
|
300
|
+
}
|
|
301
|
+
field = '';
|
|
302
|
+
field += '<div>';
|
|
303
|
+
field += '<input type="checkbox"' + (checked ? ' checked="checked"' : '') + ' />';
|
|
304
|
+
field += '<input type="text" value="' + value + '" />';
|
|
305
|
+
field += '<a href="#" class="remove" title="' + opts.messages.remove_message + '">' + opts.messages.remove + '</a>';
|
|
306
|
+
field += '</div>';
|
|
307
|
+
return field;
|
|
308
|
+
};
|
|
309
|
+
// Select field html, since there may be multiple
|
|
310
|
+
var selectFieldHtml = function (values, multiple) {
|
|
311
|
+
if (multiple) {
|
|
312
|
+
return multipleSelectHtml(values);
|
|
313
|
+
} else {
|
|
314
|
+
return radioFieldHtml(values);
|
|
315
|
+
}
|
|
316
|
+
};
|
|
317
|
+
// Appends the new field markup to the editor
|
|
318
|
+
var appendFieldLi = function (title, field_html, required, help) {
|
|
319
|
+
var li = '';
|
|
320
|
+
li += '<li id="frm-' + last_id + '-item" class="' + field_type + '">';
|
|
321
|
+
li += '<div class="legend">';
|
|
322
|
+
li += '<a id="frm-' + last_id + '" class="toggle-form" href="#">' + opts.messages.hide + '</a> ';
|
|
323
|
+
li += '<a id="del_' + last_id + '" class="del-button delete-confirm" href="#" title="' + opts.messages.remove_message + '"><span>' + opts.messages.remove + '</span></a>';
|
|
324
|
+
li += '<strong id="txt-title-' + last_id + '">' + title + '</strong></div>';
|
|
325
|
+
li += '<div id="frm-' + last_id + '-fld" class="frm-holder">';
|
|
326
|
+
li += '<div class="frm-elements">';
|
|
327
|
+
li += '<div>';
|
|
328
|
+
li += field;
|
|
329
|
+
li += '</div>';
|
|
330
|
+
li += '<div class="frm-fld"><input class="required" type="checkbox" value="1" name="required-' + last_id + '" id="required-' + last_id + '"' + (required ? ' checked="checked"' : '') + ' />';
|
|
331
|
+
li += '<label for="required-' + last_id + '">' + opts.messages.required + '</label>';
|
|
332
|
+
li += '</div>';
|
|
333
|
+
li += '</div>';
|
|
334
|
+
li += '</div>';
|
|
335
|
+
li += '</li>';
|
|
336
|
+
$(ul_obj).append(li);
|
|
337
|
+
$('#frm-' + last_id + '-item').hide();
|
|
338
|
+
$('#frm-' + last_id + '-item').animate({
|
|
339
|
+
opacity: 'show',
|
|
340
|
+
height: 'show'
|
|
341
|
+
}, 'slow');
|
|
342
|
+
last_id++;
|
|
343
|
+
};
|
|
344
|
+
// handle field delete links
|
|
345
|
+
$('.frmb').delegate('.remove', 'click', function () {
|
|
346
|
+
$(this).parent('div').animate({
|
|
347
|
+
opacity: 'hide',
|
|
348
|
+
height: 'hide',
|
|
349
|
+
marginBottom: '0px'
|
|
350
|
+
}, 'fast', function () {
|
|
351
|
+
$(this).remove();
|
|
352
|
+
});
|
|
353
|
+
return false;
|
|
354
|
+
});
|
|
355
|
+
// handle field display/hide
|
|
356
|
+
$('.frmb').delegate('.toggle-form', 'click', function () {
|
|
357
|
+
var target = $(this).attr("id");
|
|
358
|
+
if ($(this).html() === opts.messages.hide) {
|
|
359
|
+
$(this).removeClass('open').addClass('closed').html(opts.messages.show);
|
|
360
|
+
$('#' + target + '-fld').animate({
|
|
361
|
+
opacity: 'hide',
|
|
362
|
+
height: 'hide'
|
|
363
|
+
}, 'slow');
|
|
364
|
+
return false;
|
|
365
|
+
}
|
|
366
|
+
if ($(this).html() === opts.messages.show) {
|
|
367
|
+
$(this).removeClass('closed').addClass('open').html(opts.messages.hide);
|
|
368
|
+
$('#' + target + '-fld').animate({
|
|
369
|
+
opacity: 'show',
|
|
370
|
+
height: 'show'
|
|
371
|
+
}, 'slow');
|
|
372
|
+
return false;
|
|
373
|
+
}
|
|
374
|
+
return false;
|
|
375
|
+
});
|
|
376
|
+
// handle delete confirmation
|
|
377
|
+
$('.frmb').delegate('.delete-confirm', 'click', function () {
|
|
378
|
+
var delete_id = $(this).attr("id").replace(/del_/, '');
|
|
379
|
+
if (confirm($(this).attr('title'))) {
|
|
380
|
+
$('#frm-' + delete_id + '-item').animate({
|
|
381
|
+
opacity: 'hide',
|
|
382
|
+
height: 'hide',
|
|
383
|
+
marginBottom: '0px'
|
|
384
|
+
}, 'slow', function () {
|
|
385
|
+
$(this).remove();
|
|
386
|
+
});
|
|
387
|
+
}
|
|
388
|
+
return false;
|
|
389
|
+
});
|
|
390
|
+
// Attach a callback to add new options
|
|
391
|
+
$('.frmb').delegate('.add_opt', 'click', function () {
|
|
392
|
+
$(this).parent().before(selectFieldHtml('', false));
|
|
393
|
+
return false;
|
|
394
|
+
});
|
|
395
|
+
// Attach a callback to add new radio fields
|
|
396
|
+
$('.frmb').delegate('.add_rd', 'click', function () {
|
|
397
|
+
$(this).parent().before(radioFieldHtml(false, $(this).parents('.frm-holder').attr('id')));
|
|
398
|
+
return false;
|
|
399
|
+
});
|
|
400
|
+
|
|
401
|
+
$('.frmb').delegate('input', 'change keyup', function() {
|
|
402
|
+
save();
|
|
403
|
+
});
|
|
404
|
+
|
|
405
|
+
// inserts the jsonized data into the input field
|
|
406
|
+
var save = function () {
|
|
407
|
+
if (opts.save.input) {
|
|
408
|
+
$(opts.save.input).val($(ul_obj).jsonizeList());
|
|
409
|
+
opts.save.success_function();
|
|
410
|
+
} else {
|
|
411
|
+
console.log('save.input is not set');
|
|
412
|
+
console.log('here is the json form:');
|
|
413
|
+
console.log($(ul_obj).jsonizeList());
|
|
414
|
+
}
|
|
415
|
+
};
|
|
416
|
+
|
|
417
|
+
// load existing form data
|
|
418
|
+
if (opts.load.input) {
|
|
419
|
+
json = $(opts.load.input).val()
|
|
420
|
+
fromJson(json == "" ? {} : JSON.parse(json));
|
|
421
|
+
} else {
|
|
422
|
+
console.log('load.input is not set');
|
|
423
|
+
console.log('please set it so i can load a form from it')
|
|
424
|
+
}
|
|
425
|
+
|
|
426
|
+
if ($.ui && opts.sortable) {
|
|
427
|
+
ul_obj.sortable({
|
|
428
|
+
stop: function() { save(); }
|
|
429
|
+
});
|
|
430
|
+
}
|
|
431
|
+
|
|
432
|
+
};
|
|
433
|
+
})(jQuery);
|
|
434
|
+
|
|
435
|
+
|
|
436
|
+
(function ($) {
|
|
437
|
+
$.fn.jsonizeList = function(options) {
|
|
438
|
+
var defaults = {}
|
|
439
|
+
var opts = $.extend(true, defaults, options);
|
|
440
|
+
var o = {};
|
|
441
|
+
var ul = this;
|
|
442
|
+
var liCount = 0;
|
|
443
|
+
$(this).children().each(function() {
|
|
444
|
+
var classer = $(this).attr('class');
|
|
445
|
+
o[liCount] = {
|
|
446
|
+
cssClass: classer,
|
|
447
|
+
required: $('#' + $(this).attr('id') + ' input.required').is(':checked')
|
|
448
|
+
}
|
|
449
|
+
switch (classer) {
|
|
450
|
+
case 'input_text':
|
|
451
|
+
o[liCount]['title'] = $(this).find('input[type=text]').val();
|
|
452
|
+
break;
|
|
453
|
+
case 'textarea':
|
|
454
|
+
o[liCount]['title'] = $(this).find('input[type=text]').val();
|
|
455
|
+
break;
|
|
456
|
+
case 'checkbox':
|
|
457
|
+
o[liCount]['title'] = $(this).find('input[type=text]').val();
|
|
458
|
+
o[liCount]['baseline'] = $(this).find('input[name=checked]').is(':checked');
|
|
459
|
+
break;
|
|
460
|
+
case 'radio':
|
|
461
|
+
o[liCount]['values'] = {}
|
|
462
|
+
$(this).find('input[type=text]').each(function(i) {
|
|
463
|
+
if ($(this).attr('name') === 'title') {
|
|
464
|
+
o[liCount]['title'] = $(this).val();
|
|
465
|
+
} else {
|
|
466
|
+
o[liCount]['values'][i] = {}
|
|
467
|
+
o[liCount]['values'][i]['value'] = $(this).val();
|
|
468
|
+
o[liCount]['values'][i]['baseline'] = $(this).prev().is(':checked');
|
|
469
|
+
}
|
|
470
|
+
});
|
|
471
|
+
break;
|
|
472
|
+
case 'select':
|
|
473
|
+
o[liCount]['values'] = {}
|
|
474
|
+
o[liCount]['multiple'] = $(this).find('input[name=multiple]').is(':checked');
|
|
475
|
+
$('#' + $(this).attr('id') + ' input[type=text]').each(function(i) {
|
|
476
|
+
if ($(this).attr('name') === 'title') {
|
|
477
|
+
o[liCount]['title'] = $(this).val();
|
|
478
|
+
} else {
|
|
479
|
+
o[liCount]['values'][i] = {}
|
|
480
|
+
o[liCount]['values'][i]['value'] = $(this).val();
|
|
481
|
+
o[liCount]['values'][i]['baseline'] = $(this).prev().is(':checked');
|
|
482
|
+
}
|
|
483
|
+
});
|
|
484
|
+
break;
|
|
485
|
+
}
|
|
486
|
+
liCount++;
|
|
487
|
+
});
|
|
488
|
+
return JSON.stringify(o);
|
|
489
|
+
}
|
|
490
|
+
})(jQuery);
|
|
491
|
+
|
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: formbuilder
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.0.
|
|
4
|
+
version: 0.0.2
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Tim
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2013-
|
|
11
|
+
date: 2013-05-30 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: bundler
|
|
@@ -45,6 +45,7 @@ executables: []
|
|
|
45
45
|
extensions: []
|
|
46
46
|
extra_rdoc_files: []
|
|
47
47
|
files:
|
|
48
|
+
- vendor/assets/javascripts/formbuilder.js
|
|
48
49
|
- lib/formbuilder/version.rb
|
|
49
50
|
- lib/formbuilder.rb
|
|
50
51
|
- README.md
|
|
@@ -64,9 +65,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
|
|
|
64
65
|
version: '0'
|
|
65
66
|
required_rubygems_version: !ruby/object:Gem::Requirement
|
|
66
67
|
requirements:
|
|
67
|
-
- - '
|
|
68
|
+
- - '>='
|
|
68
69
|
- !ruby/object:Gem::Version
|
|
69
|
-
version:
|
|
70
|
+
version: '0'
|
|
70
71
|
requirements: []
|
|
71
72
|
rubyforge_project:
|
|
72
73
|
rubygems_version: 2.0.0.rc.2
|