bootstrap_form_extensions 1.0.0

data/app/assets/javascripts/bootstrap_form_extensions/time_picker.js

@@ -0,0 +1,61 @@
++function ($) {
+  'use strict';
+
+
+  // TIME PICKER CLASS DEFINITION
+  // ============================
+
+  var TimePicker = function (element, options) {
+    var defaults = {
+      minuteStep:   1,
+      showSeconds:  true,
+      secondStep:   1,
+      showMeridian: false,
+      defaultTime:  false
+    }
+    $(element).timepicker($.extend(defaults, options))
+  }
+
+  TimePicker.VERSION = '1.0.0'
+
+
+  // TIME PICKER PLUGIN DEFINITION
+  // =============================
+
+  function Plugin(options) {
+    return $(this).each(function () {
+      var $this = $(this)
+      var data  = $this.data('bsfe.timepicker')
+
+      if (!data) $this.data('bsfe.timepicker', (data = new TimePicker(this, options)))
+    })
+  }
+
+  var old = $.fn.timePicker
+
+  $.fn.timePicker             = Plugin
+  $.fn.timePicker.Constructor = TimePicker
+
+
+  // TIME PICKER NO CONFLICT
+  // =======================
+
+  $.fn.timePicker.noConflict = function () {
+    $.fn.timePicker = old
+    return this
+  }
+
+
+  // TIME PICKER DATA-API
+  // ====================
+
+  $(window).on('load page:load page:restore', function () {
+    $('[data-provide="timepicker"]').each(function () {
+      var $picker = $(this)
+      var options = $picker.html5data('time')
+
+      Plugin.call($picker, options)
+    })
+  })
+
+}(jQuery);

data/app/assets/javascripts/bootstrap_form_extensions/timespan.js

@@ -0,0 +1,60 @@
++function ($) {
+  'use strict';
+
+  // TIMESPAN CLASS DEFINITION
+  // =========================
+
+  var Timespan = function (element) {
+    this.$container = $(element)
+    this.$container.on('change.bsfe.timespan.data-api', '.timespan-quantity, .timespan-unit', this.updateSeconds.bind(this))
+  }
+
+  Timespan.VERSION = '1.0.0'
+
+  Timespan.prototype.updateSeconds = function (e) {
+    var hidden   = this.$container.find('.timespan-seconds')
+    var quantity = this.$container.find('.timespan-quantity')
+    var unit     = this.$container.find('.timespan-unit')
+    var seconds  = +quantity.val() * +unit.val()
+
+    hidden.val(seconds)
+  }
+
+
+  // TIMESPAN PLUGIN DEFINITION
+  // ==========================
+
+  function Plugin() {
+    return $(this).each(function () {
+      var $this = $(this)
+      var data  = $this.data('bsfe.timespan')
+
+      if (!data) $this.data('bsfe.timespan', (data = new Timespan(this)))
+    })
+  }
+
+  var old = $.fn.timespan
+
+  $.fn.timespan             = Plugin
+  $.fn.timespan.Constructor = Timespan
+
+
+  // TIMESPAN NO CONFLICT
+  // ====================
+
+  $.fn.timespan.noConflict = function () {
+    $.fn.timespan = old
+    return this
+  }
+
+
+  // TIMESPAN DATA-API
+  // =================
+
+  $(window).on('load page:load page:restore', function () {
+    $('[data-timespan]').each(function () {
+      Plugin.call(this)
+    })
+  })
+
+}(jQuery);

data/app/assets/stylesheets/bootstrap_form_extensions/bootstrap-timepicker.min.css

