formbuilder 0.0.1.beta → 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.
- 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
|