ext_form 0.1.4

data/lib/ext_form/helpers/form_helper.rb

@@ -0,0 +1,222 @@
+module ExtForm
+  module Helpers
+    module FormHelper
+      extend ActiveSupport::Concern
+
+      include FormTagHelper
+
+      # Helper that wrapped simple_form_for and layout management.
+      #
+      # record - an object extending ActiveRecord::Base
+      # options - add option l , the others are as the same as the
+      #           simple_form_for
+      #           :l - layout options
+      #                :layout      - it 's a string ,specify the scale of
+      #                               columns.
+      #                               for example: '1:1', '1:2', '1:1:1'
+      #                :spacing     - left and right padding of form, should be
+      #                               number or percentage.
+      #                :label_width - label width of input, should be number or
+      #                               percentage.
+      #                :max_width   - max width of form, should be number or
+      #                               percentage.      -
+      #
+      # Example:
+      #
+      #   <%= ext_form_for(@project, l: {layout: '1:1:1'}) do |f| %>
+      #      <%= f.inputs do %>
+      #        <%= f.input :name %>
+      #        <%= f.input :description %>
+      #      <% end %>
+      #   <% end %>
+      def ext_form_for(record, options = {}, &block)
+        redefine_options(options)
+        simple_form_for(record, options, &wrapped_inputs(&block))
+      end
+
+      # Wrapper for using ExtForm inside a rails form.
+      # you shouldn't use ext_fields_for directly yet, it is not tested now.
+      # TODO: this feature needs to be tested.
+      #
+      # Example:
+      #
+      #   form_for @user do |f|
+      #     f.text_field :username
+      #     f.text_field :email
+      #     ext_fields_for @post, l: {layout: '1'} do |posts_form|
+      #       posts_form.inputs do
+      #         posts_form.input :title
+      #         posts_form.input :content
+      #       end
+      #     end
+      #   end
+      def ext_fields_for(record_name, record_object = nil, options = {}, &block)
+        options, record_object = record_object, nil if record_object.is_a?(Hash) && record_object.extractable_options?
+        redefine_options(options)
+        simple_fields_for(record_name, record_object, options, &block)
+      end
+
+      # Use bootstrap-datetimepicker instead of date_select or time_select
+      #
+      #
+      # object_name - the object name of form builder
+      # method      - method of object
+      # options     - all options are as same as text field.
+      #   data -
+      #     format      - yyyy-mm-dd, yyyy/mm/dd.....
+      #     week_start  - 0-6
+      #     start_date  - can't pick the date before the start_date.
+      #     end_date    - can't pick the date after the end_date.
+      #     view_mode   - 0..month，1..year，2..10 years
+      #     min_view_mode   - not be tested....
+      #     language    - default pt-BR, see bootstrap-datetimepicker API
+      #     mask_input  - true, false disables the text input mask
+      #     pick_date   - true, false disables the date picker
+      #     pick_time   - true, false disables de time picker
+      #     pick_12_hour_format - false, true enables the 12-hour format time picker
+      #     pick_seconds        - true
+      #
+      # Example:
+      #
+      #   You can use 3 types of dt_picker: date_picker, time_picker, dt_picker.
+      #
+      #   ext_form would guess the input_type.
+      #   The field name ends with '_date' will be set to date_picker.
+      #   The field name ends with '_at' or '_time' will be set to dt_picker.
+      #
+      #   <%= ext_form_for(@project, l: {layout: '1:1:1'}) do |f| %>
+      #      <%= f.inputs do %>
+      #        <%= f.input :estimated_start_date %>
+      #      <% end %>
+      #   <% end %>
+      #
+      #   will produce:
+      #
+      #   <div class="input-append">
+      #     <input class="span3 date_picker optional"
+      #            data-format="yyyy-MM-dd"
+      #            data-language="zh-CN"
+      #            data-pick-time="false"
+      #            id="project_estimated_start_date"
+      #            name="project[estimated_start_date]"
+      #            type="text" value="2013-09-12" />
+      #     <script>
+      #     //<![CDATA[
+      #       $ (function() { $ ('#order_header_order_date').trigger('dt_picker_load'); });
+      #     //]]>
+      #     </script>
+      #     <span class="add-on"><i data-date-icon="icon-calendar" data-time-icon="icon-time"></i></span>
+      #   </div>
+      #
+      #   When page is loaded, datetimepicker will be automatically loaded.
+      def dt_picker(object_name, method, options={})
+        ExtForm::Helpers::Tags::DtPicker.new(object_name, method, self, options).render
+      end
+
+      # JS auto complete feature using twitter typeahead.js, pass options through data.
+      #
+      # object_name - the object name of form builder
+      # method      - method of object
+      # options     - all options are as same as text field.
+      #   data  -
+      #     dataset - see: https://github.com/twitter/typeahead.js#api
+      #     mapping - A hash represents that the datum selected maps to inputs in the form, when you want select
+      #               a result and put some values relative to the other fields at the same time, you can use it.
+      #               format: {datum_name: 'input_id', datum_name2: 'input_id2'}
+      #
+      # Example:
+      #   <%= ext_form_for(@order) do |f| %>
+      #      <%= f.hidden_field :customer_id %>
+      #      <%= f.inputs do %>
+      #        <%= f.input :customer, as: :auto_complete, input_html: {
+      #          data: {
+      #            dataset: {
+      #              name: 'customer',
+      #              local: [
+      #                {id: 1, value: 'customer1', address: 'address1'},
+      #                {id: 2, value: 'customer2', address: 'address2'},
+      #                {id: 3, value: 'customer3', address: 'address3'},
+      #                {id: 4, value: 'customer4', address: 'address4'}
+      #              ]
+      #            },
+      #            mapping: {
+      #               id: 'order_customer_id',
+      #               address: 'order_customer_address'
+      #            }
+      #          }
+      #        } %>
+      #        <%= f.input :customer_address %>
+      #      <% end %>
+      #   <% end %>
+      #
+      # When you select a customer, id will be put into hidden field whose id is "order_customer_id",
+      # address will be put into text field whose id is "order_customer_address".
+      #
+      # If you input an invalid customer name, relative fields will be cleared.
+      def auto_complete(object_name, method, options={})
+        ExtForm::Helpers::Tags::AutoComplete.new(object_name, method, self, options).render
+      end
+
+      def collection_select2(object_name, method, collection, value_method, text_method, options={}, html_options={})
+        ExtForm::Helpers::Tags::CollectionSelect.new(object_name, method, self, collection, value_method,
+                                                     text_method, options, html_options).render
+      end
+
+      def grouped_collection_select2(object_name, method, collection, group_method,
+          group_label_method, option_key_method, option_value_method, options={}, html_options={})
+        ExtForm::Helpers::Tags::GroupedCollectionSelect.new(object_name, method, self, collection, group_method,
+                                                            group_label_method, option_key_method,
+                                                            option_value_method, options,
+                                                            html_options).render
+      end
+
+      private
+
+      def redefine_options(options={})
+        options[:builder] ||= ExtForm::Builders::FormBuilderBase
+        options[:wrapper] ||= ExtForm.default_wrapper
+        options[:html] ||= {}
+        new_class = []
+        new_class << options[:html].delete(:class)
+        new_class << ExtForm.form_class
+        options[:html][:class] = new_class.compact.join(' ')
+      end
+
+      def wrapped_inputs(&block)
+        proc { |f|
+          layout = f.l
+          output = []
+          if f.l.instance_of?(ExtForm::Layouts::DefaultLayout)
+            output << default_wrapper(f, layout, &block)
+          else
+            output << bootstrap_wrapper(f, layout, &block)
+          end
+          output << after_nested_form_callbacks
+          output.compact.join.html_safe
+        }
+      end
+
+      def default_wrapper(f, layout, &block)
+        spacing = layout.layout_config[:spacing]
+        suffix = layout.layout_config[:measure]
+
+        content_tag('div', nil,
+                    class: 'all-inputs',
+                    style: "padding-left: #{spacing}#{suffix}; padding-right: #{spacing}#{suffix}; "\
+                           "width: #{layout.actual_width}#{suffix};") do
+          capture(f, &block)
+        end
+      end
+
+      def bootstrap_wrapper(f, layout, &block)
+        spacing = layout.layout_config[:spacing]
+        [(content_tag('div', ' ', class: "left-spacing span#{spacing}") if spacing.to_i > 0),
+         content_tag('div', nil, class: "all-inputs span#{layout.actual_width}") { capture(f, &block) },
+         (content_tag('div', ' ', class: "right-spacing span#{spacing}") if spacing.to_i > 0)
+        ].compact.join.html_safe
+      end
+    end
+  end
+end
+
+ActionView::Base.send :include, ExtForm::Helpers::FormHelper

