bootstrap_ui_helper 0.3.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 36f403069f00bd4734ef52b6121d05b875b458a4
+  data.tar.gz: 7f0099b18df7f8af7e246bd4484473a41c9c68ed
+SHA512:
+  metadata.gz: 9e4588ec543f3ff3832ef45fa1f021ac0f363d393bd55cda257d3ca96d974179f296f302395d2f4dcaeacd9dae0047efb4c85052b8863f3dd5f1ca2ced62685a
+  data.tar.gz: fbc507cd20ba350cabf8d1301677533f199efaa4d846fa3cba1951af60e0af2e42c592338e84ea0b2f86d8e237ff78c703887c85833680cb797b26b392e3327b

data/.gitignore

@@ -0,0 +1,17 @@
+/.bundle/
+/.yardoc
+/Gemfile.lock
+/_yardoc/
+/coverage/
+/doc/
+/pkg/
+/spec/reports/
+/tmp/
+*.bundle
+*.so
+*.o
+*.a
+mkmf.log
+
+.idea
+vender

data/Gemfile

@@ -0,0 +1,4 @@
+source 'https://rubygems.org'
+
+# Specify your gem's dependencies in bootstrap_ui_helper.gemspec
+gemspec

data/LICENSE.txt

@@ -0,0 +1,22 @@
+Copyright (c) 2015 Sen Zhang
+
+MIT License
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,48 @@
+# Bootstrap UI Helper
+
+Bootstrap style UI helpers engine
+
+[![Code Climate](https://codeclimate.com/github/Sen-Zhang/bootstrap_ui_helper/badges/gpa.svg)](https://codeclimate.com/github/Sen-Zhang/bootstrap_ui_helper)
+
+
+## Requirement
+* Rails 3.0+  
+* Bootstrap v3.0+  (http://getbootstrap.com/)
+* Font Awesome v4.4.0  (https://fortawesome.github.io/Font-Awesome/)
+* jQuery 1.7+ (http://jquery.com/download/)
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+```ruby
+gem 'bootstrap_ui_helper'
+```
+
+And then execute:
+
+    $ bundle
+
+Or install it yourself as:
+
+    $ gem install bootstrap_ui_helper
+    
+In `application.js`, add the following line:
+    
+    //= require bootstrap_ui_helper
+
+In `application.css`, add the following line:
+    
+     *= require bootstrap_ui_helper
+
+## Usage
+
+Please proceed to http://sen-zhang.github.io/#/articles/bootstrap_ui_helper for more details and examples on how to use the helpers.
+
+## Contributing
+
+1. Fork it ( https://github.com/[my-github-username]/bootstrap_ui_helper/fork )
+2. Create your feature branch (`git checkout -b my-new-feature`)
+3. Commit your changes (`git commit -am 'Add some feature'`)
+4. Push to the branch (`git push origin my-new-feature`)
+5. Create a new Pull Request

data/Rakefile

@@ -0,0 +1 @@
+require 'bundler/gem_tasks'

data/app/assets/javascripts/bootstrap_ui_helper.js

@@ -0,0 +1,113 @@
+(function ($) {
+  "use strict";
+
+  /*
+   * create a jquery DOM element based on tag name and options
+   *
+   */
+  var createElement = function (tag, options) {
+    var $el = $(document.createElement(tag));
+
+    return options === undefined ? $el : $el.attr(options);
+  };
+
+  /*
+   * Nav
+   * Wrap each child nav with +li+ tag and put class +active+ to indicated
+   * active element
+   *
+   */
+  $.fn.nav = function () {
+    var $this              = $(this),
+        activeChildLocator = $this.data("active-el-locator"),
+        children           = $this.children();
+
+    if (activeChildLocator % 1 === 0) {
+      $(children[activeChildLocator]).attr("active", true);
+    } else {
+      $this.children(activeChildLocator).attr("active", true);
+    }
+
+    $this.children().remove();
+
+    children.each(function () {
+      var $child  = $(this),
+          wrapper = createElement("li", {role: "presentation"});
+
+      if ($child.attr("active") === "true") {
+        $child.removeAttr("active");
+        wrapper.addClass("active");
+      }
+
+      $this.append(wrapper.append($child));
+    });
+  };
+
+  /*
+   * Panel Row
+   * Wrap each child panel with indicated column-class
+   *
+   */
+  $.fn.panelRow = function () {
+    var $this       = $(this),
+        columnClass = $this.data("column-class"),
+        children    = $this.children();
+
+    $this.children().remove();
+
+    children.each(function () {
+      var $child  = $(this),
+          wrapper = createElement("div");
+
+      $this.append(wrapper.addClass(columnClass).append($child));
+    });
+  };
+
+  /*
+   * Button Group
+   * make sure children button group has the same size of their parents"
+   *
+   */
+  $.fn.buttonGroup = function () {
+    var $this = $(this);
+
+    $this.children(".btn-group").addClass($this.data("size"));
+  };
+
+  /*
+   * Navbar Collapse
+   *
+   */
+  $.fn.navBar = function () {
+    var $this    = $(this),
+      $burgerBtn = $this.find(".navbar-toggle"),
+      $collapse  = $this.find(".navbar-collapse");
+
+    if ($burgerBtn.length > 0 && $collapse.length > 0) {
+      var collapseId = $collapse.attr("id");
+
+      if ($collapse.attr("id") === undefined) {
+        collapseId = Math.random().toString(36).substring(7);
+        $collapse.attr("id", collapseId);
+      }
+
+      $burgerBtn.attr("data-target", "#" + collapseId);
+    }
+  };
+
+  $(function () {
+
+    /* Initialize Nav */
+    $("[data-bui='nav']").nav();
+
+    /* Enable Navbar Collapse */
+    $("[data-bui='navbar']").navBar();
+
+    /* Initialize Panel Row */
+    $("[data-bui='panel_row']").panelRow();
+
+    /* Resize Button Group */
+    $("[data-bui='btn_group']").buttonGroup();
+
+  });
+})(jQuery);

data/app/assets/stylesheets/bootstrap_ui_helper.css

@@ -0,0 +1,12 @@
+label.required:after {
+  content: ' *';
+  color: red;
+}
+
+.form-horizontal input[type='file'] {
+  padding-top: 7px;
+}
+
+.input-group-addon {
+  min-width: 40px;
+}

data/app/helpers/alert_box_helper.rb

@@ -0,0 +1,50 @@
+module AlertBoxHelper
+  include ActionView::Helpers
+
+  def alert_box(content_or_options=nil, options={}, &block)
+    if content_or_options.is_a?(Hash)
+      options = content_or_options
+    else
+      content = content_or_options
+    end
+
+    dismissible = options.delete(:dismiss).present?
+    klass       = options.delete(:class)
+    type        = alert_type(options.delete(:type))
+
+    prepend_class(options, 'alert', type, klass)
+    options[:role] = 'alert'
+
+    render_alert_box(options, dismissible, content, &block)
+  end
+
+  def alert_type(type)
+    case type.try(:to_sym)
+    when :info
+      'alert-info'
+    when :success
+      'alert-success'
+    when :warning
+      'alert-warning'
+    when :danger
+      'alert-danger'
+    else
+      'alert-info'
+    end
+  end
+
+  def dismiss_button
+    "<button type='button' class='close' data-dismiss='alert'" \
+    "aria-label='Close'><span aria-hidden='true'>&times;</span></button>"
+  end
+
+  def render_alert_box(options, dismissible, content, &block)
+    content_tag :div, options do
+      if dismissible
+        (dismiss_button + (content.presence || capture(&block))).html_safe
+      else
+        content.presence || capture(&block)
+      end
+    end
+  end
+end

data/app/helpers/badge_helper.rb

@@ -0,0 +1,12 @@
+module BadgeHelper
+  include FormatHelper
+
+  def badge(content=nil, options={})
+    return if content.blank?
+
+    tag = options.delete(:tag).try(:to_sym).presence || :span
+    prepend_class(options, 'badge')
+
+    content_tag tag, content, options
+  end
+end

data/app/helpers/bootstrap_form_helper.rb

@@ -0,0 +1,191 @@
+module BootstrapFormHelper
+  include ActionView::Helpers
+  include PanelHelper
+
+  mattr_accessor :layout
+  FIELD_HELPERS = [:email_field, :password_field, :text_field, :text_area,
+                   :search_field, :telephone_field, :url_field, :number_field,
+                   :file_field, :date_field, :time_field, :month_field,
+                   :week_field, :datetime_field]
+
+  def form_for(record, options = {}, &block)
+    html_options = options[:html] ||= {}
+
+    prepend_class(html_options, get_form_layout(options.delete(:layout)))
+    options[:html] = html_options
+
+    super
+  end
+
+  # TODO: color_field, datetime_local_field, range_field
+
+  FIELD_HELPERS.each do |helper|
+    define_method helper do |object_name, method, options={}|
+      label_class, field_wrapper = ['col-sm-3 control-label', true] if layout == :horizontal
+
+      prepend_class(options, 'form-control') unless __callee__ == :file_field
+
+      required        = 'required' if options.delete(:required)
+      label_sr_only   = 'sr-only' if options[:label].is_a?(FalseClass)
+      label_class     = squeeze_n_strip("#{label_class} #{required} #{label_sr_only}")
+      help_text       = (options[:help] ? "<span class='help-block text-left'>#{options[:help]}</span>" : '').html_safe
+      prefix_content  = options.delete(:prefix)
+      suffix_content  = options.delete(:suffix)
+
+      label_proc = proc { label(object_name, method, options[:label], class: label_class) }
+
+      input_proc = proc do
+        input_content = if prefix_content.present? || suffix_content.present?
+                          prefix_addon = build_input_addon(prefix_content)
+                          suffix_addon = build_input_addon(suffix_content)
+                          content_tag :div, class: 'input-group' do
+                            prefix_addon + super(object_name, method, options) + suffix_addon
+                          end
+                        else
+                          super(object_name, method, options)
+                        end
+
+        input_content + help_text
+      end
+
+      render_field(field_wrapper, label_proc, input_proc)
+    end
+
+    def fields_for(record_name, record_object = nil, options = {}, &block)
+      fieldset = HashWithIndifferentAccess.new(options.delete(:fieldset))
+
+      if fieldset.present?
+        type  = get_panel_type(fieldset[:type])
+        title = fieldset[:title]
+      end
+
+      content_tag :fieldset, class: "panel #{type}" do
+        ((title.present? ? (content_tag :div, title, class: 'panel-heading') : '') +
+          (content_tag :div, class: 'panel-body' do
+            super
+          end)).html_safe
+      end
+    end
+
+    alias_method :fieldset, :panel
+
+    def build_input_addon(content)
+      return ('').html_safe if content.blank?
+
+      if content.is_a?(String)
+        "<span class='input-group-addon'>#{content}</span>".html_safe
+      elsif content.is_a?(Hash) && content.key?(:icon)
+        "<span class='input-group-addon'>#{icon(content[:icon])}</span>".html_safe
+      else
+        ('').html_safe
+      end
+    end
+
+    def render_field(inline_style, label_proc, input_proc)
+      content_tag :div, class: 'form-group' do
+        if inline_style
+          (label_proc.call + (content_tag :div, class: 'col-sm-9', &input_proc)).html_safe
+        else
+          (label_proc.call + input_proc.call).html_safe
+        end
+      end
+    end
+  end
+
+  class ActionView::Helpers::FormBuilder
+    include BootstrapFormHelper
+    include ButtonHelper
+
+    attr_accessor :output_buffer
+
+    def check_box(method, options = {}, checked_value = '1', unchecked_value = '0')
+      layout_inline = options.delete(:layout).try(:to_sym) == :inline
+
+      check_box = proc do
+        proc = proc do
+          @template.check_box(@object_name, method, objectify_options(options), checked_value, unchecked_value) +
+            options[:label]
+        end
+
+        if layout_inline
+          content_tag :label, class: 'checkbox-inline', &proc
+        else
+          content_tag :div, class: 'checkbox' do
+            content_tag :label, &proc
+          end
+        end
+      end
+
+      if horizontal_layout?
+        content_tag :div, class: 'form-group' do
+          content_tag :div, class: 'col-sm-offset-3 col-sm-9', &check_box
+        end
+      else
+        check_box.call
+      end
+    end
+
+    def radio_button(method, tag_value, options = {})
+      layout_inline = options.delete(:layout).try(:to_sym) == :inline
+
+      radio_button = proc do
+        proc = proc do
+          @template.radio_button(@object_name, method, tag_value, objectify_options(options)) + options[:label]
+        end
+
+        if layout_inline
+          content_tag :label, class: 'radio-inline', &proc
+        else
+          content_tag :div, class: 'radio' do
+            content_tag :label, &proc
+          end
+        end
+      end
+
+      if horizontal_layout?
+        content_tag :div, class: 'form-group' do
+          content_tag :div, class: 'col-sm-offset-3 col-sm-9', &radio_button
+        end
+      else
+        radio_button.call
+      end
+    end
+
+    def submit(value=nil, options={})
+      value, options = nil, value if value.is_a?(Hash)
+      value ||= submit_default_value
+
+      prepend_class(options, 'btn', get_btn_type(options.delete(:type)))
+
+      submit_prc = proc { @template.submit_tag(value, options) }
+
+      return submit_prc.call unless horizontal_layout?
+
+      content_tag :div, class: 'form-group' do
+        content_tag :div, class: 'col-sm-offset-3 col-sm-9', &submit_prc
+      end
+    end
+
+    private
+
+    def horizontal_layout?
+      BootstrapFormHelper.layout == :horizontal
+    end
+  end
+
+  private
+
+  def get_form_layout(form_layout)
+    case form_layout.try(:to_sym)
+    when :horizontal
+      layout = :horizontal
+      'form form-horizontal'
+    when :inline
+      layout = :inline
+      'form form-inline'
+    else
+      layout = :basic
+      'form'
+    end
+  end
+end