Updates to release v4.4.2 fix #990 fix #1004

CHANGE.md

@@ -3,10 +3,13 @@ Change Log: `bootstrap-fileinput`
 
 ## version 4.4.2 (_under development_)
 
-**Date:** 17-Jun-2017
+**Date:** 23-Jun-2017
 
+- (enh #1004): New Krajee Explorer Font Awesome Theme.
 - (bug #995): Correct and fix image load jquery event triggering for browser cache scenarios.
 - (enh #991): Add Azerbaijan Translations.
+- (enh #990): Ability to hide thumbnail content (`hideThumbnailContent`) and display only file name/size.
+- (enh #989): Update Chinese Translations.
 - (enh #987): Zoom preview arrows orientation for RTL.
 - (enh #986): Image width parsing and styling enhancements.
 - (enh #981): Update Hungarian Translations.

css/fileinput.css

@@ -479,6 +479,10 @@
     background-color: #d9edf7;
 }
 
+.hide-content .kv-file-content {
+    display: none;
+}
+
 /* IE 10 fix */
 .btn-file ::-ms-browse {
     font-size: 10000px;

js/fileinput.js

@@ -460,6 +460,9 @@
                 self.disable();
             }
             self._initZoom();
+            if (self.hideThumbnailContent) {
+                $h.addCss(self.$preview, 'hide-content');
+            }
         },
         _initTemplateDefaults: function () {
             var self = this, tMain1, tMain2, tPreview, tFileIcon, tClose, tCaption, tBtnDefault, tBtnLink, tBtnBrowse,
@@ -3083,7 +3086,7 @@
             self.$captionContainer.find('.file-caption-ellipsis').attr('title', title);
         },
         _createContainer: function () {
-            var self = this, attribs = {"class": 'file-input file-input-new' + (self.rtl ? ' kv-rtl' : '')}, 
+            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);
@@ -3728,6 +3731,7 @@
         autoOrientImage: true, // for JPEG images based on EXIF orientation tag
         required: false,
         rtl: false,
+        hideThumbnailContent: false,
         generateFileId: null,
         previewClass: '',
         captionClass: '',

themes/explorer-fa/theme.css

@@ -0,0 +1,214 @@
+/*!
+ * bootstrap-fileinput v4.4.2
+ * http://plugins.krajee.com/file-input
+ *
+ * Krajee Explorer Font Awesome theme style for bootstrap-fileinput. 
+ * Load this theme file after loading `fileinput.css`. Ensure that
+ * font awesome assets and CSS are loaded on the page as well.
+ *
+ * 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
+ */
+.theme-explorer-fa .file-preview .table {
+    margin: 0;
+}
+
+.theme-explorer-fa .explorer-frame td {
+    vertical-align: middle;
+    text-align: left;
+}
+
+.explorer-frame .file-preview-text {
+    display: inline-block;
+    color: #428bca;
+    border: 1px solid #ddd;
+    font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+    outline: none;
+    padding: 8px;
+    resize: none;
+}
+
+.explorer-frame .file-preview-html {
+    display: inline-block;
+    border: 1px solid #ddd;
+    padding: 8px;
+    overflow: auto;
+}
+
+.explorer-frame .file-preview-other {
+    text-align: center;
+}
+
+.explorer-frame .file-other-icon {
+    font-size: 4.2em;
+}
+
+.theme-explorer-fa .explorer-frame .kv-file-content {
+    width: 80px;
+    height: 80px;
+    padding: 5px;
+    text-align: center;
+}
+
+.theme-explorer-fa .file-actions-cell {
+    width: 100px;
+    padding: 0;
+}
+
+.theme-explorer-fa .file-thumb-progress .progress {
+    display: block;
+    margin-top: 5px;
+}
+
+.theme-explorer-fa .file-thumb-progress .progress, .theme-explorer-fa .file-thumb-progress .progress-bar {
+    height: 13px;
+    font-size: 11px;
+    line-height: 13px;
+}
+
+.theme-explorer-fa .file-actions-cell {
+    position: relative;
+}
+
+.theme-explorer-fa .file-upload-indicator, .theme-explorer-fa .file-drag-handle {
+    position: absolute;
+    text-align: center;
+    top: 0;
+    right: 0;
+    padding-left: 5px;
+    padding-right: 2px;
+    border-right: none;
+    border-top: none;
+    border-left: 1px solid #8a6d3b;
+    border-bottom: 1px solid #8a6d3b;
+    border-bottom-left-radius: 11px;
+    font-size: 12px;
+}
+
+.theme-explorer-fa .explorer-caption {
+    display: block;
+    color: #777;
+}
+
+.theme-explorer-fa .file-actions {
+    text-align: center;
+}
+
+.theme-explorer-fa .kvsortable-ghost {
+    opacity: 0.6;
+    background: #e1edf7;
+    border: 2px solid #a1abff;
+}
+
+.theme-explorer-fa .file-upload-indicator {
+    font-size: 13px;
+    padding-left: 6px;
+    background-color: #fcf8e3;
+    border-color: #faebcc;
+}
+
+.theme-explorer-fa .file-drag-handle {
+    right: -2px;
+    background-color: #d9edf7;
+    border-color: #bce8f1;
+}
+
+.theme-explorer-fa .file-preview-error .file-upload-indicator {
+    background-color: #f2dede;
+    border-color: #ebccd1;
+}
+
+.theme-explorer-fa .file-preview-success .file-upload-indicator {
+    background-color: #dff0d8;
+    border-color: #d6e9c6;
+}
+
+.theme-explorer-fa .file-preview-loading .file-upload-indicator {
+    background-color: #e5e5e5;
+    border-color: #777;
+}
+
+.theme-explorer-fa .file-error-message ul {
+    padding-left: 15px;
+}
+
+.theme-explorer-fa .file-error-message .close {
+    margin-top: -5px;
+    margin-right: -5px;
+}
+
+/*
+ * mobile responsive styling
+ */
+@media only screen and (max-width: 500px) {
+    .theme-explorer-fa .table, .theme-explorer-fa .table tbody, .theme-explorer-fa .table tr, .theme-explorer-fa .table td {
+        display: block;
+        width: 100% !important;
+    }
+
+    .theme-explorer-fa .table {
+        border: none;
+    }
+
+    .theme-explorer-fa .table tr {
+        margin-top: 5px;
+    }
+
+    .theme-explorer-fa .table tr:first-child {
+        margin-top: 0;
+    }
+
+    .theme-explorer-fa .table td {
+        text-align: center;
+    }
+
+    .theme-explorer-fa .table .kv-file-content {
+        border-bottom: none;
+        padding: 4px;
+        margin: 0;
+    }
+
+    .theme-explorer-fa .table .kv-file-content .file-preview-image {
+        max-width: 100%;
+        font-size: 20px;
+    }
+
+    .theme-explorer-fa .file-details-cell {
+        border-top: none;
+        border-bottom: none;
+        padding-top: 0;
+        margin: 0;
+    }
+
+    .theme-explorer-fa .file-actions-cell {
+        border-top: none;
+        padding-bottom: 4px;
+    }
+
+    .theme-explorer-fa .explorer-frame .explorer-caption {
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        left: 0;
+        right: 0;
+        margin: auto;
+    }
+
+    .theme-explorer-fa .file-upload-indicator, .theme-explorer-fa .file-drag-handle {
+        right: 0;
+        bottom: 0;
+        border-top-left-radius: 40px;
+        border-bottom-left-radius: 0;
+        padding: 12px 3px 0 6px;
+    }
+
+    .theme-explorer-fa .file-actions-cell .btn-xs {
+        font-size: 0.9em;
+        padding: 2px 7px;
+        margin-right: 3px;
+        cursor: pointer;
+    }
+}

themes/explorer-fa/theme.js

@@ -0,0 +1,85 @@
+/*!
+ * bootstrap-fileinput v4.4.2
+ * http://plugins.krajee.com/file-input
+ *
+ * Krajee Explorer Font Awesome theme configuration for bootstrap-fileinput. 
+ * Load this theme file after loading `fileinput.js`. Ensure that
+ * font awesome assets and CSS are loaded on the page as well.
+ *
+ * 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
+ */
+(function ($) {
+    "use strict";
+    var teTagBef = '<tr class="file-preview-frame {frameClass}" id="{previewId}" data-fileindex="{fileindex}"' +
+        ' data-template="{template}"', teContent = '<td class="kv-file-content">\n';
+    $.fn.fileinputThemes['explorer-fa'] = {
+        layoutTemplates: {
+            preview: '<div class="file-preview {class}">\n' +
+            '    {close}' +
+            '    <div class="{dropClass}">\n' +
+            '    <table class="table table-bordered table-hover"><tbody class="file-preview-thumbnails">\n' +
+            '    </tbody></table>\n' +
+            '    <div class="clearfix"></div>' +
+            '    <div class="file-preview-status text-center text-success"></div>\n' +
+            '    <div class="kv-fileinput-error"></div>\n' +
+            '    </div>\n' +
+            '</div>',
+            footer: '<td class="file-details-cell"><div class="explorer-caption" title="{caption}">{caption}</div> ' +
+            '{size}{progress}</td><td class="file-actions-cell">{indicator} {actions}</td>',
+            actions: '{drag}\n' +
+            '<div class="file-actions">\n' +
+            '    <div class="file-footer-buttons">\n' +
+            '        {upload} {delete} {zoom} {other} ' +
+            '    </div>\n' +
+            '</div>',
+            zoomCache: '<tr style="display:none" class="kv-zoom-cache-theme"><td>' +
+            '<table class="kv-zoom-cache">{zoomContent}</table></td></tr>',
+            fileIcon: '<i class="fa fa-file kv-caption-icon"></i> '
+        },
+        previewMarkupTags: {
+            tagBefore1: teTagBef + '>' + teContent,
+            tagBefore2: teTagBef + ' title="{caption}">' + teContent,
+            tagAfter: '</td>\n{footer}</tr>\n'
+        },
+        previewSettings: {
+            image: {height: "60px"},
+            html: {width: "100px", height: "60px"},
+            text: {width: "100px", height: "60px"},
+            video: {width: "auto", height: "60px"},
+            audio: {width: "auto", height: "60px"},
+            flash: {width: "100%", height: "60px"},
+            object: {width: "100%", height: "60px"},
+            pdf: {width: "100px", height: "60px"},
+            other: {width: "100%", height: "60px"}
+        },
+        frameClass: 'explorer-frame',
+        fileActionSettings: {
+            removeIcon: '<i class="fa fa-trash text-danger"></i>',
+            uploadIcon: '<i class="fa fa-upload text-info"></i>',
+            zoomIcon: '<i class="fa fa-search-plus"></i>',
+            dragIcon: '<i class="fa fa-bars"></i>',
+            indicatorNew: '<i class="fa fa-hand-o-down text-warning"></i>',
+            indicatorSuccess: '<i class="fa fa-check-circle text-success"></i>',
+            indicatorError: '<i class="fa fa-exclamation-circle text-danger"></i>',
+            indicatorLoading: '<i class="fa fa-hand-o-up text-muted"></i>'
+        },
+        previewZoomButtonIcons: {
+            prev: '<i class="fa fa-caret-left fa-lg"></i>',
+            next: '<i class="fa fa-caret-right fa-lg"></i>',
+            toggleheader: '<i class="fa fa-arrows-v"></i>',
+            fullscreen: '<i class="fa fa-arrows-alt"></i>',
+            borderless: '<i class="fa fa-external-link"></i>',
+            close: '<i class="fa fa-remove"></i>'
+        },
+        previewFileIcon: '<i class="fa fa-file"></i>',
+        browseIcon: '<i class="fa fa-folder-open"></i>',
+        removeIcon: '<i class="fa fa-trash"></i>',
+        cancelIcon: '<i class="fa fa-ban"></i>',
+        uploadIcon: '<i class="fa fa-upload"></i>',
+        msgValidationErrorIcon: '<i class="fa fa-exclamation-circle"></i> '
+    };
+})(window.jQuery);