Fix #1226: Enhance native input display styling when showBrowse is …

…`false`
kartik-v · Apr 23, 2018 · 6de4fbd · 6de4fbd · wowpages · Apr 23, 2018
1 parent 8eef362
commit 6de4fbd
Show file tree

Hide file tree

Showing 9 changed files with 76 additions and 35 deletions.
diff --git a/CHANGE.md b/CHANGE.md
@@ -5,6 +5,7 @@ Change Log: `bootstrap-fileinput`
 
 **Date:** _work in process_
 
+- (bug #1226): Enhance native input display styling when `showBrowse` is `false`.
 - (enh #1223): Update Font Awesome 5.x theme icons.
 
 ## version 4.4.8

diff --git a/css/fileinput-rtl.css b/css/fileinput-rtl.css
@@ -94,8 +94,8 @@
 }
 
 .kv-rtl .btn-file input[type=file] {
-    right: auto;
-    left: 0;
+    left: auto;
+    right: 0;
     text-align: left;
     background: none repeat scroll 100% 0 transparent;
 }
diff --git a/css/fileinput-rtl.min.css b/css/fileinput-rtl.min.css
diff --git a/css/fileinput.css b/css/fileinput.css
@@ -15,6 +15,20 @@
     height: 0;
 }
 
+.file-no-browse {
+    position: absolute;
+    left: 50%;
+    bottom: 20%;
+    width: 1px;
+    height: 1px;
+    font-size: 0;
+    opacity: 0;
+    border: none;
+    background: none;
+    outline: none;
+    box-shadow: none;
+}
+
 .kv-hidden, .file-caption-icon, .file-zoom-dialog .modal-header:before, .file-zoom-dialog .modal-header:after, .file-input-new .file-preview, .file-input-new .close, .file-input-new .glyphicon-file, .file-input-new .fileinput-remove-button, .file-input-new .fileinput-upload-button, .file-input-new .no-browse .input-group-btn, .file-input-ajax-new .fileinput-remove-button, .file-input-ajax-new .fileinput-upload-button, .file-input-ajax-new .no-browse .input-group-btn, .hide-content .kv-file-content {
     display: none;
 }
@@ -23,7 +37,7 @@
     position: absolute;
 }
 
-.file-loading:before, .btn-file, .file-caption, .file-preview, .krajee-default.file-preview-frame, .krajee-default .file-thumbnail-footer, .file-zoom-dialog .modal-dialog {
+.file-input, .file-loading:before, .btn-file, .file-caption, .file-preview, .krajee-default.file-preview-frame, .krajee-default .file-thumbnail-footer, .file-zoom-dialog .modal-dialog {
     position: relative;
 }
 
@@ -122,7 +136,7 @@
 
 .btn-file input[type=file] {
     top: 0;
-    right: 0;
+    left: 0;
     min-width: 100%;
     min-height: 100%;
     text-align: right;

diff --git a/css/fileinput.min.css b/css/fileinput.min.css
diff --git a/js/fileinput.js b/js/fileinput.js
@@ -1388,6 +1388,15 @@
         },
         _listen: function () {
             var self = this, $el = self.$element, $form = self.$form, $cont = self.$container, fullScreenEvents;
+            self._handler($el, 'click', function(e) {
+                if ($el.hasClass('file-no-browse')) {
+                    if ($el.data('zoneClicked')) {
+                        $el.data('zoneClicked', false);
+                    } else {
+                        e.preventDefault();
+                    }
+                }
+            });
             self._handler($el, 'change', $.proxy(self._change, self));
             if (self.showBrowse) {
                 self._handler(self.$btnFile, 'click', $.proxy(self._browse, self));
@@ -1419,23 +1428,6 @@
                 self.$preview.find(sel + '.kv-preview-data,' + sel + ' .kv-preview-data').css(settings);
             });
         },
