From 2ebfb5210c89a397bba589799e6cb1d89e42dfc8 Mon Sep 17 00:00:00 2001
From: Samuel <knipknap@gmail.com>
Date: Mon, 15 Oct 2012 21:00:00 -0400
Subject: [PATCH] add SpiffFormNameField

---
 default.css                 |  4 ++
 form.js                     |  2 +
 index.html                  |  5 ++
 spiffform/res/spiffform.css |  8 ++++
 spiffform/spiffform.js      | 94 +++++++++++++++++++++++++++++++++++++
 5 files changed, 113 insertions(+)

diff --git a/default.css b/default.css
index eebd0c3..3434a1d 100644
--- a/default.css
+++ b/default.css
@@ -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');
 }
diff --git a/form.js b/form.js
index 8044e61..3eb0782 100644
--- a/form.js
+++ b/form.js
@@ -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');
diff --git a/index.html b/index.html
index 18f33fd..22b8bf6 100644
--- a/index.html
+++ b/index.html
@@ -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>
diff --git a/spiffform/res/spiffform.css b/spiffform/res/spiffform.css
index df68a8d..a2c6156 100644
--- a/spiffform/res/spiffform.css
+++ b/spiffform/res/spiffform.css
@@ -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,
diff --git a/spiffform/spiffform.js b/spiffform/spiffform.js
index 2bf0ba5..fdb166d 100644
--- a/spiffform/spiffform.js
+++ b/spiffform/spiffform.js
@@ -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
 // -----------------------