From 71dba636c76cf62e143e3b766902f4400a7ca230 Mon Sep 17 00:00:00 2001
From: xinyb <574600396@qq.com>
Date: 星期五, 30 九月 2022 16:07:01 +0800
Subject: [PATCH] 优化附件图片浏览模式
---
WebRoot/js/index/funcLink.js | 43 ++++++++++++---------
WebRoot/js/bootstrap/fileinput/js/fileinput.js | 70 +++++++++++++++++++++++++++++------
2 files changed, 82 insertions(+), 31 deletions(-)
diff --git a/WebRoot/js/bootstrap/fileinput/js/fileinput.js b/WebRoot/js/bootstrap/fileinput/js/fileinput.js
index 30bab53..e20752f 100644
--- a/WebRoot/js/bootstrap/fileinput/js/fileinput.js
+++ b/WebRoot/js/bootstrap/fileinput/js/fileinput.js
@@ -1681,6 +1681,7 @@
};
rm.reset();
},
+ //杩欓噷鏄ā鏉� xin 2022-9-29 17:20:13
_initTemplateDefaults: function () {
var self = this, tMain1, tMain2, tPreview, tFileIcon, tClose, tCaption, tBtnDefault, tBtnLink, tBtnBrowse,tBtnBatchDownload,
tModalMain, tModal, tProgress, tSize, tFooter, tActions, tActionDelete, tActionUpload, tActionDownload,
@@ -1734,8 +1735,14 @@
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">{left}{right}{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' +
@@ -2179,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);
}
@@ -2882,7 +2889,8 @@
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) {
@@ -3046,8 +3054,8 @@
$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'),
@@ -3065,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) {
@@ -3233,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 () {
@@ -4283,6 +4326,7 @@
var self = this;
return self.mimeTypeAliases[ftype] || ftype;
},
+ //鍒涘缓璇曞浘 xin 2022-9-28 16:06:29
_generatePreviewTemplate: function (
cat,
data,
@@ -5137,6 +5181,7 @@
out = $h.replaceTags(out, self.previewThumbTags);
return out;
},
+ //鐢熸垚鑴氶儴鎸夐挳淇℃伅 xin 2022-9-28 16:11:52
_renderFileActions: function (
cfg,
showUpl,
@@ -6170,7 +6215,7 @@
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,
@@ -6187,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),
@@ -6472,8 +6518,8 @@
borderless: 'Toggle borderless mode',
close: 'Close detailed preview',
search:'鏀惧ぇ鍥剧墖棰勮',
- left:'宸︽棆杞�',
- right:'鍙虫棆杞�'
+ left:'鍏ㄩ儴宸︽棆杞�',
+ right:'鍏ㄩ儴鍙虫棆杞�'
}
};
diff --git a/WebRoot/js/index/funcLink.js b/WebRoot/js/index/funcLink.js
index b85a39c..5e96396 100644
--- a/WebRoot/js/index/funcLink.js
+++ b/WebRoot/js/index/funcLink.js
@@ -303,29 +303,32 @@
}
}).on('filezoomshown', function(event, params) {
//姝や簨浠跺湪妯℃�佸鐢ㄦ埛鍙鍚庤Е鍙戯紙灏嗙瓑寰� CSS 杞崲瀹屾垚锛�
- Event.imageEvent();
+ Event.imageEvent(params);
}).on('filezoomprev', function(event, params) {
//浜嬩欢鍦ㄧ缉鏀鹃瑙堟ā寮忎笅锛屽綋鐐瑰嚮涓婁竴涓鑸寜閽煡鐪嬩笂涓�涓枃浠舵椂瑙﹀彂锛堜篃鍦ㄧ缉鏀炬ā寮忎笅鎸変笅閿洏宸︾澶存椂瑙﹀彂锛�
- Event.imageEvent();
+ setTimeout(function(){//杩欎釜瀛樺湪寮傛闂 娌′粈涔堝喅缁濆姙娉曠敤setTimeout鍚�
+ Event.imageEvent(params)
+ },300);
}).on('filezoomnext', function(event, params) {
//璇ヤ簨浠跺湪缂╂斁棰勮妯″紡涓嬶紝褰撶偣鍑讳笅涓�涓鑸寜閽煡鐪嬩笅涓�涓枃浠舵椂瑙﹀彂锛堜篃鍦ㄧ缉鏀炬ā寮忎笅鎸変笅閿洏鍙崇澶存椂瑙﹀彂锛夈��
- Event.imageEvent();
+ setTimeout(function(){
+ Event.imageEvent(params)
+ },300);
});
- },imageEvent:function () {
- let kv = $('#kvFileinputModal .file-zoom-content img');
- if (kv.length > 0) {
- try {
- isFileInputImage = new Viewer(kv[0], {
- title: false, viewed: function () {
- if (isFileInputImage.imageCurrent != null) {
- isFileInputImage.rotate(isFileInputImage.imageCurrent);
- }
- }
- });
- isFileInputImage.imageCurrent = 0
- } catch (e) {
- isFileInputImage = null;
- }
+ },imageEvent:function (param) {
+ try {
+ isFileInputImage = new Viewer(param.modal.find('ul')[0], {
+ title: true, inline: true, button: false
+ // , viewed: function () {// 鍥剧墖娓叉煋瀹屽悗杩涘叆锛屾棆杞ぇ鍥剧墖
+ // if (typeof isFileInputImage == "object" && isFileInputImage.imageCurrent != null) {
+ // isFileInputImage.rotate(isFileInputImage.imageCurrent);
+ // }
+ // }
+ });
+ isFileInputImage.imageCurrent = 0
+ isFileInputImage.view(param.viewerIndex || 0);
+ } catch (e) {
+ isFileInputImage = null;
}
}
}
@@ -479,7 +482,9 @@
'hasZoom': jsons[i].allowView,//鏄惁鑳芥煡鐪�
// 'hasDwn': jsons[i].allowDownload,//鏄惁鑳戒笅杞�
'hasDel': jsons[i].allowDelete,//鏄惁鑳藉垹闄�
- 'hasLock': jsons[i].authorCode != null && jsons[i].authorCode == param.usercode ? true : false//鏄惁鑳芥樉绀烘潈闄�
+ 'hasLock': jsons[i].authorCode != null && jsons[i].authorCode == param.usercode ? true : false,//鏄惁鑳芥樉绀烘潈闄�
+ 'viewsNumber':100,//鏌ョ湅娆℃暟
+ 'downNumber':21//涓嬭浇娆℃暟
});
}
// 闄勪欢涓婁紶璺緞(缁勮鍙傛暟)
--
Gitblit v1.8.0