-        _initClickable: function () {
-            var self = this, $zone;
-            if (!self.isClickable) {
-                return;
-            }
-            $zone = self.isAjaxUpload ? self.$dropZone : self.$preview.find('.file-default-preview');
-            $h.addCss($zone, 'clickable');
-            $zone.attr('tabindex', -1);
-            self._handler($zone, 'click', function (e) {
-                var $tar = $(e.target);
-                if (!$(self.elErrorContainer + ':visible').length &&
-                    (!$tar.parents('.file-preview-thumbnails').length || $tar.parents('.file-default-preview').length)) {
-                    self.$element.trigger('click');
-                    $zone.blur();
-                }
-            });
-        },
         _scanDroppedItems: function (item, files, path) {
             path = path || "";
             var self = this, i, dirReader, readDir, errorHandler = function (e) {
@@ -3273,13 +3265,31 @@
             }
         },
         _initBrowse: function ($container) {
-            var self = this;
+            var self = this, $el = self.$element;
+            $el.before($container);
             if (self.showBrowse) {
-                self.$btnFile = $container.find('.btn-file');
-                self.$btnFile.append(self.$element);
+                self.$btnFile = $container.find('.btn-file').append($el);
             } else {
-                self.$element.hide();
+                $el.appendTo($container).attr('tabindex', -1);
+                $h.addCss($el, 'file-no-browse');
+            }
+        },
+        _initClickable: function () {
+            var self = this, $zone;
+            if (!self.isClickable) {
+                return;
             }
+            $zone = self.isAjaxUpload ? self.$dropZone : self.$preview.find('.file-default-preview');
+            $h.addCss($zone, 'clickable');
+            $zone.attr('tabindex', -1);
+            self._handler($zone, 'click', function (e) {
+                var $tar = $(e.target), $el = self.$element;
+                if (!$(self.elErrorContainer + ':visible').length &&
+                    (!$tar.parents('.file-preview-thumbnails').length || $tar.parents('.file-default-preview').length)) {
+                    self.$element.data('zoneClicked', true).trigger('click');
+                    $zone.blur();
+                }
+            });
         },
         _initCaption: function () {
             var self = this, cap = self.initialCaption || '';
@@ -3321,7 +3331,6 @@
         _createContainer: function () {
             var self = this, attribs = {"class": 'file-input file-input-new' + (self.rtl ? ' kv-rtl' : '')},
                 $container = $(document.createElement("div")).attr(attribs).html(self._renderMain());
-            self.$element.before($container);
             self._initBrowse($container);
             if (self.theme) {
                 $container.addClass('theme-' + self.theme);
@@ -3330,7 +3339,6 @@
         },
         _refreshContainer: function () {
             var self = this, $container = self.$container;
-            $container.before(self.$element);
             $container.html(self._renderMain());
             self._initBrowse($container);
             self._validateDisabled();

diff --git a/js/fileinput.min.js b/js/fileinput.min.js
diff --git a/scss/fileinput-rtl.scss b/scss/fileinput-rtl.scss
@@ -128,8 +128,8 @@ $border: 1px !default;
         border-radius: 0 $radius $radius 0;
     }
     .btn-file input[type=file] {
-        right: auto;
-        left: 0;
+        left: auto;
+        right: 0;
         text-align: left;
         background: none repeat scroll 100% 0 transparent;
     }

diff --git a/scss/fileinput.scss b/scss/fileinput.scss
@@ -154,6 +154,24 @@ $border: 1px !default;
     transform: rotate(270deg);
 }
 
+.file-input {
+    @extend %set-relative;
+}
+
+.file-no-browse {
+    @extend %set-absolute;
+    left: 50%;
+    bottom: 20%;
+    width: 1px;
+    height: 1px;
+    font-size: 0;
+    opacity: 0;
+    border: none;
+    background: none;
+    outline: none;
+    box-shadow: none;
+}
+
 .file-loading {
     input[type=file] {
         @extend %set-invisible;
@@ -186,7 +204,7 @@ input[type=file].file-loading {
     input[type=file] {
         @extend %set-absolute;
         top: 0;
-        right: 0;
+        left: 0;
         min-width: 100%;
         min-height: 100%;
         text-align: right;