simple_form_custom_inputs 0.0.2 → 0.0.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 92c5fb23cce41109af5e9501367ca431e3da28e1
-  data.tar.gz: 979d2579b862e722db590651e8f3511614bd3f93
+  metadata.gz: 12e746e0a14477d80aabed40e16f6f81d7cd03f5
+  data.tar.gz: 2a2d1cefe64ae5a20705201d3cee4544333c9985
 SHA512:
-  metadata.gz: 1b85643e542e90a2a83fea5f086ca715cb0651f88e5283f209218cce152d4602b00ee894f45cf449947f6f6ccce98bd08a91325390e5320a0e4abfae882db9d2
-  data.tar.gz: be054daae5b8a6c90fd9c1a44a794a5c546122d9c6692bc9f7857ae2ff19847353e5b51c818cb267a17e7b1cded5e1fd06b54f46f696edc7d0e4784530b1e463
+  metadata.gz: 3102a8593a2a29feb903e84f6e54e36e583134ad87fac143306d28728838cec66d6bfe4fe3507e418467adbd56130b02500261aedb087d5f257749a9c64207e8
+  data.tar.gz: 83952c6245ea7110028c639b3e588a5305ffcb61830dedf655900f1d598bd2def8a812de4e2e7f21921d9162f9b9ac8b0593a67ad85604d3b0a60ec9dc8b03fb

data/README.md

@@ -6,8 +6,10 @@
 
 - [x] Switch/Toggle with Switchery
 - [x] Masked inputs
-- [ ] Datepicker
+- [x] Datepicker
 - [ ] Datetimepicker
+- [ ] Timepicker
+- [ ] File
 
 ## Installation
 
@@ -16,10 +18,12 @@ Add the following gems to your application's Gemfile:
 ```ruby
 gem 'simple_form'
 gem 'simple_form_custom_inputs'
+gem 'bootstrap-sass'
 
 source 'https://rails-assets.org' do
   gem 'rails-assets-switchery'
   gem 'rails-assets-jquery.maskedinput'
+  gem 'rails-assets-bootstrap-datepicker'
 end
 ```
 
@@ -38,6 +42,7 @@ In app/assets/javascripts/application.js, you should add as follows:
 //= require ...
 //= require switchery
 //= require jquery.maskedinput
+//= require bootstrap-datepicker
 //= require simple_form_custom_inputs
 //= require ...
 ```
@@ -45,35 +50,45 @@ In app/assets/javascripts/application.js, you should add as follows:
 Application.scss
 
 ```scss
+@import "bootstrap-sprockets";
+@import "bootstrap";
 @import "switchery";
+@import "bootstrap-datepicker";
 ```
 
 Basic Example:
 
 ```erb
-<%= simple_form_for :example do |f| %>
-  ...
-  <%= f.input :boolean, as: :switch %>
-  ...
-<% end %>
 
 <%= simple_form_for :example do |f| %>
-  ...
+  <%= f.input :boolean, as: :switch %>
+  <%= f.input :boolean, as: :switch, input_html: {data: {color: '#FF0', secondary_color: '#0F0', jack_color: '#FFF', jack_secondary_color: '#000', size: 'small'}} %>
   <%= f.input :phone, as: :masked, input_html: {data: {pattern: '(99) 99999-9999'}} %>
-  ...
+  <%= f.input :time, as: :datepicker %>
+  <%= f.input :photo, as: :button_file, label: false, class: 'btn btn-info', input_html: {multiple: true, data: {multiple_caption: '{count} files selected'}} %>
 <% end %>
+
 ```
 
-Want some more customization on Switch?
+## I18n on datepicker
 
-```erb
-<%= simple_form_for :example do |f| %>
-  ...
-  <%= f.input :boolean, as: :switch, input_html: {data: {color: '#FF0', secondary_color: '#0F0', jack_color: '#FFF', jack_secondary_color: '#000', size: 'small'}} %>
-  ...
-<% end %>
+You just need to set your locale to the desired language on application.rb, and import the locale on application.js
+
+```ruby
+# application.rb
+config.i18n.default_locale = 'pt-BR'
 ```
 
+```js
+...
+//= require bootstrap-datepicker
+//= require I18n/pt-BR
+...
+```
+## Help wanted
+
+Please, help with I18n for datepicker!
+
 ## Sample projects
 
 For an example, take a look at the `example` folder in this repository.

data/example/Gemfile

@@ -42,6 +42,7 @@ gem 'bootstrap-sass'
 source 'https://rails-assets.org' do
   gem 'rails-assets-switchery'
   gem 'rails-assets-jquery.maskedinput'