data/lib/ext_form/helpers/form_tag_helper.rb

@@ -0,0 +1,60 @@
+module ExtForm
+  module Helpers
+    module FormTagHelper
+      extend ActiveSupport::Concern
+
+      # Datetime picker tag helper, based on bootstrap-datetimepicker
+      #
+      # object_name - the object name of form builder
+      # method      - method of object
+      # options     - all options are as same as text field.
+      #   data -
+      #     format      - yyyy-mm-dd, yyyy/mm/dd.....
+      #     week_start  - 0-6
+      #     start_date  - can't pick the date before the start_date.
+      #     end_date    - can't pick the date after the end_date.
+      #     view_mode   - 0..month，1..year，2..10 years
+      #     min_view_mode   - not be tested....
+      #     language    - default pt-BR, see bootstrap-datetimepicker API
+      #     mask_input  - true, false disables the text input mask
+      #     pick_date   - true, false disables the date picker
+      #     pick_time   - true, false disables de time picker
+      #     pick_12_hour_format - false, true enables the 12-hour format time picker
+      #     pick_seconds        - true
+      def dt_picker_tag(name, value, options={})
+        id = sanitize_to_id(name)
+        default_options = {id: id}
+        options.reverse_merge!(default_options)
+
+        output = content_tag(:div, nil, class: 'input-append') do
+          [text_field_tag(name, value, options),
+           content_tag(:span, nil, class: 'add-on') do
+             content_tag(:i, nil, data: {date_icon: 'icon-calendar', time_icon: 'icon-time'})
+           end
+          ].join.html_safe
+        end
+        output << javascript_tag do
+          "$('##{options[:id]}').trigger('dt_picker_load');".html_safe
+        end
+
+        output.html_safe
+      end
+
+      # JS auto complete feature using twitter typeahead.js, pass options through data.
+      # see: ExtForm::Helpers::FormHelper#auto_complete
+      # TODO: this feature needs to be tested.
+      def auto_complete_tag(name, value, options={})
+        id = sanitize_to_id(name)
+        default_options = {id: id}
+        options.reverse_merge!(default_options)
+
+        output = text_field_tag(name, value, options)
+        output << javascript_tag do
+          "$('##{options[:id]}').trigger('auto_complete_load');".html_safe
+        end
+
+        output.html_safe
+      end
+    end
+  end
+end

data/lib/ext_form/helpers/tags/auto_complete.rb

@@ -0,0 +1,25 @@
+module ExtForm
+  module Helpers
+    module Tags
+
+      class AutoComplete < ActionView::Helpers::Tags::TextField
+        def render
+          output = super
+
+          html_options = {}
+          add_default_name_and_id(html_options)
+
+          output << @template_object.javascript_tag do
+            "$(function(){$('##{html_options['id']}').trigger('auto_complete_load');});".html_safe
+          end
+          output.html_safe
+        end
+
+        def self.field_type
+          'text'
+        end
+      end
+
+    end
+  end
+end

data/lib/ext_form/helpers/tags/collection_select.rb

@@ -0,0 +1,19 @@
+module ExtForm
+  module Helpers
+    module Tags
+      class CollectionSelect < ActionView::Helpers::Tags::CollectionSelect
+        def render
+          output = super
+
+          html_options = {}
+          add_default_name_and_id(html_options)
+
+          output << @template_object.javascript_tag do
+            "$(function(){$('##{html_options['id']}').trigger('select2_load');});".html_safe
+          end
+          output.html_safe
+        end
+      end
+    end
+  end
+end

data/lib/ext_form/helpers/tags/dt_picker.rb

@@ -0,0 +1,27 @@
+module ExtForm
+  module Helpers
+    module Tags
+      class DtPicker < ActionView::Helpers::Tags::TextField
+
+        def render
+          if value_before_type_cast(object).present?
+            @options[:value] = value_before_type_cast(object).match(/\d{4}-\d{1,2}-\d{1,2}(\s\d{1,2}:\d{1,2}:\d{1,2})?/)
+          end
+          output = super
+
+          html_options = {}
+          add_default_name_and_id(html_options)
+
+          output << @template_object.javascript_tag do
+            "$(function(){$('##{html_options['id']}').trigger('dt_picker_load');});".html_safe
+          end
+          output.html_safe
+        end
+
+        def self.field_type
+          'text'
+        end
+      end
+    end
+  end
+end

data/lib/ext_form/helpers/tags/grouped_collection_select.rb

@@ -0,0 +1,19 @@
+module ExtForm
+  module Helpers
+    module Tags
+      class GroupedCollectionSelect < ActionView::Helpers::Tags::GroupedCollectionSelect
+        def render
+          output = super
+
+          html_options = {}
+          add_default_name_and_id(html_options)
+
+          output << @template_object.javascript_tag do
+            "$(function(){$('##{html_options['id']}').trigger('select2_load');});".html_safe
+          end
+          output.html_safe
+        end
+      end
+    end
+  end
+end

data/lib/ext_form/helpers/tags.rb

@@ -0,0 +1,12 @@
+module ExtForm
+  module Helpers
+    module Tags
+      extend ActiveSupport::Autoload
+
+      autoload :DtPicker
+      autoload :AutoComplete
+      autoload :CollectionSelect
+      autoload :GroupedCollectionSelect
+    end
+  end
+end

data/lib/ext_form/inputs/auto_complete.rb

@@ -0,0 +1,11 @@
+module ExtForm
+  module Inputs
+    class AutoComplete < SimpleForm::Inputs::StringInput
+
+      def input
+        @builder.send(input_type, attribute_name, input_html_options)
+      end
+    end
+  end
+end
+

data/lib/ext_form/inputs/base_mixin.rb

@@ -0,0 +1,11 @@
+module ExtForm
+  module Inputs
+    module BaseMixin
+      extend ActiveSupport::Concern
+
+      included do
+        delegate :l, :input_seq, to: :@builder
+      end
+    end
+  end
+end

data/lib/ext_form/inputs/bootstrap_inputs_mixin.rb

@@ -0,0 +1,13 @@
+module ExtForm
+  module Inputs
+    module BootstrapInputsMixin
+      extend ActiveSupport::Concern
+
+      included do
+        include ExtForm::Components::InputAddons
+        disable :input_addon
+      end
+
+    end
+  end
+end

data/lib/ext_form/inputs/collection_select.rb

@@ -0,0 +1,15 @@
+module ExtForm
+  module Inputs
+    class CollectionSelect < SimpleForm::Inputs::CollectionSelectInput
+      def input
+        label_method, value_method = detect_collection_methods
+
+        @builder.collection_select2(
+            attribute_name, collection, value_method, label_method,
+            input_options, input_html_options
+        )
+      end
+    end
+  end
+end
+

data/lib/ext_form/inputs/dt_picker.rb

@@ -0,0 +1,20 @@
+module ExtForm
+  module Inputs
+    class DtPicker < SimpleForm::Inputs::StringInput
+      enable :input_addon
+
+      attr_accessor :addon_options
+
+      def initialize(builder, attribute_name, column, input_type, options = {})
+        self.addon_options = options.delete(:input_addon) || {}
+        self.addon_options.merge!({datetimepicker: true})
+        super
+      end
+
+      def input
+        @builder.send(input_type, attribute_name, input_html_options)
+      end
+    end
+  end
+end
+

data/lib/ext_form/inputs/grouped_collection_select.rb

@@ -0,0 +1,13 @@
+module ExtForm
+  module Inputs
+    class GroupedCollectionSelect < SimpleForm::Inputs::GroupedCollectionSelectInput
+      def input
+        label_method, value_method = detect_collection_methods
+        @builder.grouped_collection_select2(attribute_name, grouped_collection,
+                                            group_method, group_label_method, value_method, label_method,
+                                            input_options, input_html_options)
+      end
+    end
+  end
+end
+

data/lib/ext_form/inputs.rb

@@ -0,0 +1,15 @@
+module ExtForm
+  module Inputs
+    extend ActiveSupport::Autoload
+
+    eager_autoload do
+      autoload :BaseMixin
+      autoload :BootstrapInputsMixin
+      autoload :DtPicker
+      autoload :AutoComplete
+      autoload :CollectionSelect
+      autoload :GroupedCollectionSelect
+    end
+
+  end
+end

data/lib/ext_form/layouts/base_layout.rb

