Updates to release v4.4.5 fixes #1086 fixes #1087

kartik-v · Sep 24, 2017 · 3bcc551 · 3bcc551
1 parent a7c9501
commit 3bcc551
Show file tree

Hide file tree

Showing 66 changed files with 922 additions and 451 deletions.
diff --git a/CHANGE.md b/CHANGE.md
@@ -1,6 +1,15 @@
 Change Log: `bootstrap-fileinput`
 =================================
 
+## version 4.4.5 (_under development_)
+
+**Date:** 24-Sep-2017
+
+- (enh #1087): Enhance SCSS/SASS styling configurations.
+- (enh #1086): New placeholder property and various caption rendering enhancements.
+- (enh #1085): Update Slovak Translations.
+- (enh #1084): Update Czech Translations.
+
 ## version 4.4.4
 
 **Date:** 21-Sep-2017

diff --git a/README.md b/README.md
@@ -27,7 +27,7 @@ View the [plugin documentation](http://plugins.krajee.com/file-input) and [plugi
 4. With release 4.0, AJAX uploads are supported. AJAX uploads require that the browser support HTML5 FormData and XHR2 (XMLHttpRequest 2). Most modern browsers support FormData and XHR2. The plugin will automatically degrade to normal form based submission for browsers not supporting AJAX uploads
 
 > NOTE: 
-> - The latest version of the plugin is v4.4.4. Bootstrap 4.x is supported in addition to Bootstrap 3.x since release v4.4.4. Refer the [CHANGE LOG](https://github.com/kartik-v/bootstrap-fileinput/blob/master/CHANGE.md) for details. 
+> - The latest version of the plugin is v4.4.5. Bootstrap 4.x is supported in addition to Bootstrap 3.x since release v4.4.4. Refer the [CHANGE LOG](https://github.com/kartik-v/bootstrap-fileinput/blob/master/CHANGE.md) for details. 
 > - You can use the [sass branch](https://github.com/kartik-v/bootstrap-fileinput/tree/sass) for installation using `bootstrap-sass` dependency.
 The [master branch](https://github.com/kartik-v/bootstrap-fileinput/tree/master) can be used for installation using plain `bootstrap` dependency.
 

diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
     "name": "bootstrap-fileinput",
-    "version": "4.4.4",
+    "version": "4.4.5",
     "homepage": "https://github.com/kartik-v/bootstrap-fileinput",
     "authors": [
         "Kartik Visweswaran <kartikv2@gmail.com>"

diff --git a/css/fileinput-rtl.css b/css/fileinput-rtl.css
@@ -1,5 +1,5 @@
 /*!
- * bootstrap-fileinput v4.4.4
+ * bootstrap-fileinput v4.4.5
  * http://plugins.krajee.com/file-input
  *
  * Krajee RTL (Right To Left) default styling for bootstrap-fileinput.
@@ -19,6 +19,21 @@
     margin-right: 3px;
 }
 
+.kv-rtl .file-caption-icon {
+    left: auto;
+    right: 10px;
+    margin: 0 0 0 10px;
+}
+
+.kv-rtl .file-caption.icon-visible .file-caption-name {
+    padding-left: 0;
+    padding-right: 30px;
+}
+
+.kv-rtl .file-caption.icon-visible .input-group-lg .file-caption-name {
+    padding-right: 34px;
+}
+
 .kv-rtl .close {
     float: left;
 }

diff --git a/css/fileinput-rtl.min.css b/css/fileinput-rtl.min.css
diff --git a/css/fileinput.css b/css/fileinput.css
@@ -1,5 +1,5 @@
 /*!
- * bootstrap-fileinput v4.4.4
+ * bootstrap-fileinput v4.4.5
  * http://plugins.krajee.com/file-input
  *
  * Krajee default styling for bootstrap-fileinput.
@@ -90,15 +90,34 @@ input[type=file].file-loading, .file-loading input[type=file] {
     display: block;
 }
 
-.file-caption-name {
+.file-caption {
+    position: relative;
+}
+
+.file-caption-icon {
+    display: none;
+    position: absolute;
+    top: 24%;
+    left: 10px;
+    z-index: 10;
+    margin-right: 10px;
+}
+
+.file-caption.icon-visible .file-caption-icon {
     display: inline-block;
-    overflow: hidden;
-    height: 20px;
-    word-break: break-all;
 }
 
-.input-group-lg .file-caption-name {
-    height: 25px;
+.file-caption-icon.icon-lg {
+    font-size: 1.2em;
+    margin-right: 12px;
+}
+
+.file-caption.icon-visible .file-caption-name {
+    padding-left: 30px;
+}
+
+.file-caption.icon-visible .input-group-lg .file-caption-name {
+    padding-left: 34px;
 }
 
 .file-error-message {
@@ -546,6 +565,7 @@ input[type=file].file-loading, .file-loading input[type=file] {
     text-overflow: ellipsis;
 }
 
+
 @media screen and (max-width: 767px) {
     .file-preview-thumbnails {
         display: flex;

diff --git a/css/fileinput.min.css b/css/fileinput.min.css
diff --git a/examples/index.html b/examples/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<!-- release v4.4.4, copyright 2014 - 2017 Kartik Visweswaran -->
+<!-- release v4.4.5, copyright 2014 - 2017 Kartik Visweswaran -->
 <!--suppress JSUnresolvedLibraryURL -->
 <html lang="en">
 <head>

diff --git a/js/fileinput.js b/js/fileinput.js
@@ -1,5 +1,5 @@
 /*!
- * bootstrap-fileinput v4.4.4
+ * bootstrap-fileinput v4.4.5
  * http://plugins.krajee.com/file-input
  *
  * Author: Kartik Visweswaran
@@ -374,7 +374,7 @@
             self.cancelling = false;
         },
         _init: function (options, refreshMode) {
-            var self = this, $el = self.$element, $cont, t, tmp;
+            var self = this, f, $el = self.$element, $cont, t, tmp;
             self.options = options;
             $.each(options, function (key, value) {
                 switch (key) {
@@ -445,11 +445,22 @@
             self.$btnUpload = $cont.find('.fileinput-upload');
             self.$captionContainer = $h.getElement(options, 'elCaptionContainer', $cont.find('.file-caption'));
             self.$caption = $h.getElement(options, 'elCaptionText', $cont.find('.file-caption-name'));
+            if (!$h.isEmpty(self.msgPlaceholder)) {
+                f = $el.attr('multiple') ? self.filePlural : self.fileSingle;
+                self.$caption.attr('placeholder', self.msgPlaceholder.replace('{files}', f));
+            }
+            self.$captionIcon = self.$captionContainer.find('.file-caption-icon');
+            if (self.mainClass.indexOf('input-group-lg') > -1) {
+                $h.addCss(self.$captionIcon, 'icon-lg');
+            } else {
+                self.$captionIcon.removeClass('icon-lg');
+            }
             self.$previewContainer = $h.getElement(options, 'elPreviewContainer', $cont.find('.file-preview'));
             self.$preview = $h.getElement(options, 'elPreviewImage', $cont.find('.file-preview-thumbnails'));
             self.$previewStatus = $h.getElement(options, 'elPreviewStatus', $cont.find('.file-preview-status'));
             self.$errorContainer = $h.getElement(options, 'elErrorContainer',
                 self.$previewContainer.find('.kv-fileinput-error'));
+            self._validateDisabled();
             if (!$h.isEmpty(self.msgErrorClass)) {
                 $h.addCss(self.$errorContainer, self.msgErrorClass);
             }
@@ -480,14 +491,17 @@
                 tText, tVideo, tAudio, tFlash, tObject, tPdf, tOther, tZoomCache, vDefaultDim;
             tMain1 = '{preview}\n' +
                 '<div class="kv-upload-progress kv-hidden"></div><div class="clearfix"></div>\n' +
-                '<div class="input-group {class}">\n' +
-                '   {caption}\n' +
-                '   <div class="input-group-btn">\n' +
-                '       {remove}\n' +
-                '       {cancel}\n' +
-                '       {upload}\n' +
-                '       {browse}\n' +
-                '   </div>\n' +
+                '<div class="file-caption">\n' +
+                '  <span class="file-caption-icon"></span>\n' +
+                '  <div class="input-group {class}">\n' +
+                '    {caption}\n' +
+                '    <div class="input-group-btn">\n' +
+                '      {remove}\n' +
+                '      {cancel}\n' +
+                '      {upload}\n' +
+                '      {browse}\n' +
+                '    </div>\n' +
+                '  </div>\n' +
                 '</div>';
             tMain2 = '{preview}\n<div class="kv-upload-progress kv-hidden"></div>\n<div class="clearfix"></div>\n{remove}\n{cancel}\n{upload}\n{browse}\n';
             tPreview = '<div class="file-preview {class}">\n' +
@@ -501,10 +515,8 @@
                 '    </div>\n' +
                 '</div>';
             tClose = '<button type="button" class="close fileinput-remove">&times;</button>\n';
-            tFileIcon = '<i class="glyphicon glyphicon-file kv-caption-icon"></i>';
-            tCaption = '<div tabindex="500" class="form-control file-caption {class}">\n' +
-                '   <div class="file-caption-name"></div>\n' +
-                '</div>\n';
+            tFileIcon = '<i class="glyphicon glyphicon-file"></i>';
+            tCaption = '<input class="form-control file-caption-name {class}" onkeydown="return false;" onpaste="return false;">';
             //noinspection HtmlUnknownAttribute
             tBtnDefault = '<button type="{type}" tabindex="500" title="{title}" class="{css}" ' +
                 '{status}>{icon} {label}</button>';
@@ -996,10 +1008,17 @@
                 });
             }
         },
+        _setValidationError: function(css) {
+            var self = this;
+            css = (css ? css + ' ' : '') + 'has-error';
+            self.$container.removeClass(css).addClass('has-error');
+            $h.addCss(self.$caption, 'is-invalid');
+        },
         _resetErrors: function (fade) {
             var self = this, $error = self.$errorContainer;
             self.isError = false;
             self.$container.removeClass('has-error');
+            self.$caption.removeClass('is-invalid');
             $error.html('');
             if (fade) {
                 $error.fadeOut('slow');
@@ -1014,7 +1033,7 @@
             }
             msg = self.msgFoldersNotAllowed.replace('{n}', folders);
             self._addError(msg);
-            $h.addCss(self.$container, 'has-error');
+            self._setValidationError();
             $error.fadeIn(800);
             self._raise('filefoldererror', [folders, msg]);
         },
@@ -1028,8 +1047,7 @@
             }
             $error.fadeIn(800);
             self._raise(ev, [params, msg]);
-            self.$container.removeClass('file-input-new');
-            $h.addCss(self.$container, 'has-error');
+            self._setValidationError('file-input-new');
             return true;
         },
         _showError: function (msg, params, event) {
@@ -1042,8 +1060,7 @@
             if (!self.isAjaxUpload) {
                 self._clearFileInput();
             }
-            self.$container.removeClass('file-input-new');
-            $h.addCss(self.$container, 'has-error');
+            self._setValidationError('file-input-new');
             self.$btnUpload.attr('disabled', true);
             return true;
         },
@@ -1057,7 +1074,7 @@
             $error.fadeIn(800);
             self._raise('fileerror', [params, msg]);
             self._clearFileInput();
-            $h.addCss(self.$container, 'has-error');
+            self._setValidationError();
         },
         _parseError: function (operation, jqXHR, errorThrown, fileName) {
             /** @namespace jqXHR.responseJSON */
@@ -2498,12 +2515,14 @@
             });
         },
         _hideFileIcon: function () {
-            if (this.overwriteInitial) {
-                this.$captionContainer.find('.kv-caption-icon').hide();
+            var self = this;
+            if (self.overwriteInitial) {
+                self.$captionContainer.removeClass('icon-visible');
             }
         },
         _showFileIcon: function () {
-            this.$captionContainer.find('.kv-caption-icon').show();
+            var self = this;
+            $h.addCss(self.$captionContainer, 'icon-visible');
         },
         _getSize: function (bytes) {
             var self = this, size = parseFloat(bytes), i, func = self.fileSizeGetter, sizes, out;
@@ -2875,7 +2894,7 @@
             if (self.isError) {
                 self.$previewContainer.removeClass('file-thumb-loading');
                 self.$previewStatus.html('');
-                self.$captionContainer.find('.kv-caption-icon').hide();
+                self.$captionContainer.removeClass('icon-visible');
             } else {
                 self._showFileIcon();
             }
@@ -3189,17 +3208,18 @@
         _initCaption: function () {
             var self = this, cap = self.initialCaption || '';
             if (self.overwriteInitial || $h.isEmpty(cap)) {
-                self.$caption.html('');
+                self.$caption.val('');
                 return false;
             }
             self._setCaption(cap);
             return true;
         },
         _setCaption: function (content, isError) {
-            var self = this, title, out, n, cap, stack = self.getFileStack();
+            var self = this, title, out, icon, n, cap, stack = self.getFileStack();
             if (!self.$caption.length) {
                 return;
             }
+            self.$captionContainer.removeClass('icon-visible');
             if (isError) {
                 title = $('<div>' + self.msgValidationError + '</div>').text();
                 n = stack.length;
@@ -3208,18 +3228,19 @@
                 } else {
                     cap = self._getMsgSelected(self.msgNo);
                 }
-                out = '<span class="' + self.msgValidationErrorClass + '">' + self.msgValidationErrorIcon +
-                    ($h.isEmpty(content) ? cap : content) + '</span>';
+                out = $h.isEmpty(content) ? cap : content;
+                icon = '<span class="' + self.msgValidationErrorClass + '">' + self.msgValidationErrorIcon + '</span>';
             } else {
                 if ($h.isEmpty(content)) {
                     return;
                 }
                 title = $('<div>' + content + '</div>').text();
-                out = self._getLayoutTemplate('fileIcon') + title;
+                out = title;
+                icon = self._getLayoutTemplate('fileIcon');
             }
-            self.$caption.html(out);
-            self.$caption.attr('title', title);
-            self.$captionContainer.find('.file-caption-ellipsis').attr('title', title);
+            self.$captionContainer.addClass('icon-visible');
+            self.$caption.attr('title', title).val(out);
+            self.$captionIcon.html(icon);
         },
         _createContainer: function () {
             var self = this, attribs = {"class": 'file-input file-input-new' + (self.rtl ? ' kv-rtl' : '')},
@@ -3236,6 +3257,13 @@
             $container.before(self.$element);
             $container.html(self._renderMain());
             self._initBrowse($container);
+            self._validateDisabled();
+        },
+        _validateDisabled: function() {
+            var self = this;
+            if (self.isDisabled && self.$caption && self.$caption.length) {
+                self.$caption.attr('readonly', true);
+            }
         },
         _renderMain: function () {
             var self = this,
@@ -3478,7 +3506,7 @@
                     n = (self.autoReplace && len > self.maxFileCount) ? len : total;
                     msg = self.msgFilesTooMany.replace('{m}', self.maxFileCount).replace('{n}', n);
                     self.isError = throwError(msg, null, null, null);
-                    self.$captionContainer.find('.kv-caption-icon').hide();
+                    self.$captionContainer.removeClass('icon-visible');
                     self._setCaption('', true);
                     self.$container.removeClass('file-input-new file-input-ajax-new');
                     return;
@@ -3665,14 +3693,13 @@
                 }
                 self.$preview.html('');
                 cap = (!self.overwriteInitial && self.initialCaption.length > 0) ? self.initialCaption : '';
-                self.$caption.html(cap);
-                self.$caption.attr('title', '');
+                self.$caption.attr('title', '').val(cap);
                 $h.addCss(self.$container, 'file-input-new');
                 self._validateDefaultPreview();
             }
             if (self.$container.find($h.FRAMES).length === 0) {
                 if (!self._initCaption()) {
-                    self.$captionContainer.find('.kv-caption-icon').hide();
+                    self.$captionContainer.removeClass('icon-visible');
                 }
             }
             self._hideFileIcon();
@@ -4004,6 +4031,7 @@
         msgNo: 'No',
         msgNoFilesSelected: 'No files selected',
         msgCancelled: 'Cancelled',
+        msgPlaceholder: 'Select {files}...',
         msgZoomModalHeading: 'Detailed Preview',
         msgFileRequired: 'You must select a file to upload.',
         msgSizeTooSmall: 'File "{name}" (<b>{size} KB</b>) is too small and must be larger than <b>{minSize} KB</b>.',