bootstrap-filestyle-rails 1.0.3 → 1.0.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: d1bd4f051bde47327337ee77d35733bf3d063edc
-  data.tar.gz: bf70960a3b8d2f95086e2b0f888edd6d6eebf50d
+  metadata.gz: 8272bbe767f69ec581b8c78426e8f2fa3ce6129d
+  data.tar.gz: 43bbd4b51edf6ce7551858de183abc3ac27c3920
 SHA512:
-  metadata.gz: 0870d7e84e29769a487b52fcb6f08e669be822db60f6cad9e544be04f64fa0f96c7bf11183490c881a03f941ce8374004d1cf0222a512406bfb51aba2bb00301
-  data.tar.gz: 154dae18695b2d169dcf6b6c7d85b662760a466220ed6ec137aec667d10dc0af0022ead42252ff101116eaf50f84633ed8763ccbfc6d9800b88f32c1ae12e7af
+  metadata.gz: 2a28d7052f8c7038ee7a0230836601736e2643ed9602a995452e747949f1d1ead58ba2b83f24a27f394ac107d1804d81cffb3e2444f318b91dfd6aa599f253b2
+  data.tar.gz: 41adb3298eb28106f5d9660fbfb3325d0f1730a640406397a3768e2c4a157ef052d27aaf7102f397cc1245c14e1af4ecdd737ed369b4dba70fb53fbe723da853

data/README.md

@@ -16,7 +16,7 @@ Or install it yourself as:
 
     $ gem install bootstrap-filestyle-rails
 
-This gem's version reflects the asset version starting with `1.6.3`.
+This gem's version reflects the asset version starting with `1.0.3`.
 
 ## Usage
 
@@ -24,6 +24,14 @@ Just require it in your `application.js`:
 
     //= require bootstrap-filestyle
 
+And initialize your file input somehow:
+
+    $(":file").filestyle(
+      input: false
+    )
+
+You can check more configuration options in the [bootstrap-filestyle][] site.
+
 ## Contributing
 
 1. Fork it

data/lib/bootstrap-filestyle-rails/version.rb

@@ -1,3 +1,3 @@
 module BootstrapFilestyleRails
-  VERSION = "1.0.3"
+  VERSION = "1.0.4"
 end

data/vendor/assets/javascripts/bootstrap-filestyle.js

@@ -3,12 +3,12 @@
  * http://dev.tudosobreweb.com.br/bootstrap-filestyle/
  *
  * Copyright (c) 2013 Markus Vinicius da Silva Lima
- * Version 1.0.3
+ * Version 1.0.4
  * Licensed under the MIT license.
  */
 (function ($) {
     "use strict";
-    
+
     var Filestyle = function (element, options) {
         this.options = options;
         this.$elementFilestyle = [];
@@ -153,17 +153,54 @@
                 this.$element.attr({'id': id});
             }
 
-            html = this.htmlInput()+
-                 '<label for="'+id+'" class="'+this.options.classButton+'">'+
-                    this.htmlIcon()+
-                    '<span>'+this.options.buttonText+'</span>'+
-                 '</label>';
+            var inputContainerOpen = (this.options.classInputContainerClass != '') ? '<div class="'+this.options.classInputContainerClass+'">' : '';
+            var inputContainerClose = (inputContainerOpen != '') ? '</div>' : '';
+
+            var buttonContainerOpen = (this.options.classButtonContainerClass != '') ? '<div class="'+this.options.classButtonContainerClass+'">' : '';
+            var buttonContainerClose = (buttonContainerOpen != '') ? '</div>' : '';
+
+            if(this.options.buttonBefore)
+            {
+                html =
+                    buttonContainerOpen+
+                        '<label for="'+id+'" class="'+this.options.classButton+'">'+
+                            this.htmlIcon()+
+                            '<span>'+this.options.buttonText+'</span>'+
+                        '</label>'+
+                    buttonContainerClose+
+                    inputContainerOpen+
+                        this.htmlInput()+
+                    inputContainerClose;
+            } else {
+                html =
+                    inputContainerOpen+
+                        this.htmlInput()+
+                    inputContainerClose+
+                    buttonContainerOpen+
+                        '<label for="'+id+'" class="'+this.options.classButton+'">'+
+                            this.htmlIcon()+
+                        '<span>'+this.options.buttonText+'</span>'+
+                    '</label>'+
+                    buttonContainerClose;
+            }
+
+            this.$elementFilestyle = $('<div class="'+this.options.containerClass+' bootstrap-filestyle">'+html+'</div>');
 
-            this.$elementFilestyle = $('<div class="bootstrap-filestyle" style="display: inline;">'+html+'</div>');
+            var $label = this.$elementFilestyle.find('label');
+            var $labelFocusableContainer = $label.parent();
+
+            $labelFocusableContainer
+                .attr('tabindex', "0")
+                .keypress(function(e) {
+                    if (e.keyCode === 13 || e.charCode === 32) {
+                        $label.click();
+                    }
+                });
 
             // hidding input file and add filestyle
             this.$element
-                .css({'position':'fixed','left':'-500px'})
+                .css({'position':'absolute','clip':'rect(0,0,0,0)'})
+                .attr('tabindex', "-1")
                 .after(this.$elementFilestyle);
 
             // Getting input file value
@@ -181,6 +218,8 @@
 
                 if (content !== '') {
                     _self.$elementFilestyle.find(':text').val(content.replace(/\, $/g, ''));
+                } else {
+                	_self.$elementFilestyle.find(':text').val('');
                 }
             });
 
@@ -227,9 +266,14 @@
         'buttonText': 'Choose file',
         'input': true,
         'icon': true,
-        'classButton': 'btn',
-        'classInput': 'input-large',
-        'classIcon': 'icon-folder-open'
+        'buttonBefore': false,
+
+        'containerClass': 'form-group', // bootstrap-filestyle
+        'classButtonContainerClass': '',
+        'classButton': 'btn btn-default',
+        'classInputContainerClass': '',
+        'classInput': 'form-control',
+        'classIcon': 'glyphicon glyphicon-folder-open'
     };
 
     $.fn.filestyle.noConflict = function () {
@@ -238,18 +282,19 @@
     };
 
     // Data attributes register
-    $('.filestyle').each(function () {
-        var $this = $(this),
-            options = {
-                'buttonText': $this.attr('data-buttonText'),
-                'input': $this.attr('data-input') === 'false' ? false : true,
-                'icon': $this.attr('data-icon') === 'false' ? false : true,
-                'classButton': $this.attr('data-classButton'),
-                'classInput': $this.attr('data-classInput'),
-                'classIcon': $this.attr('data-classIcon')
-            };
-
-        $this.filestyle(options);
+    $(function() {
+        $('.filestyle').each(function () {
+            var $this = $(this),
+                options = {
+                    'buttonText': $this.attr('data-buttonText'),
+                    'input': $this.attr('data-input') === 'false' ? false : true,
+                    'icon': $this.attr('data-icon') === 'false' ? false : true,
+                    'classButton': $this.attr('data-classButton'),
+                    'classInput': $this.attr('data-classInput'),
+                    'classIcon': $this.attr('data-classIcon')
+                };
+    
+            $this.filestyle(options);
+        });
     });
-
-})(window.jQuery);
+})(window.jQuery);

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: bootstrap-filestyle-rails
 version: !ruby/object:Gem::Version
-  version: 1.0.3
+  version: 1.0.4
 platform: ruby
 authors:
 - Mauricio Pasquier Juan
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2014-02-16 00:00:00.000000000 Z
+date: 2014-04-24 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler