formize 0.1.1 → 1.0.0

data/README.rdoc

@@ -1,6 +1,6 @@
 = Formize
 
-Simple form DSL with dynamic interactions for Rails.
+Form helpers. Will be integrated with SimpleForm.
 
 == Installation
 
@@ -38,49 +38,15 @@ To install the default configuration file (config/initializers/formize.rb), the
 
 == Usage
 
-In controller:
+TODO: Rewrite examples
 
-  class OrdersController < ApplicationController
-    # Generates default helpers method and a controller method :formize
-    # for a model Order.
-    formize
+=== Date
 
-    # Personnalized example
-    formize do
-      field :number
-      field :created_on
-      field :client
-      field_set :addresses, :depend_on=>:client do
-        field :default_contact, :choices=>:contacts, :source=>:client
-        field :delivery_contact, :choices=>:contacts, :source=>:client
-        field :invoice_contact, :choices=>:contacts, :source=>:client
-      end
-      field_set :track do
-        field :responsible
-        field :department
-      end
-    end
+=== Datetime
 
-    # Moreover, with a specified model
-    formize(:lines, :model=>:order_lines)
+=== Unroll (replacement of ComboBox)
 
-  end
-
-In views:
-
-  # app/views/orders/_form.html.haml
-  =formize_form
-
-or:
-
-  # app/views/orders/_form.html.haml
-  =form_tag do
-    =formize_fields
-
-or:
-
-  # app/views/orders/_form.html.haml
-  =formize_form :lines
+=== MonoChoice (dynamic selector)
 
 
 == Contributing to Formize {<img src="https://secure.travis-ci.org/burisu/formize.png"/>}[http://travis-ci.org/burisu/formize]

data/VERSION

@@ -1 +1 @@
-0.1.1
+1.0.0

data/lib/assets/javascripts/formize-autocomplete.js

@@ -0,0 +1,11 @@
+(function ($) {
+    
+    $(document).behave("load", "input[data-autocomplete]", function () {
+	var element = $(this);
+	element.autocomplete({
+            source: element.data("autocomplete"),
+            minLength: parseInt(element.data("min-length") || 1)
+	});
+    });
+
+})(jQuery);

data/lib/assets/javascripts/formize-behave.js

@@ -0,0 +1,52 @@
+(function ($) {
+    'use strict';
+
+    $.Behave = {};
+    $.Behave.sequence = 0;
+    $.Behave.loads = [];
+
+    // Refresh one behaviour
+    $.Behave.refreshOne = function (behaviour) {
+        var element;
+        behaviour.ref.find(behaviour.selector).each(function (index) {
+            element = $(this);
+            if (element.prop('alreadyBound' + behaviour.key) !== true) {
+                behaviour.handler.call(element);
+                element.prop('alreadyBound' + behaviour.key, true);
+            }
+        });
+    };
+
+    // Refresh all behaviours
+    $.Behave.refresh = function () {
+        $.each($.Behave.loads, function (index, behaviour) {
+            $.Behave.refreshOne(behaviour);
+        });
+    };
+
+    // Same API as .on(). Takes in account load events.
+    $.fn.behave = function (events, selector, handler) {
+        var ref = $(this);
+        $.each(events.split(/\s+/ig), function (index, event) {
+            var behaviour;
+            if (event === "load") {
+                behaviour = {ref: ref, selector: selector, handler: handler, key: $.Behave.sequence * 7};
+                $.Behave.loads.push(behaviour);
+                $.Behave.refreshOne(behaviour);
+                $.Behave.sequence += 1;
+            } else {
+                ref.on(events, selector, handler);
+            }
+        });
+    };
+    
+    // Retro-compatibility
+    $.behave = function (selector, events, handler) {
+        $(document).behave(events, selector, handler);
+    };
+    
+
+    // Rebinds unbound elements on each ajax request.
+    $(document).ajaxComplete($.Behave.refresh);
+
+})(jQuery);

data/lib/assets/javascripts/formize-datepicker.js

@@ -0,0 +1,115 @@
+//= require locales/jquery.ui.datepicker-af
+//= require locales/jquery.ui.datepicker-ar-DZ
+//= require locales/jquery.ui.datepicker-ar
+//= require locales/jquery.ui.datepicker-az
+//= require locales/jquery.ui.datepicker-be
+//= require locales/jquery.ui.datepicker-bg
+//= require locales/jquery.ui.datepicker-bs
+//= require locales/jquery.ui.datepicker-ca
+//= require locales/jquery.ui.datepicker-cs
+//= require locales/jquery.ui.datepicker-cy-GB
+//= require locales/jquery.ui.datepicker-da
+//= require locales/jquery.ui.datepicker-de-CH
+//= require locales/jquery.ui.datepicker-de
+//= require locales/jquery.ui.datepicker-el
+//= require locales/jquery.ui.datepicker-en-AU
+//= require locales/jquery.ui.datepicker-en-GB
+//= require locales/jquery.ui.datepicker-en-NZ
+//= require locales/jquery.ui.datepicker-eo
+//= require locales/jquery.ui.datepicker-es
+//= require locales/jquery.ui.datepicker-et
+//= require locales/jquery.ui.datepicker-eu
+//= require locales/jquery.ui.datepicker-fa
+//= require locales/jquery.ui.datepicker-fi
+//= require locales/jquery.ui.datepicker-fo
+//= require locales/jquery.ui.datepicker-fr-CA
+//= require locales/jquery.ui.datepicker-fr-CH
+//= require locales/jquery.ui.datepicker-fr
+//= require locales/jquery.ui.datepicker-gl
+//= require locales/jquery.ui.datepicker-he
+//= require locales/jquery.ui.datepicker-hi
+//= require locales/jquery.ui.datepicker-hr
+//= require locales/jquery.ui.datepicker-hu
+//= require locales/jquery.ui.datepicker-hy
+//= require locales/jquery.ui.datepicker-id
+//= require locales/jquery.ui.datepicker-is
+//= require locales/jquery.ui.datepicker-it
+//= require locales/jquery.ui.datepicker-ja
+//= require locales/jquery.ui.datepicker-ka
+//= require locales/jquery.ui.datepicker-kk
+//= require locales/jquery.ui.datepicker-km
+//= require locales/jquery.ui.datepicker-ko
+//= require locales/jquery.ui.datepicker-ky
+//= require locales/jquery.ui.datepicker-lb
+//= require locales/jquery.ui.datepicker-lt
+//= require locales/jquery.ui.datepicker-lv
+//= require locales/jquery.ui.datepicker-mk
+//= require locales/jquery.ui.datepicker-ml
+//= require locales/jquery.ui.datepicker-ms
+//= require locales/jquery.ui.datepicker-nb
+//= require locales/jquery.ui.datepicker-nl-BE
+//= require locales/jquery.ui.datepicker-nl
+//= require locales/jquery.ui.datepicker-nn
+//= require locales/jquery.ui.datepicker-no
+//= require locales/jquery.ui.datepicker-pl
+//= require locales/jquery.ui.datepicker-pt-BR
+//= require locales/jquery.ui.datepicker-pt
+//= require locales/jquery.ui.datepicker-rm
+//= require locales/jquery.ui.datepicker-ro
+//= require locales/jquery.ui.datepicker-ru
+//= require locales/jquery.ui.datepicker-sk
+//= require locales/jquery.ui.datepicker-sl
+//= require locales/jquery.ui.datepicker-sq
+//= require locales/jquery.ui.datepicker-sr
+//= require locales/jquery.ui.datepicker-sr-SR
+//= require locales/jquery.ui.datepicker-sv
+//= require locales/jquery.ui.datepicker-ta
+//= require locales/jquery.ui.datepicker-th
+//= require locales/jquery.ui.datepicker-tj
+//= require locales/jquery.ui.datepicker-tr
+//= require locales/jquery.ui.datepicker-uk
+//= require locales/jquery.ui.datepicker-vi
+//= require locales/jquery.ui.datepicker-zh-CN
+//= require locales/jquery.ui.datepicker-zh-HK
+//= require locales/jquery.ui.datepicker-zh-TW
+
+(function ($) {
+
+    $.datepicker.regional["en"] = $.datepicker.regional["en-GB"]
+
+    $.datepicker.regional["arb"] = $.datepicker.regional["ar"]
+    $.datepicker.regional["eng"] = $.datepicker.regional["en"]
+    $.datepicker.regional["fra"] = $.datepicker.regional["fr"]
+    $.datepicker.regional["jpn"] = $.datepicker.regional["ja"]
+    $.datepicker.regional["spa"] = $.datepicker.regional["es"]
+
+    // Initializes date fields
+    $(document).behave("load", 'input[data-datepicker]', function() {
+	var element = $(this);
+	var locale = element.data("locale");
+	var options = $.datepicker.regional[locale];
+	if (options === null || options === undefined) {
+            options = $.datepicker.regional["en"];
+	}
+	if (element.data("date-format") !== null) {
+            options['dateFormat'] = element.data("date-format");
+	}
+	options['altField'] = '#'+element.data("datepicker");
+	options['altFormat'] = 'yy-mm-dd';
+	options['defaultDate'] = element.val();
+	// Check for dependents
+	triggered = $(options['altField']);
+	if (triggered.data('dependents') !== undefined && triggered.data('dependents') !== null) {
+	    if (triggered.data('observe') === undefined || triggered.data('observe') === null) {
+		triggered.attr('data-observe', '1000');
+	    }
+	}
+	/*options['onSelect'] = function (dateText, inst) {
+	  triggered.trigger("emulated:change");
+	  };*/
+	element.datepicker(options);
+	/* element.keyup(function() { 
+	   triggered.trigger("emulated:change");
+	   });	*/
+    });
+})(jQuery);

data/lib/assets/javascripts/formize-dependents.js

@@ -0,0 +1,50 @@
+(function ($) {
+    "use strict";
+
+    var Formize = {};
+
+    Formize.refreshDependents = function (event) {
+        var element = $(this), params = {}, dependents, paramName;
+
+        if (element.val() !== null && element.val() !== undefined) {
+            dependents = element.attr('data-dependents');
+            paramName = element.attr('data-parameter-name') || element.attr('id') || 'value';
+            params[paramName] = element.val();
+            $(dependents).each(function (index, item) {
+                // Replaces element
+                var url = $(item).attr('data-refresh'), mode = $(item).attr('data-refresh-mode') || 'replace';
+                if (url !== null) {
+                    $.ajax(url, {
+                        data: params,
+                        success: function (data, textStatus, response) {
+                            if (mode === 'update') {
+                                $(item).html(response.responseText);
+                            } else if (mode === 'update-value') {
+                                if (element.data("attribute")) {
+                                    $(item).val($.parseJSON(data)[element.data("attribute")]);
+                                } else {
+                                    $(item).val(response.responseText);
+                                }
+                            } else {
+                                $(item).replaceWith(response.responseText);
+                            }
+                        },
+                        error: function (jqXHR, textStatus, errorThrown) {
+                            alert("FAILURE (Error " + textStatus + "): " + errorThrown);
+                        }
+                    });
+                }
+            });
+            return true;
+        }
+        return false;
+    };
+
+    // Refresh dependents on changes
+    $(document).behave("change emulated:change", "*[data-dependents]", Formize.refreshDependents);
+    // Compensate for changes made with keyboard
+    $(document).behave("keypress", "select[data-dependents]", Formize.refreshDependents);
+
+})(jQuery);
+
+

data/lib/assets/javascripts/formize-dialog.js

@@ -0,0 +1,123 @@
+//= require formize-behave
+
+(function ($) {
+
+    $.ajaxDialogCount = 0;
+
+    $.ajaxDialog = function (url, settings) {
+        var frame_id = "dialog-" + $.ajaxDialogCount, width = $(document).width();
+        var defaultSettings = {
+            header: "X-Return-Code",
+            width: 0.6,
+            height: 0.8
+        };
+        if (settings === null || settings === undefined) { settings = {}; }
+        settings = $.extend({}, defaultSettings, settings);
+        $.ajax(url, {
+            data: {dialog: frame_id},
+            success: function(data, textStatus, jqXHR) {
+                var frame = $(document.createElement('div')), width, height;
+                frame.attr({id: frame_id, 'class': 'dialog ajax-dialog', style: 'display:none;'});
+                $('body').append(frame);
+                frame.html(data);
+                frame.prop("dialogSettings", settings);
+                if (settings.width === 0) {
+                    width = 'auto';
+                } else if (settings.width < 1) {
+                    width = $(window).width() * settings.width;
+                } else {
+                    width = settings.width;
+                }
+                if (settings.height === 0) {
+                    height = 'auto';
+                } else if (settings.height < 1) {
+                    height = $(window).height() * settings.height;
+                } else {
+                    height = settings.height;
+                }
+                frame.dialog({
+                    autoOpen: false,
+                    show: 'fade',
+                    modal: true,
+                    width: width,
+                    height: height
+                });
+                $.ajaxDialogInitialize(frame);
+                frame.dialog("open");
+            },
+            error: function(jqXHR, textStatus, errorThrown) {
+                alert("FAILURE (Error "+textStatus+"): "+errorThrown);
+                var frame = $("#" + frame_id);
+                frame.dialog("close");
+                frame.remove();                
+            }
+        });
+        $.ajaxDialogCount += 1;
+    };
+
+    $.ajaxDialogInitialize = function(frame) {
+        var frame_id = frame.attr("id");
+        var title = frame.prop("dialogSettings")["title"];
+        if (title === null || title === undefined) {
+            var h1 = $("#" + frame_id + " h1");
+            if (h1[0] !== null && h1[0] !== undefined) {
+                title = h1.text()
+                h1.remove();
+            }
+        }
+        frame.dialog("option", "title", title);
+        
+        $("#" + frame_id + " form").each(function (index, form) {
+            $(form).attr('data-dialog', frame_id);
+        });
+        
+    };
+
+    $.submitAjaxForm = function () {
+        var form = $(this);
+        var frame_id = form.attr('data-dialog');
+        var frame = $('#'+frame_id);
+        var settings = frame.prop("dialogSettings");
+        
+        var field = $(document.createElement('input'));
+        field.attr({ type: 'hidden', name: 'dialog', value: frame_id });
+        form.append(field);
+
+        $.ajax(form.attr('action'), {
+            type: form.attr('method') || 'POST',
+            data: form.serialize(),
+            success: function(data, textStatus, request) {
+                var returnCode = request.getResponseHeader(settings["header"])
+                var returns = settings["returns"], unknownReturnCode = true;
+                for (var code in returns) {
+                    if (returnCode == code && $.isFunction(returns[code])) {
+                        returns[code].call(form, frame, data, textStatus, request);
+                        unknownReturnCode = false;
+                        $.ajaxDialogInitialize(frame);
+                        break;
+                    }
+                }
+                if (unknownReturnCode) {
+                    if ($.isFunction(settings["defaultReturn"])) {
+                        settings["defaultReturn"].call(form, frame);
+                    } else {
+                        alert("FAILURE (Unknown return code for header " + settings["header"] + "): " + returnCode);
+                    }
+                }
+            },
+            error: function(jqXHR, textStatus, errorThrown) {
+                alert("FAILURE (Error "+textStatus+"): "+errorThrown);
+                var frame = $("#" + frame_id);
+                frame.dialog("close");
+                frame.remove();                
+                // if ($.isFunction(settings["error"])) { settings["error"].call(form, frame, jqXHR, textStatus, errorThrown); }
+            }
+        });
+        return false;
+    };
+
+    // Submits dialog forms
+    $(document).behave("submit", ".ajax-dialog form[data-dialog]", $.submitAjaxForm);
+
+
+})(jQuery);

data/lib/assets/javascripts/formize-observe.js

@@ -0,0 +1,24 @@
+(function ($) {
+
+    // Observes fields comparing its value with fixed intervals of time
+    // Compensates not quite sure "change" events.
+    $(document).behave("load", "*[data-observe]", function () {
+	var element = $(this);
+	var interval = parseInt(element.data("observe"));
+	if (interval === null || interval === undefined) {
+	    interval = 1000;
+	}
+	if (element.get(0).nodeName.toLowerCase() !== "input") {
+	    alert("data-observe attribute must be only used with <input>s.");
+	    return false;
+	}
+	element.previousObservedValue = element.val();
+	window.setInterval(function () {
+	    if (element.val() !== element.previousObservedValue) {
+		element.trigger("emulated:change");
+		element.previousObservedValue = element.val();
+	    }
+	}, interval);
+	return true;
+    });
+})(jQuery);