ui_helpers 0.0.1

data/.gitignore

@@ -0,0 +1,5 @@
+.DS_Store
+*.gem
+.bundle
+Gemfile.lock
+pkg/*

data/Gemfile

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

data/LICENSE.txt

@@ -0,0 +1,22 @@
+Copyright (c) 2012 TODO: Write your name
+
+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,29 @@
+# UiHelpers
+
+TODO: Write a gem description
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+    gem 'ui_helpers'
+
+And then execute:
+
+    $ bundle
+
+Or install it yourself as:
+
+    $ gem install ui_helpers
+
+## Usage
+
+TODO: Write usage instructions here
+
+## Contributing
+
+1. Fork it
+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 new Pull Request

data/Rakefile

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

data/app/assets/stylesheets/application.css

@@ -0,0 +1,13 @@
+/*
+ * 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 .
+ */

data/app/assets/stylesheets/ui_helper.css.scss

@@ -0,0 +1,34 @@
+// Place all the styles related to the button controller here.
+// They will automatically be included in application.css.
+// You can use Sass (SCSS) here: http://sass-lang.com/
+
+//  CSS Preudoclasses:
+//
+//  :link  a:link  Selects all unvisited links
+//  :visited  a:visited  Selects all visited links
+//  :active  a:active  Selects the active link
+//  :hover  a:hover  Selects links on mouse over
+//  :focus  input:focus  Selects the input element which has focus
+//  :first-letter  p:first-letter  Selects the first letter of every <p> element
+//  :first-line  p:first-line  Selects the first line of every <p> element
+//  :first-child  p:first-child  Selects every <p> elements that is the first child of its parent
+//  :before  p:before  Insert content before every <p> element
+//  :after  p:after  Insert content after every <p> element
+//  :lang(language)  p:lang(it)  Selects every <p> element with a lang attribute value starting with "it"
+
+.ui-button {
+  &:hover {
+    // inherits .ui-state-hover;
+    border: 1px solid #0073ea; background: #0073ea url(flick/images/ui-bg_highlight-soft_25_0073ea_1x100.png) 50% 50% repeat-x; font-weight: bold; color: #ffffff;
+    .ui-icon {
+      background-image: url(flick/images/ui-icons_ffffff_256x240.png);
+    }
+  }
+  &:active {
+    // inherits .ui-state-active;
+    border: 1px solid #dddddd; background: #ffffff url(images/ui-bg_glass_65_ffffff_1x400.png) 50% 50% repeat-x; font-weight: bold; color: #ff0084;
+    .ui-icon {
+      background-image: url(flick/images/ui-icons_454545_256x240.png);
+    }
+  }
+}

data/lib/ui_helpers.rb

@@ -0,0 +1,12 @@
+require "ui_helpers/version"
+
+module UiHelpers
+  def self.load!
+    require 'ui_helpers/elements'
+    require 'ui_helpers/engine'
+    require 'ui_helpers/railtie'
+  end
+
+end
+
+UiHelpers.load!

data/lib/ui_helpers/elements.rb

@@ -0,0 +1,31 @@
+module UiHelpers
+
+  module Positionable
+    extend ActiveSupport::Concern
+  
+    included do
+      attr_accessor :width, :height, :top, :left
+    
+      after_init do
+        html_options[:style] << "position: absolute;"
+        html_options[:style] << "width: #{width}px;" if width
+        html_options[:style] << "height: #{height}px;" if height
+        html_options[:style] << "top: #{top}px;" if top
+        html_options[:style] << "left: #{left}px;" if left
+      end
+    end
+  end
+
+  require "ui_helpers/elements/element"
+  require "ui_helpers/elements/widget"
+  require "ui_helpers/elements/widget_content"
+  require "ui_helpers/elements/icon"
+  require "ui_helpers/elements/just_icon"
+  require "ui_helpers/elements/dialog_content"
+  require "ui_helpers/elements/dialog_cover"
+  require "ui_helpers/elements/overlay"
+  require "ui_helpers/elements/button"
+  require "ui_helpers/elements/flash"
+  require "ui_helpers/elements/shadow"
+
+end

data/lib/ui_helpers/elements/button.rb

