Upgrade to release v2.8.0

kartik-v · Nov 13, 2014 · 19f3b50 · 19f3b50
1 parent 744680b
commit 19f3b50
Show file tree

Hide file tree

Showing 10 changed files with 99 additions and 24 deletions.
diff --git a/CHANGE.md b/CHANGE.md
@@ -1,10 +1,20 @@
+version 2.8.0
+=============
+**Date:** 13-Nov-2014
+
+1. (enh #50): Dynamically auto size file captions for long file names exceeding container width. New property `autoFitCaption` 
+   is added which defaults to `true`. When this is `true` the plugin will auto fit caption text within the container dynamically
+   and responsively based on window size.
+2. (enh #51): Autosize preview images when they exceed the size of the preview container.
+3. (enh #52): Raise new `fileimageloaded` event.
+
 version 2.7.0
 =============
 **Date:** 11-Nov-2014
 
 1. Set release to stable in composer.json.
-2. enh #48: Trigger `fileloaded` event when `showPreview` is `false`.
-3. enh #49: Set image preview dimensions to auto fit and center
+2. (enh #48): Trigger `fileloaded` event when `showPreview` is `false`.
+3. (enh #49): Set image preview dimensions to auto fit and center
 
 version 2.6.0
 =============

diff --git a/README.md b/README.md
@@ -7,7 +7,7 @@ wide variety of files i.e. images, text, html, video, audio, flash, and objects.
 
 ![File Input Screenshot](https://lh3.googleusercontent.com/-3FiEmc_okc4/VBw_d2LBAJI/AAAAAAAAAL8/KbVj5X9Dus0/w596-h454-no/FileInput.jpg)
 
-> NOTE: The latest version of the plugin v2.7.0 has been released. Refer the [CHANGE LOG](https://github.com/kartik-v/bootstrap-fileinput/blob/master/CHANGE.md) for details.
+> NOTE: The latest version of the plugin v2.8.0 has been released. Refer the [CHANGE LOG](https://github.com/kartik-v/bootstrap-fileinput/blob/master/CHANGE.md) for details.
 
 ## Features  
 
@@ -45,6 +45,11 @@ backward compatibility (BC) for older versions that use custom templates.
 
 The following are the major changes with release v2.4.0:
 
+- Dynamically auto size the file captions for long file names exceeding container width. New property `autoFitCaption` 
+  is added which defaults to `true`. When this is `true` the plugin will auto fit caption text within the container dynamically
+  and responsively based on window size.
+- Raise new `fileimageuploaded` event that fires after image is completely loaded on the preview container.
+- Autosize preview images when they exceed the size of the preview container.
 - Completely templatized and extensible to allow configuration of the file-input the way the developer wants.
 - Plugin has been revamped to build preview intelligence based on various file preview types. The inbuilt file support types are categorized as 
   `image`, `text`, `html`, `video`,  `audio`, `flash`, `object`, and `other`.
@@ -152,6 +157,9 @@ _boolean_ whether to display the file remove/clear button. Defaults to `true`.
 #### showUpload
 _boolean_ whether to display the file upload button. Defaults to `true`. This will default to a form submit button, unless the uploadUrl is specified.
 
+#### autoFitCaption
+_boolean_ whether to automatically size the file caption text to fit the container for long file names overflowing the container. Defaults to `true`. When set to true, the caption text will be dynamically sized. Shrunk file names will be appended with ellipsis, and the complete filename will be displayed as a title on hover.
+
 #### captionClass
 _string_ any additional CSS class to append to the caption container.
 
@@ -702,6 +710,19 @@ $('#input-id').on('filereset', function(event) {
 });
 ```
 
+#### fileimageloaded
+This event is triggered when each file image is fully loaded in the preview window. This is only applicable for image file previews and if `showPreview` is set to true. Additional parameters available are: 
+
+- `previewId`: the identifier for the preview file container.
+
+
+**Example:**
+```js
+$('#input-id').on('filereset', function(event, file, previewId, index) {
+    console.log("filereset");
+});
+```
+
 ### Plugin Methods
 The plugin supports these methods:
 

diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
     "name": "bootstrap-fileinput",
-    "version": "2.7.0",
+    "version": "2.8.0",
     "homepage": "https://github.com/kartik-v/bootstrap-fileinput",
     "authors": [
         "Kartik Visweswaran <[email protected]>"

diff --git a/css/fileinput.css b/css/fileinput.css
@@ -1,7 +1,7 @@
 /*!
  * @copyright Copyright &copy; Kartik Visweswaran, Krajee.com, 2014
  * @package bootstrap-fileinput
- * @version 2.7.0
+ * @version 2.8.0
  *
  * File input styling for Bootstrap 3.0
  * Built for Yii Framework 2.0
@@ -53,12 +53,11 @@
 
 .file-caption-name {
     display: inline-block;
-    float: left;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
-    width: 85%;
 }
+
 .file-error-message {
     background-color: #f2dede;
     color: #a94442;

diff --git a/css/fileinput.min.css b/css/fileinput.min.css
diff --git a/...ileinput plugin can autosize the file caption displayed across device sizes.jpg b/...ileinput plugin can autosize the file caption displayed across device sizes.jpg
diff --git a/examples/index.html b/examples/index.html
@@ -18,7 +18,7 @@ <h1>Bootstrap File Input Example</h1>
                     <input id="file-1" type="file" multiple=true data-preview-file-type="any">
                 </div>
                 <div class="form-group">
-                    <input id="file-1a" type="file" multiple=true class="file" data-preview-file-type="any" data-initial-caption="Kartik" data-overwrite-initial="false">
+                    <input id="file-1a" type="file" multiple=true class="file" data-show-upload="false" data-preview-file-type="any" data-initial-caption="Kartik" data-overwrite-initial="false">
                 </div>
                 <div class="form-group">
                     <input id="file-2" type="file" class="file" readonly=true data-show-upload="false">

diff --git a/examples/large-width-image.jpg b/examples/large-width-image.jpg
diff --git a/js/fileinput.js b/js/fileinput.js
@@ -1,6 +1,6 @@
 /*!
  * @copyright Copyright &copy; Kartik Visweswaran, Krajee.com, 2014
- * @version 2.7.0
+ * @version 2.8.0
  *
  * File input styled for Bootstrap 3.0 that utilizes HTML5 File Input's advanced 
  * features including the FileReader API. 
@@ -45,8 +45,9 @@
             '   <div class="file-preview-status text-center text-success"></div>\n' +
             '   <div class="kv-fileinput-error"></div>\n' +
             '</div>',
+        icon: '<span class="glyphicon glyphicon-file kv-caption-icon"></span>', 
         caption: '<div tabindex="-1" class="form-control file-caption {class}">\n' +
-            '   <span class="glyphicon glyphicon-file kv-caption-icon"></span><div class="file-caption-name"></div>\n' +
+            '   <div class="file-caption-name"></div>\n' +
             '</div>',
         modal: '<div id="{id}" class="modal fade">\n' +
             '  <div class="modal-dialog modal-lg">\n' +
@@ -108,7 +109,7 @@
             '</div>',
     };
     var defaultPreviewSettings = {
-        image: {width: "100%", height: "160px"},
+        image: {width: "auto", height: "160px"},
         html: {width: "320px", height: "180px"},
         text: {width: "160px", height: "160px"},
         video: {width: "320px", height: "240px"},
@@ -192,6 +193,7 @@
             self.reader = null;
             self.showCaption = options.showCaption;
             self.showPreview = options.showPreview;
+            self.autoFitCaption = options.autoFitCaption;
             self.maxFileSize = options.maxFileSize;
             self.maxFileCount = options.maxFileCount;
             self.msgSizeTooLarge = options.msgSizeTooLarge;
@@ -270,6 +272,7 @@
                 caption: self.$caption.html()
             };
             self.options = options;
+            self.autoSizeCaption();
             self.$element.removeClass('file-loading');
         },
         getLayoutTemplate: function(t) {
@@ -283,6 +286,11 @@
         listen: function () {
             var self = this, $el = self.$element, $cap = self.$captionContainer, $btnFile = self.$btnFile;
             $el.on('change', $.proxy(self.change, self));
+            $(window).on('resize', function() {
+                setTimeout(function() {
+                    self.autoSizeCaption();
+                }, 100);  
+            });
             $btnFile.on('click', function (ev) {
                 self.clear(false);
                 $cap.focus();
@@ -298,8 +306,7 @@
         initPreview: function () {
             var self = this, html = '', content = self.initialPreview, len = self.initialPreviewCount,
                 cap = self.initialCaption.length, previewId = "preview-" + uniqId(),
-                caption = (cap > 0) ? self.initialCaption : self.msgSelected.replace(/\{n\}/g, len),
-                title = $(caption).text();
+                caption = (cap > 0) ? self.initialCaption : self.msgSelected.replace(/\{n\}/g, len);
             if (isArray(content) && len > 0) {
                 for (var i = 0; i < len; i++) {
                     previewId += '-' + i;
@@ -322,8 +329,7 @@
                     }
                 } else {
                     if (cap > 0) {
-                        self.$caption.html(caption);
-                        self.$captionContainer.attr('title', title);
+                        self.setCaption(caption);
                         return;
                     } else {
                         return;
@@ -332,8 +338,7 @@
             }
             self.initialPreviewContent = html;
             self.$preview.html(html);
-            self.$caption.html(caption);
-            self.$captionContainer.attr('title', title);
+            self.setCaption(caption);
             self.$container.removeClass('file-input-new');
         },
         clearObjects: function() {
@@ -378,6 +383,7 @@
             if (self.reader instanceof FileReader) {
                 self.reader.abort();
             }
+            self.autoSizeCaption();
             self.clearFileInput();
             self.resetErrors(true);
 
@@ -399,7 +405,7 @@
                 var cap = (!self.overwriteInitial && self.initialCaption.length > 0) ?
                     self.original.caption : '';
                 self.$caption.html(cap);
-                self.$captionContainer.attr('title', '');
+                self.$caption.attr('title', '');
                 self.$container.removeClass('file-input-new').addClass('file-input-new');
             }
             self.hideFileIcon();
@@ -532,6 +538,7 @@
                         .replace(/\{width\}/g, config.width).replace(/\{height\}/g, config.height);
                 }
                 $preview.append("\n" + content);
+                self.autoSizeImage(previewId);
             } else {
                 self.previewDefault(file, previewId);
             }
@@ -640,6 +647,44 @@
         slug: function (text) {
             return isEmpty(text) ? '' : text.split(/(\\|\/)/g).pop().replace(/[^\w-.\\\/ ]+/g,'');
         },
+        setCaption: function(content) {
+            var self = this, title = $('<div>' + content + '</div>').text(),
+                icon = self.layoutTemplates['icon'], 
+                out = icon + title;
+            if (self.$caption.length == 0) {
+                return;
+            }
+            self.$caption.html(out);
+            self.$caption.attr('title', title);
+            self.autoSizeCaption();
+        },
+        autoSizeImage: function(previewId) {
+            var self = this, $preview = self.$preview, 
+                $thumb = $preview.find("#" + previewId), 
+                $img = $thumb.find('img');
+            if (!$img.length) {
+                return;
+            }
+            $img.on('load', function() {
+                var w1 = $thumb.width(), w2 = $preview.width();
+                if (w1 > w2) {
+                    $img.css('width', '100%');
+                    $thumb.css('width', '97%');
+                }
+                self.$element.trigger('fileimageloaded', previewId);
+            });
+        },
+        autoSizeCaption: function() {
+            var self = this;
+            if (self.$caption.length == 0 || !self.autoFitCaption) {
+                return;
+            }
+            self.$caption.css('width', 0);
+            setTimeout(function() {
+                var w = self.$captionContainer.width();
+                self.$caption.css('width', 0.98 * w);
+            }, 100);
+        },
         change: function (e) {
             var self = this, $el = self.$element, label = self.slug($el.val()),
                 total = 0, $preview = self.$preview, files = $el.get(0).files, msgSelected = self.msgSelected,
@@ -678,8 +723,7 @@
             } else {
                 self.showFileIcon();
             }
-            self.$caption.html(log);
-            self.$captionContainer.attr('title', $(log).text());
+            self.setCaption(log);
             self.$container.removeClass('file-input-new');
             $el.trigger('fileselect', [numFiles, label]);
         },
@@ -776,6 +820,7 @@
         showPreview: true,
         showRemove: true,
         showUpload: true,
+        autoFitCaption: true, 
         mainClass: '',
         previewClass: '',
         captionClass: '',

diff --git a/js/fileinput.min.js b/js/fileinput.min.js