bootstrap_file_input_rails 0.0.2 → 1.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
-SHA1:
-  metadata.gz: a412afd9650077ea55f308aa796edeb5d1620797
-  data.tar.gz: 60b5116be836fafbc418b6371e02e2b532f1c077
+SHA256:
+  metadata.gz: a31e914cdceed61f110fc6324366c1a5652652fcf80e4520245bc5d092b2c00a
+  data.tar.gz: ade69a9b0db7c062223628bb6f1c2565f27db19b1e3cfc396fc51a81a15d271a
 SHA512:
-  metadata.gz: 71eb4f5b4aaa5e7d4e91e888f21e8a147d9fbeb357a6f3e094fbdc452c37425093b1f8ba35d5c766d8c3372b8086ba88b51605d3c7a79c0743439cedc6a37d67
-  data.tar.gz: 7eb744b0d11539d541d58caf1f0f1defc16ea544d7657c21b477d85aac226c62135d01a388092987963aba42d3f1a80dc8d1b43024f8eb3dbc708a5af768ee16
+  metadata.gz: a9729f7e2b0295780ef96a11b4df7c4210645120509d405b34889d8e1c68322ddbb18d4b5ba22f7e1c78160b1c311e0961c0a56733e69a08081f017de0d54979
+  data.tar.gz: e34d57bb2b3a731646a98fbe17acd0109b4a63425c5447ae49957960dffe05a9e40f1877380b5aec3f2f55d86aa9885d0473a7c6d49cac8a060fdf53df8a341e

data/README.md

@@ -1,6 +1,6 @@
-# BootstrapFileInputRails
+# Bootstrap file input, for rails !
 