+  gem 'rails-assets-bootstrap-datepicker'
 end
 
 group :development, :test do

data/example/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: ..
   specs:
-    simple_form_custom_inputs (0.0.1)
+    simple_form_custom_inputs (0.0.2)
 
 GEM
   remote: https://rubygems.org/
@@ -114,6 +114,8 @@ GEM
       bundler (>= 1.3.0, < 2.0)
       railties (= 5.0.2)
       sprockets-rails (>= 2.0.0)
+    rails-assets-bootstrap-datepicker (1.6.4)
+      rails-assets-jquery (>= 1.7.1)
     rails-assets-fastclick (0.6.11)
     rails-assets-jquery (3.2.1)
     rails-assets-jquery.maskedinput (1.4.1)
@@ -193,6 +195,7 @@ DEPENDENCIES
   pry-rails
   puma (~> 3.0)
   rails (~> 5.0.2)
+  rails-assets-bootstrap-datepicker!
   rails-assets-jquery.maskedinput!
   rails-assets-switchery!
   sass-rails (~> 5.0)

data/example/app/assets/javascripts/application.js

@@ -16,5 +16,7 @@
 //= require turbolinks
 //= require switchery
 //= require jquery.maskedinput
+//= require bootstrap-datepicker
+//= require I18n/pt-BR
 //= require simple_form_custom_inputs
 //= require_tree .

data/example/app/assets/stylesheets/application.scss

@@ -1,6 +1,7 @@
 @import "bootstrap-sprockets";
 @import "bootstrap";
 @import "switchery";
+@import "bootstrap-datepicker";
 
 body {
   padding: 30px;

data/example/app/views/contacts/_form.html.erb

@@ -1,10 +1,11 @@
-<%= simple_form_for(@contact) do |f| %>
+<%= simple_form_for(@contact, html_options: {multipart: true}) do |f| %>
   <%= f.error_notification %>
 
   <div class="form-inputs">
     <%= f.input :name %>
     <%= f.input :phone, as: :masked, input_html: {data: {pattern: br_phone_mask_pattern}} %>
     <%= f.input :email %>
+    <%= f.input :created_at, as: :datepicker %>
   </div>
 
   <div class="form-actions">

data/example/config/application.rb

@@ -11,5 +11,7 @@ module Example
     # Settings in config/environments/* take precedence over those specified here.
     # Application configuration should go into files in config/initializers
     # -- all .rb files in that directory are automatically loaded.
+    config.time_zone = 'Brasilia'
+    config.i18n.default_locale = 'pt-BR'
   end
 end

data/example/config/locales/pt-BR.yml

@@ -0,0 +1,2 @@
+pt-BR:
+  hello: Olá

data/lib/simple_form_custom_inputs.rb

@@ -2,6 +2,8 @@ require "simple_form_custom_inputs/version"
 
 autoload :SwitchInput, "simple_form_custom_inputs/simple_form/switch_input"
 autoload :MaskedInput, "simple_form_custom_inputs/simple_form/masked_input"
+autoload :DatepickerInput, "simple_form_custom_inputs/simple_form/datepicker_input"
+autoload :ButtonFileInput, "simple_form_custom_inputs/simple_form/button_file_input"
 
 module SimpleFormCustomInputs
   class Engine < ::Rails::Engine; end

data/lib/simple_form_custom_inputs/simple_form/button_file_input.rb

@@ -0,0 +1,24 @@
+require 'active_support/core_ext/string/output_safety'
+
+class ButtonFileInput < SimpleForm::Inputs::FileInput
+  attr_accessor :output_buffer
+
+  def input(wrapper_options = nil)
+    input_html_options[:class] << 'hidden inputfile'
+    merged_input_options = merge_wrapper_options(input_html_options, wrapper_options)
+
+    (@builder.file_field(attribute_name, merged_input_options) + button).html_safe
+  end
+
+  private
+
+  def button
+    content_tag(:div) do
+      content_tag(:label, for: input_class) do
+        content_tag(:span, class: options[:class]) do
+          label_text.present? ? label_text : I18n.t("simple_form.labels.defaults.#{attribute_name}")
+        end
+      end
+    end
+  end
+end

data/lib/simple_form_custom_inputs/simple_form/datepicker_input.rb

@@ -0,0 +1,8 @@
+class DatepickerInput < SimpleForm::Inputs::StringInput
+  def input(wrapper_options)
+    input_html_options[:data] ||= {}
+    input_html_options[:class] << 'datepicker'
+    input_html_options[:data].merge!({ locale: I18n.locale })
+    super
+  end
+end

data/lib/simple_form_custom_inputs/version.rb

@@ -1,3 +1,3 @@
 module SimpleFormCustomInputs
-  VERSION = "0.0.2"
+  VERSION = "0.0.3"
 end

data/vendor/assets/javascripts/I18n/pt-BR.js

@@ -0,0 +1,10 @@
+(function($){
+	$.fn.datepicker.dates['pt-BR'] = {
+		days: ["Domingo", "Segunda", "Terça", "Quarta", "Quinta", "Sexta", "Sábado", "Domingo"],
+		daysShort: ["Dom", "Seg", "Ter", "Qua", "Qui", "Sex", "Sáb", "Dom"],
+		daysMin: ["Do", "Se", "Te", "Qu", "Qu", "Se", "Sa", "Do"],
+		months: ["Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"],
+		monthsShort: ["Jan", "Fev", "Mar", "Abr", "Mai", "Jun", "Jul", "Ago", "Set", "Out", "Nov", "Dez"],
+		today: "Hoje"
+	};
+}(jQuery));

data/vendor/assets/javascripts/simple_form_custom_inputs.js

@@ -1,25 +1,56 @@
 var initSwitchery = function() {
-  var elem = $('.js-switch')
+  var elem = $(".js-switch")
   if (elem[0]){
     var init = new Switchery(elem[0], {
-      color: elem.data('color'),
-      secondaryColor: elem.data('secondaryColor'),
-      jackColor: elem.data('jackColor'),
-      jackSecondaryColor: elem.data('jackSecondaryColor'),
-      size: elem.data('size')
+      color: elem.data("color"),
+      secondaryColor: elem.data("secondaryColor"),
+      jackColor: elem.data("jackColor"),
+      jackSecondaryColor: elem.data("jackSecondaryColor"),
+      size: elem.data("size")
     });
-  }
-}
+  };
+};
 
 var initMasks = function() {
-  var input = $('.masked input');
-  var pattern = input.data('pattern');
+  var input = $(".masked input");
+  var pattern = input.data("pattern");
   input.mask(pattern);
+};
+
+var initDatepicker = function() {
+  $(".datepicker input").datepicker({
+    autoclose: true,
+    todayHighlight: true,
+    language: $(".datepicker input").data("locale")
+  });
+};
+
+var handleAttachementLabel = function() {
+  var inputs = document.querySelectorAll( '.inputfile' );
+  Array.prototype.forEach.call(inputs, function(input) {
+  	var label	 = input.nextElementSibling,
+  		labelVal = label.innerHTML;
+
+  	input.addEventListener( 'change', function(e) {
+  		var fileName = '';
+  		if( this.files && this.files.length > 1 )
+  			fileName = (this.getAttribute('data-multiple-caption' ) || '').replace('{count}', this.files.length);
+  		else
+  			fileName = e.target.value.split( '\\' ).pop();
+
+  		if( fileName )
+  			label.querySelector('span').innerHTML = fileName;
+  		else
+  			label.innerHTML = labelVal;
+  	});
+  });
 }
 
 var ready = function() {
   initSwitchery();
   initMasks();
+  initDatepicker();
+  handleAttachementLabel();
 };
 
 if (typeof Turbolinks == "undefined") {

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: simple_form_custom_inputs
 version: !ruby/object:Gem::Version
-  version: 0.0.2
+  version: 0.0.3
 platform: ruby
 authors:
 - Marcelo Barreto
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2017-04-27 00:00:00.000000000 Z
+date: 2017-04-29 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -129,6 +129,7 @@ files:
 - example/config/initializers/simple_form_bootstrap.rb
 - example/config/initializers/wrap_parameters.rb
 - example/config/locales/en.yml
+- example/config/locales/pt-BR.yml
 - example/config/locales/simple_form.en.yml
 - example/config/puma.rb
 - example/config/routes.rb
@@ -167,12 +168,15 @@ files:
 - example/vendor/assets/javascripts/.keep
 - example/vendor/assets/stylesheets/.keep
 - lib/simple_form_custom_inputs.rb
+- lib/simple_form_custom_inputs/simple_form/button_file_input.rb
+- lib/simple_form_custom_inputs/simple_form/datepicker_input.rb
 - lib/simple_form_custom_inputs/simple_form/masked_input.rb
 - lib/simple_form_custom_inputs/simple_form/switch_input.rb
 - lib/simple_form_custom_inputs/version.rb
 - screenshot.png
 - simple_form_custom_inputs.gemspec
 - vendor/assets/javascripts/.keep
+- vendor/assets/javascripts/I18n/pt-BR.js
 - vendor/assets/javascripts/simple_form_custom_inputs.js
 homepage: https://github.com/marcelobarreto/simple_form_custom_inputs
 licenses: []