@@ -0,0 +1,10 @@
+/*!
+ * Timepicker Component for Twitter Bootstrap
+ *
+ * Copyright 2013 Joris de Wit
+ *
+ * Contributors https://github.com/jdewit/bootstrap-timepicker/graphs/contributors
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */.bootstrap-timepicker{position:relative}.bootstrap-timepicker.pull-right .bootstrap-timepicker-widget.dropdown-menu{left:auto;right:0}.bootstrap-timepicker.pull-right .bootstrap-timepicker-widget.dropdown-menu:before{left:auto;right:12px}.bootstrap-timepicker.pull-right .bootstrap-timepicker-widget.dropdown-menu:after{left:auto;right:13px}.bootstrap-timepicker .input-group-addon{cursor:pointer}.bootstrap-timepicker .input-group-addon i{display:inline-block;width:16px;height:16px}.bootstrap-timepicker-widget.dropdown-menu{padding:4px}.bootstrap-timepicker-widget.dropdown-menu.open{display:inline-block}.bootstrap-timepicker-widget.dropdown-menu:before{border-bottom:7px solid rgba(0,0,0,0.2);border-left:7px solid transparent;border-right:7px solid transparent;content:"";display:inline-block;position:absolute}.bootstrap-timepicker-widget.dropdown-menu:after{border-bottom:6px solid #fff;border-left:6px solid transparent;border-right:6px solid transparent;content:"";display:inline-block;position:absolute}.bootstrap-timepicker-widget.timepicker-orient-left:before{left:6px}.bootstrap-timepicker-widget.timepicker-orient-left:after{left:7px}.bootstrap-timepicker-widget.timepicker-orient-right:before{right:6px}.bootstrap-timepicker-widget.timepicker-orient-right:after{right:7px}.bootstrap-timepicker-widget.timepicker-orient-top:before{top:-7px}.bootstrap-timepicker-widget.timepicker-orient-top:after{top:-6px}.bootstrap-timepicker-widget.timepicker-orient-bottom:before{bottom:-7px;border-bottom:0;border-top:7px solid #999}.bootstrap-timepicker-widget.timepicker-orient-bottom:after{bottom:-6px;border-bottom:0;border-top:6px solid #fff}.bootstrap-timepicker-widget a.btn,.bootstrap-timepicker-widget input{border-radius:4px}.bootstrap-timepicker-widget table{width:100%;margin:0}.bootstrap-timepicker-widget table td{text-align:center;height:30px;margin:0;padding:2px}.bootstrap-timepicker-widget table td:not(.separator){min-width:30px}.bootstrap-timepicker-widget table td span{width:100%}.bootstrap-timepicker-widget table td a{border:1px transparent solid;width:100%;display:inline-block;margin:0;padding:8px 0;outline:0;color:#333}.bootstrap-timepicker-widget table td a:hover{text-decoration:none;background-color:#eee;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;border-color:#ddd}.bootstrap-timepicker-widget table td a i{margin-top:2px;font-size:18px}.bootstrap-timepicker-widget table td input{width:25px;margin:0;text-align:center}.bootstrap-timepicker-widget .modal-content{padding:4px}@media(min-width:767px){.bootstrap-timepicker-widget.modal{width:200px;margin-left:-100px}}@media(max-width:767px){.bootstrap-timepicker{width:100%}.bootstrap-timepicker .dropdown-menu{width:100%}}

data/app/assets/stylesheets/bootstrap_form_extensions/common.css

@@ -0,0 +1,11 @@
+// Vertical space
+.voffset  { margin-top: 2px; }
+.voffset1 { margin-top: 5px; }
+.voffset2 { margin-top: 10px; }
+.voffset3 { margin-top: 15px; }
+.voffset4 { margin-top: 30px; }
+.voffset5 { margin-top: 40px; }
+.voffset6 { margin-top: 60px; }
+.voffset7 { margin-top: 80px; }
+.voffset8 { margin-top: 100px; }
+.voffset9 { margin-top: 150px; }

data/app/assets/stylesheets/bootstrap_form_extensions/index.css

@@ -0,0 +1,4 @@
+/*
+ *= require bootstrap-datepicker3
+ *= require_tree .
+ */

data/app/assets/stylesheets/bootstrap_form_extensions/scheduler.css

@@ -0,0 +1,31 @@
+.scheduler-badge {
+}
+.scheduler-badge td {
+  cursor: pointer;
+  width: 13px;
+  line-height: 0.5em;
+  border: 1px solid grey;
+}
+.scheduler-badge td.on {
+  background-color: #dff0d8;
+}
+.scheduler-editor a {
+  color: #777777;
+}
+.scheduler-editor th {
+  width: 38px;
+  text-align: center;
+}
+.scheduler-editor th a {
+  font-weight: normal;
+}
+.scheduler-editor td.clickable {
+  border: 1px solid lightgrey;
+  cursor: pointer;
+}
+.scheduler-editor td.clickable.on {
+  background-color: #dff0d8;
+}
+#scheduler-container a {
+  cursor: pointer;
+}