@@ -0,0 +1,78 @@
+module UiHelpers
+  
+  class Button < Widget
+    attr_accessor :primary_icon, :secondary_icon, :text, :value, :title
+
+    after_init do
+      classes.commit("ui-button", "ui-button" => scope)
+      html_options[:title] = title if title
+      html_options[:value] = value if value
+    end
+
+    class Text < Element
+      after_init do      
+        classes.commit("ui-button-text")
+      end
+    end
+
+    class OnlyIcon < Icon
+      after_init do
+        classes.commit("ui-button-icons-only")
+      end
+    end
+
+    class PrimaryIcon < Icon
+      after_init do
+        classes.commit("ui-button-icon-primary")
+      end
+    end
+
+    class SecondaryIcon < Icon
+      after_init do
+        classes.commit("ui-button-icon-secondary")
+      end
+    end
+
+    def scope
+      if text && any_icons?
+        if primary_icon && secondary_icon        
+          "text-icons" # text + primary_icon + secondary_icon
+        elsif primary_icon
+          "text-icon-primary" # text + primary_icon
+        elsif secondary_icon
+          "text-icon-secondary" # text + secondary_icon
+        end
+      elsif text
+        "text-only" # text only
+      elsif primary_icon && secondary_icon
+        "icons-only" # primary_icon + secondary_icon
+      elsif any_icons? 
+        "icon-only" # just 1 icon
+      end
+    end
+
+    def any_icons?
+      primary_icon || secondary_icon
+    end
+
+    def content(&block)
+      capture do |buffer|
+
+        if scope == "icon-only"
+          buffer << OnlyIcon.new(@template, :name => primary_icon).tag(:span)
+        elsif scope.include?("icon") && primary_icon
+          buffer << PrimaryIcon.new(@template, :name => primary_icon).tag(:span)
+        end
+
+        buffer << Text.new(@template).tag(:span, text||"&nbsp;", &block)
+
+        if scope.include?("icon") && secondary_icon
+          buffer << SecondaryIcon.new(@template, :name => secondary_icon).tag(:span)
+        end
+
+      end
+    end
+
+  end
+  
+end

data/lib/ui_helpers/elements/dialog_content.rb

@@ -0,0 +1,10 @@
+module UiHelpers
+  
+  class DialogContent < Element
+    after_init do
+      classes.commit("ui-widget-content", "ui-dialog-content")
+      html_options[:style] << "background: none; border: 0;"
+    end
+  end
+  
+end

data/lib/ui_helpers/elements/dialog_cover.rb

@@ -0,0 +1,36 @@
+module UiHelpers
+  
+  class DialogOver < Element    
+    attr_accessor :base, :text, :width, :height, :top, :left
+
+    after_init do
+      html_options[:style] << "position: relative; padding:1% 2%; overflow:hidden;"
+    end
+
+    def width; @width||280; end
+    def height; @height||130; end
+    def top; @top||30; end
+    def left; @left||50; end
+
+    def shadow_options
+      {:state => false, :width => width+22, :height => height+22, :top => top, :left => left}
+    end
+
+    def widget_content_options
+      {:state => false, :width => width, :height => height, :top => top, :left => left}
+    end
+
+    def html(tag_name, &block)
+      tag(tag_name) do |buffer|
+        buffer << base
+        buffer << Overlay.new(@template).tag(:div)
+        buffer << Shadow.new(@template, shadow_options).tag(:div)
+        buffer << WidgetContent.new(@template, widget_content_options).tag(:div) do |widget_content|
+          widget_content << DialogContent.new(@template).tag(:div, text)
+        end
+      end
+    end
+
+  end
+  
+end

data/lib/ui_helpers/elements/element.rb

@@ -0,0 +1,71 @@
+module UiHelpers
+  
+  class Element
+    class Classes < Array
+      def commit(*args)
+        args.each do |arg|
+          case arg
+          when Hash then arg.each { |key, value| self << [key, value].compact.join("-") unless value.nil? }
+          else self << arg
+          end 
+        end
+      end
+
+      def to_s
+        join(" ")
+      end
+    end
+  
+     extend ActiveModel::Callbacks
+  
+    define_model_callbacks :init, :only => :after
+  
+    attr_reader :html_options
+  
+    def initialize(*args)
+      params = args.extract_options!
+      @template = args.first||ActionView::Base.new(Rails.configuration.paths["app/views"].first) ## fake      
+      @html_options = Hash.new do |h,k|
+        h[k] = case k
+        when :class, "class" then Classes.new
+        else []
+        end
+      end
+      run_callbacks(:init) do      
+        params.each do |key, value|
+          send("#{key}=", value)
+        end
+      end
+    end
+  
+    def style=(*value)
+      @html_options[:style] << value
+    end
+  
+    def classes=(*values)
+      classes.commit(*values)
+    end
+  
+    def classes
+      @html_options[:class]
+    end
+  
+    def capture(content = nil, &block)
+      ActiveSupport::SafeBuffer.new(content||"").tap do |buffer|
+        yield buffer if block_given?
+      end
+    end
+  
+    def tag(tag_name, content = nil, &block)
+      @template.content_tag tag_name, capture(content, &block), @html_options
+    end
+  
+    def with_html_options(hash = {})
+      self.tap do |element|
+        element.html_options.merge!(hash)
+      end
+    end
+    
+  end
+  
+end

data/lib/ui_helpers/elements/flash.rb

@@ -0,0 +1,16 @@
+module UiHelpers
+  
+  class Flash < Widget
+    attr_accessor :icon
+
+    def html(tag_name, &block)
+      tag(tag_name) do |buffer|
+        buffer << Element.new(@template).tag(:p) do |paragraph|
+          paragraph << Icon.new(@template, icon).tag(:span)
+          yield paragraph if block_given?
+        end
+      end
+    end
+  end
+  
+end

data/lib/ui_helpers/elements/icon.rb

@@ -0,0 +1,213 @@
+module UiHelpers
+  
+  class Icon < Element
+    attr_accessor :name, :v_offset, :h_offset, :width, :height
+    ICONS = {}
+    %Q{
+      /* positioning */
+      .ui-icon-carat-1-n { background-position: 0 0; }
+      .ui-icon-carat-1-ne { background-position: -16px 0; }
+      .ui-icon-carat-1-e { background-position: -32px 0; }
+      .ui-icon-carat-1-se { background-position: -48px 0; }
+      .ui-icon-carat-1-s { background-position: -64px 0; }
+      .ui-icon-carat-1-sw { background-position: -80px 0; }
+      .ui-icon-carat-1-w { background-position: -96px 0; }
+      .ui-icon-carat-1-nw { background-position: -112px 0; }
+      .ui-icon-carat-2-n-s { background-position: -128px 0; }
+      .ui-icon-carat-2-e-w { background-position: -144px 0; }
+      .ui-icon-triangle-1-n { background-position: 0 -16px; }
+      .ui-icon-triangle-1-ne { background-position: -16px -16px; }
+      .ui-icon-triangle-1-e { background-position: -32px -16px; }
+      .ui-icon-triangle-1-se { background-position: -48px -16px; }
+      .ui-icon-triangle-1-s { background-position: -64px -16px; }
+      .ui-icon-triangle-1-sw { background-position: -80px -16px; }
+      .ui-icon-triangle-1-w { background-position: -96px -16px; }
+      .ui-icon-triangle-1-nw { background-position: -112px -16px; }
+      .ui-icon-triangle-2-n-s { background-position: -128px -16px; }
+      .ui-icon-triangle-2-e-w { background-position: -144px -16px; }
+      .ui-icon-arrow-1-n { background-position: 0 -32px; }
+      .ui-icon-arrow-1-ne { background-position: -16px -32px; }
+      .ui-icon-arrow-1-e { background-position: -32px -32px; }
+      .ui-icon-arrow-1-se { background-position: -48px -32px; }
+      .ui-icon-arrow-1-s { background-position: -64px -32px; }
+      .ui-icon-arrow-1-sw { background-position: -80px -32px; }
+      .ui-icon-arrow-1-w { background-position: -96px -32px; }
+      .ui-icon-arrow-1-nw { background-position: -112px -32px; }
+      .ui-icon-arrow-2-n-s { background-position: -128px -32px; }
+      .ui-icon-arrow-2-ne-sw { background-position: -144px -32px; }
+      .ui-icon-arrow-2-e-w { background-position: -160px -32px; }
+      .ui-icon-arrow-2-se-nw { background-position: -176px -32px; }
+      .ui-icon-arrowstop-1-n { background-position: -192px -32px; }
+      .ui-icon-arrowstop-1-e { background-position: -208px -32px; }
+      .ui-icon-arrowstop-1-s { background-position: -224px -32px; }
+      .ui-icon-arrowstop-1-w { background-position: -240px -32px; }
+      .ui-icon-arrowthick-1-n { background-position: 0 -48px; }
+      .ui-icon-arrowthick-1-ne { background-position: -16px -48px; }
+      .ui-icon-arrowthick-1-e { background-position: -32px -48px; }
+      .ui-icon-arrowthick-1-se { background-position: -48px -48px; }
+      .ui-icon-arrowthick-1-s { background-position: -64px -48px; }
+      .ui-icon-arrowthick-1-sw { background-position: -80px -48px; }
+      .ui-icon-arrowthick-1-w { background-position: -96px -48px; }
+      .ui-icon-arrowthick-1-nw { background-position: -112px -48px; }
+      .ui-icon-arrowthick-2-n-s { background-position: -128px -48px; }
+      .ui-icon-arrowthick-2-ne-sw { background-position: -144px -48px; }
+      .ui-icon-arrowthick-2-e-w { background-position: -160px -48px; }
+      .ui-icon-arrowthick-2-se-nw { background-position: -176px -48px; }
+      .ui-icon-arrowthickstop-1-n { background-position: -192px -48px; }
+      .ui-icon-arrowthickstop-1-e { background-position: -208px -48px; }
+      .ui-icon-arrowthickstop-1-s { background-position: -224px -48px; }
+      .ui-icon-arrowthickstop-1-w { background-position: -240px -48px; }
+      .ui-icon-arrowreturnthick-1-w { background-position: 0 -64px; }
+      .ui-icon-arrowreturnthick-1-n { background-position: -16px -64px; }
+      .ui-icon-arrowreturnthick-1-e { background-position: -32px -64px; }
+      .ui-icon-arrowreturnthick-1-s { background-position: -48px -64px; }
+      .ui-icon-arrowreturn-1-w { background-position: -64px -64px; }
+      .ui-icon-arrowreturn-1-n { background-position: -80px -64px; }
+      .ui-icon-arrowreturn-1-e { background-position: -96px -64px; }
+      .ui-icon-arrowreturn-1-s { background-position: -112px -64px; }
+      .ui-icon-arrowrefresh-1-w { background-position: -128px -64px; }
+      .ui-icon-arrowrefresh-1-n { background-position: -144px -64px; }
+      .ui-icon-arrowrefresh-1-e { background-position: -160px -64px; }
+      .ui-icon-arrowrefresh-1-s { background-position: -176px -64px; }
+      .ui-icon-arrow-4 { background-position: 0 -80px; }
+      .ui-icon-arrow-4-diag { background-position: -16px -80px; }
+      .ui-icon-extlink { background-position: -32px -80px; }
+      .ui-icon-newwin { background-position: -48px -80px; }
+      .ui-icon-refresh { background-position: -64px -80px; }
+      .ui-icon-shuffle { background-position: -80px -80px; }
+      .ui-icon-transfer-e-w { background-position: -96px -80px; }
+      .ui-icon-transferthick-e-w { background-position: -112px -80px; }
+      .ui-icon-folder-collapsed { background-position: 0 -96px; }
+      .ui-icon-folder-open { background-position: -16px -96px; }
+      .ui-icon-document { background-position: -32px -96px; }
+      .ui-icon-document-b { background-position: -48px -96px; }
+      .ui-icon-note { background-position: -64px -96px; }
+      .ui-icon-mail-closed { background-position: -80px -96px; }
+      .ui-icon-mail-open { background-position: -96px -96px; }
+      .ui-icon-suitcase { background-position: -112px -96px; }
+      .ui-icon-comment { background-position: -128px -96px; }
+      .ui-icon-person { background-position: -144px -96px; }
+      .ui-icon-print { background-position: -160px -96px; }
+      .ui-icon-trash { background-position: -176px -96px; }
+      .ui-icon-locked { background-position: -192px -96px; }
+      .ui-icon-unlocked { background-position: -208px -96px; }
+      .ui-icon-bookmark { background-position: -224px -96px; }
+      .ui-icon-tag { background-position: -240px -96px; }
+      .ui-icon-home { background-position: 0 -112px; }
+      .ui-icon-flag { background-position: -16px -112px; }
+      .ui-icon-calendar { background-position: -32px -112px; }
+      .ui-icon-cart { background-position: -48px -112px; }
+      .ui-icon-pencil { background-position: -64px -112px; }
+      .ui-icon-clock { background-position: -80px -112px; }
+      .ui-icon-disk { background-position: -96px -112px; }
+      .ui-icon-calculator { background-position: -112px -112px; }
+      .ui-icon-zoomin { background-position: -128px -112px; }
+      .ui-icon-zoomout { background-position: -144px -112px; }
+      .ui-icon-search { background-position: -160px -112px; }
+      .ui-icon-wrench { background-position: -176px -112px; }
+      .ui-icon-gear { background-position: -192px -112px; }
+      .ui-icon-heart { background-position: -208px -112px; }
+      .ui-icon-star { background-position: -224px -112px; }
+      .ui-icon-link { background-position: -240px -112px; }
+      .ui-icon-cancel { background-position: 0 -128px; }
+      .ui-icon-plus { background-position: -16px -128px; }
+      .ui-icon-plusthick { background-position: -32px -128px; }
+      .ui-icon-minus { background-position: -48px -128px; }
+      .ui-icon-minusthick { background-position: -64px -128px; }
+      .ui-icon-close { background-position: -80px -128px; }
+      .ui-icon-closethick { background-position: -96px -128px; }
+      .ui-icon-key { background-position: -112px -128px; }
+      .ui-icon-lightbulb { background-position: -128px -128px; }
+      .ui-icon-scissors { background-position: -144px -128px; }
+      .ui-icon-clipboard { background-position: -160px -128px; }
+      .ui-icon-copy { background-position: -176px -128px; }
+      .ui-icon-contact { background-position: -192px -128px; }
+      .ui-icon-image { background-position: -208px -128px; }
+      .ui-icon-video { background-position: -224px -128px; }
+      .ui-icon-script { background-position: -240px -128px; }
+      .ui-icon-alert { background-position: 0 -144px; }
+      .ui-icon-info { background-position: -16px -144px; }
+      .ui-icon-notice { background-position: -32px -144px; }
+      .ui-icon-help { background-position: -48px -144px; }
+      .ui-icon-check { background-position: -64px -144px; }
+      .ui-icon-bullet { background-position: -80px -144px; }
+      .ui-icon-radio-on { background-position: -96px -144px; }
+      .ui-icon-radio-off { background-position: -112px -144px; }
+      .ui-icon-pin-w { background-position: -128px -144px; }
+      .ui-icon-pin-s { background-position: -144px -144px; }
+      .ui-icon-play { background-position: 0 -160px; }
+      .ui-icon-pause { background-position: -16px -160px; }
+      .ui-icon-seek-next { background-position: -32px -160px; }
+      .ui-icon-seek-prev { background-position: -48px -160px; }
+      .ui-icon-seek-end { background-position: -64px -160px; }
+      .ui-icon-seek-start { background-position: -80px -160px; }
+      /* ui-icon-seek-first is deprecated, use ui-icon-seek-start instead */
+      .ui-icon-seek-first { background-position: -80px -160px; }
+      .ui-icon-stop { background-position: -96px -160px; }
+      .ui-icon-eject { background-position: -112px -160px; }
+      .ui-icon-volume-off { background-position: -128px -160px; }
+      .ui-icon-volume-on { background-position: -144px -160px; }
+      .ui-icon-power { background-position: 0 -176px; }
+      .ui-icon-signal-diag { background-position: -16px -176px; }
+      .ui-icon-signal { background-position: -32px -176px; }
+      .ui-icon-battery-0 { background-position: -48px -176px; }
+      .ui-icon-battery-1 { background-position: -64px -176px; }
+      .ui-icon-battery-2 { background-position: -80px -176px; }
+      .ui-icon-battery-3 { background-position: -96px -176px; }
+      .ui-icon-circle-plus { background-position: 0 -192px; }
+      .ui-icon-circle-minus { background-position: -16px -192px; }
+      .ui-icon-circle-close { background-position: -32px -192px; }
+      .ui-icon-circle-triangle-e { background-position: -48px -192px; }
+      .ui-icon-circle-triangle-s { background-position: -64px -192px; }
+      .ui-icon-circle-triangle-w { background-position: -80px -192px; }
+      .ui-icon-circle-triangle-n { background-position: -96px -192px; }
+      .ui-icon-circle-arrow-e { background-position: -112px -192px; }
+      .ui-icon-circle-arrow-s { background-position: -128px -192px; }
+      .ui-icon-circle-arrow-w { background-position: -144px -192px; }
+      .ui-icon-circle-arrow-n { background-position: -160px -192px; }
+      .ui-icon-circle-zoomin { background-position: -176px -192px; }
+      .ui-icon-circle-zoomout { background-position: -192px -192px; }
+      .ui-icon-circle-check { background-position: -208px -192px; }
+      .ui-icon-circlesmall-plus { background-position: 0 -208px; }
+      .ui-icon-circlesmall-minus { background-position: -16px -208px; }
+      .ui-icon-circlesmall-close { background-position: -32px -208px; }
+      .ui-icon-squaresmall-plus { background-position: -48px -208px; }
+      .ui-icon-squaresmall-minus { background-position: -64px -208px; }
+      .ui-icon-squaresmall-close { background-position: -80px -208px; }
+      .ui-icon-grip-dotted-vertical { background-position: 0 -224px; }
+      .ui-icon-grip-dotted-horizontal { background-position: -16px -224px; }
+      .ui-icon-grip-solid-vertical { background-position: -32px -224px; }
+      .ui-icon-grip-solid-horizontal { background-position: -48px -224px; }
+      .ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; }
+      .ui-icon-grip-diagonal-se { background-position: -80px -224px; }
+    }.each_line.map do |line|
+        c = line.split(/\s\{|\}\s/).map(&:strip)
+        if c.size > 1
+          ICONS[c.first[9..-1]] = c.last
+        end
+      end
+    
+    def width_style
+      "width: #{width||16 + ((h_offset||0)*1.5).round}px;"
+    end
+    
+    def height_style
+      "height: #{height||16 + ((v_offset||0)*1.5).round}px;"
+    end
+    
+    def background_style
+      offsets = [h_offset, v_offset]
+      ICONS[name.to_s].gsub(/-?\d+(?=px)/) do |s|
+        s.to_i + (offsets.delete_at(0)||0)
+      end
+    end
+
+    after_init do
+      classes.commit("ui-icon", "ui-icon-#{name}")
+      html_options[:style] << background_style if v_offset||h_offset
+      html_options[:style] << width_style if width||h_offset
+      html_options[:style] << height_style if height||v_offset
+    end
+  end
+  
+end

data/lib/ui_helpers/elements/just_icon.rb

@@ -0,0 +1,15 @@
+module UiHelpers
+  
+  class LinkIcon < Icon
+    attr_accessor :valign
+        
+    after_init do
+      html_options[:style] << "display: inline-block; vertical-align: #{valign};"
+    end
+    
+    def valign
+      @valign||"middle"
+    end
+  end
+  
+end

data/lib/ui_helpers/elements/overlay.rb

@@ -0,0 +1,9 @@
+module UiHelpers
+  
+  class Overlay < Element
+    after_init do      
+      classes.commit("ui-widget-overlay")
+    end
+  end
+  
+end

data/lib/ui_helpers/elements/shadow.rb

@@ -0,0 +1,10 @@
+module UiHelpers
+  
+  class Shadow < Widget
+    include Positionable
+    after_init do      
+      classes.commit("ui-widget-shadow")
+    end
+  end
+  
+end

data/lib/ui_helpers/elements/widget.rb

@@ -0,0 +1,28 @@
+module UiHelpers
+  
+  class Widget < Element
+    attr_accessor :corner, :state
+
+    after_init do
+      classes.commit("ui-widget", "ui-corner" => corner, "ui-state" => state)
+    end
+
+    def corner
+      case @corner
+      when false then nil
+      when nil then "all"
+      else @corner
+      end
+    end
+
+    def state
+      case @state
+      when false then nil
+      when nil then "default"
+      else @state
+      end
+    end
+
+  end
+  
+end

data/lib/ui_helpers/elements/widget_content.rb

@@ -0,0 +1,11 @@
+module UiHelpers
+  
+  class WidgetContent < Widget
+    include Positionable
+    after_init do
+      classes.commit("ui-widget-content", :state => nil)
+      html_options[:style] << "padding: 10px;"
+    end
+  end
+  
+end

data/lib/ui_helpers/engine.rb

@@ -0,0 +1,4 @@
+module UiHelpers
+  class Engine < ::Rails::Engine #:nodoc:
+  end
+end

data/lib/ui_helpers/helpers/action_view_extension.rb

@@ -0,0 +1,17 @@
+require "ui_helpers/helpers/button"
+require "ui_helpers/helpers/flash"
+require "ui_helpers/helpers/link"
+require "ui_helpers/helpers/overlay"
+
+module UiHelpers
+  module ActionViewExtension
+    extend ActiveSupport::Concern
+    
+    include ButtonHelpers
+    include FlashHelpers
+    include LinkHelpers
+    include OverlayHelpers
+    
+  end
+  
+end

data/lib/ui_helpers/helpers/button.rb

@@ -0,0 +1,101 @@
+module UiHelpers
+  module ButtonHelpers
+    def ui_button_tag(content_or_options = nil, options = nil, &block)
+      if block_given? && content_or_options.is_a?(Hash)
+        content, options = capture(&block), content_or_options
+      else
+        content, options = content_or_options, options
+      end
+      options ||= {}
+      options = options.stringify_keys
+
+      ui_options = options.delete("ui")||{}
+      ui_options[:text] = content
+      ui_button = UiHelpers::Button.new(self, ui_options)
+
+      options.merge!(ui_button.html_options)
+
+      button_tag(ui_button.content, options)
+    end
+
+    def ui_link_to(name = nil, options = nil, html_options = nil, &block)
+      if block_given?
+        content, path, options = capture(&block), name, options
+      else
+        content, path, options = name, options, html_options
+      end
+      options ||= {}
+      options = options.stringify_keys
+
+      ui_options = options.delete("ui")||{}
+      ui_options[:text] = content
+      ui_button = UiHelpers::Button.new(self, ui_options)
+
+      options.merge!(ui_button.html_options)
+
+      link_to(ui_button.content, path, options)
+    end
+
+    def ui_link_to_function(name, function, html_options={})
+      content = name
+      options = html_options
+      options = options.stringify_keys
+
+      ui_options = options.delete("ui")||{}
+      ui_options[:text] = content
+      ui_button = UiHelpers::Button.new(self, ui_options)
+
+      options.merge!(ui_button.html_options)
+
+      link_to_function(ui_button.content, function, options)
+    end
+
+    def ui_button_to(name = nil, options = nil, html_options = nil, &block)
+      # no icon support for input elements
+      if block_given?
+        content, path, options = capture(&block), name, options
+      else
+        content, path, options = name, options, html_options
+      end
+      options ||= {}
+      options = options.stringify_keys
+
+      ui_options = options.delete("ui")||{}
+      ui_button = UiHelpers::Button.new(self, ui_options)
+
+      options.merge!(ui_button.html_options)
+
+      button_to(content, path, options)
+    end
+
+    def ui_button_to_function(name, function=nil, html_options={})
+      content = name
+      options = html_options
+      options = options.stringify_keys
+
+      ui_options = options.delete("ui")||{}
+      ui_button = UiHelpers::Button.new(self, ui_options)
+
+      options.merge!(ui_button.html_options)
+
+      button_to_function(content, function, options)
+    end
+
+    def ui_submit_tag(value = "Save changes", options = {})
+      content = value
+      options = options.stringify_keys
+
+      ui_options = options.delete("ui")||{}
+      ui_button = UiHelpers::Button.new(self, ui_options)
+
+      options.merge!(ui_button.html_options)
+
+      submit_tag(content, options)
+    end
+  end
+  
+  module FormHelpers
+    # submit
+  end
+  
+end

