Updates to release v5.0.9

CHANGE.md

@@ -3,7 +3,7 @@ Change Log: `bootstrap-fileinput`
 
 ## version 5.0.9
 
-**Date:** _under development_
+**Date:** 02-Jun-2020
 
 - (enh #1574): Enhance filezoom events to fire correctly only once for the source file input.
     - fixes issue when multiple file input plugins are initialized on the same page

css/fileinput.css

@@ -340,13 +340,13 @@
 
 .file-zoom-dialog .btn-navigate {
     padding: 0;
-    margin: 0;
+    margin: -60px 0 0;
+    font-size: 60px;
     background: transparent;
     text-decoration: none;
     outline: none;
     opacity: 0.7;
-    top: 45%;
-    font-size: 4em;
+    top: 50%;
     color: #1c94c4;
 }
 
@@ -468,6 +468,7 @@
 
 .file-zoom-content {
     text-align: center;
+    min-height: 300px;
 }
 
 .file-zoom-content .file-preview-image {

js/fileinput.js

@@ -187,8 +187,9 @@
             div.parentNode.removeChild(div);
             return status;
         },
-        orientationSupported: function () {
-            var $img = $(document.createElement('img')), flag = $img.css('image-orientation');
+        canOrientImage: function ($el) {
+            var $img = $(document.createElement('img')).css({width: '1px', height: '1px'}).insertAfter($el),
+                flag = $img.css('image-orientation');
             $img.remove();
             return !!flag;
         },
@@ -899,6 +900,7 @@
         _init: function (options, refreshMode) {
             var self = this, f, $el = self.$element, $cont, t, tmp;
             self.options = options;
+            self.canOrientImage = $h.canOrientImage($el);
             $.each(options, function (key, value) {
                 switch (key) {
                     case 'minFileCount':
@@ -2713,8 +2715,8 @@
             self._autoFitContent();
         },
         _initPreviewImageOrientations: function () {
-            var self = this, i = 0, isOrientationSupported = $h.orientationSupported();
-            if (!self.autoOrientImageInitial && !isOrientationSupported) {
+            var self = this, i = 0, canOrientImage = self.canOrientImage;
+            if (!self.autoOrientImageInitial && !canOrientImage) {
                 return;
             }
             self.getFrames('.file-preview-initial').each(function () {
@@ -2724,7 +2726,7 @@
                     id = $thumb.attr('id');
                     $img = $thumb.find('>.kv-file-content img');
                     $zoomImg = self._getZoom(id, ' >.kv-file-content img');
-                    if (isOrientationSupported) {
+                    if (canOrientImage) {
                         $img.css('image-orientation', (self.autoOrientImageInitial ? 'from-image' : 'none'));
                     } else {
                         self.setImageOrientation($img, $zoomImg, config.exif.Orientation, $thumb);
@@ -2984,9 +2986,9 @@
                 }
             });
         },
-        _showModal: function($frame) {
+        _showModal: function ($frame) {
             var self = this, $modal = self.$modal;
-            if (!$frame) {
+            if (!$frame || !$frame.length) {
                 return;
             }
             $h.initModal($modal);
@@ -4475,7 +4477,7 @@
         },
         _validateImageOrientation: function ($img, file, previewId, fileId, caption, ftype, fsize, iData) {
             var self = this, exifObj, value, autoOrientImage = self.autoOrientImage, selector;
-            if ($h.orientationSupported()) {
+            if (self.canOrientImage) {
                 $img.css('image-orientation', (autoOrientImage ? 'from-image' : 'none'));
                 return;
             }

scss/fileinput.scss

@@ -406,13 +406,13 @@ input[type=file].file-loading {
     .btn-navigate {
         @extend %set-absolute;
         padding: 0;
-        margin: 0;
+        margin: -60px 0 0;
+        font-size: 60px;
         background: transparent;
         text-decoration: none;
         outline: none;
         opacity: 0.7;
-        top: 45%;
-        font-size: 4em;
+        top: 50%;
         color: $curious-blue;
         &:not([disabled]):hover {
             outline: none;
@@ -551,7 +551,7 @@ input[type=file].file-loading {
     margin-left: multiply($pad, 0.6);
 }
 .file-zoom-content {
-    height: multiply($pad, 96);
+    min-height: 300px;
     text-align: center;
     .file-preview-image {
         max-height: 100%;