Fix #119: Enhance caption to include ellipsis for long file names

CHANGE.md

@@ -12,6 +12,7 @@ version 4.1.5
 8. (bug #114): Prevent multiple file selection when using single file configuration.
 9. (enh #115): Autosize file caption responsively on window resize.
 10. (enh #116): Hide remove and upload buttons until unless file(s) are selected.
+11. (enh #119): Enhance caption to include ellipsis for long file names
 
 version 4.1.4
 =============

README.md

@@ -36,9 +36,7 @@ The plugin incorporates a simple HTML markup with enhanced CSS styling of a HTML
 11. Upload action defaults to form submit. Supports an upload route/server action parameter for custom ajax based upload.
 12. Triggers JQuery events for advanced development. Events currently available are `filereset`, `fileclear`, `filecleared`, `fileloaded`, and `fileerror`.
 13. Disabled and readonly file input support.
-14. 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.
+14. Dynamically auto size the file captions for long file names exceeding container width. 
 15. Raise new `fileimageuploaded` event that fires after image is completely loaded on the preview container.
 16. Autosize preview images when they exceed the size of the preview container.
 17. Completely templatized and extensible to allow configuration of the file-input the way the developer wants.
@@ -156,9 +154,6 @@ _boolean_ whether to display the file upload button. Defaults to `true`. This wi
 #### showCancel
 _boolean_ whether to display the file upload cancel button. Defaults to `true`. This will be only enabled and displayed when an AJAX upload is in process.
 
-#### 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.
 

css/fileinput.css

@@ -55,6 +55,17 @@
     display: inline-block;
     overflow: hidden;
     max-height: 20px;
+    padding-right: 10px;
+}
+
+.file-caption-ellipsis {
+    position: absolute;
+    right: 10px;
+    margin-top: -6px;
+    font-size: 1.2em;
+    display: none;
+    font-weight: bold;
+    cursor: default;
 }
 
 .kv-search-container .kv-search-clear {

js/fileinput.js

@@ -89,6 +89,7 @@
         '</div>',
         icon: '<span class="glyphicon glyphicon-file kv-caption-icon"></span>',
         caption: '<div tabindex="-1" class="form-control file-caption {class}">\n' +
+        '   <span class="file-caption-ellipsis">&hellip;</span>\n' +
         '   <div class="file-caption-name"></div>\n' +
         '</div>',
         modal: '<div id="{id}" class="modal fade">\n' +
@@ -313,6 +314,7 @@
             self.uploadCount = 0;
             self.uploadPercent = 0;
             self.$element.removeClass('file-loading');
+            self.setEllipsis();
         },
         raise: function(event) {
             var self = this;
@@ -343,9 +345,23 @@
                 jqXHR: jqXHR
             };
         },
+        setEllipsis: function() {
+            var self = this, $ellipsis = self.$captionContainer.find('.file-caption-ellipsis'), $cap = self.$caption,
+                $div = $cap.clone().css('height', 'auto').hide();
+            self.$captionContainer.parent().before($div);
+            if ($div.outerWidth() > $cap.outerWidth()) {
+               $ellipsis.show();
+            } else {
+               $ellipsis.hide();
+            }
+            $div.remove();
+        },
         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() {
+                self.setEllipsis();
+            });
             $btnFile.off('click').on('click', function (ev) {
                 self.raise('filebrowse');
                 if (self.isError && !self.isUploadable) {
@@ -775,6 +791,7 @@
                 self.showFileIcon();
                 self.$preview.html(self.original.preview);
                 self.$caption.html(self.original.caption);
+                self.setEllipsis();
                 self.initPreviewDeletes();
                 self.$container.removeClass('file-input-new');
             } else {
@@ -785,6 +802,7 @@
                 var cap = (!self.overwriteInitial && self.initialCaption.length > 0) ?
                     self.original.caption : '';
                 self.$caption.html(cap);
+                self.setEllipsis();
                 self.$caption.attr('title', '');
                 addCss(self.$container, 'file-input-new');
             }
@@ -792,6 +810,7 @@
                 self.initialCaption = '';
                 self.original.caption = '';
                 self.$caption.html('');
+                self.setEllipsis();
                 self.$captionContainer.find('.kv-caption-icon').hide();
             }
             self.hideFileIcon();
@@ -804,6 +823,7 @@
             self.clear(false);
             self.$preview.html(self.original.preview);
             self.$caption.html(self.original.caption);
+            self.setEllipsis();
             self.$container.find('.fileinput-filename').text('');
             self.raise('filereset');
             if (self.initialPreview.length > 0) {
@@ -1419,6 +1439,7 @@
                 self.isError = throwError(msg, null, null, null);
                 self.$captionContainer.find('.kv-caption-icon').hide();
                 self.$caption.html(self.msgValidationError);
+                self.setEllipsis();
                 self.$container.removeClass('file-input-new file-input-ajax-new');
                 return;
             }
@@ -1459,6 +1480,8 @@
             }
             self.$caption.html(out);
             self.$caption.attr('title', title);
+            self.$captionContainer.find('.file-caption-ellipsis').attr('title', title);
+            self.setEllipsis();
         },
         initBrowse: function ($container) {
             var self = this;
@@ -1565,7 +1588,6 @@
         showRemove: true,
         showUpload: true,
         showCancel: true,
-        autoFitCaption: true,
         mainClass: '',
         previewClass: '',
         captionClass: '',