优化附件图片浏览模式

xinyb

2022-09-30 71dba636c76cf62e143e3b766902f4400a7ca230

 WebRoot/js/bootstrap/fileinput/js/fileinput.js

@@ -996,6 +996,7 @@
            self.$dropZone = $cont.find('.file-drop-zone');
            self.$progress = $cont.find('.kv-upload-progress');
            self.$btnUpload = $cont.find('.fileinput-upload');
            self.$batchDowCss = $cont.find('.batchDowCss');
            self.$captionContainer = $h.getElement(options, 'elCaptionContainer', $cont.find('.file-caption'));
            self.$caption = $h.getElement(options, 'elCaptionText', $cont.find('.file-caption-name'));
            if (!$h.isEmpty(self.msgPlaceholder)) {
@@ -1680,8 +1681,9 @@
            };
            rm.reset();
        },
        //这里是模板 xin 2022-9-29 17:20:13
        _initTemplateDefaults: function () {
            var self = this, tMain1, tMain2, tPreview, tFileIcon, tClose, tCaption, tBtnDefault, tBtnLink, tBtnBrowse,
            var self = this, tMain1, tMain2, tPreview, tFileIcon, tClose, tCaption, tBtnDefault, tBtnLink, tBtnBrowse,tBtnBatchDownload,
                tModalMain, tModal, tProgress, tSize, tFooter, tActions, tActionDelete, tActionUpload, tActionDownload,
                tActionZoom, tActionDrag, tIndicator, tTagBef, tTagBef1, tTagBef2, tTagAft, tGeneric, tHtml, tImage,
                tText, tOffice, tGdocs, tVideo, tAudio, tFlash, tObject, tPdf, tOther, tStyle, tZoomCache, vDefaultDim,
@@ -1700,11 +1702,12 @@
                '      {pause}\n' +
                '      {upload}\n' +
                '      {browse}\n' +
                '      {batchDownload}\n' +
                ($h.isBs(5) ? '' : '    </div>\n') +
                '  </div>'
            '</div>';
            tMain2 = '{preview}\n<div class="kv-upload-progress kv-hidden"></div>\n<div class="clearfix"></div>\n' +
                '<span class="{class}">{remove}\n{cancel}\n{upload}\n{browse}\n</span>';
                '<span class="{class}">{remove}\n{cancel}\n{upload}\n{browse}{batchDownload}\n</span>';
            tPreview = '<div class="file-preview {class}">\n' +
                '  {close}' +
                '  <div class="{dropClass} clearfix">\n' +
@@ -1725,14 +1728,21 @@
            tBtnLink = '<a href="{href}" title="{title}" class="{css}" {status} {tabIndexConfig}>{icon} {label}</a>';
            //noinspection HtmlUnknownAttribute
            tBtnBrowse = '<div class="{css}" {status} {tabIndexConfig}>{icon} {label}</div>';
            tBtnBatchDownload = '<div class="{css}" title="{title}" {status} {tabIndexConfig}>{icon} {label}</div>';
            tModalLabel = $h.MODAL_ID + 'Label';
            tModalMain = '<div id="' + $h.MODAL_ID + '" class="file-zoom-dialog modal fade" ' +
                'aria-labelledby="' + tModalLabel + '" {tabIndexConfig}></div>';
            tModal = '<div class="modal-dialog modal-lg{rtl}" role="document">\n' +
                '  <div class="modal-content">\n' +
                '    <div class="modal-header kv-zoom-header">\n' +
                '      <h6 class="modal-title kv-zoom-title" id="' + tModalLabel + '"><span class="kv-zoom-caption"></span> <span class="kv-zoom-size"></span></h6>\n' +
                '      <div class="kv-zoom-actions">{search}{toggleheader}{fullscreen}{borderless}{close}</div>\n' +
                '      <h6 class="modal-title kv-zoom-title" id="' + tModalLabel + '">' +
                '        <span class="kv-zoom-caption"></span> <span class="kv-zoom-size"></span>' +
                // '        <span class="number-of-views" title="查看次数" style="margin-left: 20px;padding: 0px 15px">' +
                // '        <i class="bi bi-eye"></i><span class="viewsNumber" style="color:#1f62a8;padding-left: 6px;font-size: 12px"></span></span>' +
                // '        <span class="amount-of-downloads" title="下载次数">' +
                // '        <i class="bi bi-arrow-bar-down"></i><span class="downNumber" style="color:#1f62a8;padding-left: 6px;font-size: 12px"></span></span>' +
                '     </h6>\n' +
                '      <div class="kv-zoom-actions">{toggleheader}{fullscreen}{borderless}{close}</div>\n' +//{left}{right}{search}
                '    </div>\n' +
                '    <div class="floating-buttons"></div>\n' +
                '    <div class="kv-zoom-body file-zoom-content {zoomFrameClass}"></div>\n' + '{prev} {next}\n' +
@@ -1766,14 +1776,20 @@
                '{drag}\n' +
                '<div class="clearfix"></div>';
            //noinspection HtmlUnknownAttribute
            tActionDelete = '<button type="button" class="kv-file-remove {removeClass}" ' +
                'title="{removeTitle}" {dataUrl}{dataKey}>{removeIcon}</button>\n';
            tActionUpload = '<button type="button" class="kv-file-upload {uploadClass}" title="{uploadTitle}">' +
                '{uploadIcon}</button>';
            tActionDelete = '<a class="kv-file-remove {removeClass}" ' +
                'title="{removeTitle}" {dataUrl}{dataKey}>{removeIcon}</a>\n';
            // tActionDelete = '<button type="button" class="kv-file-remove {removeClass}" ' +
            //     'title="{removeTitle}" {dataUrl}{dataKey}>{removeIcon}</button>\n';
            tActionUpload = '<a class="kv-file-upload {uploadClass}" title="{uploadTitle}">' +
                '{uploadIcon}</a>';
            // tActionUpload = '<button type="button" class="kv-file-upload {uploadClass}" title="{uploadTitle}">' +
            //     '{uploadIcon}</button>';
            tActionDownload = '<a class="kv-file-download {downloadClass}" title="{downloadTitle}" ' +
                'href="{downloadUrl}" download="{caption}" target="_blank">{downloadIcon}</a>';
            tActionZoom = '<button type="button" class="kv-file-zoom {zoomClass}" ' +
                'title="{zoomTitle}">{zoomIcon}</button>';
            tActionZoom = '<a class="kv-file-zoom {zoomClass}" ' +
                'title="{zoomTitle}">{zoomIcon}</a>';
            // tActionZoom = '<button type="button" class="kv-file-zoom {zoomClass}" ' +
            //     'title="{zoomTitle}">{zoomIcon}</button>';
            tActionDrag = '<span class="file-drag-handle {dragClass}" title="{dragTitle}">{dragIcon}</span>';
            tIndicator = '<div class="file-upload-indicator" title="{indicatorTitle}">{indicator}</div>';
            tTagBef = '<div class="file-preview-frame {frameClass}" id="{previewId}" data-fileindex="{fileindex}"' +
@@ -1832,6 +1848,7 @@
                    btnDefault: tBtnDefault,
                    btnLink: tBtnLink,
                    btnBrowse: tBtnBrowse,
                    btnBatchDownload:tBtnBatchDownload,
                    zoomCache: tZoomCache
                },
                previewMarkupTags: {
@@ -1956,6 +1973,7 @@
                    uploadRetryIcon: '<i class="bi-arrow-clockwise"></i>',
                    uploadRetryTitle: 'Retry upload',
                    downloadIcon: '<i class="bi-download"></i>',
                    batchDownload: '<i class="bi-download"></i>',
                    downloadClass: defBtnCss1,
                    downloadTitle: 'Download file',
                    zoomIcon: '<i class="bi-zoom-in"></i>',
@@ -2168,7 +2186,7 @@
                    if (len === 0) {
                        return {content: '', caption: ''};
                    }
                    for (i = 0; i < len; i++) {
                    for (i = 0; i < len; i++) {//遍历存在的附件信息 xin 2022-9-28 16:10:15
                        content = self.previewCache.get(i);
                        html = self.reversePreviewOrder ? (content + html) : (html + content);
                    }
@@ -2849,15 +2867,30 @@
                'fullscreen': self._getZoomButton('fullscreen'),
                'borderless': self._getZoomButton('borderless'),
                'close': self._getZoomButton('close'),
                'search':self._getZoomButton('search')
                'search':self._getZoomButton('search'),
                'left':self._getZoomButton('left'),
                'right':self._getZoomButton('right')
            });
        },
        _imageRotateEvent:function(type){
            if (isFileInputImage == null) {
                return;
            }
            var self = this, img = self.$modal.find('.kv-zoom-body').find('img');
            if (type == 'left') {//左旋转
                isFileInputImage.imageCurrent = (isFileInputImage.imageCurrent - 90) % 360;
            } else if (type == 'right') {//右旋转
                isFileInputImage.imageCurrent = (isFileInputImage.imageCurrent + 90) % 360;
            }
            img.css('transform', 'rotate(' + isFileInputImage.imageCurrent + 'deg)');
        },
        _listenModalEvent: function (event) {
            var self = this, $modal = self.$modal, getParams = function (e) {
                return {
                    sourceEvent: e,
                    previewId: $modal.data('previewId'),
                    modal: $modal
                    modal: $modal,
                    viewerIndex:self.viewerIndex//图片定位用 xin 2022-9-30 15:11:58
                };
            };
            $modal.on(event + '.bs.modal', function (e) {
@@ -3021,12 +3054,12 @@
            $modal.focus();
        },
        _setZoomContent: function ($frame, navigate) {
            var self = this, $content, tmplt, body, title, $body, $dataEl, config, previewId = $frame.attr('id'),
                $zoomPreview = self._getZoom(previewId), $modal = self.$modal, $tmp, desc, $desc,
            var self = this, $content, tmplt, body, title,logTitle, $body, $dataEl, config, previewId = $frame.attr('id'),
                $zoomPreview = self._getZoom(previewId), $modal = self.$modal, $tmp, desc, $desc,viewsNumber,downNumber,
                $btnFull = $modal.find('.btn-kv-fullscreen'), $btnBord = $modal.find('.btn-kv-borderless'), cap, size,
                $btnTogh = $modal.find('.btn-kv-toggleheader'), dir = navigate === 'prev' ? 'Left' : 'Right',
                slideIn = 'slideIn' + dir, slideOut = 'slideOut' + dir, parsed, zoomData = $frame.data('zoom'),
                $search = $modal.find('.btn-kv-search');
                $search = $modal.find('.btn-kv-search'),$left = $modal.find('.btn-kv-left'),$right = $modal.find('.btn-kv-right');
            if (zoomData) {
                zoomData = decodeURIComponent(zoomData);
                parsed = $zoomPreview.html().replace(self.zoomPlaceholder, '').setTokens({zoomData: zoomData});
@@ -3040,7 +3073,36 @@
            cap = $frame.data('caption') || self.msgZoomModalHeading;
            size = $frame.data('size') || '';
            desc = $frame.data('description') || '';
            $modal.find('.kv-zoom-caption').attr('title', cap).html(cap);
            // //修改图片浏览模式 xin 2022-9-29 16:08:55
            if (self.initialPreview != null && self.initialPreview.length > 0) {
                body = (tmplt == 'image' ? '<div style="display: none">' + body + '</div><ul style="display: none">' : body);
                let n = 0;
                for (let i = 0; i < self.initialPreview.length; i++) {
                    let c = self.initialPreviewConfig[i];
                    if (tmplt == 'image' && c.filetype.indexOf('image') != -1) {
                        body += '<li><img src="' + self.initialPreview[i] + '" alt="' + c.caption + '"></li>'
                        if (c.caption == cap) {
                            self.viewerIndex = n;
                        }
                        n++;
                    }
                    if (c.caption == cap) {
                        viewsNumber = c.viewsNumber || 0;
                        downNumber = c.downNumber || 0;
                    }
                }
                body = (tmplt == 'image' ? body + '</ul>' : body);
            }
            //显示次数 xin 2022-9-28 16:56:55（暂时注释）
            // $modal.find('.viewsNumber').html(viewsNumber);
            // $modal.find('.downNumber').html(downNumber);
            //标题太长，限制显示25个 xin 2022-9-28 15:45:48
            if(cap.length > 30){
                logTitle=cap.substring(0,30)+'...';
            }else{
                logTitle=cap;
            }
            $modal.find('.kv-zoom-caption').attr('title', cap).html(logTitle);
            $modal.find('.kv-zoom-size').html(size);
            $desc = $modal.find('.kv-zoom-description').hide();
            if (desc) {
@@ -3100,6 +3162,12 @@
                if(isFileInputImage!=null){
                    isFileInputImage.show();
                }
            });
            self._handler($left,'click',function () {
                self._imageRotateEvent('left');
            });
            self._handler($right,'click',function () {
                self._imageRotateEvent('right');
            });
            self._handler($btnTogh, 'click', function () {
                var $header = $modal.find('.modal-header'), $floatBar = $modal.find('.floating-buttons'),
@@ -3202,10 +3270,16 @@
                self._setZoomContent($targFrame, dir);
            }
            self._initZoomButtons();
            self._raise('filezoom' + dir, {'previewId': previewId, modal: self.$modal});
            self._raise('filezoom' + dir, {'previewId': previewId, modal: self.$modal,viewerIndex:self.viewerIndex});
        },
        _initZoomButton: function () {
            var self = this;
            var self = this,vindex=0;
            self.$preview.find('.kv-file-content').each(function () {
                var $el = $(this);
                self._handler($el, 'dblclick', function () {//双击打开附件 xin 2022-9-28 10:29:37
                    self._zoomPreview($el);
                });
            });
            self.$preview.find('.kv-file-zoom').each(function () {
                var $el = $(this);
                self._handler($el, 'click', function () {
@@ -4252,6 +4326,7 @@
            var self = this;
            return self.mimeTypeAliases[ftype] || ftype;
        },
        //创建试图 xin 2022-9-28 16:06:29
        _generatePreviewTemplate: function (
            cat,
            data,
@@ -4273,7 +4348,7 @@
                config, title = caption, alt = caption, typeCss = 'type-default', getContent,
                footer = foot || self._renderFileFooter(cat, caption, size, 'auto', isError),
                forcePrevIcon = self.preferIconicPreview, forceZoomIcon = self.preferIconicZoomPreview,
                newCat = forcePrevIcon ? (cat == 'image' ? cat : 'other') : cat;
                newCat = forcePrevIcon ? (cat == 'image' || cat=='video'  ? cat : 'other') : cat;
            config = screenW < 400 ? (self.previewSettingsSmall[newCat] || self.defaults.previewSettingsSmall[newCat]) :
                (self.previewSettings[newCat] || self.defaults.previewSettings[newCat]);
            if (config) {
@@ -4339,7 +4414,7 @@
            if (typeof self.sanitizeZoomCache === 'function') {
                zoomContent = self.sanitizeZoomCache(zoomContent);
            }
            prevContent = getContent((forcePrevIcon ? (cat == 'image' ? cat : 'other') : cat), data, false, 'kv-preview-thumb', zoomData);
            prevContent = getContent((forcePrevIcon ? (cat == 'image' || cat=='video' ? cat : 'other') : cat), data, false, 'kv-preview-thumb', zoomData);
            return prevContent.setTokens({zoomCache: zoomContent});
        },
        _addToPreview: function ($preview, content) {
@@ -4879,6 +4954,33 @@
                $h.addCss($el, 'file-no-browse');
            }
        },
        _initBatchDownload:function($container){//批量下载触发事件 xin 2022-8-4 09:29:40
            var self = this, $batchDowCss = $container.find('.batchDowCss');
            if (self.showBatchDownload && self.initialPreview !='') {
                let elemIF = null;
                self._handler($batchDowCss, 'click', function (e) {
                    let preview = self.initialPreviewConfig;
                    if (preview != null && preview.length > 0) {
                        for (let p = 0; p < preview.length; p++) {
                            let downloadUrl = preview[p].downloadUrl;
                            if (downloadUrl != null && downloadUrl != '') {
                                try {
                                    elemIF = document.createElement("iframe");
                                    elemIF.src = downloadUrl;
                                    elemIF.style.display = "none";
                                    document.body.appendChild(elemIF);
                                } catch (e) {
                                    layer.msg("批量下载异常！");
                                }
                            }
                        }
                        // if (elemIF != null) {
                        //     $(elemIF).remove();
                        // }
                    }
                });
            }
        },
        _initClickable: function () {
            var self = this, $zone, $tmpZone;
            if (!self.isClickable) {
@@ -4949,6 +5051,7 @@
            $h.cspBuffer.apply($container);
            $container.insertBefore(self.$element).attr(attribs);
            self._initBrowse($container);
            self._initBatchDownload($container);
            if (self.theme) {
                $container.addClass('theme-' + self.theme);
            }
@@ -4959,6 +5062,7 @@
            $el.insertAfter($container);
            $h.setHtml($container, self._renderMain());
            self._initBrowse($container);
            self._initBatchDownload($container);
            self._validateDisabled();
        },
        _validateDisabled: function () {
@@ -4990,7 +5094,8 @@
                'remove': self._renderButton('remove'),
                'cancel': self._renderButton('cancel'),
                'pause': self._renderButton('pause'),
                'browse': self._renderButton('browse')
                 'browse': self._renderButton('browse'),
                'batchDownload':self._renderButton('batchDownload')
            });

        },
@@ -5032,12 +5137,18 @@
                    }
                    tmplt = self._getLayoutTemplate('btnBrowse');
                    break;
                case 'batchDownload':
                    if (!self.showBatchDownload || self.initialPreview =='') {
                        return '';
                    }
                    tmplt = self._getLayoutTemplate('btnBatchDownload');
                    break;
                default:
                    return '';
            }
            tmplt = self._setTabIndex(type, tmplt);

            css += type === 'browse' ? ' btn-file' : ' fileinput-' + type + ' fileinput-' + type + '-button';
            css += type === 'browse' ? ' btn-file' : (type==='batchDownload'?' batchDowCss':' fileinput-' + type + ' fileinput-' + type + '-button');
            if (!$h.isEmpty(label)) {
                label = ' <span class="' + self.buttonLabelClass + '">' + label + '</span>';
            }
@@ -5070,6 +5181,7 @@
            out = $h.replaceTags(out, self.previewThumbTags);
            return out;
        },
        //生成脚部按钮信息 xin 2022-9-28 16:11:52
        _renderFileActions: function (
            cfg,
            showUpl,
@@ -6103,11 +6215,12 @@
    var IFRAME_ATTRIBS = 'class="kv-preview-data file-preview-pdf" src="{renderer}?file={data}" {style}',
        defBtnCss1 = 'btn btn-sm btn-kv ' + $h.defaultButtonCss(), defBtnCss2 = 'btn ' + $h.defaultButtonCss();

    $.fn.fileinput.defaults = {
    $.fn.fileinput.defaults = {//初始化 xin 2022-9-29 17:36:25
        language: 'en',
        bytesToKB: 1024,
        showCaption: true,
        showBrowse: true,
        showBatchDownload:false,
        showPreview: true,
        showRemove: true,
        showUpload: true,
@@ -6119,6 +6232,7 @@
        showConsoleLogs: false,
        browseOnZoneClick: false,
        autoReplace: false,
        viewerIndex:0,
        showDescriptionClose: true,
        autoOrientImage: function () { // applicable for JPEG images only and non ios safari
            var ua = window.navigator.userAgent, webkit = !!ua.match(/WebKit/i),
@@ -6167,7 +6281,9 @@
            fullscreen: '<i class="bi-arrows-fullscreen"></i>',
            borderless: '<i class="bi-arrows-angle-expand"></i>',
            close: '<i class="bi-x-lg"></i>',
            search: '<i class="bi bi-search"></i>'
            search: '<i class="bi bi-search"></i>',
            left:'<i class="bi bi-arrow-90deg-left"></i>',
            right:'<i class="bi bi-arrow-90deg-right"></i>'
        },
        previewZoomButtonClasses: {
            prev: 'btn btn-default btn-outline-secondary btn-navigate',
@@ -6176,7 +6292,9 @@
            fullscreen: defBtnCss1,
            borderless: defBtnCss1,
            close: defBtnCss1,
            search:defBtnCss1
            search:defBtnCss1,
            left:defBtnCss1,
            right: defBtnCss1
        },
        previewTemplates: {},
        previewContentTemplates: {},
@@ -6200,6 +6318,8 @@
        buttonLabelClass: 'hidden-xs',
        browseIcon: '<i class="bi-folder2-open"></i> ',
        browseClass: 'btn btn-primary',
        batchDownloadClass:'btn btn-secondary',
        batchDownloadIcon:'<i class="bi bi-arrow-bar-down"></i>',
        removeIcon: '<i class="bi-trash"></i>',
        removeClass: defBtnCss2,
        cancelIcon: '<i class="bi-slash-circle"></i>',
@@ -6303,7 +6423,8 @@
            upload: 500,
            cancel: null,
            pause: null,
            modal: -1
            modal: -1,
            batchDownload:500
        }
    };

@@ -6314,6 +6435,8 @@
        fileSingle: 'file',
        filePlural: 'files',
        browseLabel: 'Browse &hellip;',
        batchDownloadLabel:'批量下载',
        batchDownloadTitle:'批量下载有下载按钮的附件',
        removeLabel: 'Remove',
        removeTitle: 'Clear all unprocessed files',
        cancelLabel: 'Cancel',
@@ -6395,6 +6518,8 @@
            borderless: 'Toggle borderless mode',
            close: 'Close detailed preview',
            search:'放大图片预览',
            left:'全部左旋转',
            right:'全部右旋转'
        }
    };