data/lib/ui_helpers/helpers/flash.rb

@@ -0,0 +1,19 @@
+module UiHelpers
+  module FlashHelpers
+    
+    def ui_error(content = nil, &block)
+      content ||= capture(&block)
+      UiHelpers::Flash.new(:state => "error", :style => "padding: 0 .7em;", :icon => {:name => "alert", :style => "float: left; margin-right: .3em;"}).html(:div) do |buffer|
+        buffer << content
+      end
+    end
+    
+    def ui_highlight(content = nil, &block)
+      content ||= capture(&block)
+      UiHelpers::Flash.new(:state => "highlight", :style => "padding: 0 .7em;", :icon => {:name => "info", :style => "float: left; margin-right: .3em;"}).html(:div) do |buffer|
+        buffer << content
+      end
+    end
+    
+  end
+end

data/lib/ui_helpers/helpers/form_helpers.rb

@@ -0,0 +1,17 @@
+module UiHelpers
+  module FormHelpers
+    
+    def ui_submit(value=nil, options={})
+      value, options = nil, value if value.is_a?(Hash)
+      value ||= submit_default_value
+      @template.ui_submit_tag(value, options)
+    end
+    
+    def ui_button(value = nil, options = {}, &block)
+      value, options = nil, value if value.is_a?(Hash)
+      value ||= submit_default_value
+      @template.ui_button_tag(value, options, &block)
+    end
+    
+  end
+end