-TODO: Write a gem description
+This gem is a port of the repository : [Bootstrap file input](https://github.com/grevory/bootstrap-file-input)
 
 ## Installation
 
@@ -18,7 +18,11 @@ Or install it yourself as:
 
 ## Usage
 
-TODO: Write usage instructions here
+Make sure bootstrap is installed and required.
+
+In your applications.js file 
+
+    //= require bootstrap.file-input
 
 ## Contributing
 

data/bootstrap_file_input_rails.gemspec

@@ -18,7 +18,7 @@ Gem::Specification.new do |spec|
   spec.test_files    = spec.files.grep(%r{^(test|spec|features)/})
   spec.require_paths = ["lib"]
 
-  spec.add_dependency 'railties', '>= 3.1'
+  spec.add_dependency 'railties', '>= 3.1', '< 6'
 
   spec.add_development_dependency "bundler", "~> 1.3"
   spec.add_development_dependency "rake"

data/lib/bootstrap_file_input_rails/version.rb

@@ -1,3 +1,3 @@
 module BootstrapFileInputRails
-  VERSION = "0.0.2"
+  VERSION = "1.0.0"
 end

data/vendor/assets/javascripts/bootstrap.file-input.js

@@ -10,89 +10,125 @@
   <a class="btn">Browse</a>
 
 */
-$(function() {
-
-$('input[type=file]').each(function(i,elem){
-
-  // Maybe some fields don't need to be standardized.
-  if (typeof $(this).attr('data-bfi-disabled') != 'undefined') {
-    return;
-  }
-
-  // Set the word to be displayed on the button
-  var buttonWord = 'Browse';
-
-  if (typeof $(this).attr('title') != 'undefined') {
-    buttonWord = $(this).attr('title');
-  }
-
-  // Start by getting the HTML of the input element.
-  // Thanks for the tip http://stackoverflow.com/a/1299069
-  var $elem = $(elem);
-  var input = $('<div>').append( $elem.eq(0).clone() ).html();
-
-  // Now we're going to replace that input field with a Bootstrap button.
-  // The input will actually still be there, it will just be float above and transparent (done with the CSS).
-  $elem.replaceWith('<a class="file-input-wrapper btn ' + $elem.attr('class') + '">'+buttonWord+input+'</a>');
-})
-// After we have found all of the file inputs let's apply a listener for tracking the mouse movement.
-// This is important because the in order to give the illusion that this is a button in FF we actually need to move the button from the file input under the cursor. Ugh.
-.promise().done( function(){
-
-  // As the cursor moves over our new Bootstrap button we need to adjust the position of the invisible file input Browse button to be under the cursor.
-  // This gives us the pointer cursor that FF denies us
-  $('.file-input-wrapper').mousemove(function(cursor) {
-
-    var input, wrapper,
-      wrapperX, wrapperY,
-      inputWidth, inputHeight,
-      cursorX, cursorY;
-
-    // This wrapper element (the button surround this file input)
-    wrapper = $(this);
-    // The invisible file input element
-    input = wrapper.find("input");
-    // The left-most position of the wrapper
-    wrapperX = wrapper.offset().left;
-    // The top-most position of the wrapper
-    wrapperY = wrapper.offset().top;
-    // The with of the browsers input field
-    inputWidth= input.width();
-    // The height of the browsers input field
-    inputHeight= input.height();
-    //The position of the cursor in the wrapper
-    cursorX = cursor.pageX;
-    cursorY = cursor.pageY;
-
-    //The positions we are to move the invisible file input
-    // The 20 at the end is an arbitrary number of pixels that we can shift the input such that cursor is not pointing at the end of the Browse button but somewhere nearer the middle
-    moveInputX = cursorX - wrapperX - inputWidth + 20;
-    // Slides the invisible input Browse button to be positioned middle under the cursor
-    moveInputY = cursorY- wrapperY - (inputHeight/2);
-
-    // Apply the positioning styles to actually move the invisible file input
-    input.css({
-      left:moveInputX,
-      top:moveInputY
-    });
-  });
+(function($) {
+
+$.fn.bootstrapFileInput = function() {
+
+  this.each(function(i,elem){
 
-  $('.file-input-wrapper input[type=file]').change(function(){
+    var $elem = $(elem);
 
-    // Remove any previous file names
-    $(this).parent().next('.file-input-name').remove();
-    if ($(this).prop('files').length > 1) {
-      $(this).parent().after('<span class="file-input-name">'+$(this)[0].files.length+' files</span>');
+    // Add [processed] class to avoid double processing of input file element
+    if (typeof $elem.attr('data-bfi-processed-class') != 'undefined') {
+      // Check if the element already has the [processed] flag on it and skip it if it does
+      if ($elem.hasClass($elem.attr('data-bfi-processed-class'))) {
+          return;
+      }
+      $elem.addClass($elem.attr('data-bfi-processed-class'));
     }
-    else {
-      $(this).parent().after('<span class="file-input-name">'+$(this).val().replace('C:\\fakepath\\','')+'</span>');
+
+    // Maybe some fields don't need to be standardized.
+    if (typeof $elem.attr('data-bfi-disabled') != 'undefined') {
+      return;
     }
 
-  });
+    // Set the word to be displayed on the button
+    var buttonWord = 'Browse';
+
+    if (typeof $elem.attr('title') != 'undefined') {
+      buttonWord = $elem.attr('title');
+    }
 
-  
+    var className = '';
+
+    if (!!$elem.attr('class')) {
+      className = ' ' + $elem.attr('class');
+    }
+
+    // Now we're going to wrap that input field with a Bootstrap button.
+    // The input will actually still be there, it will just be float above and transparent (done with the CSS).
+    $elem.wrap('<a class="file-input-wrapper btn btn-default ' + className + '"></a>').parent().prepend($('<span></span>').html(buttonWord));
+  })
+
+  // After we have found all of the file inputs let's apply a listener for tracking the mouse movement.
+  // This is important because the in order to give the illusion that this is a button in FF we actually need to move the button from the file input under the cursor. Ugh.
+  .promise().done( function(){
+
+    // As the cursor moves over our new Bootstrap button we need to adjust the position of the invisible file input Browse button to be under the cursor.
+    // This gives us the pointer cursor that FF denies us
+    $('.file-input-wrapper').on('mousemove', function(cursor) {
+
+      var input, wrapper,
+        wrapperX, wrapperY,
+        inputWidth, inputHeight,
+        cursorX, cursorY;
+
+      // This wrapper element (the button surround this file input)
+      wrapper = $(this);
+      // The invisible file input element
+      input = wrapper.find("input");
+      // The left-most position of the wrapper
+      wrapperX = wrapper.offset().left;
+      // The top-most position of the wrapper
+      wrapperY = wrapper.offset().top;
+      // The with of the browsers input field
+      inputWidth= input.width();
+      // The height of the browsers input field
+      inputHeight= input.height();
+      //The position of the cursor in the wrapper
+      cursorX = cursor.pageX;
+      cursorY = cursor.pageY;
+
+      //The positions we are to move the invisible file input
+      // The 20 at the end is an arbitrary number of pixels that we can shift the input such that cursor is not pointing at the end of the Browse button but somewhere nearer the middle
+      moveInputX = cursorX - wrapperX - inputWidth + 20;
+      // Slides the invisible input Browse button to be positioned middle under the cursor
+      moveInputY = cursorY- wrapperY - (inputHeight/2);
+
+      // Apply the positioning styles to actually move the invisible file input
+      input.css({
+        left:moveInputX,
+        top:moveInputY
+      });
+    });
+
+    $('body').on('change', '.file-input-wrapper input[type=file]', function(){
+
+      var fileName;
+      fileName = $(this).val();
+
+      // Remove any previous file names
+      $(this).parent().next('.file-input-name').remove();
+      if (!!$(this).prop('files') && $(this).prop('files').length > 1) {
+        var filesLabel = $(this).data('files-label');
+        if (!filesLabel) {
+          filesLabel = 'files';
+        }
+        fileName = $(this)[0].files.length+' '+filesLabel;
+      }
+      else {
+        fileName = fileName.substring(fileName.lastIndexOf('\\') + 1, fileName.length);
+      }
+
+      // Don't try to show the name if there is none
+      if (!fileName) {
+        return;
+      }
+
+      var selectedFileNamePlacement = $(this).data('filename-placement');
+      if (selectedFileNamePlacement === 'inside') {
+        // Print the fileName inside
+        $(this).siblings('span').html(fileName);
+        $(this).attr('title', fileName);
+      } else {
+        // Print the fileName aside (right after the the button)
+        $(this).parent().after('<span class="file-input-name">'+fileName+'</span>');
+      }
+    });
+
+  });
 
-});
+};
 
 // Add the styles before the first stylesheet
 // This ensures they can be easily overridden with developer styles
@@ -103,4 +139,4 @@ var cssHtml = '<style>'+
   '</style>';
 $('link[rel=stylesheet]').eq(0).before(cssHtml);
 
-});
+})(jQuery);

metadata

@@ -1,55 +1,61 @@
 --- !ruby/object:Gem::Specification
 name: bootstrap_file_input_rails
 version: !ruby/object:Gem::Version
-  version: 0.0.2
+  version: 1.0.0
 platform: ruby
 authors:
 - Adrien Siami
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2013-06-07 00:00:00.000000000 Z
+date: 2018-03-20 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: railties
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - '>='
+    - - ">="
       - !ruby/object:Gem::Version
         version: '3.1'
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '6'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - '>='
+    - - ">="
       - !ruby/object:Gem::Version
         version: '3.1'
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '6'
 - !ruby/object:Gem::Dependency
   name: bundler
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - ~>
+    - - "~>"
       - !ruby/object:Gem::Version
         version: '1.3'
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - ~>
+    - - "~>"
       - !ruby/object:Gem::Version
         version: '1.3'
 - !ruby/object:Gem::Dependency
   name: rake
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - '>='
+    - - ">="
       - !ruby/object:Gem::Version
         version: '0'
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - '>='
+    - - ">="
       - !ruby/object:Gem::Version
         version: '0'
 description: 'A gem for the bootstrap plugin : bootstrap-file-input'
@@ -59,7 +65,7 @@ executables: []
 extensions: []
 extra_rdoc_files: []
 files:
-- .gitignore
+- ".gitignore"
 - Gemfile
 - LICENSE.txt
 - README.md
@@ -78,19 +84,18 @@ require_paths:
 - lib
 required_ruby_version: !ruby/object:Gem::Requirement
   requirements:
-  - - '>='
+  - - ">="
     - !ruby/object:Gem::Version
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - '>='
+  - - ">="
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 2.0.0
+rubygems_version: 2.7.6
 signing_key: 
 specification_version: 4
 summary: 'A gem for the bootstrap plugin : bootstrap-file-input'
 test_files: []
-has_rdoc: