Updates to release v4.4.2

CHANGE.md

@@ -1,12 +1,14 @@
 Change Log: `bootstrap-fileinput`
 =================================
 
-## version 4.4.2
+## version 4.4.2 (_under development_)
 
 **Date:** 28-May-2017
 
 - (enh #986): Image width parsing and styling enhancements.
 - (enh #981): Update Hungarian Translations.
+- (enh #977): Add RTL capability (new property `rtl` to be set) - includes new `fileinput-rtl.css` )to be loaded after `fileinput.css` for RTL styling).
+- (enh #973): Add SCSS image path variable and file-image alt style updates.
 
 ## version 4.4.1
 

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.1 (under development). 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.2 (under development). 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.
 

bower.json

@@ -1,6 +1,6 @@
 {
     "name": "bootstrap-fileinput",
-    "version": "4.4.1",
+    "version": "4.4.2",
     "homepage": "https://github.com/kartik-v/bootstrap-fileinput",
     "authors": [
         "Kartik Visweswaran <[email protected]>"

css/fileinput-rtl.css

@@ -1,8 +1,8 @@
 /*!
- * bootstrap-fileinput v4.4.1
+ * bootstrap-fileinput v4.4.2
  * http://plugins.krajee.com/file-input
  *
- * Krajee default styling for bootstrap-fileinput.
+ * Krajee RTL (Right To Left) default styling for bootstrap-fileinput.
  *
  * Author: Kartik Visweswaran
  * Copyright: 2014 - 2017, Kartik Visweswaran, Krajee.com
@@ -10,105 +10,117 @@
  * Licensed under the BSD 3-Clause
  * https://github.com/kartik-v/bootstrap-fileinput/blob/master/LICENSE.md
  */
+.kv-rtl {
+    direction: rtl;
+}
+
+.kv-rtl .input-group-btn:last-child >.btn {
+   border-top-right-radius: 0 !important;
+   border-bottom-right-radius: 0 !important;
+   border-top-left-radius: 4px !important;
+   border-bottom-left-radius: 4px !important;
+
+}
+
+.kv-rtl .input-group .form-control:first-child {
+    border-top-right-radius: 4px !important;
+    border-bottom-right-radius: 4px !important;
+    border-top-left-radius: 0px !important;
+    border-bottom-left-radius: 0px !important;
 
-.file-loading {
+ }
+ 
+.kv-rtl .file-loading {
     right: auto;
     left: 0;
     text-align: left;
 }
 
-.btn-file input[type=file] {
+.kv-rtl .btn-file input[type=file] {
     right: auto;
     left: 0;
     text-align: left;
     background: none repeat scroll 100% 0 transparent;
 }
 
-.file-zoom-dialog {
+.kv-rtl .file-zoom-dialog {
     text-align: right;
 }
 
-.file-error-message pre,
-.file-error-message ul {
+.kv-rtl .file-error-message pre,
+.kv-rtl .file-error-message ul {
     text-align: right;
 }
 
-.krajee-default.file-preview-frame {
+.kv-rtl .krajee-default.file-preview-frame {
     box-shadow: -1px 1px 5px 0 #a2958a;
     float: right;
 }
 
-.krajee-default.file-preview-frame:not(.file-preview-error):hover {
+.kv-rtl .krajee-default.file-preview-frame:not(.file-preview-error):hover {
     box-shadow: -3px 3px 5px 0 #333;
 }
 
-.krajee-default .file-actions,
-.krajee-default .file-other-error {
+.kv-rtl .krajee-default .file-actions,
+.kv-rtl .krajee-default .file-other-error {
     text-align: right;
 }
 
-.krajee-default .file-footer-buttons {
+.kv-rtl .krajee-default .file-footer-buttons {
     float: left;
 }
 
-.krajee-default .file-drag-handle,
-.krajee-default .file-upload-indicator {
+.kv-rtl .krajee-default .file-drag-handle,
+.kv-rtl .krajee-default .file-upload-indicator {
+    left: auto;
     right: -6px;
     padding: 8px 3px 1px 8px;
-    border-right: none;
-    border-left: 1px solid #8a6d3b;
     border-top-left-radius: 24px;
-    left: auto;
-}
-
-.file-input-ajax-new .no-browse .form-control,
-.file-input-new .no-browse .form-control {
-    border-top-left-radius: 4px;
-    border-bottom-left-radius: 4px;
+    border-top-right-radius: 0;
 }
 
-.file-drop-zone {
+.kv-rtl .file-drop-zone {
     margin: 12px 12px 12px 15px;
 }
 
-.file-zoom-dialog .floating-buttons {
+.kv-rtl .file-zoom-dialog .floating-buttons {
     left: 10px;
     right: auto;
 }
 
-.file-zoom-dialog .kv-zoom-actions .btn,
-.floating-buttons .btn {
+.kv-rtl .file-zoom-dialog .kv-zoom-actions .btn,
+.kv-rtl .floating-buttons .btn {
     margin-right: 3px;
 }
 
-.file-zoom-dialog .btn-prev {
+.kv-rtl .file-zoom-dialog .btn-prev {
     right: 1px;
 }
 
-.file-zoom-dialog .btn-next {
+.kv-rtl .file-zoom-dialog .btn-next {
     left: 1px;
 }
 
-.rotate-3 {
+.kv-rtl .rotate-3 {
     transform: rotate(-180deg);
 }
 
-.rotate-4 {
+.kv-rtl .rotate-4 {
     transform: rotate(-180deg) rotateY(180deg);
 }
 
-.rotate-5 {
+.kv-rtl .rotate-5 {
     transform: rotate(-270deg) rotateY(180deg);
 }
 
-.rotate-6 {
+.kv-rtl .rotate-6 {
     transform: rotate(-90deg);
 }
 
-.rotate-7 {
+.kv-rtl .rotate-7 {
     transform: rotate(-90deg) rotateY(180deg);
 }
 
-.rotate-8 {
+.kv-rtl .rotate-8 {
     transform: rotate(-270deg);
 }

css/fileinput-rtl.min.css

@@ -1,12 +1,12 @@
 /*!
- * bootstrap-fileinput v4.4.1
+ * bootstrap-fileinput v4.4.2
  * http://plugins.krajee.com/file-input
  *
- * Krajee default styling for bootstrap-fileinput.
+ * Krajee RTL (Right To Left) default styling for bootstrap-fileinput.
  *
  * Author: Kartik Visweswaran
  * Copyright: 2014 - 2017, Kartik Visweswaran, Krajee.com
  *
  * Licensed under the BSD 3-Clause
  * https://github.com/kartik-v/bootstrap-fileinput/blob/master/LICENSE.md
- */.btn-file input[type=file],.file-loading{right:auto;left:0;text-align:left}.btn-file input[type=file]{background:100% 0 none}.file-error-message pre,.file-error-message ul,.file-zoom-dialog,.krajee-default .file-actions,.krajee-default .file-other-error{text-align:right}.krajee-default.file-preview-frame{box-shadow:-1px 1px 5px 0 #a2958a;float:right}.krajee-default.file-preview-frame:not(.file-preview-error):hover{box-shadow:-3px 3px 5px 0 #333}.krajee-default .file-footer-buttons{float:left}.krajee-default .file-drag-handle,.krajee-default .file-upload-indicator{right:-6px;padding:8px 3px 1px 8px;border-right:none;border-left:1px solid #8a6d3b;border-top-left-radius:24px;left:auto}.file-input-ajax-new .no-browse .form-control,.file-input-new .no-browse .form-control{border-top-left-radius:4px;border-bottom-left-radius:4px}.file-drop-zone{margin:12px 12px 12px 15px}.file-zoom-dialog .floating-buttons{left:10px;right:auto}.file-zoom-dialog .kv-zoom-actions .btn,.floating-buttons .btn{margin-right:3px}.file-zoom-dialog .btn-prev{right:1px}.file-zoom-dialog .btn-next{left:1px}.rotate-3{transform:rotate(-180deg)}.rotate-4{transform:rotate(-180deg) rotateY(180deg)}.rotate-5{transform:rotate(-270deg) rotateY(180deg)}.rotate-6{transform:rotate(-90deg)}.rotate-7{transform:rotate(-90deg) rotateY(180deg)}.rotate-8{transform:rotate(-270deg)}
+ */.kv-rtl{direction:rtl}.kv-rtl .input-group-btn:last-child>.btn{border-radius:4px 0 0 4px!important}.kv-rtl .input-group .form-control:first-child{border-radius:0 4px 4px 0!important}.kv-rtl .file-loading{right:auto;left:0;text-align:left}.kv-rtl .btn-file input[type=file]{right:auto;left:0;text-align:left;background:100% 0 none}.kv-rtl .file-error-message pre,.kv-rtl .file-error-message ul,.kv-rtl .file-zoom-dialog,.kv-rtl .krajee-default .file-actions,.kv-rtl .krajee-default .file-other-error{text-align:right}.kv-rtl .krajee-default.file-preview-frame{box-shadow:-1px 1px 5px 0 #a2958a;float:right}.kv-rtl .krajee-default.file-preview-frame:not(.file-preview-error):hover{box-shadow:-3px 3px 5px 0 #333}.kv-rtl .krajee-default .file-footer-buttons{float:left}.kv-rtl .krajee-default .file-drag-handle,.kv-rtl .krajee-default .file-upload-indicator{left:auto;right:-6px;padding:8px 3px 1px 8px;border-top-left-radius:24px;border-top-right-radius:0}.kv-rtl .file-drop-zone{margin:12px 12px 12px 15px}.kv-rtl .file-zoom-dialog .floating-buttons{left:10px;right:auto}.kv-rtl .file-zoom-dialog .kv-zoom-actions .btn,.kv-rtl .floating-buttons .btn{margin-right:3px}.kv-rtl .file-zoom-dialog .btn-prev{right:1px}.kv-rtl .file-zoom-dialog .btn-next{left:1px}.kv-rtl .rotate-3{transform:rotate(-180deg)}.kv-rtl .rotate-4{transform:rotate(-180deg) rotateY(180deg)}.kv-rtl .rotate-5{transform:rotate(-270deg) rotateY(180deg)}.kv-rtl .rotate-6{transform:rotate(-90deg)}.kv-rtl .rotate-7{transform:rotate(-90deg) rotateY(180deg)}.kv-rtl .rotate-8{transform:rotate(-270deg)}

css/fileinput.css

@@ -1,5 +1,5 @@
 /*!
- * bootstrap-fileinput v4.4.1
+ * bootstrap-fileinput v4.4.2
  * http://plugins.krajee.com/file-input
  *
  * Krajee default styling for bootstrap-fileinput.

css/fileinput.min.css

@@ -1,5 +1,5 @@
 /*!
- * bootstrap-fileinput v4.4.1
+ * bootstrap-fileinput v4.4.2
  * http://plugins.krajee.com/file-input
  *
  * Krajee default styling for bootstrap-fileinput.

examples/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<!-- release v4.4.1, copyright 2014 - 2017 Kartik Visweswaran -->
+<!-- release v4.4.2, copyright 2014 - 2017 Kartik Visweswaran -->
 <!--suppress JSUnresolvedLibraryURL -->
 <html lang="en">
 <head>

js/fileinput.js

@@ -1,5 +1,5 @@
 /*!
- * bootstrap-fileinput v4.4.1
+ * bootstrap-fileinput v4.4.2
  * http://plugins.krajee.com/file-input
  *
  * Author: Kartik Visweswaran
@@ -497,7 +497,7 @@
             tBtnBrowse = '<div tabindex="500" class="{css}" {status}>{icon} {label}</div>';
             tModalMain = '<div id="' + $h.MODAL_ID + '" class="file-zoom-dialog modal fade" ' +
                 'tabindex="-1" aria-labelledby="' + $h.MODAL_ID + 'Label"></div>';
-            tModal = '<div class="modal-dialog modal-lg" role="document">\n' +
+            tModal = '<div class="modal-dialog modal-lg{rtl}" role="document">\n' +
                 '  <div class="modal-content">\n' +
                 '    <div class="modal-header">\n' +
                 '      <div class="kv-zoom-actions pull-right">{toggleheader}{fullscreen}{borderless}{close}</div>\n' +
@@ -1327,6 +1327,7 @@
         _getModalContent: function () {
             var self = this;
             return self._getLayoutTemplate('modal').setTokens({
+                'rtl': self.rtl ? ' kv-rtl' : '',
                 'zoomFrameClass': self.frameClass,
                 'heading': self.msgZoomModalHeading,
                 'prev': self._getZoomButton('prev'),
@@ -3077,9 +3078,8 @@
             self.$captionContainer.find('.file-caption-ellipsis').attr('title', title);
         },
         _createContainer: function () {
-            var self = this, $container = $(document.createElement("div"))
-                .attr({"class": 'file-input file-input-new'})
-                .html(self._renderMain());
+            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) {
@@ -3722,6 +3722,7 @@
         autoReplace: false,
         autoOrientImage: true, // for JPEG images based on EXIF orientation tag
         required: false,
+        rtl: false,
         generateFileId: null,
         previewClass: '',
         captionClass: '',

nuget/Package.nuspec

@@ -3,7 +3,7 @@
   <metadata>
     <id>bootstrap-fileinput</id>
 	<title>bootstrap-fileinput</title>
-    <version>4.4.1</version>
+    <version>4.4.2</version>
     <authors>Kartik Visweswaran</authors>
     <owners>Kartik Visweswaran</owners>
     <licenseUrl>https://github.com/kartik-v/bootstrap-fileinput/blob/master/LICENSE.md</licenseUrl>

package.json

@@ -1,6 +1,6 @@
 {
     "name": "bootstrap-fileinput",
-    "version": "4.4.1",
+    "version": "4.4.2",
     "homepage": "https://github.com/kartik-v/bootstrap-fileinput",
     "authors": [
         "Kartik Visweswaran <[email protected]>"

sass/fileinput.scss

@@ -1,5 +1,5 @@
 /*!
- * bootstrap-fileinput v4.4.1
+ * bootstrap-fileinput v4.4.2
  * http://plugins.krajee.com/file-input
  *
  * Krajee default styling for bootstrap-fileinput.
@@ -10,7 +10,7 @@
  * Licensed under the BSD 3-Clause
  * https://github.com/kartik-v/bootstrap-fileinput/blob/master/LICENSE.md
  */
- 
+
 // Default Variables
 // --------------------------
 
@@ -127,7 +127,8 @@ $bootstrap-fileinput-img-path: "../img" !default;
 
   .file-preview-image {
     vertical-align: middle;
-    image-orientation: from-image;
+    font: 40px Impact, Charcoal, sans-serif;
+    color: green;
   }
 
   .file-preview-text {

themes/explorer/theme.css

@@ -1,5 +1,5 @@
 /*!
- * bootstrap-fileinput v4.4.1
+ * bootstrap-fileinput v4.4.2
  * http://plugins.krajee.com/file-input
  *
  * Krajee Explorer theme style for bootstrap-fileinput. Load this theme file after loading `fileinput.css`.

themes/explorer/theme.js

@@ -1,5 +1,5 @@
 /*!
- * bootstrap-fileinput v4.4.1
+ * bootstrap-fileinput v4.4.2
  * http://plugins.krajee.com/file-input
  *
  * Krajee Explorer theme configuration for bootstrap-fileinput. Load this theme file after loading `fileinput.js`.

themes/explorer/theme.min.css

@@ -1,5 +1,5 @@
 /*!
- * bootstrap-fileinput v4.4.1
+ * bootstrap-fileinput v4.4.2
  * http://plugins.krajee.com/file-input
  *
  * Krajee Explorer theme style for bootstrap-fileinput. Load this theme file after loading `fileinput.css`.

themes/explorer/theme.min.js

@@ -1,5 +1,5 @@
 /*!
- * bootstrap-fileinput v4.4.1
+ * bootstrap-fileinput v4.4.2
  * http://plugins.krajee.com/file-input
  *
  * Krajee Explorer theme configuration for bootstrap-fileinput. Load this theme file after loading `fileinput.js`.

themes/fa/theme.js

@@ -1,5 +1,5 @@
 /*!
- * bootstrap-fileinput v4.4.1
+ * bootstrap-fileinput v4.4.2
  * http://plugins.krajee.com/file-input
  *
  * Font Awesome icon theme configuration for bootstrap-fileinput. Requires font awesome assets to be loaded.

themes/fa/theme.min.js

@@ -1,5 +1,5 @@
 /*!
- * bootstrap-fileinput v4.4.1
+ * bootstrap-fileinput v4.4.2
  * http://plugins.krajee.com/file-input
  *
  * Font Awesome icon theme configuration for bootstrap-fileinput. Requires font awesome assets to be loaded.

themes/gly/theme.js

@@ -1,5 +1,5 @@
 /*!
- * bootstrap-fileinput v4.4.1
+ * bootstrap-fileinput v4.4.2
  * http://plugins.krajee.com/file-input
  *
  * Glyphicon (default) theme configuration for bootstrap-fileinput.

themes/gly/theme.min.js

@@ -1,5 +1,5 @@
 /*!
- * bootstrap-fileinput v4.4.1
+ * bootstrap-fileinput v4.4.2
  * http://plugins.krajee.com/file-input
  *
  * Glyphicon (default) theme configuration for bootstrap-fileinput.