data/lib/ui_helpers/helpers/link.rb

@@ -0,0 +1,33 @@
+module UiHelpers
+  module LinkHelpers
+    def link_with_icon_to(name = nil, options = nil, html_options = nil, &block)
+      if block_given?
+        content, path, options = capture(&block), name, options
+      else
+        content, path, options = name, options, html_options
+      end
+      options ||= {}
+      options = options.stringify_keys
+
+      options["style"] = [options["style"], "white-space: nowrap;"].compact.join(" ")
+
+      icon = options.delete("icon")
+      content = UiHelpers::LinkIcon.new(self, icon).tag(:span) + content
+
+      link_to(content, path, options)
+    end
+
+    def link_with_icon_to_function(name, function, html_options={})
+      content = name
+      options = html_options
+      options = options.stringify_keys
+
+      options["style"] = [options["style"], "white-space: nowrap;"].compact.join(" ")
+
+      icon = options.delete("icon")
+      content = UiHelpers::LinkIcon.new(self, icon).tag(:span) + content
+
+      link_to_function(content, function, options)    
+    end
+  end
+end

data/lib/ui_helpers/helpers/overlay.rb

@@ -0,0 +1,8 @@
+module UiHelpers
+  module OverlayHelpers
+    def overlay(content, dialog_text = nil, &block)
+      dialog_text ||= capture(&block)
+      UiHelpers::DialogOver.new(:base => content, :text => dialog_text).html(:div)
+    end
+  end
+end

