Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

add deserialization support.

  • Loading branch information...
commit 360fac0fa933a5c844aa6b865c6b9bd3364a7755 1 parent dd4c161
@knipknap authored
Showing with 117 additions and 7 deletions.
  1. +8 −3 default.css
  2. +5 −1 index.html
  3. +104 −3 spiffform/spiffform.js
View
11 default.css
@@ -35,17 +35,22 @@ width: 270px;
}
#make-editable,
-#serialize {
+#serialize,
+#serialize-deserialize {
text-align: center;
}
#make-editable input,
-#serialize input {
+#serialize input,
+#serialize-deserialize input {
padding: .5em;
-font-size: 1.4em;
margin-bottom: 12px;
}
+#make-editable input {
+font-size: 1.4em;
+}
+
#sidebar-elements {
display: none;
}
View
6 index.html
@@ -32,7 +32,7 @@
$(document).ready(function() {
var panel = new SpiffFormPanel($('#panel'));
var form = new SpiffForm($('#form'));
- form.set_name('Feedback Form Demo');
+ form.set_title('Feedback Form Demo');
form.set_subtitle('Let us know what you think!');
var choose = form.append(new SpiffFormDropdownList());
@@ -73,6 +73,9 @@
$('#serialize').click(function() {
alert(form.serialize(SpiffFormJSONSerializer));
});
+ $('#serialize-deserialize').click(function() {
+ form.deserialize(SpiffFormJSONSerializer, form.serialize(SpiffFormJSONSerializer));
+ });
});
</script>
@@ -110,6 +113,7 @@
</div>
<div id="serialize"><input type="button" value="Serialize"/></div>
+ <div id="serialize-deserialize"><input type="button" value="Serialize / Deserialize"/></div>
</div>
</div>
View
107 spiffform/spiffform.js
@@ -44,32 +44,70 @@ var _SpiffFormObjectSerializer = function() {
'required': obj._required};
};
+ this.deserialize_element = function(obj, data) {
+ obj._label = data.label;
+ obj._value = data.value;
+ obj._required = data.required;
+ return obj;
+ };
+
this.serialize_entryfield = function(obj) {
return this.serialize_element(obj);
};
+ this.deserialize_entryfield = function(data) {
+ return this.deserialize_element(new SpiffFormEntryField(), data);
+ };
+
this.serialize_textarea = function(obj) {
return this.serialize_element(obj);
};
+ this.deserialize_textarea = function(data) {
+ return this.deserialize_element(new SpiffFormTextArea(), data);
+ };
+
this.serialize_button = function(obj) {
return this.serialize_element(obj);
};
+ this.deserialize_button = function(data) {
+ return this.deserialize_element(new SpiffFormButton(), data);
+ };
+
this.serialize_checkbox = function(obj) {
return this.serialize_element(obj);
};
+ this.deserialize_checkbox = function(data) {
+ return this.deserialize_element(new SpiffFormCheckbox(), data);
+ };
+
this.serialize_datepicker = function(obj) {
return this.serialize_element(obj);
};
+ this.deserialize_datepicker = function(data) {
+ var obj = this.deserialize_element(new SpiffFormDatePicker(), data);
+ // Needs to be special cased because JSON.parse doesn't restore it
+ // to the same type :-(.
+ obj._value = new Date(data.value);
+ return obj;
+ };
+
this.serialize_dropdownlist = function(obj) {
var data = this.serialize_element(obj);
data.items = obj._items.slice(0);
return data;
};
+ this.deserialize_dropdownlist = function(data) {
+ var obj = this.deserialize_element(new SpiffFormDropdownList(), data);
+ for (var i = 0, len = data.items.length; i < len; i++)
+ obj.add_option(data.items[i]);
+ return obj;
+ };
+
this.serialize_form = function(form) {
var that = this;
var list = [];
@@ -77,15 +115,32 @@ var _SpiffFormObjectSerializer = function() {
var obj = $(this).data('obj');
list.push(obj.serialize(that));
});
- return {'subtitle': form._subtitle,
+ return {'title': form.get_title(),
+ 'subtitle': form.get_subtitle(),
'elements': list};
};
+
+ this.deserialize_form = function(form, data) {
+ form.set_title(data.title);
+ form.set_subtitle(data.subtitle);
+ for (var i = 0, len = data.elements.length; i < len; i++) {
+ var elem_data = data.elements[i];
+ var method = 'deserialize_' + elem_data.handle;
+ var obj = this[method](elem_data);
+ form.append(obj);
+ }
+ return form;
+ };
};
var _SpiffFormJSONSerializer = function() {
this.serialize_form = function(form) {
return JSON.stringify(Object.getPrototypeOf(this).serialize_form(form));
};
+
+ this.deserialize_form = function(form, data) {
+ return Object.getPrototypeOf(this).deserialize_form(form, JSON.parse(data));
+ };
};
_SpiffFormJSONSerializer.prototype = new _SpiffFormObjectSerializer();
var SpiffFormJSONSerializer = new _SpiffFormJSONSerializer();
@@ -167,6 +222,10 @@ var SpiffFormElement = function() {
this.serialize = function(serializer) {
return serializer.serialize_element(this);
};
+
+ this.deserialize = function(serializer, data) {
+ return serializer.deserialize_element(this, data);
+ };
};
SpiffFormElement.prototype = new SpiffFormTrackable();
@@ -217,6 +276,10 @@ var SpiffFormEntryField = function() {
this.serialize = function(serializer) {
return serializer.serialize_entryfield(this);
};
+
+ this.deserialize = function(serializer, data) {
+ return serializer.deserialize_entryfield(this, data);
+ };
};
SpiffFormEntryField.prototype = new SpiffFormElement();
@@ -270,6 +333,10 @@ var SpiffFormTextArea = function() {
this.serialize = function(serializer) {
return serializer.serialize_textarea(this);
};
+
+ this.deserialize = function(serializer, data) {
+ return serializer.deserialize_textarea(this, data);
+ };
};
SpiffFormTextArea.prototype = new SpiffFormElement();
@@ -302,6 +369,10 @@ var SpiffFormButton = function() {
this.serialize = function(serializer) {
return serializer.serialize_button(this);
};
+
+ this.deserialize = function(serializer, data) {
+ return serializer.deserialize_button(this, data);
+ };
};
SpiffFormButton.prototype = new SpiffFormElement();
@@ -356,6 +427,10 @@ var SpiffFormCheckbox = function() {
this.serialize = function(serializer) {
return serializer.serialize_checkbox(this);
};
+
+ this.deserialize = function(serializer, data) {
+ return serializer.deserialize_checkbox(this, data);
+ };
};
SpiffFormCheckbox.prototype = new SpiffFormElement();
@@ -408,6 +483,10 @@ var SpiffFormDatePicker = function() {
this.serialize = function(serializer) {
return serializer.serialize_datepicker(this);
};
+
+ this.deserialize = function(serializer, data) {
+ return serializer.deserialize_datepicker(this, data);
+ };
};
SpiffFormDatePicker.prototype = new SpiffFormElement();
@@ -542,6 +621,10 @@ var SpiffFormDropdownList = function() {
this.serialize = function(serializer) {
return serializer.serialize_dropdownlist(this);
};
+
+ this.deserialize = function(serializer, data) {
+ return serializer.deserialize_dropdownlist(this, data);
+ };
};
SpiffFormDropdownList.prototype = new SpiffFormElement();
@@ -570,11 +653,21 @@ var SpiffForm = function(div) {
y < that._div.offset().top + that._div.height() + distance;
};
+ // Returns the name/title of the form.
+ this.get_title = function() {
+ return this._div.find('.spiffform-title').text();
+ };
+
// Change the name/title of the form.
- this.set_name = function(name) {
+ this.set_title = function(name) {
this._div.find('.spiffform-title').text(name);
};
+ // Returns the subtitle of the form.
+ this.get_subtitle = function() {
+ return this._div.find('.spiffform-subtitle').val();
+ };
+
// Change the subtitle of the form.
this.set_subtitle = function(subtitle) {
this._div.find('.spiffform-subtitle').val(subtitle);
@@ -748,6 +841,14 @@ var SpiffForm = function(div) {
return serializer.serialize_form(this);
};
+ this.deserialize = function(serializer, data) {
+ this._div.find('li.spiffform-canvas-item').each(function() {
+ var obj = $(this).data('obj');
+ that.remove(obj);
+ });
+ return serializer.deserialize_form(this, data);
+ };
+
// Create the dom for the form.
this._div.append('<div class="spiffform-canvas">' +
'<ul class="spiffform-canvas-elements">' +
@@ -760,7 +861,7 @@ var SpiffForm = function(div) {
'</div>');
this._div.find('input.spiffform-subtitle').attr("disabled", "disabled");
- this.set_name('Untitled');
+ this.set_title('Untitled');
this.set_subtitle('Please fill out the form.');
this.set_hint('');
this.set_buttons('submit');
Please sign in to comment.
Something went wrong with that request. Please try again.