data/app/assets/stylesheets/bootstrap_form_extensions/submit_bar.css

@@ -0,0 +1,4 @@
+.submitbar-next-action-menu > li > button.btn-link {
+  width: 100%;
+  text-align: left;
+}

data/app/views/bootstrap_form_extensions/_submit_bar.html.erb

@@ -0,0 +1,36 @@
+<div class="form-group">
+  <div class='pull-left submitbar-left'>
+    <% if show_submit_button %>
+      <div class="btn-group dropup submitbar-submit-group">
+        <button type="submit" class="btn btn-primary submitbar-save"><%= submit_button_text %></button>
+        <% if show_submit_menu %>
+          <button type="button" class="btn btn-primary dropdown-toggle submitbar-next-action-toggle" data-toggle="dropdown">
+            <span class="caret"></span>
+            <span class="sr-only">Toggle Dropdown</span>
+          </button>
+          <ul class="dropdown-menu submitbar-next-action-menu" role="menu">
+            <% if show_submit_and_dup_button %>
+              <li><button type="submit" name="next_action" class="btn-link submitbar-duplicate" value="duplicate"><%= submit_button_text %> and duplicate</button></li>
+            <% end %>
+            <% if show_submit_and_new_button %>
+              <li><button type="submit" name="next_action" class="btn-link submitbar-new" value="new"><%= submit_button_text %> and new</button></li>
+            <% end %>
+          </ul>
+        <% end %>
+      </div>
+    <% end %>
+    <% extra_buttons.each do |text:, url:, options:| %>
+      <%= link_to text, url, options %>
+    <% end %>
+    <% if show_cancel_button %>
+      <%= link_to cancel_button_text, cancel_button_url, class: "btn btn-default submitbar-cancel", rel: "nofollow" %>
+    <% end %>
+  </div>
+  <% if right_buttons.any? %>
+    <div class='pull-right submitbar-right'>
+      <% right_buttons.each do |text:, url:, options:| %>
+        <%= link_to text, url, options %>
+      <% end %>
+    </div>
+  <% end %>
+</div>

data/lib/bootstrap_form_extensions.rb

@@ -0,0 +1,22 @@
+require 'bootstrap_form/form_builder'
+require 'bootstrap_form_extensions/submit_bar'
+require 'bootstrap_form_extensions/timespan'
+require 'bootstrap_form_extensions/arrayed_field'
+require 'bootstrap_form_extensions/scheduler'
+require 'bootstrap_form_extensions/date_time_pickers'
+require 'bootstrap-datepicker-rails'
+require 'bootstrap_form_extensions/select_or_new'
+
+module BootstrapFormExtensions
+  module Rails
+    class Engine < ::Rails::Engine
+    end
+  end
+end
+
+BootstrapForm::FormBuilder.send :include, BootstrapFormExtensions::SubmitBar,
+                                          BootstrapFormExtensions::Timespan,
+                                          BootstrapFormExtensions::ArrayedField,
+                                          BootstrapFormExtensions::Scheduler,
+                                          BootstrapFormExtensions::DateTimePickers,
+                                          BootstrapFormExtensions::SelectOrNew

data/lib/bootstrap_form_extensions/arrayed_field.rb

@@ -0,0 +1,107 @@
+require 'bootstrap_form_extensions/helpers'
+
+module BootstrapFormExtensions
+
+  module ArrayedField
+
+    include BootstrapFormExtensions::Helpers
+
+    ARRAYED_HELPERS = %w[ url_field text_field ]
+    ARRAYED_HELPERS.each do |method_name|
+      define_method "arrayed_#{method_name}" do |field, **options|
+        arrayed_field method_name, field, options
+      end
+    end
+
+    def arrayed_json_field method, fields, **options
+      fields = parse_fields_for_arrayed_json fields
+      col_class = options.fetch :col_class, 'col-sm-2'
+
+      blueprint = fields.map do |field|
+        case field[:type]
+        when :select
+          @template.select_tag nil, @template.options_for_select(field[:options]), class: 'form-control', data: { name: "#{object_name}[#{method}][][#{field[:name]}]" }
+        else
+          @template.text_field_tag nil, nil, class: 'form-control', placeholder: field[:name], data: { name: "#{object_name}[#{method}][][#{field[:name]}]" }
+        end
+      end
+      blueprint = arrayed_field_row_builder blueprint, col_class: col_class
+      blueprint = arrayed_field_blueprint_builder blueprint
+
+      form_group_builder_for_arrayed_field method, blueprint, options do |values|
+        inputs = fields.map do |field|
+          case field[:type]
+          when :select
+            @template.select_tag nil, @template.options_for_select(field[:options], values[field[:name].to_s]), class: 'form-control'
+          else
+            @template.text_field_tag "#{object_name}[#{method}][][#{field[:name]}]", values[field[:name].to_s], class: 'form-control', placeholder: field[:name]
+          end
+        end
+        arrayed_field_row_builder inputs, col_class: col_class
+      end
+    end
+
+    private
+
+    def arrayed_field field_type, field, **options
+      field_tag = "#{field_type}_tag".to_sym
+
+      blueprint = @template.send field_tag, nil, nil, class: 'form-control', data: { name: "#{object_name}[#{field}][]" }
+      blueprint = arrayed_field_row_builder blueprint
+      blueprint = arrayed_field_blueprint_builder blueprint
+
+      form_group_builder_for_arrayed_field field, blueprint, options do |value|
+        input = @template.send field_tag, "#{object_name}[#{field}][]", value, class: 'form-control'
+        arrayed_field_row_builder input
+      end
+    end
+
+    def parse_fields_for_arrayed_json fields
+      fields.map do |field|
+        if field.is_a? Hash
+          name   = field.keys.first
+          values = field.values.first
+          type   = values.fetch :type, :text
+          select_options = values.fetch :options, []
+          { name: name, type: type, options: select_options }
+        else
+          { name: field, type: :text }
+        end
+      end
+    end
+
+    def arrayed_field_row_builder args, col_class: 'col-sm-11'
+      args = [ args ].flatten
+
+      inputs = args.inject(''.html_safe) do |content, input|
+        content << content_tag(:div, input, class: col_class)
+      end
+
+      remove_button = @template.link_to glyphicon_tag('trash'), 'javascript:void(0);', class: 'btn btn-default remove-arrayed-field-row'
+      remove_button = content_tag :div, remove_button, class: 'col-sm-1'
+
+      content_tag :div, inputs + remove_button, class: 'row voffset1'
+    end
+
+    def arrayed_field_blueprint_builder row
+      content_tag :div, row, class: 'blueprint-for-arrayed-field', style: 'display:none;'
+    end
+
+    def form_group_builder_for_arrayed_field method, blueprint, options, &row_builder_block
+      add_button = @template.link_to glyphicon_tag('plus'), 'javascript:void(0);', class: 'btn btn-default add-arrayed-field-row'
+      add_button = content_tag :div, add_button, class: 'col-sm-12'
+      add_button = content_tag :div, add_button, class: 'row voffset1'
+
+      rows = object.send(method) rescue []
+      rows = [] unless rows.is_a? Array
+      rows = rows.inject(''.html_safe) { |content, value| content << row_builder_block.call(value) }
+      rows = content_tag :div, rows, class: 'arrayed-field-rows'
+
+      form_group_builder method, options do
+        content_tag :div, blueprint + rows + add_button, data: { arrayed_field: true }
+      end
+    end
+
+  end
+
+end

