ext_form 0.1.4

data/app/assets/stylesheets/ext_form/application.scss

@@ -0,0 +1,15 @@
+/*
+ * This is a manifest file that'll be compiled into application.css, which will include all the files
+ * listed below.
+ *
+ * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
+ * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
+ *
+ * You're free to add application-wide styles to this file and they'll appear at the top of the
+ * compiled file, but it's generally better to create a new file per style scope.
+ *
+ *= require_self
+ *= require_tree .
+ */
+
+@import 'base';

data/app/assets/stylesheets/ext_form/application_bootstrap.css.scss

@@ -0,0 +1,197 @@
+/*
+ * This is a manifest file that'll be compiled into application.css, which will include all the files
+ * listed below.
+ *
+ * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
+ * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
+ *
+ * You're free to add application-wide styles to this file and they'll appear at the top of the
+ * compiled file, but it's generally better to create a new file per style scope.
+ *
+ */
+
+@import 'base';
+@import 'bootstrap-datetimepicker';
+@import 'select2';
+
+/*
+ * FROM typeahead.js-bootstrap.css
+ * for compatibility of bootstrap and typeahead
+ */
+.twitter-typeahead .tt-query,
+.twitter-typeahead .tt-hint {
+  margin-bottom: 0;
+}
+
+.tt-dropdown-menu {
+  min-width: 160px;
+  margin-top: 2px;
+  padding: 5px 0;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  border: 1px solid rgba(0, 0, 0, .2);
+  *border-right-width: 2px;
+  *border-bottom-width: 2px;
+  -webkit-border-radius: 6px;
+  -moz-border-radius: 6px;
+  border-radius: 6px;
+  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
+  -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
+  box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
+  -webkit-background-clip: padding-box;
+  -moz-background-clip: padding;
+  background-clip: padding-box;
+}
+
+.tt-suggestion {
+  display: block;
+  padding: 3px 20px;
+}
+
+.tt-suggestion.tt-is-under-cursor {
+  color: #fff;
+  background-color: #0081c2;
+  background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
+  background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
+  background-image: -o-linear-gradient(top, #0088cc, #0077b3);
+  background-image: linear-gradient(to bottom, #0088cc, #0077b3);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0)
+}
+
+.tt-suggestion.tt-is-under-cursor a {
+  color: #fff;
+}
+
+.tt-suggestion p {
+  margin: 0;
+}
+
+/*
+ * FROM https://raw.github.com/t0m/select2-bootstrap-css/master/select2-bootstrap.css
+ */
+
+/**
+ * Select2 Bootstrap CSS 1.0
+ * Compatible with select2 3.3.2 and bootstrap 2.3.1
+ * MIT License
+ */
+.select2-container {
+  vertical-align: middle;
+}
+
+.select2-container.input-mini {
+  width: 60px;
+}
+
+.select2-container.input-small {
+  width: 90px;
+}
+
+.select2-container.input-medium {
+  width: 150px;
+}
+
+.select2-container.input-large {
+  width: 210px;
+}
+
+.select2-container.input-xlarge {
+  width: 270px;
+}
+
+.select2-container.input-xxlarge {
+  width: 530px;
+}
+
+.select2-container.input-default {
+  width: 220px;
+}
+
+.select2-container[class*="span"] {
+  float: none;
+  margin-left: 0;
+}
+
+.select2-container .select2-choice,
+.select2-container-multi .select2-choices {
+  height: 28px;
+  line-height: 29px;
+  border: 1px solid #cccccc;
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+  background: none;
+  background-color: white;
+  filter: none;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+}
+
+.select2-container .select2-choice div, .select2-container .select2-choice .select2-arrow,
+.select2-container.select2-container-disabled .select2-choice div,
+.select2-container.select2-container-disabled .select2-choice .select2-arrow {
+  border-left: none;
+  background: none;
+  filter: none;
+}
+
+.control-group.error [class^="select2-choice"] {
+  border-color: #b94a48;
+}
+
+.select2-container-multi .select2-choices .select2-search-field {
+  height: 28px;
+  line-height: 27px;
+}
+
+.select2-drop.select2-drop-active,
+.select2-container-active .select2-choice,
+.select2-container-multi.select2-container-active .select2-choices {
+  border-color: rgba(82, 168, 236, 0.8);
+  border-color: #ccc\0;
+  outline: none;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
+  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
+}
+
+[class^="input-"] .select2-container {
+  font-size: 14px;
+}
+
+.input-prepend [class^="select2-choice"] {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.input-append [class^="select2-choice"] {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.select2-dropdown-open [class^="select2-choice"] {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.select2-dropdown-open.select2-drop-above [class^="select2-choice"] {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
+[class^="input-"] .select2-offscreen {
+  position: absolute;
+}
+
+/**
+ * This stops the quick flash when a native selectbox is shown and
+ * then replaced by a select2 input when javascript kicks in. This can be
+ * removed if javascript is not present
+ */
+select.select2 {
+  height: 28px;
+  visibility: hidden;
+}

data/app/assets/stylesheets/ext_form/base.css.scss

@@ -0,0 +1,32 @@
+.form-horizontal .ext-form-group {
+  float: left;
+}
+
+.form-horizontal .ext-form-label {
+  padding-top: 5px;
+  text-align: right;
+}
+
+.ext-default-form .ext-form-label {
+  padding-right: 5px;
+}
+
+.form-horizontal .row:before, .row:after {
+  display: table;
+  content: "";
+  line-height: 0;
+}
+
+.form-horizontal .row:after {
+  clear: both;
+}
+
+.ext-default-form .help-block {
+  padding-top: 0;
+  margin-top: 0;
+}
+
+span.add-on {
+  position: absolute;
+  z-index: 999;
+}

data/config/routes.rb

@@ -0,0 +1,2 @@
+ExtForm::Engine.routes.draw do
+end

data/lib/ext_form/builders/form_builder_base.rb

@@ -0,0 +1,224 @@
+module ExtForm
+  module Builders
+    class FormBuilderBase < SimpleForm::FormBuilder
+
+      # include nested_form
+      include ::NestedForm::BuilderMixin
+
+      attr_accessor :l, :input_seq, :before_row_start_callbacks, :after_row_start_callbacks,
+                    :before_row_end_callbacks, :after_row_end_callbacks
+
+      map_type :date_picker, :time_picker, :dt_picker,  to: ExtForm::Inputs::DtPicker
+      map_type :auto_complete,                          to: ExtForm::Inputs::AutoComplete
+      map_type :select,                                 to: ExtForm::Inputs::CollectionSelect
+      map_type :grouped_select,                         to: ExtForm::Inputs::GroupedCollectionSelect
+      map_type :original_select,                        to: SimpleForm::Inputs::CollectionSelectInput
+      map_type :original_grouped_select,                to: SimpleForm::Inputs::GroupedCollectionSelectInput
+
+      def initialize(*)
+        super
+
+        self.input_seq = 0
+        self.l = ['ExtForm','Layouts', ExtForm.layout].join('::').constantize.new
+        l.setup_config(options[:l])
+
+        self.before_row_start_callbacks = []
+        self.after_row_start_callbacks = []
+        self.before_row_end_callbacks = []
+        self.after_row_end_callbacks = []
+      end
+
+
+      # Public: Wrapper for using ExtForm inside a ext rails form.
+      # Example:
+      #
+      #   ext_form_for @user do |f|
+      #     f.ext_fields_for :posts do |posts_form|
+      #       # Here you have all simple_form methods available
+      #       posts_form.input :title
+      #     end
+      #   end
+      def ext_fields_for(record_name, record_object = nil, options = {}, &block)
+        record_object, options = nil, record_object if record_object.is_a?(Hash)
+
+        options[:wrapper] ||= self.options[:wrapper]
+        options[:defaults] ||= self.options[:defaults]
+        options[:l] ||= self.options[:l]
+
+        if self.class < ActionView::Helpers::FormBuilder
+          options[:builder] ||= self.class
+        else
+          options[:builder] ||= ExtForm::Builders::FormBuilder
+        end
+
+        simple_fields_for(record_name, record_object, options, &block)
+
+      end
+
+      def inputs(*args, &block)
+        if args.first.is_a?(String) && args.first.match(/^\d+(:?\d?)?$/)
+          layout = args.shift
+          attributes = args
+        else
+          layout, attributes = nil, args
+        end
+
+        if layout.blank?
+          self.input_seq = 0
+
+          output = []
+          attributes.each do |a|
+            if find_attribute_column(a)
+              output << input(a)
+            elsif find_association_reflection(a)
+              output << association(a)
+            else
+              raise 'Attribute must be a column or an association of this model.'
+            end
+          end
+
+          output << @template.capture(self, &block) if block_given?
+          output << all_row_end.try(:html_safe)
+          output.compact.join.html_safe
+        else
+          swap_layout(layout, attributes, &block)
+        end
+      end
+
+      def input(attribute_name, options={}, &block)
+        options[:input_seq] = self.input_seq
+        output = []
+        output << row_start
+        output << super(attribute_name, options, &block)
+        output << row_end
+        self.input_seq += 1
+
+        output.compact.join.html_safe
+      end
+
+      def before_row_start(&block)
+        before_row_start_callbacks << block
+        ''
+      end
+
+      def before_row_end(&block)
+        before_row_end_callbacks << block
+        ''
+      end
+
+      def after_row_start(&block)
+        after_row_start_callbacks << block
+        ''
+      end
+
+      def after_row_end(&block)
+        after_row_end_callbacks << block
+        ''
+      end
+
+      def dt_picker(method, options={})
+        default_data_options = {
+            format: 'yyyy-MM-dd hh:mm:ss',
+            language: ExtForm.locale
+        }
+        options[:data] ||= {}
+        options[:data].reverse_merge!(default_data_options)
+        @template.dt_picker(@object_name, method, objectify_options(options))
+      end
+
+      def date_picker(method, options={})
+        fixed_data_options = {
+            pick_time: false
+        }
+        default_data_options = {
+            format: 'yyyy-MM-dd',
+            language: ExtForm.locale
+        }
+        options[:data] ||= {}
+        options[:data].merge!(fixed_data_options).reverse_merge!(default_data_options)
+        @template.dt_picker(@object_name, method, objectify_options(options))
+      end
+
+      def time_picker(method, options={})
+        fixed_data_options = {
+            pick_date: false
+        }
+        default_data_options = {
+            format: 'hh:mm:ss',
+            language: ExtForm.locale
+        }
+        options[:data] ||= {}
+        options[:data].merge!(fixed_data_options).reverse_merge!(default_data_options)
+        @template.dt_picker(@object_name, method, objectify_options(options))
+      end
+
+      def auto_complete(method, options={})
+        @template.auto_complete(@object_name, method, objectify_options(options))
+      end
+
+      def collection_select2(method, collection, value_method, label_method,
+          options={}, html_options={})
+        @template.collection_select2(@object_name, method, collection, value_method, label_method,
+                                     objectify_options(options), html_options)
+      end
+
+      def grouped_collection_select2(method, grouped_collection,
+          group_method, group_label_method, value_method, label_method,
+          options={}, html_options={})
+        @template.collection_select2(@object_name, method, grouped_collection, group_method, group_label_method,
+                                     value_method, label_method, objectify_options(options), html_options)
+      end
+
+      private
+      def swap_layout(layout=nil, attributes=[], &block)
+        options = self.options.dup
+        options[:l] = l.layout_config.dup.merge(layout: layout)
+        options[:parent_builder] = nil
+
+        new_block = proc { |f|
+          f.inputs(*attributes) do
+            block.call(f) if block_given?
+          end
+        }
+
+        @template.ext_fields_for(object, options, &new_block)
+      end
+
+      def row_start
+        if input_seq % l.layout.size == 0
+          output = []
+          before_row_start_callbacks.each do |c|
+            output << template.capture(&c)
+          end
+          output << '<div class="row">'
+          after_row_start_callbacks.each do |c|
+            output << template.capture(&c)
+          end
+          output.compact.join
+        end
+      end
+
+      def row_end
+        generate_row_end if (input_seq + 1) % l.layout.size == 0
+      end
+
+      def all_row_end
+        generate_row_end if input_seq % l.layout.size != 0
+      end
+
+      def generate_row_end
+        output = []
+        before_row_end_callbacks.each do |c|
+          output << template.capture(&c)
+        end
+        output << '</div>'
+        after_row_end_callbacks.each do |c|
+          output << template.capture(&c)
+        end
+
+        output.compact.join
+      end
+
+    end
+  end
+end

data/lib/ext_form/builders.rb

@@ -0,0 +1,10 @@
+module ExtForm
+  module Builders
+    extend ActiveSupport::Autoload
+
+    eager_autoload do
+      autoload :FormBuilderBase
+    end
+
+  end
+end

data/lib/ext_form/components/input_addons.rb

@@ -0,0 +1,34 @@
+module ExtForm
+  module Components
+    module InputAddons
+      extend ActiveSupport::Concern
+
+      def input_addon
+        template.content_tag(addon_options[:tag]||'span', nil, input_addon_html_options) do
+          output = []
+          output << input_addon_image if addon_options[:icon] || addon_options[:datetimepicker]
+          output << input_addon_text
+
+          output.reverse! if addon_options[:text_first]
+          output.compact.join.html_safe
+        end
+      end
+
+      private
+
+      def input_addon_image
+        template.content_tag(:i, nil, class: "icon-#{addon_options[:icon]}") if addon_options[:icon]
+        template.content_tag(:i, nil, data: {:'time-icon' => 'icon-time',
+                                             :'date-icon' => 'icon-calendar'}) if addon_options[:datetimepicker]
+      end
+
+      def input_addon_text
+        addon_options[:text] || ''
+      end
+
+      def input_addon_html_options
+        html_options_for(:input_addon, (addon_options[:tag] == 'button' ? 'btn' : 'add-on'))
+      end
+    end
+  end
+end

data/lib/ext_form/components.rb

@@ -0,0 +1,7 @@
+module ExtForm
+  module Components
+    extend ActiveSupport::Autoload
+
+    autoload :InputAddons
+  end
+end

data/lib/ext_form/engine.rb

@@ -0,0 +1,14 @@
+module ExtForm
+  class Engine < ::Rails::Engine
+    isolate_namespace ExtForm
+
+    config.eager_load_namespaces << ExtForm
+
+    #config.generators do |g|
+    #  g.test_framework :rspec, :fixture => false
+    #  g.fixture_replacement :factory_girl, :dir => 'spec/factories'
+    #  g.assets false
+    #  g.helper false
+    #end
+  end
+end