anjlab-widgets 0.0.8 → 1.0.0

data/README.md

@@ -1,6 +1,10 @@
 # Anjlab::Widgets
 
-TODO: Write a gem description
+Bootstrap date and time pickers for rails (ready for rails 4).
+
+Note: `simple_form` gem is supported.
+
+Currently `en` and `ru` locales supported.
 
 ## Installation
 
@@ -12,13 +16,84 @@ And then execute:
 
     $ bundle
 
-Or install it yourself as:
+## Usage
+
+Add date and time pickers to your application.js
 
-    $ gem install anjlab-widgets
+```javascript
+//= require anjlab/datepicker
+//= require anjlab/timepicker
+```
 
-## Usage
+Add date and time pickers to your application.css.scss
+
+```scss
+@import 'twitter/bootstrap';
+
+@import 'anjlab/datepicker';
+@import 'anjlab/timepicker';
+```
+
+### With FormBuilder
+
+```erb
+  <%= f.text_field :updated_at, value: Anjlab::Widgets.format_date(f.object.updated_at), "data-widget"=>"datepicker" %>
+  <%= f.text_field :updated_at, value: Anjlab::Widgets.format_time(f.object.updated_at), "data-widget"=>"timepicker" %>
+```
+
+### With simple_form!
+
+You have two options here:
+
+Overwrite standart :date, :datetime and :time inputs:
+
+```ruby
+# config/initializers/simple_form.rb
+SimpleForm.setup do |config|
+  Anjlab::Widgets.simple_form as_default: true
+  #...
+end
+```
+In your forms:
+
+```erb
+  <%= f.input :created_at # :datetime %>
+  <%= f.input :created_at, as: :date %>
+  <%= f.input :created_at, as: :time %>
+```
+
+Or use prefixed input types:
+
+```ruby
+# config/initializers/simple_form.rb
+SimpleForm.setup do |config|
+  Anjlab::Widgets.simple_form
+  #...
+end
+```
+
+In your forms:
+
+```erb
+  <%= f.input :created_at, as: :anjlab_datetime %>
+  <%= f.input :created_at, as: :anjlab_date %>
+  <%= f.input :created_at, as: :anjlab_time %>
+```
+
+## Screen shots
+
+### Desktop
+![date picker](https://raw.github.com/anjlab/anjlab-widgets/master/date_pic.png)
+
+![time picker](https://raw.github.com/anjlab/anjlab-widgets/master/time_pic.png)
+
+### Mobile native
+
+Converts to native controls if possible (except Chrome - it has ugly native controls).
+
+![native date picker](https://raw.github.com/anjlab/anjlab-widgets/master/native_date_pic.PNG)
 
-TODO: Write usage instructions here
+![native time picker](https://raw.github.com/anjlab/anjlab-widgets/master/native_time_pic.PNG)
 
 ## Contributing
 

data/{vendor → app}/assets/javascripts/anjlab/datepicker.js.coffee

@@ -125,10 +125,40 @@ DateTools.template = '<div class="datepicker dropdown-menu">'+
             '</div>'+
           '</div>'
 
-class Datepicker
-
+class NativeRailsDatepicker
   constructor: (element, options)->
     @element = $(element)
+    @rails   = options.rails ? @element.data('rails') ? false
+
+    @element.on {
+      keyup: $.proxy(@update, this)
+      change: $.proxy(@update, this)
+    }
+
+  update: ->
+    @date = DateTools.parseDate @element.val(), {
+      separator: '-'
+      parts: ["yyyy", "mm", "dd"]
+    }
+
+    @updateRails()
+
+  updateRails: ->
+    return if !@rails
+
+    parent = @element.closest('.controls, form, div')
+    if @date == null
+      parent.find('.js-aw-1i, .js-aw-2i, .js-aw-3i').val('')
+    else
+      parent.find('.js-aw-1i').val(@date.getFullYear())
+      parent.find('.js-aw-2i').val(@date.getMonth() + 1)
+      parent.find('.js-aw-3i').val(@date.getDate())      
+
+
+class Datepicker extends NativeRailsDatepicker
+
+  constructor: (element, options)->
+    super(element, options)
     @locale  = options.locale || @element.data('date-locale') || DateTools.getLocale() 
     @format  = DateTools.parseFormat(options.format || @element.data('date-format') || Locales[@locale].dates.format);
     @allowBlank = options.allowBlank ? @element.data('date-allow-blank') ? true
@@ -143,8 +173,9 @@ class Datepicker
     if @isInput
       @element.on {
         focus: $.proxy(@show, this)
+        click: $.proxy(@show, this)
         blur: $.proxy(@hide, this)
-        keyup: $.proxy(@update, this)  
+        keyup: $.proxy(@update, this)
       }
     else
       if @component
@@ -243,6 +274,7 @@ class Datepicker
     year = d.getFullYear()
     month = d.getMonth()
 
+    @updateRails()
     date = if @date != null then @date else DateTools.today()
     currentDate = if @date != null then @date.valueOf() else 0
 
@@ -363,12 +395,13 @@ $.fn.datepicker = (option) ->
     $this = $(this)
     data = $this.data('datepicker')
     options = typeof option == 'object' && option
-    if nativePicker      
-      convertToNative($this, options)
-    else
-      if !data
+    if !data
+      if nativePicker
+        convertToNative($this, options)
+        $this.data('datepicker', (data = new NativeRailsDatepicker(this, $.extend({}, $.fn.timepicker.defaults,options))))
+      else
         $this.data('datepicker', (data = new Datepicker(this, $.extend({}, $.fn.datepicker.defaults,options))))
-      data[option]() if typeof option == 'string'
+    data[option]() if typeof option == 'string'
 
 $.fn.datepicker.defaults = { }
 $.fn.datepicker.Constructor = Datepicker
@@ -377,7 +410,8 @@ $ ->
   input = document.createElement("input")
   input.setAttribute("type", "date")
   # Chrome has ugly native date picker so we show ours
+  # nativePicker = input.type == "date"
   nativePicker = input.type == "date" && !navigator.userAgent.match(/chrome/i)
 
   $("input[data-widget=datepicker]").datepicker()
-
+  $(document).on 'focus.data-api click.data-api touchstart.data-api', 'input[data-widget=datepicker]', (e)-> $(e.target).datepicker()

data/{vendor → app}/assets/javascripts/anjlab/timepicker.js.coffee

@@ -2,10 +2,35 @@ TimeTools =
 
   template: "<div class='timepicker dropdown-menu'><div class='times'></div></div>"
 
-class Timepicker
-
+class NativeRailsTimepicker
   constructor: (element, options)->
     @element = $(element)
+    @rails   = options.rails ? @element.data('rails') ? false
+
+    @element.on {
+      keyup: $.proxy(@update, this)
+      change: $.proxy(@update, this)
+    }
+
+  update: ->
+    @time = @element.val()
+    @updateRails()
+
+  updateRails: ->
+    return if !@rails
+    parent = @element.closest('.controls, form, div')
+    parts = @time.split(':')
+    if parts.length == 2
+      parent.find('.js-aw-4i').val(parts[0])
+      parent.find('.js-aw-5i').val(parts[1])
+    else
+      parent.find('.js-aw-4i, .js-aw-5i').val('')
+
+class Timepicker extends NativeRailsTimepicker
+
+  constructor: (element, options)->
+    super(element, options)
+
     @picker  = $(TimeTools.template).appendTo('body').on({
       click: $.proxy(@click, this)
       mousedown: $.proxy(@mousedown, this)
@@ -13,13 +38,15 @@ class Timepicker
 
     @element.on {
       focus: $.proxy(@show, this)
+      click: $.proxy(@show, this)
       blur: $.proxy(@hide, this)
-      keyup: $.proxy(@update, this)  
+      
     }
 
     @step    = options.step || @element.data('date-time-step') || 30
     @minTime = options.minTime || @element.data('date-time-min') || 9 * 60
     @maxTime = options.maxTime || @element.data('date-time-max') || 20 * 60
+    
 
     @fillTimes()
     @update()
@@ -45,13 +72,14 @@ class Timepicker
         type: 'changeDate'
         date: @time
       }
+      @hide()
 
   mousedown: (e)->
     e.stopPropagation()
     e.preventDefault()
 
   update: ->
-    @time = this.element.val()
+    super()
     @picker.find('a.active').removeClass('active')
     @picker.find("a[data-time='#{@time}']").addClass('active')
 
@@ -113,23 +141,24 @@ nativePicker = false
 $.fn.timepicker = (option) ->
   @each ->
     $this = $(this)
-    if nativePicker
-      $this.prop("type", "time")
-    else
-      data = $this.data('timepicker')
-      options = typeof option == 'object' && option
-      if !data
+    data = $this.data('timepicker')
+    options = typeof option == 'object' && option
+    if !data
+      if nativePicker
+        $this.prop('type', 'time')
+        $this.data('timepicker', (data = new NativeRailsTimepicker(this, $.extend({}, $.fn.timepicker.defaults,options))))
+      else
         $this.data('timepicker', (data = new Timepicker(this, $.extend({}, $.fn.timepicker.defaults,options))))
-      data[option]() if typeof option == 'string'
+    data[option]() if typeof option == 'string'
 
 $.fn.timepicker.defaults = { }
 $.fn.timepicker.Constructor = Timepicker
 
 $ ->
-  input = document.createElement("input")
-  input.setAttribute("type", "time")
-  nativePicker = input.type == "time"
+  input = document.createElement('input')
+  input.setAttribute('type', 'time')
+  # skip ugly chrome native control for now
+  nativePicker = input.type == 'time' && !navigator.userAgent.match(/chrome/i)
 
   $("input[data-widget=timepicker]").timepicker()
-
-
+  $(document).on 'focus.data-api click.data-api touchstart.data-api', 'input[data-widget=timepicker]', (e)-> $(e.target).timepicker()

data/{vendor → app}/assets/stylesheets/anjlab/timepicker.css.scss

@@ -15,6 +15,8 @@
 
   a {
     @include border-radius(4px);
+    display: block;
+    padding: 0 1em;
 
     &:hover {
       background: $grayLighter;

data/lib/anjlab-widgets/simple_form.rb

@@ -0,0 +1,53 @@
+module Anjlab
+  module Widgets
+    class DateTimeInput < SimpleForm::Inputs::DateTimeInput
+
+      def label_target
+        attribute_name
+      end
+
+      def input
+        time = options[:value] || @builder.object[attribute_name]
+
+        html = ''
+
+        allow_blank = !options[:required]
+
+        date_data = {
+          "data-widget" => "datepicker",
+          "data-rails" => true,
+          "data-date-allow-blank" => allow_blank,
+          :value => Widgets::format_date(time),
+          :required => input_html_options[:required],
+          :class => "#{input_html_options[:date_class] || 'input-small'}"
+        }
+
+        time_data = {
+          "data-widget" => "timepicker",
+          "data-rails" => true,
+          :value => Widgets::format_time(time),
+          :required => input_html_options[:required],
+          :class => "#{input_html_options[:time_class] || 'input-small'}"  
+        }
+
+        case input_type
+        when :datetime, :anjlab_datetime
+          html << @builder.text_field(attribute_name, date_data)
+          html << '&nbsp;&nbsp;&nbsp;'
+          html << @builder.text_field(attribute_name, time_data)
+        when :date, :anjlab_date
+          html << @builder.text_field(attribute_name, date_data)
+        when :time, :anjlab_time
+          html << @builder.text_field(attribute_name, time_data)
+        end
+
+        values = time ? [time.year, time.month, time.day, time.hour, time.min] : [''] * 5
+        values.each_with_index do |v, index|
+          i = index + 1
+          html << @builder.hidden_field("#{attribute_name}(#{i}i)", value: v,  class: "js-aw-#{i}i")
+        end
+        html
+      end
+    end
+  end
+end

data/lib/anjlab-widgets/version.rb

@@ -1,5 +1,5 @@
 module Anjlab
   module Widgets
-    VERSION = "0.0.8"
+    VERSION = "1.0.0"
   end
 end

data/lib/anjlab-widgets.rb

@@ -67,8 +67,16 @@ module Anjlab
     end
 
     def self.format_time time
-      nil if time.nil?
+      return '' if time.nil?
       time.strftime "%H:%M"
     end
+
+    def self.simple_form options={}
+      require 'anjlab-widgets/simple_form'
+      SimpleForm::FormBuilder.map_type :anjlab_date, :anjlab_time, :anjlab_datetime, to: DateTimeInput
+      if options[:as_default]
+        SimpleForm::FormBuilder.map_type :date, :time, :datetime, to: DateTimeInput
+      end
+    end
   end
 end

metadata

@@ -2,94 +2,94 @@
 name: anjlab-widgets
 version: !ruby/object:Gem::Version
   prerelease: 
-  version: 0.0.8
+  version: 1.0.0
 platform: ruby
 authors:
 - Yury Korolev
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2012-12-17 00:00:00.000000000 Z
+date: 2013-01-07 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
+  name: anjlab-bootstrap-rails
   version_requirements: !ruby/object:Gem::Requirement
+    none: false
     requirements:
     - - ! '>='
       - !ruby/object:Gem::Version
         version: 2.0.3
-    none: false
-  prerelease: false
-  name: anjlab-bootstrap-rails
   requirement: !ruby/object:Gem::Requirement
+    none: false
     requirements:
     - - ! '>='
       - !ruby/object:Gem::Version
         version: 2.0.3
-    none: false
+  prerelease: false
   type: :runtime
 - !ruby/object:Gem::Dependency
+  name: rails
   version_requirements: !ruby/object:Gem::Requirement
+    none: false
     requirements:
     - - ! '>='
       - !ruby/object:Gem::Version
         version: '3.2'
-    none: false
-  prerelease: false
-  name: rails
   requirement: !ruby/object:Gem::Requirement
+    none: false
     requirements:
     - - ! '>='
       - !ruby/object:Gem::Version
         version: '3.2'
-    none: false
+  prerelease: false
   type: :development
 - !ruby/object:Gem::Dependency
+  name: bundler
   version_requirements: !ruby/object:Gem::Requirement
+    none: false
     requirements:
     - - ! '>='
       - !ruby/object:Gem::Version
         version: '1.0'
-    none: false
-  prerelease: false
-  name: bundler
   requirement: !ruby/object:Gem::Requirement
+    none: false
     requirements:
     - - ! '>='
       - !ruby/object:Gem::Version
         version: '1.0'
-    none: false
+  prerelease: false
   type: :development
 - !ruby/object:Gem::Dependency
+  name: sqlite3
   version_requirements: !ruby/object:Gem::Requirement
+    none: false
     requirements:
     - - ! '>='
       - !ruby/object:Gem::Version
         version: '0'
-    none: false
-  prerelease: false
-  name: sqlite3
   requirement: !ruby/object:Gem::Requirement
+    none: false
     requirements:
     - - ! '>='
       - !ruby/object:Gem::Version
         version: '0'
-    none: false
+  prerelease: false
   type: :development
 - !ruby/object:Gem::Dependency
+  name: rspec-rails
   version_requirements: !ruby/object:Gem::Requirement
+    none: false
     requirements:
     - - ! '>='
       - !ruby/object:Gem::Version
         version: 2.9.0
-    none: false
-  prerelease: false
-  name: rspec-rails
   requirement: !ruby/object:Gem::Requirement
+    none: false
     requirements:
     - - ! '>='
       - !ruby/object:Gem::Version
         version: 2.9.0
-    none: false
+  prerelease: false
   type: :development
 description: Collection of UI widgets on top of anjlab-bootstrap-rails. Datepicker
   and Timepicker for now.
@@ -105,9 +105,21 @@ files:
 - README.md
 - Rakefile
 - anjlab-widgets.gemspec
+- app/assets/images/ajax-loader.gif
+- app/assets/javascripts/anjlab/datepicker.js.coffee
+- app/assets/javascripts/anjlab/timepicker.js.coffee
+- app/assets/javascripts/bootstrap-modal.js
+- app/assets/javascripts/bootstrap-modalmanager.js
+- app/assets/stylesheets/anjlab/datepicker.css.scss
+- app/assets/stylesheets/anjlab/timepicker.css.scss
+- app/assets/stylesheets/bootstrap-modal.css
+- date_pic.png
 - lib/anjlab-widgets.rb
 - lib/anjlab-widgets/engine.rb
+- lib/anjlab-widgets/simple_form.rb
 - lib/anjlab-widgets/version.rb
+- native_date_pic.PNG
+- native_time_pic.PNG
 - spec/dummy/README.rdoc
 - spec/dummy/Rakefile
 - spec/dummy/app/assets/javascripts/application.js
@@ -147,14 +159,7 @@ files:
 - spec/dummy/script/rails
 - spec/spec_helper.rb
 - spec/views/widgets/datepicker_spec.rb
-- vendor/assets/images/ajax-loader.gif
-- vendor/assets/javascripts/anjlab/datepicker.js.coffee
-- vendor/assets/javascripts/anjlab/timepicker.js.coffee
-- vendor/assets/javascripts/bootstrap-modal.js
-- vendor/assets/javascripts/bootstrap-modalmanager.js
-- vendor/assets/stylesheets/anjlab/datepicker.css.scss
-- vendor/assets/stylesheets/anjlab/timepicker.css.scss
-- vendor/assets/stylesheets/bootstrap-modal.css
+- time_pic.png
 homepage: https://github.com/anjlab/anjlab-widgets
 licenses: []
 post_install_message: 
@@ -162,23 +167,23 @@ rdoc_options: []
 require_paths:
 - lib
 required_ruby_version: !ruby/object:Gem::Requirement
+  none: false
   requirements:
   - - ! '>='
     - !ruby/object:Gem::Version
       version: '0'
+      hash: 1068616150774873195
       segments:
       - 0
-      hash: 2463130067864864405
-  none: false
 required_rubygems_version: !ruby/object:Gem::Requirement
+  none: false
   requirements:
   - - ! '>='
     - !ruby/object:Gem::Version
       version: '0'
+      hash: 1068616150774873195
       segments:
       - 0
-      hash: 2463130067864864405
-  none: false
 requirements: []
 rubyforge_project: 
 rubygems_version: 1.8.24