data/lib/bootstrap_form_extensions/date_time_pickers.rb

@@ -0,0 +1,71 @@
+module BootstrapFormExtensions
+
+  module DateTimePickers
+
+    include BootstrapFormExtensions::Helpers
+
+    def date_time_picker attribute, **options
+      name = attribute.to_s.sub /_at$/, ''
+      date_method  = options.delete(:date_method) { "#{name}_date".to_sym }
+      time_method  = options.delete(:time_method) { "#{name}_time".to_sym }
+
+      date_options = options.delete(:date_options) { {} }
+      time_options = options.delete(:time_options) { {} }
+      date_options[:class] = [ 'form-control', date_options[:class] ].compact.uniq.join(' ')
+      time_options[:class] = [ 'form-control', time_options[:class] ].compact.uniq.join(' ')
+
+      # TODO: Replace for these commented out lines, once this pull request is merged: https://github.com/bootstrap-ruby/rails-bootstrap-forms/pull/238
+      # options[:wrapper] ||= {}
+      # options[:wrapper].merge! inline: true
+      options[:control_col] = 'col-sm-10 form-inline'
+
+      date_picker_html = content_tag :div, date_picker_builder(date_method, date_options), class: 'form-group'
+      time_picker_html = content_tag :div, time_picker_builder(time_method, time_options), class: 'form-group'
+      form_group_builder(attribute, options) { date_picker_html + '  '.html_safe + time_picker_html }
+    end
+
+    def date_picker method, **options
+      form_group_builder(method, options) { date_picker_builder method, options }
+    end
+
+    def time_picker method, **options
+      form_group_builder(method, options) { time_picker_builder method, options }
+    end
+
+    private
+
+    def date_picker_builder method, **options
+      widget_options = {
+        provide:                     'datepicker',
+        date_today_highlight:        true,
+        date_format:                 'yyyy-mm-dd',
+        date_today_btn:              'linked',
+        date_autoclose:              true,
+        date_disable_touch_keyboard: true,
+        date_enable_on_readonly:     false,
+        date_show_on_focus:          false
+      }
+      widget = options.delete(:widget) { {} }
+      widget.each { |option, value| widget_options["date_#{option.to_s.underscore}".to_sym] = value }
+
+      text = self.text_field_without_bootstrap method, { size: 10 }.merge(options)
+      icon = content_tag :span, glyphicon_tag('calendar'), class: 'input-group-addon'
+      content_tag :div, text + icon, class: 'input-group date', data: widget_options
+    end
+
+    def time_picker_builder method, **options
+      widget_options = { provide: 'timepicker' }
+      widget = options.delete(:widget) { {} }
+      widget.each { |option, value| widget_options["time_#{option.to_s.underscore}".to_sym] = value }
+
+      options.reverse_merge! size: 8, data: {}
+      options[:data].merge! widget_options
+
+      text = self.text_field_without_bootstrap method, options
+      icon = content_tag :span, glyphicon_tag('time'), class: 'input-group-addon'
+      content_tag :div, text + icon, class: 'input-group bootstrap-timepicker'
+    end
+
+  end
+
+end

data/lib/bootstrap_form_extensions/helpers.rb

@@ -0,0 +1,18 @@
+module BootstrapFormExtensions
+
+  module Helpers
+
+    def glyphicon_tag *icons
+      options = icons.extract_options!
+      options[:class] = options.fetch :class, ''
+      options[:class] << " glyphicon " << icons.flatten.map{ |icon| "glyphicon-#{icon}"}.join(' ')
+      content_tag :i, nil, options
+    end
+
+    def true? value
+      value.to_s.match(/(true|t|yes|y|1)$/i).present?
+    end
+
+  end
+
+end