edifice 0.0.5 → 0.5.0

data/lib/edifice/form_model.rb

@@ -0,0 +1,28 @@
+# kind of the evolution of the FormStruct
+
+module Edifice
+  class FormModel
+    include ActiveModel::Validations
+    include ActiveModel::Conversion
+    extend  ActiveModel::Naming
+    
+    def initialize(attributes = {})
+        attributes.each { |n, v| send("#{n}=", v) if respond_to?("#{n}=") }
+    end
+    
+    # default implementation, override as necessary
+    def save
+      valid?
+    end
+    
+    def self.create(attributes = {})
+      form = new(attributes)
+      form.save
+      form
+    end
+    
+    def persisted?
+      false
+    end
+  end
+end

data/lib/edifice/helper.rb

@@ -0,0 +1,16 @@
+module Edifice
+  module Helper
+    # put this in your layout somewhere
+    def edifice_meta_tags
+      %(<meta name='edifice-view_path' content='#{view_path_normalized}'/>
+        <meta name='edifice-view_name' content='#{view_name_normalized}'/>
+        <meta name='edifice-layout' content='#{layout_name}'/>).html_safe
+    end
+  
+    # the default classes that get added to the body element when a view renders
+    # the c_ in front of view_path is for historical reasons
+    def edifice_body_classes
+      %(c_#{view_path} v_#{view_name} l_#{layout_name}").html_safe
+    end
+  end
+end

data/lib/edifice/railtie.rb

@@ -0,0 +1,10 @@
+require 'edifice'
+require 'rails'
+
+module Edifice
+  class Railtie < Rails::Railtie
+    rake_tasks do
+      load "tasks/edifice.rake"
+    end
+  end
+end

data/lib/edifice/responder.rb

@@ -0,0 +1,13 @@
+# Basically a standard responder, but if 
+module Edifice
+  class Responder < ActionController::Responder
+  protected 
+    def to_html
+      if controller.request.xhr? && !get? and has_errors? && default_action
+        render :action => default_action, :status => :unprocessable_entity, :layout => nil
+      else
+        super
+      end
+    end
+  end
+end

data/lib/edifice/version.rb

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

data/lib/edifice.rb

@@ -1,6 +1,10 @@
-require 'edifice_helper'
+require 'edifice/helper'
+require 'edifice/form_model'
+require 'edifice/responder'
 
 module Edifice
+  require 'edifice/railtie' if defined?(Rails)
+  
   def self.install_js_files
     install_dir = ::Rails.application.paths.public.javascripts.first
     edifice_js_dir = File.join(File.dirname(__FILE__), 'public', 'javascripts', 'edifice')
@@ -17,6 +21,12 @@ module Edifice
         controller.after_filter(:write_edifice_headers)
         controller.alias_method_chain(:_render_template, :edifice)
       end
+      
+      controller.class_eval do
+        def self.responder
+          Edifice::Responder
+        end
+      end
     end
     
     def _render_template_with_edifice(options)
@@ -57,4 +67,4 @@ end
 
 ActionController::Base.send :include, Edifice::Controller
 # ActionMailer::Base.send :include, Edifice::Controller
-ActionView::Base.send :include, EdificeHelper
+ActionView::Base.send :include, Edifice::Helper

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

@@ -1,187 +1,127 @@
-/*
-  Turn a standard form into an 'ajax' form. 
+(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);
   
-    -- Relies on the action that the form points to to return a 422 with a new,
-    'errored' form if there is a (server-side) validation problem. 
-    Otherwise calls the various callbacks..
+  $form.initialize();
+}
+var methods = {
+  initialize: function() {
+    this.prepare_validators();
+    this.prepare_submit();
+  },
+  
+  prepare_validators: function() {
+    var $form = this;
     
-    Extra arguments:
-      - status_sel: the selector of an element to set the classes 'submitting/success/error'
-          on depending on the state of the form. Defaults to the form itself.
-      - validators: a hash of input selectors to validation functions (or names)
-          for client-side validation. 
-*/
-
-(function($){
-  $.edifice_widgets.ajax_form = function() {
-    return this.each(function(){
-      var settings = $(this).read_options({
-        status_sel: this, // element to set to .submitting/.success/.error as we submit
-        //default callbacks
-        error: function(x, t, e, form){
-          if (x.status >= 400 && x.status < 500) { // a CLIENT ERROR
-            //validation failed replace form with new one
-            var $new_form = $(x.responseText);
-            $(form).replaceWith($new_form);
-            // -- not sure this is the best way to pass extra settings through, but it seems to work.
-            $new_form.create_widget('ajax_form', settings);
-          } else if (x.status >= 500 && x.status < 600) { // a SERVER ERROR
-            // replace the body proxy with the result (i.e replace the entire page)
-            $('#body_proxy').before($(x.responseText)).remove();
-          } else {
-            alert('Form failed. Please try again.');
-          }
-        },
-        success: function(d, s, form){},
-        complete: function(x, t, form){},
-        submit: function(e){}, // return false to cancel submit
-        validators: {}
-      });
+    // 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();
       
-      // prepare the validators that are references
-      for (var selector in settings.validators) {
-        var validator = settings.validators[selector];
-        if (typeof(validator) === 'string') {
-          validator = settings.validators[selector] = $.edifice_widgets.ajax_form.validators[validator];
-        }
-        $(selector).bind('change.ajax_form', {validator: validator}, function(event) {
-          validate($(this), event.data.validator);
-        });
+      // 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
       
-      function set_status_class(name) {
-        $.each(['form_submitting', 'form_success', 'form_error'], function(i, old_name) {
-          $(settings.status_sel).removeClass(old_name);
-        });
-        $(settings.status_sel).addClass(name);
-      };
+      // TODO - set status class
       
-      $(this).bind("submit.ajax_form", function(ev){
-        var form = this;
-        
-        ev.preventDefault();
-        
-        // do client-side validations
-        var valid = true, $first_error;
-        for (var selector in settings.validators) {
-          if (!validate($(selector), settings.validators[selector])) {
-            if (valid) { valid = false; $first_error = $(selector); }
-          }
-        }
-        if (!valid) { $first_error.focus(); return false; }
-                
-        // fire a custom event allowing anyone to cancel the submission
-        var event = $.Event('submitting.ajax_form');
-        event.cancel = false;
-        event.submitEvent = ev;
-        $(form).trigger(event);
-        
-        if (event.cancel)
-          return 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);
           
-        // also run the user defined submit function
-        if (settings.submit(ev) === false) return false;
-        
-        // disable the first submit button on the form
-        $(form).find('input[type=submit]:first').attr('disabled', true);
-        
-        // set the status
-        set_status_class('form_submitting');
-        
-        // send up the form and process the results
-        $.ajax({
-          cache: false,
-          data: $.param($(form).serializeArray()),          
-          type: form.method,
-          url: form.action,
-          error: function (x, t, e) {
-            settings.error(x, t, e, form); 
-            set_status_class('form_error');
-          },
-          success: function (d, s) {
-            settings.success(d, s, form);
-            set_status_class('form_success');
-          },
-          complete: function (x, t) {
-            // enable the first submit button on the form
-            $(form).find('input[type=submit]:first').attr('disabled', false);
-            
-            settings.complete(x, t, form); 
-          }
-        });
-        
-        return false;
+          $form.submits().removeAttr('disabled');
+        }
       });
-    });    
-  };
-  
-  // call this on a div that represents a form element.
-  // sets the right classes and enables disables actual form elements
-  $.fn.form_element_state = function(command) {
-    switch (command) {
-      case 'disabled':
-        this.addClass('disabled')
-          .find('input, select').attr('disabled', true);
-        break;
-      case 'enabled':
-        this.removeClass('disabled')
-          .find('input, select').removeAttr('disabled');
-        break;
-    }
-    return this;
-  };
-  
-  function clearError(id) {
-    // run over the input and the label pointing to it
-    $('.fieldWithErrors').find('> #' + id + ', > label[for=' + id + ']').unwrap();
-    $('label[for=' + id  + ']').next('.formError').remove();
-  };
-  
-  function addError(id, error) {
-    // right now this is causing focus issues and we don't need it, so I won't waste time
-    // fixing it.... but it could be used for different form layouts...
-    // $('#' + id + ', label[for=' + id + ']').wrap('<div class="fieldWithErrors"></div>');
-    $('label[for=' + id  + ']').after('<div class="formError">' + error + '</div>');
-  };
-  
-  // calls a validator, and takes care of setting the errors string
-  function validate($input, validator) {
-    var id = $input.attr('id');
-    // clear existing validations
-    clearError(id);
-    
-    var error = validator($input);
-    if (error === true) {
-      return true;
-    } else {
-      addError(id, error);
+      
       return false;
-    }      
-  }
+    });
+  },
   