@@ -0,0 +1,82 @@
+module ExtForm
+  module Layouts
+    module BaseLayout
+      extend ActiveSupport::Concern
+
+      included do
+        attr_accessor :layout_config, :layout, :actual_width
+      end
+
+      # Internal: setup layout configuration and setup the default layout of form, you can change it
+      # in a particular row.
+      #
+      # config - layout config, default nil, it must be a hash.
+      #          :layout      - it's a string ,specify the scale of columns.
+      #                         for example: '1:1', '1:2', '1:1:1'
+      #          :spacing     - left and right padding of form, should be number or percentage.
+      #          :label_width - label width of input, should be number or percentage.
+      #          :max_width   - max width of form, should be number or percentage.
+      #
+      #          All width options should be all numbers or all percentages, or it will not
+      #          be calculated correctly.
+      #
+      #          I'm looking for a method to provide responding design. Any contribution will be
+      #          appreciated.
+      #
+      def setup_config(config)
+        self.layout_config = if config && config.is_a?(Hash)
+                               config.delete(:layout) unless layout_available?(config[:layout])
+                               config.delete(:spacing) unless width_available?(config[:spacing])
+                               config.delete(:label_width) unless width_available?(config[:label_width])
+                               config.delete(:max_width) unless width_available?(config[:max_width])
+                               config.delete(:measure) unless measure_available?(config[:measure])
+
+                               config.reverse_merge(ExtForm.default_layout)
+                             else
+                               ExtForm.default_layout.dup
+                             end
+
+        self.layout = calculate_layout(layout_config)
+        self.actual_width = calc_actual_width
+      end
+
+      def width_available?(width)
+        raise NotImplementedError
+      end
+
+      def measure_available?(measure)
+        raise NotImplementedError
+      end
+
+      def layout_available?(layout)
+        layout && layout.match(/^\d(:\d){0,2}$/)
+      end
+
+      def calculate_layout(config)
+        layout = []
+        cols = config[:layout].split(':').map { |s| s.to_i }
+
+        cols.each do |c|
+          layout << [config[:label_width], calculate_input_width(config[:max_width], config[:label_width], config[:spacing], cols.sum, c)]
+        end
+        layout
+      end
+
+      def calc_actual_width
+        raise NotImplementedError
+      end
+
+      def calculate_input_width(max_width, label_width, spacing, cols_sum, c)
+        raise NotImplementedError
+      end
+
+      def label_width(seq)
+        self.layout[seq][0]
+      end
+
+      def input_width(seq)
+        self.layout[seq][1]
+      end
+    end
+  end
+end

data/lib/ext_form/layouts/bootstrap_layout.rb

@@ -0,0 +1,23 @@
+module ExtForm
+  module Layouts
+    class BootstrapLayout
+      include BaseLayout
+
+      def width_available?(width)
+        width && width.match(/^\d+$/) && width.to_i <= 12
+      end
+
+      def measure_available?(measure)
+        true
+      end
+
+      def calc_actual_width
+        self.layout_config[:max_width].to_i - 2 * self.layout_config[:spacing].to_i
+      end
+
+      def calculate_input_width(max_width, label_width, spacing, cols_sum, c)
+        (((max_width.to_f - spacing.to_f * 2) / cols_sum * c).floor - label_width.to_i).to_s
+      end
+    end
+  end
+end

data/lib/ext_form/layouts/default_layout.rb

@@ -0,0 +1,29 @@
+module ExtForm
+  module Layouts
+    class DefaultLayout
+      include BaseLayout
+
+      # Internal: decide option width whether is available,
+      # possible formats are number% or number.
+      #
+      # width - option width
+      #
+      # Returns true or false.
+      def width_available?(width)
+        width && width.match(/^\d+\.?\d?$/)
+      end
+
+      def measure_available?(measure)
+        %w(% px pt em cm).include?(measure)
+      end
+
+      def calc_actual_width
+        self.layout.flatten.map(&:to_f).sum
+      end
+
+      def calculate_input_width(max_width, label_width, spacing, cols_sum, c)
+        ((max_width.to_f - 2 * spacing.to_f) / cols_sum * c - label_width.to_f).to_s
+      end
+    end
+  end
+end

data/lib/ext_form/layouts.rb

@@ -0,0 +1,11 @@
+module ExtForm
+  module Layouts
+    extend ActiveSupport::Autoload
+
+    eager_autoload do
+      autoload :BaseLayout
+      autoload :DefaultLayout
+      autoload :BootstrapLayout
+    end
+  end
+end

data/lib/ext_form/version.rb

@@ -0,0 +1,3 @@
+module ExtForm
+  VERSION = '0.1.4'
+end

data/lib/ext_form/wrappers/many_mixin.rb

@@ -0,0 +1,18 @@
+module ExtForm
+  module Wrappers
+    module ManyMixin
+      extend ActiveSupport::Concern
+      include Mixin
+
+      included do
+        def render_with_layout(input)
+          wrap_style_options(input, @defaults[:layout], namespace) if @defaults[:layout]
+          render_without_layout(input)
+        end
+
+        alias_method_chain :render, :layout
+      end
+
+    end
+  end
+end