data/lib/ui_helpers/railtie.rb

@@ -0,0 +1,15 @@
+require 'rails'
+
+module UiHelpers
+  class Railtie < ::Rails::Railtie
+    config.before_initialize do
+      ActiveSupport.on_load :action_view do
+        require 'ui_helpers/helpers/action_view_extension'
+        include ActionViewExtension
+        require 'ui_helpers/helpers/form_helpers'
+        ActionView::Helpers::FormBuilder.send(:include, FormHelpers)
+      end
+    end
+
+  end
+end

data/lib/ui_helpers/version.rb

@@ -0,0 +1,3 @@
+module UiHelpers
+  VERSION = "0.0.1"
+end

data/ui_helpers.gemspec

@@ -0,0 +1,20 @@
+# -*- encoding: utf-8 -*-
+lib = File.expand_path('../lib', __FILE__)
+$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
+require 'ui_helpers/version'
+
+Gem::Specification.new do |gem|
+  gem.name          = "ui_helpers"
+  gem.version       = UiHelpers::VERSION
+  gem.authors       = ["Valery Kvon"]
+  gem.email         = ["addagger@gmail.com"]
+  gem.homepage      = %q{http://vkvon.ru/projects/ui_helpers}
+  gem.description   = %q{Buttons Icons Overlays and other design features from JQuery UI}
+  gem.summary       = %q{JQuery UI helpers for Rails}
+
+  gem.files         = `git ls-files`.split($/)
+  gem.executables   = gem.files.grep(%r{^bin/}).map{ |f| File.basename(f) }
+  gem.test_files    = gem.files.grep(%r{^(test|spec|features)/})
+  gem.require_paths = ["lib"]
+  gem.licenses       = ['MIT']
+end

metadata

@@ -0,0 +1,77 @@
+--- !ruby/object:Gem::Specification
+name: ui_helpers
+version: !ruby/object:Gem::Version
+  version: 0.0.1
+  prerelease: 
+platform: ruby
+authors:
+- Valery Kvon
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2012-12-31 00:00:00.000000000 Z
+dependencies: []
+description: Buttons Icons Overlays and other design features from JQuery UI
+email:
+- addagger@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- .gitignore
+- CHANGELOG
+- Gemfile
+- LICENSE.txt
+- README.md
+- Rakefile
+- app/assets/stylesheets/application.css
+- app/assets/stylesheets/ui_helper.css.scss
+- lib/ui_helpers.rb
+- lib/ui_helpers/elements.rb
+- lib/ui_helpers/elements/button.rb
+- lib/ui_helpers/elements/dialog_content.rb
+- lib/ui_helpers/elements/dialog_cover.rb
+- lib/ui_helpers/elements/element.rb
+- lib/ui_helpers/elements/flash.rb
+- lib/ui_helpers/elements/icon.rb
+- lib/ui_helpers/elements/just_icon.rb
+- lib/ui_helpers/elements/overlay.rb
+- lib/ui_helpers/elements/shadow.rb
+- lib/ui_helpers/elements/widget.rb
+- lib/ui_helpers/elements/widget_content.rb
+- lib/ui_helpers/engine.rb
+- lib/ui_helpers/helpers/action_view_extension.rb
+- lib/ui_helpers/helpers/button.rb
+- lib/ui_helpers/helpers/flash.rb
+- lib/ui_helpers/helpers/form_helpers.rb
+- lib/ui_helpers/helpers/link.rb
+- lib/ui_helpers/helpers/overlay.rb
+- lib/ui_helpers/railtie.rb
+- lib/ui_helpers/version.rb
+- ui_helpers.gemspec
+homepage: http://vkvon.ru/projects/ui_helpers
+licenses:
+- MIT
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  none: false
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  none: false
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 1.8.24
+signing_key: 
+specification_version: 3
+summary: JQuery UI helpers for Rails
+test_files: []