-  // validators expect a form element and return true or an error message
-  $.edifice_widgets.ajax_form.validators = {
-    not_empty: function($input) {
-      return $input.val() ? true : 'must not be empty';
-    }
-  };
-
-  // standardize .focus() for input tags. IE doesn't place the focus at the 
-  // end of the input box, this fixes it
-  $.fn.inputFocus = function() {
-    return this.each(function(){
-      if ($.browser.msie) {
-        if (this.createTextRange) {
-          var FieldRange = this.createTextRange();
-          FieldRange.moveStart('character', this.value.length);
-          FieldRange.collapse();
-          FieldRange.select();
-        }
+  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 {
-        this.focus();
+        throw "Don't know how to handle dataType " + this.settings.dataType;
       }
-    });
-  };
-}(jQuery));
-
+    } 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));

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

@@ -0,0 +1,105 @@
+(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';
+  }
+};
+
+
+// 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/tasks/edifice.rake

@@ -0,0 +1,6 @@
+namespace :edifice do
+  desc "Installs the edifice JS files into public/javascripts/edifice"
+  task :install do
+    Edifice.install_js_files
+  end
+end

data/test/rails3/.gitignore

@@ -0,0 +1,4 @@
+.bundle
+db/*.sqlite3
+log/*.log
+tmp/

data/test/rails3/Gemfile

@@ -0,0 +1,33 @@
+source 'http://rubygems.org'
+
+gem 'rails', '3.0.7'
+
+# Bundle edge Rails instead:
+# gem 'rails', :git => 'git://github.com/rails/rails.git'
+
+gem 'sqlite3'
+
+gem 'dynamic_form'
+
+# Use unicorn as the web server
+# gem 'unicorn'
+
+# Deploy with Capistrano
+# gem 'capistrano'
+
+# To use debugger (ruby-debug for Ruby 1.8.7+, ruby-debug19 for Ruby 1.9.2+)
+# gem 'ruby-debug'
+# gem 'ruby-debug19', :require => 'ruby-debug'
+
+# Bundle the extra gems:
+# gem 'bj'
+# gem 'nokogiri'
+# gem 'sqlite3-ruby', :require => 'sqlite3'
+# gem 'aws-s3', :require => 'aws/s3'
+
+# Bundle gems for the local environment. Make sure to
+# put test-only gems in this group so their generators
+# and rake tasks are available in development mode:
+# group :development, :test do
+#   gem 'webrat'
+# end

data/test/rails3/Gemfile.lock

@@ -0,0 +1,75 @@
+GEM
+  remote: http://rubygems.org/
+  specs:
+    abstract (1.0.0)
+    actionmailer (3.0.7)
+      actionpack (= 3.0.7)
+      mail (~> 2.2.15)
+    actionpack (3.0.7)
+      activemodel (= 3.0.7)
+      activesupport (= 3.0.7)
+      builder (~> 2.1.2)
+      erubis (~> 2.6.6)
+      i18n (~> 0.5.0)
+      rack (~> 1.2.1)
+      rack-mount (~> 0.6.14)
+      rack-test (~> 0.5.7)
+      tzinfo (~> 0.3.23)
+    activemodel (3.0.7)
+      activesupport (= 3.0.7)
+      builder (~> 2.1.2)
+      i18n (~> 0.5.0)
+    activerecord (3.0.7)
+      activemodel (= 3.0.7)
+      activesupport (= 3.0.7)
+      arel (~> 2.0.2)
+      tzinfo (~> 0.3.23)
+    activeresource (3.0.7)
+      activemodel (= 3.0.7)
+      activesupport (= 3.0.7)
+    activesupport (3.0.7)
+    arel (2.0.10)
+    builder (2.1.2)
+    dynamic_form (1.1.4)
+    erubis (2.6.6)
+      abstract (>= 1.0.0)
+    i18n (0.5.0)
+    mail (2.2.19)
+      activesupport (>= 2.3.6)
+      i18n (>= 0.4.0)
+      mime-types (~> 1.16)
+      treetop (~> 1.4.8)
+    mime-types (1.16)
+    polyglot (0.3.1)
+    rack (1.2.3)
+    rack-mount (0.6.14)
+      rack (>= 1.0.0)
+    rack-test (0.5.7)
+      rack (>= 1.0)
+    rails (3.0.7)
+      actionmailer (= 3.0.7)
+      actionpack (= 3.0.7)
+      activerecord (= 3.0.7)
+      activeresource (= 3.0.7)
+      activesupport (= 3.0.7)
+      bundler (~> 1.0)
+      railties (= 3.0.7)
+    railties (3.0.7)
+      actionpack (= 3.0.7)
+      activesupport (= 3.0.7)
+      rake (>= 0.8.7)
+      thor (~> 0.14.4)
+    rake (0.9.2)
+    sqlite3 (1.3.3)
+    thor (0.14.6)
+    treetop (1.4.9)
+      polyglot (>= 0.3.1)
+    tzinfo (0.3.27)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  dynamic_form
+  rails (= 3.0.7)
+  sqlite3