1 files changed, 129 insertions, 0 deletions
diff --git a/StoneIsland/www/js/lib/view/Serializable.js b/StoneIsland/www/js/lib/view/Serializable.js
new file mode 100644
index 00000000..e9459229
--- /dev/null
+++ b/StoneIsland/www/js/lib/view/Serializable.js
@@ -0,0 +1,129 @@
+var SerializableView = View.extend({
+
+  events: {
+    "change select": "update_select",
+    "focus input": "focus_input",
+  },
+  
+  preload: function(data){
+    if (! data && sdk.env == "production") { return }
+    data = data || this.test_data
+    if (! data) { return }
+
+    Object.keys(data).forEach(function(key){
+      var value = data[key]
+      var $el = this.$("[name=" + key + "]")
+
+      if ($el.attr("type") == "checkbox") {
+        $el.prop("checked", value)
+      }
+      else if ($el.prop("tagName") == "SELECT") {
+        $el.val( value )
+        this.update_select({ currentTarget: $el })
+      }
+      else {
+        $el.val( value )
+      }
+    }.bind(this))
+  },
+
+  serialize: function(){
+    var fields = {}
+    this.$("input[name], select[name], textarea[name]").each( function(){
+      if (this.type == "checkbox") {
+        if ($(this).prop("checked")) {
+          fields[this.name] = this.value 
+        }
+      }
+      else {
+        fields[this.name] = this.value
+      }
+    })
+    return fields
+  },
+  
+  deserialize: function(data){
+    this.$("input[name], textarea[name]").val("")
+    Object.keys(data).forEach(function(k){
+      this.$("[" + k + "]").val(data[k])
+    })
+  },
+  
+  focus_input: function(e){
+    $(e.currentTarget).removeClass("error_hilite")
+  },
+  
+  update_select: function(e){
+    var $target = $(e.currentTarget), value = $target.val()
+    var label = $($("select")[0]).find("option").filter(function(){ return this.value === value }).html()
+    
+    $target.parent().addClass("picked")
+    $target.parent().find("span").html(label)
+  },
+  
+  validate: function(errors){
+    var data = this.serialize()
+    var errors = []
+    var presence_msgs = this.validate_presence
+    Object.keys(presence_msgs).forEach(function(k){
+      if (! data[k]) errors.push( [ k, presence_msgs[k] ] )
+    })
+    this.validate_fields && this.validate_fields(data, errors)
+    this.cc && this.cc.validate(errors)
+    this.address && this.address.validate(errors)
+    return { errors: errors, data: data }
+  },
+  
+  show_errors: function(errors){
+    var msgs = []
+    errors.forEach(function(e, i){
+      if (i > 0) { return }
+      this.$("[name=" + e[0] + "]").addClass('error_hilite')
+      msgs.push(e[1])
+    }.bind(this))
+    this.$msg.html(msgs.join("<br>"))
+    this.$msg.addClass('alert-notice')
+  },
+  
+  hide_errors: function(){
+    this.$msg.removeClass('alert-notice')
+    this.$msg.html("")
+  },
+
+  save: function(e){
+    e && e.preventDefault()
+
+    var valid = this.validate()
+    if (valid.errors.length) {
+      this.show_errors(valid.errors)
+      return
+    }
+    else {
+      this.hide_errors()
+    }
+    
+    app.curtain.show("loading")
+    this.action({
+      data: valid.data,
+      success: function(data){
+        app.curtain.hide("loading")
+        this.success(data)
+      }.bind(this),
+      error: function(data){
+        app.curtain.hide("loading")
+        this.error(data)
+      }.bind(this),
+    })
+  },
+  
+  success: function(data){
+    console.log("SUCCESS", data)
+  },
+  
+  error: function(data){
+    console.log("FAIL", data)
+  },
+
+})
+
+var FormView = View.extend(SerializableView.prototype).extend(ScrollableView.prototype)