${self.language.urlError}
`); + self.showPlaceholder( + $content, + `${self.language.urlError}
`, + ); }); $content.append(newIframe); this.previewCache.nextUrl = fullPreviewUrl; - } else { this.previewCache = null; var tipsHtml = ""; @@ -910,285 +900,6 @@ `); }, - showModalPlaceholder: function ($container, tipsHtml) { - $container.find(".g3-modal-preview-iframe").remove(); - $container.html(` -
- ${tipsHtml}
-
- `);
- },
-
- openModal: function (options) {
- var defaults = {
- title: "",
- content: "",
- width: "80%",
- height: "80%",
- showToggle: true,
- showClose: true
- };
-
- var opts = $.extend({}, defaults, options);
-
- this.$modalTitle.text(opts.title || "");
- this.$modalBody.html(opts.content || "");
-
- this.$modal.css({
- width: opts.width,
- height: opts.height
- });
-
- this.$modalBtnToggle.toggle(opts.showToggle);
- this.$modalBtnClose.toggle(opts.showClose);
-
- this.$modalOverlay.addClass("is-visible");
- this.$modal.removeClass("is-maximized");
- this.$modalBtnToggle.html(G3FileIcons.modal.maximize);
- this.$modalBtnToggle.attr("title", this.language.modal.maximize);
- },
-
- openPreviewModal: function (fileId) {
- var file = this.getFileById(fileId);
- if (!file) return;
-
- var isUploaded = file.status === "uploaded";
- var isPreviewable = this.isPreviewableFile(file.name);
- var fileUrl = file.url && file.url !== "" ? file.url : null;
-
- var toolbarHtml = `
-
- `;
-
- var contentHtml = "";
- if (isUploaded && fileUrl && isPreviewable) {
- var previewUrl = this.options.previewUrl || "";
- var fullPreviewUrl = previewUrl
- ? previewUrl + G3FileUtils.base64Encode(fileUrl)
- : fileUrl;
-
- contentHtml = `
-
-
-
- `;
- } else {
- var tipsHtml = "";
- if (!isUploaded) {
- tipsHtml = `${this.language.uploadToPreview}
`; - } else if (!isPreviewable) { - tipsHtml = `${this.language.downloadToPreview}
`; - } else if (!fileUrl) { - tipsHtml = `${this.language.urlError}
`; - } - - contentHtml = ` -
-
- `;
- }
-
- var previewContent = toolbarHtml + contentHtml;
-
- this.currentModalFileId = fileId;
-
- this.openModal({
- title: this.language.filePreview,
- content: previewContent,
- width: "90%",
- height: "90%",
- });
-
- var self = this;
- setTimeout(function () {
- self.$modal.find(".g3-modal-preview-prev").off("click").on("click", function () {
- self.modalPrev();
- });
- self.$modal.find(".g3-modal-preview-next").off("click").on("click", function () {
- self.modalNext();
- });
- self.updateModalPreviewCounter(fileId);
- }, 0);
- },
-
- updateModalPreviewCounter: function (fileId) {
- var allFiles = this.getUploadedFiles();
- var currentIndex = allFiles.findIndex(function (f) { return f._id === fileId; });
- var total = allFiles.length;
-
- var $counter = this.$modal.find(".g3-modal-preview-counter");
- var $prevBtn = this.$modal.find(".g3-modal-preview-prev");
- var $nextBtn = this.$modal.find(".g3-modal-preview-next");
-
- if ($counter.length) {
- $counter.text((currentIndex + 1) + "/" + total);
- }
- if ($prevBtn.length) {
- $prevBtn.prop("disabled", currentIndex === 0);
- }
- if ($nextBtn.length) {
- $nextBtn.prop("disabled", currentIndex === total - 1);
- }
- },
-
- modalPrev: function () {
- var uploadedFiles = this.getUploadedFiles();
- if (uploadedFiles.length === 0) return;
-
- var currentIndex = this.getPreviewFileIndex(this.currentModalFileId);
- var newIndex = currentIndex > 0 ? currentIndex - 1 : uploadedFiles.length - 1;
- this.currentModalFileId = uploadedFiles[newIndex]._id;
- this.updateModalPreviewWithFile(uploadedFiles[newIndex]);
- },
-
- modalNext: function () {
- var uploadedFiles = this.getUploadedFiles();
- if (uploadedFiles.length === 0) return;
-
- var currentIndex = this.getPreviewFileIndex(this.currentModalFileId);
- var newIndex = currentIndex < uploadedFiles.length - 1 ? currentIndex + 1 : 0;
- this.currentModalFileId = uploadedFiles[newIndex]._id;
- this.updateModalPreviewWithFile(uploadedFiles[newIndex]);
- },
-
- updateModalPreviewWithFile: function (file) {
- var $content = this.$modal.find(".g3-modal-preview-content");
- var $title = this.$modal.find(".g3-modal-title");
- var $filename = this.$modal.find(".g3-modal-preview-filename");
-
- if (!file || !$content.length) return;
-
- $title.text(this.language.filePreview);
- if ($filename.length) {
- $filename.text(file.name);
- }
-
- var isUploaded = file.status === "uploaded";
- var isPreviewable = this.isPreviewableFile(file.name);
- var fileUrl = file.url && file.url !== "" ? file.url : null;
-
- if (isUploaded && fileUrl && isPreviewable) {
- var previewUrl = this.options.previewUrl || "";
- var fullPreviewUrl = previewUrl
- ? previewUrl + G3FileUtils.base64Encode(fileUrl)
- : fileUrl;
-
- var newIframe = $(`
-
- `);
-
- $content.html(newIframe);
- } else {
- var tipsHtml = "";
- if (!isUploaded) {
- tipsHtml = `
- ${tipsHtml}
-
- ${this.language.uploadToPreview}
`; - } else if (!isPreviewable) { - tipsHtml = `${this.language.downloadToPreview}
`; - } else if (!fileUrl) { - tipsHtml = `${this.language.urlError}
`; - } - - $content.html(` -
- ${tipsHtml}
-
- `);
- }
-
- this.updateModalPreviewCounter(file._id);
- },
-
- closeModal: function () {
- this.$modalOverlay.removeClass("is-visible");
- this.$modalBody.html("");
- this.$modalTitle.text("");
- this.setModalFooter("");
- this.currentModalFileId = null;
- },
-
- toggleModalSize: function () {
- var isMaximized = this.$modal.hasClass("is-maximized");
-
- if (isMaximized) {
- this.$modal.removeClass("is-maximized");
- this.$modal.css({
- width: "80%",
- height: "80%",
- maxWidth: "none",
- borderRadius: "8px"
- });
- this.$modalBtnToggle.html(G3FileIcons.modal.maximize);
- this.$modalBtnToggle.attr("title", this.language.modal.maximize);
- } else {
- this.$modal.addClass("is-maximized");
- this.$modal.css({
- width: "100%",
- height: "100%",
- maxWidth: "none",
- borderRadius: "0"
- });
- this.$modalBtnToggle.html(G3FileIcons.modal.restore);
- this.$modalBtnToggle.attr("title", this.language.modal.restore);
- }
- },
-
- setModalTitle: function (title) {
- if (this.$modalTitle) {
- this.$modalTitle.text(title || "");
- }
- },
-
- setModalContent: function (content) {
- if (this.$modalBody) {
- this.$modalBody.html(content || "");
- }
- },
-
- setModalSize: function (width, height) {
- if (!this.$modal) return;
-
- this.$modal.css({
- width: width || "80%",
- height: height || "80%"
- });
- },
-
- setModalFooter: function (content) {
- if (!this.$modalFooter) return;
-
- if (content && content.trim()) {
- this.$modalFooter.html(content);
- this.$modalFooter.addClass("has-content");
- } else {
- this.$modalFooter.html("");
- this.$modalFooter.removeClass("has-content");
- }
- },
-
setPreviewFile: function (fileId) {
var file = this.getFileById(fileId);
if (file) {
@@ -1352,9 +1063,6 @@
if (!file) return;
if (!self.hasPermission(file, "view")) return;
self.setPreviewFile(id);
- if (typeof self.options.onPreview === "function") {
- self.options.onPreview([file]);
- }
})
// 下载按钮
.on("click", ".g3-action-download", function (e) {
@@ -1399,12 +1107,9 @@
var file = self.getFileById(id);
if (!file) return;
if (!self.hasPermission(file, "view")) return;
- if (typeof self.options.onPreview === "function") {
- self.options.onPreview([file]);
- }
self.setPreviewFile(id);
})
- // 文件项双击打开 modal 预览
+ // 文件项双击
.on("dblclick", ".g3-file-item", function (e) {
if (
$(e.target).closest(
@@ -1417,8 +1122,25 @@
var file = self.getFileById(id);
if (!file) return;
if (!self.hasPermission(file, "view")) return;
- self.openPreviewModal(id);
+
+ if (typeof self.options.onDblClick === "function") {
+ self.options.onDblClick(file);
+ return;
+ }
+
+ var isUploaded = file.status === "uploaded";
+ var isPreviewable = self.isPreviewableFile(file.name);
+ var fileUrl = file.url && file.url !== "" ? file.url : null;
+
+ if (isUploaded && fileUrl && isPreviewable) {
+ var previewUrl = self.options.previewUrl || "";
+ var fullPreviewUrl = previewUrl
+ ? previewUrl + G3FileUtils.base64Encode(fileUrl)
+ : fileUrl;
+ window.open(fullPreviewUrl, "_blank");
+ }
})
+
// 更多按钮
.on("click", ".g3-action-more", function (e) {
e.preventDefault();
@@ -1437,23 +1159,6 @@
self.openActionMenu($el, file);
});
- // Modal 事件绑定
- this.$modalBtnClose.off("click").on("click", function () {
- self.closeModal();
- });
-
- this.$modalBtnToggle.off("click").on("click", function (e) {
- e.preventDefault();
- e.stopPropagation();
- self.toggleModalSize();
- });
-
- this.$modalOverlay.off("click").on("click", function (e) {
- if (e.target === this) {
- self.closeModal();
- }
- });
-
// 任务关闭按钮事件委托
this.$container.on("click", ".g3-task-close", function (e) {
e.preventDefault();
@@ -1575,8 +1280,8 @@
return;
}
- if (typeof this.options.onBeforeDelete === "function") {
- var result = this.options.onBeforeDelete(files);
+ if (typeof this.options.onDeleteBefore === "function") {
+ var result = this.options.onDeleteBefore(files);
if (result === false) return;
if (typeof result.then === "function") {
result.then(function (confirmed) {
@@ -1881,6 +1586,39 @@
return;
}
+ if (typeof this.options.onUploadBefore === "function") {
+ var result = this.options.onUploadBefore(pendingFiles);
+ if (result === false) return;
+ if (typeof result.then === "function") {
+ result.then(function (confirmed) {
+ if (confirmed)
+ self.internalHandleUpload(
+ pendingFiles,
+ customUpload,
+ concurrency,
+ );
+ });
+ return;
+ }
+ if (typeof result === "function") {
+ result(function (confirmed) {
+ if (confirmed)
+ self.internalHandleUpload(
+ pendingFiles,
+ customUpload,
+ concurrency,
+ );
+ });
+ return;
+ }
+ }
+
+ self.internalHandleUpload(pendingFiles, customUpload, concurrency);
+ },
+
+ internalHandleUpload: function (pendingFiles, customUpload, concurrency) {
+ var self = this;
+
var total = pendingFiles.length;
var taskId = this.startTask({
id: G3FileUtils.generateUniqueId(),
@@ -2273,7 +2011,9 @@
*/
openActionMenu: function ($el, file) {
var items =
- (this.options.getActionMenu && this.options.getActionMenu(file)) || [];
+ (this.options.customActionMenu &&
+ this.options.customActionMenu(file)) ||
+ [];
this.actionMenuState = {
open: true,
@@ -2404,10 +2144,7 @@
}
if (
- Object.prototype.hasOwnProperty.call(
- partialState,
- "globalPermission",
- )
+ Object.prototype.hasOwnProperty.call(partialState, "globalPermission")
) {
this.updatePermissions(partialState.globalPermission);
}
diff --git a/code/file-preview/g3-file/language.js b/code/file-preview/g3-file/language.js
index 03ece5d2..01c35de9 100644
--- a/code/file-preview/g3-file/language.js
+++ b/code/file-preview/g3-file/language.js
@@ -57,12 +57,7 @@ var G3FileLanguages = {
currentItem: "当前项",
close: "关闭",
},
- modal: {
- maximize: "全屏",
- restore: "恢复",
- close: "关闭",
},
- },
"en-US": {
selectAll: "Select All",
download: "Download",
@@ -123,12 +118,7 @@ var G3FileLanguages = {
currentItem: "Current",
close: "Close",
},
- modal: {
- maximize: "Maximize",
- restore: "Restore",
- close: "Close",
},
- },
"ru": {
selectAll: "Выделить все",
download: "Скачать",
@@ -187,10 +177,5 @@ var G3FileLanguages = {
currentItem: "Текущий",
close: "Закрыть",
},
- modal: {
- maximize: "На весь экран",
- restore: "Восстановить",
- close: "Закрыть",
},
- },
};
\ No newline at end of file
diff --git a/code/file-preview/iframe-demo.html b/code/file-preview/iframe-demo.html
new file mode 100644
index 00000000..a333690f
--- /dev/null
+++ b/code/file-preview/iframe-demo.html
@@ -0,0 +1,160 @@
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/code/file-preview/index.html b/code/file-preview/index.html
index 9f462c2c..0e6946ce 100644
--- a/code/file-preview/index.html
+++ b/code/file-preview/index.html
@@ -1,241 +1,164 @@
-
-
+
+
-
+
+
+ G3File 文件管理组件
+通过 iframe 嵌入展示
+
+
+
+
+
+
+
+ index.html
+
+
+
+
+ 功能特性
+-
+
- 文件列表展示与管理 +
- 文件上传（支持阿里云 OSS） +
- 文件预览与下载 +
- 文件删除 +
- 双击事件支持 +
- 自定义操作菜单 +
- 上传/删除前确认回调 +
- 多选与批量操作 +
-
-
-
-
+ G3 File UI Demo
-
-
-
-
-
-
-
+
-
\ No newline at end of file
diff --git a/code/file-preview/test.html b/code/file-preview/test.html
deleted file mode 100644
index 2540f218..00000000
--- a/code/file-preview/test.html
+++ /dev/null
@@ -1,227 +0,0 @@
-
-
-
-
-
-
+
+
G3File 文件管理组件
+基础示例 - 支持文件上传、预览、下载、删除等功能
-
-
-
-
-
-
-
-
-
\ No newline at end of file
-
-
-
-
- 
-
-
-
-
-
- uploading-file.zip
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- finished.pdf
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- error-image.png
-
-
-
-
-
-