edifice 0.5.0 → 0.6.0

data/lib/edifice/version.rb

@@ -1,3 +1,3 @@
 module Edifice
-  VERSION = "0.5.0"
+  VERSION = "0.6.0"
 end

data/lib/public/javascripts/edifice/edifice_form.js

@@ -0,0 +1,103 @@
+// add methods to a form element so it can be easily manipulated
+//
+// add client side validation
+// understands:
+//   - rails form structures
+//   - rails form errors in JSON
+//   - etc
+(function($) {
+$.fn.edifice_form = function() {
+  $.extend(this, methods);
+  return this;
+};
+
+// VALIDATORS: 
+  // validators expect a form element and return true or an error message
+$.fn.edifice_form.validators = {
+  not_empty: function($input) {
+    return $input.val() ? true : 'must not be empty';
+  }
+};
+
+
+// in these 'this' is the $form
+var methods = {
+  fields: function() {
+    return this.find('input, textarea, select');
+  },
+  
+  error_fields: function() {
+    var $form = this;
+    return this.fields().filter(function() {
+      return $form.has_error($(this));
+    });
+  },
+  
+  submits: function() {
+    return this.find('input[type=submit], button[type=submit]');
+  },
+  
+  valid: function() {
+    var $form = this, valid = true;
+    
+    this.fields().each(function() {
+      if (!$form.validate($(this))) { valid = false; }
+    });
+    
+    return valid;
+  },
+  
+  // 'prepare' a validator --> validator returns true or an error string
+  set_validator: function($field, validator) {
+    if (typeof validator === 'string') {
+      validator = $.fn.edifice_form.validators[validator] || validator;
+      if (typeof validator !== 'function') { throw "Validator not defined: '" + validator + "'"; }
+    };
+    $field.data('validator', validator);
+  },
+  
+  // validate a single field
+  validate: function($field) {
+    var validator;
+    if (validator = $field.data('validator')) {
+      var error = validator($field), valid = error === true;
+      this.clear_error($field);
+      if (!valid) {
+        this.add_error($field, error);
+      }
+
+      return valid;      
+    } else {
+      return true;
+    }
+  },
+  
+  has_error: function($field) {
+    return $field.parent('.field_with_errors').length > 0;
+  },
+  
+  clear_error: function($field) {
+   var id = $field.attr('id');
+   if (this.has_error($field)) { $field.unwrap() }
+   
+   this.find('.field_with_errors label[for=' + id + ']')
+    .unwrap()
+    .next('.formError').remove();
+  },
+  
+  add_error: function($field, error) {
+    var id = $field.attr('id');
+    $field.wrap('<div class="field_with_errors">');
+    this.find('label[for=' + id + ']')
+      .wrap('<div class="field_with_errors">')
+      .after('<div class="formError">' + error + '</div>');
+  },
+  
+  set_errors: function(errors) {
+    for (var name in errors) {
+      this.add_error(this.fields().filter('[name*=' + name + ']'), errors[name][0]);
+    }
+  }
+};
+
+}(jQuery));

data/lib/public/javascripts/edifice/form.js

