Permalink
Browse files

add SpiffFormNameField

  • Loading branch information...
1 parent 8449fe6 commit 2ebfb5210c89a397bba589799e6cb1d89e42dfc8 @knipknap committed Oct 16, 2012
Showing with 113 additions and 0 deletions.
  1. +4 −0 default.css
  2. +2 −0 form.js
  3. +5 −0 index.html
  4. +8 −0 spiffform/res/spiffform.css
  5. +94 −0 spiffform/spiffform.js
View
@@ -73,6 +73,10 @@ background-position: 0 .5em;
padding: .5em 0 .5em 30px;
}
+#ui-name {
+background-image: url('spiffform/res/entry.png');
+}
+
#ui-entry {
background-image: url('spiffform/res/entry.png');
}
View
@@ -12,6 +12,8 @@ function attach_form(container) {
var datepicker = form.append(new SpiffFormDatePicker());
datepicker.set_label('Birth Date');
+ form.append(new SpiffFormNameField());
+
var entry = form.append(new SpiffFormEntryField());
entry.set_label('Complaint summary');
entry.set_text('Stop sending me emails');
View
@@ -79,6 +79,11 @@
<div id="panel" class="spiffform-panel"></div>
<div id="sidebar-elements">
+ <h3>Standard Fields</h3>
+ <ul class="ui-elements">
+ <li id="ui-name" name="namefield">Firstname and Lastname</li>
+ </ul>
+
<h3>Text Input</h3>
<ul class="ui-elements">
<li id="ui-entry" name="entryfield">Text Field (single line)</li>
@@ -91,6 +91,14 @@ height: 1px;
background: #bbb;
}
+.spiffform-item-namefield input {
+display: inline-block;
+margin: 0 3px 3px 3px;
+padding: 3px;
+width: 325px;
+border: 1px solid #aaa;
+}
+
.spiffform-item-entryfield input,
.spiffform-item-datepicker input,
.spiffform-item-dropdownlist select,
View
@@ -107,6 +107,14 @@ var _SpiffFormObjectSerializer = function() {
return this.deserialize_element(new SpiffFormSeparator(), data);
};
+ this.serialize_namefield = function(obj) {
+ return this.serialize_element(obj);
+ };
+
+ this.deserialize_namefield = function(data) {
+ return this.deserialize_element(new SpiffFormNameField(), data);
+ };
+
this.serialize_entryfield = function(obj) {
return this.serialize_element(obj);
};
@@ -474,6 +482,92 @@ var SpiffFormSeparator = function() {
SpiffFormSeparator.prototype = new SpiffFormElement();
spiffform_elements.separator = SpiffFormSeparator;
+// -------------------------------------
+// Fields for firstname and lastname
+// -------------------------------------
+var SpiffFormNameField = function() {
+ this._name = 'Name Field';
+ this._label = 'Firstname/Lastname';
+ this._value = ['', ''];
+ var that = this;
+
+ this.get_handle = function() {
+ return 'namefield';
+ };
+
+ this.attach = function(div) {
+ this._div = div;
+ this.update();
+ };
+
+ this.update = function() {
+ if (!that._div)
+ return;
+ that._div.empty();
+ that._div.append('<label>' + that._get_label_html() + '</label>' +
+ '<div>' +
+ '<input type="text" name="firstname"/>' +
+ '<input type="text" name="lastname"/>' +
+ '</div>');
+ that._div.append('<span class="spiffform-item-error"></span>');
+ var first = that._div.find('input[name="firstname"]');
+ first.val(that._value[0]);
+ first.bind('keyup mouseup change', function() {
+ that._value[0] = $(this).val();
+ that.validate();
+ });
+ var last = that._div.find('input[name="lastname"]');
+ last.val(that._value[1]);
+ last.bind('keyup mouseup change', function() {
+ that._value[1] = $(this).val();
+ that.validate();
+ });
+ };
+
+ this.update_properties = function(elem) {
+ // Label text.
+ elem.append(this._get_label_entry());
+
+ // Required checkbox.
+ elem.append(this._get_required_checkbox());
+ };
+
+ this.set_text = function(text) {
+ throw new Error('Name fields have no set_text()');
+ };
+
+ this.set_firstname = function(text) {
+ this._value[0] = text;
+ this.update();
+ };
+
+ this.set_lastname = function(text) {
+ this._value[1] = text;
+ this.update();
+ };
+
+ this.validate = function() {
+ if (this._required &&
+ (this._value[0] === '' || this._value[1] === '')) {
+ this.set_error('This field is required.');
+ return false;
+ }
+ this.set_error(undefined);
+ return true;
+ };
+
+ this.serialize = function(serializer) {
+ return serializer.serialize_namefield(this);
+ };
+
+ this.deserialize = function(serializer, data) {
+ return serializer.deserialize_namefield(this, data);
+ };
+};
+
+SpiffFormNameField.prototype = new SpiffFormElement();
+spiffform_elements.namefield = SpiffFormNameField;
+
// -----------------------
// Entry Box
// -----------------------

0 comments on commit 2ebfb52

Please sign in to comment.