Fix #1305: Correct browseOnZoneClick behavior

CHANGE.md

@@ -3,8 +3,10 @@ Change Log: `bootstrap-fileinput`
 
 ## version 4.5.1
 
-**Date:** _under development_
+**Date:** 25-Sep-2018
 
+- (enh #1305): Correct `browseOnZoneClick` behavior.
+- (enh #1297): Update default thumbnail shadow style.
 - (enh #1286): Correct piexif library load validation.
 
 ## version 4.5.0

README.md

@@ -117,4 +117,4 @@ Alternatively, you can directly call the plugin options by setting data attribut
 
 ## License
 
-**bootstrap-fileinput** is released under the BSD 3-Clause License. See the bundled `LICENSE.md` for details.
+**bootstrap-fileinput** is released under the BSD-3-Clause License. See the bundled `LICENSE.md` for details.

js/fileinput.js

@@ -578,13 +578,13 @@
             if (self.isDisabled) {
                 $el.attr('disabled', true);
             }
+            self.isClickable = self.browseOnZoneClick && self.showPreview &&
+                (self.dropZoneEnabled || !$h.isEmpty(self.defaultPreviewContent));
             self.isAjaxUpload = $h.hasFileUploadSupport() && !$h.isEmpty(self.uploadUrl);
             self.dropZoneEnabled = $h.hasDragDropSupport() && self.dropZoneEnabled;
             if (!self.isAjaxUpload) {
                 self.dropZoneEnabled = self.dropZoneEnabled && $h.canAssignFilesToInput();
             }
-            self.isClickable = self.browseOnZoneClick && self.showPreview &&
-                (self.dropZoneEnabled || !$h.isEmpty(self.defaultPreviewContent));
             self.slug = typeof options.slugCallback === "function" ? options.slugCallback : self._slugDefault;
             self.mainTemplate = self.showCaption ? self._getLayoutTemplate('main1') : self._getLayoutTemplate('main2');
             self.captionTemplate = self._getLayoutTemplate('caption');
@@ -3312,11 +3312,18 @@
             }
         },
         _initClickable: function () {
-            var self = this, $zone;
+            var self = this, $zone, $tmpZone;
             if (!self.isClickable) {
                 return;
             }
-            $zone = self.isAjaxUpload ? self.$dropZone : self.$preview.find('.file-default-preview');
+            $zone = self.$dropZone;
+            if (!self.isAjaxUpload) {
+                $tmpZone = self.$preview.find('.file-default-preview');
+                if ($tmpZone.length) {
+                    $zone = $tmpZone;
+                }
+            }
+
             $h.addCss($zone, 'clickable');
             $zone.attr('tabindex', -1);
             self._handler($zone, 'click', function (e) {

scss/fileinput.scss

@@ -18,11 +18,13 @@ $oyster-pink: #ebccd1 !default;
 $gallery: #eee !default;
 $alto: #ddd !default;
 $green: #008000 !default;
-$zorba: #a2958a !default;
 $mine-shaft: #333 !default;
 $boston-blue: #428bca !default;
 $tapa: #777 !default;
 $black: #000 !default;
+$black-20: rgba(0, 0, 0, 0.2);
+$black-30: rgba(0, 0, 0, 0.3);
+$black-40: rgba(0, 0, 0, 0.4);
 $mystic: #e1edf7 !default;
 $perano: #a1abff !default;
 $silver-chalice: #aaa !default;
@@ -273,8 +275,8 @@ input[type=file].file-loading {
     &.file-preview-frame {
         @extend %set-relative;
         margin: multiply($pad, 1.6);
-        border: $border solid $alto;
-        box-shadow: $border $border $pad 0 $zorba;
+        border: $border solid $black-20;
+        box-shadow: 0 0 multiply($pad, 2) 0 $black-20;
         padding: multiply($pad, 1.2);
         float: left;
         text-align: center;
@@ -289,7 +291,8 @@ input[type=file].file-loading {
             height: multiply($pad, 14);
         }
         &:not(.file-preview-error):hover {
-            box-shadow: multiply($pad, 0.6) multiply($pad, 0.6) $pad 0 $mine-shaft;
+            border: $border solid $black-30;
+            box-shadow: 0 0 multiply($pad, 2) 0 $black-40;
         }
     }
     .file-preview-text {