@@ -1,105 +1,138 @@
 (function($) {
-$.edifice = $.edifice || {};
-
-// add methods to a form element so it can be easily manipulated
-//
-// add client side validation
-// understands:
-//   - rails form structures
-//   - rails form errors in JSON
-//   - etc
-$.fn.edifice_form = function() {
-  $.extend(this, methods);
-  return this;
-};
-
-// VALIDATORS: 
-  // validators expect a form element and return true or an error message
-$.fn.edifice_form.validators = {
-  not_empty: function($input) {
-    return $input.val() ? true : 'must not be empty';
-  }
+var defaults = {
+  status_element: this, // element to set to .submitting/.success/.error as we submit
+  // a hash of input selector -> validation functions/names
+  validators: {},
+  // stop the form from submitting and use ajax
+  ajax: true,
+  // type of data to pass around (and thus what's seen by e.g. success)
+  dataType: 'html'
 };
 
+// EVENTS that fire during the course of the life of the submission:
+//  submit, invalid, success | error (+ user_error | server_error), complete
+//
+// -> success,errors + complete are all passed the data you would expect from 
+// jQuery.ajax
+//
+// obviously on submit + invalid fire for non-ajax forms
 
-// in these 'this' is the $form
-var methods = {
-  fields: function() {
-    return this.find('input, textarea, select');
-  },
+$.edifice_widgets.form = function() { return this.each(form); }
   
-  error_fields: function() {
-    var $form = this;
-    return this.fields().filter(function() {
-      return $form.has_error($(this));
-    });
-  },
+function form() {
+  var $form = $(this).edifice_form();
+  $form.settings = $form.read_options(defaults); 
+  $.extend($form, methods);
   
-  submits: function() {
-    return this.find('input[type=submit], button[type=submit]');
+  $form.initialize();
+}
+var methods = {
+  initialize: function() {
+    this.prepare_validators();
+    this.prepare_submit();
   },
   
-  valid: function() {
-    var $form = this, valid = true;
+  prepare_validators: function() {
+    var $form = this;
     
-    this.fields().each(function() {
-      if (!$form.validate($(this))) { valid = false; }
+    // setup validators from settings
+    for (var selector in $form.settings.validators) {
+      $form.set_validator($(selector), $form.settings.validators[selector]);
+    }
+    
+    // setup validators from html
+    $form.fields().filter('[data-widget-validator]').each(function() {
+      $form.set_validator($(this), $(this).attr('data-widget-validator'));
     });
     
-    return valid;
-  },
-  
-  // 'prepare' a validator --> validator returns true or an error string
-  set_validator: function($field, validator) {
-    if (typeof validator === 'string') {
-      validator = $.fn.edifice_form.validators[validator] || validator;
-      if (typeof validator !== 'function') { throw "Validator not defined: '" + validator + "'"; }
-    };
-    $field.data('validator', validator);
+    // listen to validator
+    this.fields().live('change.ajax_form focusout.ajax_form', function() { 
+      $form.validate($(this)); 
+    });
   },
   
-  // validate a single field
-  validate: function($field) {
-    var validator;
-    if (validator = $field.data('validator')) {
-      var error = validator($field), valid = error === true;
-      this.clear_error($field);
-      if (!valid) {
-        this.add_error($field, error);
+  prepare_submit: function() {
+    var $form = this;
+    this.submit(function(event) {
+      // do pre-submit validations
+      if (!$form.valid()) {
+        $form.trigger('invalid');
+        $form.focus_error();
+        return false; // we are done.
       }
+      
+      $form.submits().attr('disabled', true); // disable submit buttons
+      
+      // TODO - set status class
+      if ($form.settings.ajax && $form.settings.ajax !== 'false') {
+        // send up the form and process the results
+        $.ajax({
+          url: $form.attr('action'), type: $form.attr('method'),
+          dataType: $form.settings.dataType,
+          data: $.param($form.serializeArray()),
+          cache: false,
+          error: function (x, t, e) { $form.error(x, t, e); },
+          success: function (data, status) {
+            $form.trigger('success', data, status);
+          },
+          complete: function (request, text_status) {
+            $form.trigger('complete', request, text_status);
 
-      return valid;      
-    } else {
-      return true;
-    }
-  },
-  
-  has_error: function($field) {
-    return $field.parent('.field_with_errors').length > 0;
+            $form.submits().removeAttr('disabled');
+          }
+        });        
+        event.preventDefault();
+        return false;
+      }
+      
+    });
   },
   
-  clear_error: function($field) {
-   var id = $field.attr('id');
-   if (this.has_error($field)) { $field.unwrap() }
-   
-   this.find('.field_with_errors label[for=' + id + ']')
-    .unwrap()
-    .next('.formError').remove();
+   // focus the first error
+  focus_error: function() {
+    this.error_fields().eq(0).focus();
   },
   
-  add_error: function($field, error) {
-    var id = $field.attr('id');
-    $field.wrap('<div class="field_with_errors">');
-    this.find('label[for=' + id + ']')
-      .wrap('<div class="field_with_errors">')
-      .after('<div class="formError">' + error + '</div>');
+  error: function(request, text_status, error) {
+    this.trigger('error', request, status, error);
+    
+    // handle the different possible errors that we can see
+    if (request.status >= 400 && request.status < 500) { 
+      // CLIENT ERROR -- server-side validation failed.
+      this.trigger('client_error', request, status, error);
+      
+      // if data is html, we replace this content of the form with the content
+      // of the form that we've just received back
+      if (this.settings.dataType === 'html') {
+        // wrap in a div incase there are a bunch of floating elements, pull the form out
+        var $new_form = $('<div>').append(request.responseText).find('#' + this.attr('id'));
+        
+        this.html($new_form.html());
+        this.prepare_validators();
+        
+      } else if (this.settings.dataType === 'json') {
+        // we will be receiving an error object back, we can pass it straight into form.js
+        this.set_errors($.parseJSON(request.responseText));
+      } else {
+        throw "Don't know how to handle dataType " + this.settings.dataType;
+      }
+      
+      this.focus_error();
+    } else if (x.status >= 500 && x.status < 600) { 
+      // a SERVER ERROR -- something unrecoverable happened on the server
+      this.trigger('server_error', request, status, error);
+      
+      // we aren't going to do anything here.
+      // FIXME: we should probably have a way to set this behaviour at the application level.
+      // for instance, you probably just want to redirect to somewhere, or show a dialog,
+      // or popup something or.....?
+    } else {
+      // some other kind of error. Revisit
+      alert('Form failed. Please try again.');
+    }
+    
+    
   },
+}
   
-  set_errors: function(errors) {
-    for (var name in errors) {
-      this.add_error(this.fields().filter('[name*=' + name + ']'), errors[name][0]);
-    }
-  }
-};
-
 }(jQuery));

data/test/rails3/app/views/posts/new.html.erb

@@ -1,5 +1,5 @@
 <h1>Edit your Post</h1>
-<%= form_for @post, :html => {:'data-widget' => 'ajax_form', :'data-widget-dataType' => 'json', 
+<%= form_for @post, :html => {:'data-widget' => 'form', :'data-widget-ajax' => false, 
       :'data-widget-validators' => ActiveSupport::JSON.encode({'#post_title' => 'not_empty'})} do |f| %>
   <%= f.label :email %>
   <%= f.error_message_on :email %>

data/test/rails3/config/application.rb

@@ -38,7 +38,7 @@ module Rails3
 
     # JavaScript files you want as :defaults (application.js is always included).
     config.action_view.javascript_expansions[:defaults] = %w(
-      jquery-1.5.1 edifice/framework edifice/form edifice/ajax_form
+      jquery-1.5.1 edifice/framework edifice/edifice_form edifice/form
     )
 
     # Configure the default encoding used in templates for Ruby 1.9.

metadata

@@ -1,13 +1,13 @@
 --- !ruby/object:Gem::Specification 
 name: edifice
 version: !ruby/object:Gem::Version 
-  hash: 11
+  hash: 7
   prerelease: 
   segments: 
   - 0
-  - 5
+  - 6
   - 0
-  version: 0.5.0
+  version: 0.6.0
 platform: ruby
 authors: 
 - Tom Coleman
@@ -48,7 +48,7 @@ files:
 - lib/edifice/railtie.rb
 - lib/edifice/responder.rb
 - lib/edifice/version.rb
-- lib/public/javascripts/edifice/ajax_form.js
+- lib/public/javascripts/edifice/edifice_form.js
 - lib/public/javascripts/edifice/form.js
 - lib/public/javascripts/edifice/framework.js
 - lib/tasks/edifice.rake

data/lib/public/javascripts/edifice/ajax_form.js

@@ -1,127 +0,0 @@
-(function($) {
-var defaults = {
-  status_element: this, // element to set to .submitting/.success/.error as we submit
-  // a hash of input selector -> validation functions/names
-  validators: {},
-  // type of data to pass around (and thus what's seen by e.g. success)
-  dataType: 'html'
-};
-
-// EVENTS that fire during the course of the life of the submission:
-//  submit, invalid, success | error (+ user_error | server_error), complete
-//
-// -> success,errors + complete are all passed the data you would expect from 
-// jQuery.ajax
-
-$.edifice_widgets.ajax_form = function() { return this.each(ajax_form); }
-  
-function ajax_form() {
-  var $form = $(this).edifice_form();
-  $form.settings = $form.read_options(defaults); 
-  $.extend($form, methods);
-  
-  $form.initialize();
-}
-var methods = {
-  initialize: function() {
-    this.prepare_validators();
-    this.prepare_submit();
-  },
-  
-  prepare_validators: function() {
-    var $form = this;
-    
-    // setup validators from settings
-    for (var selector in $form.settings.validators) {
-      $form.set_validator($(selector), $form.settings.validators[selector]);
-    }
-    
-    // setup validators from html
-    $form.fields().filter('[data-widget-validator]').each(function() {
-      $form.set_validator($(this), $(this).attr('data-widget-validator'));
-    });
-    
-    // listen to validator
-    this.fields().live('change.ajax_form focusout.ajax_form', function() { 
-      $form.validate($(this)); 
-    });
-  },
-  
-  prepare_submit: function() {
-    var $form = this;
-    this.submit(function(event) {
-      event.preventDefault();
-      
-      // do pre-submit validations
-      if (!$form.valid()) {
-        $form.trigger('invalid');
-        $form.error_fields().eq(0).focus(); // focus the first error
-        return false; // we are done.
-      }
-      
-      $form.submits().attr('disabled', true); // disable submit buttons
-      
-      // TODO - set status class
-      
-      // send up the form and process the results
-      $.ajax({
-        url: $form.attr('action'), type: $form.attr('method'),
-        dataType: $form.settings.dataType,
-        data: $.param($form.serializeArray()),
-        cache: false,
-        error: function (x, t, e) { $form.error(x, t, e); },
-        success: function (data, status) {
-          $form.trigger('success', data, status);
-        },
-        complete: function (request, text_status) {
-          $form.trigger('complete', request, text_status);
-          
-          $form.submits().removeAttr('disabled');
-        }
-      });
-      
-      return false;
-    });
-  },
-  
-  error: function(request, text_status, error) {
-    this.trigger('error', request, status, error);
-    
-    // handle the different possible errors that we can see
-    if (request.status >= 400 && request.status < 500) { 
-      // CLIENT ERROR -- server-side validation failed.
-      this.trigger('client_error', request, status, error);
-      
-      // if data is html, we replace this content of the form with the content
-      // of the form that we've just received back
-      if (this.settings.dataType === 'html') {
-        // wrap in a div incase there are a bunch of floating elements, pull the form out
-        var $new_form = $('<div>').append(request.responseText).find('#' + this.attr('id'));
-        
-        this.html($new_form.html());
-        this.prepare_validators();
-        
-      } else if (this.settings.dataType === 'json') {
-        // we will be receiving an error object back, we can pass it straight into form.js
-        this.set_errors($.parseJSON(request.responseText));
-      } else {
-        throw "Don't know how to handle dataType " + this.settings.dataType;
-      }
-    } else if (x.status >= 500 && x.status < 600) { 
-      // a SERVER ERROR -- something unrecoverable happened on the server
-      this.trigger('server_error', request, status, error);
-      
-      // we aren't going to do anything here.
-      // FIXME: we should probably have a way to set this behaviour at the application level.
-      // for instance, you probably just want to redirect to somewhere, or show a dialog,
-      // or popup something or.....?
-    } else {
-      // some other kind of error. Revisit
-      alert('Form failed. Please try again.');
-    }
-    
-    
-  },
-}
-  
-}(jQuery));