From 3e935e886ce7818f009a598493886d7d08a93b8d Mon Sep 17 00:00:00 2001
From: shixuanhong <310303892@qq.com>
Date: Sun, 17 Jan 2021 18:36:27 +0800
Subject: [PATCH] =?UTF-8?q?loading=E9=85=8D=E7=BD=AE=E9=A1=B9=E8=A1=A5?=
=?UTF-8?q?=E5=85=85=201.image=E6=94=AF=E6=8C=81function=202.show=E5=B1=9E?=
=?UTF-8?q?=E6=80=A7=E5=90=8D=E6=9B=B4=E6=94=B9=E4=B8=BAenable=203.?=
=?UTF-8?q?=E6=B7=BB=E5=8A=A0viewBox=E5=B1=9E=E6=80=A7=EF=BC=8C=E4=BB=85?=
=?UTF-8?q?=E5=9C=A8image=E4=B8=BApath://=E7=94=9F=E6=95=88=204.=E6=B7=BB?=
=?UTF-8?q?=E5=8A=A0textClass=E5=B1=9E=E6=80=A7,=E6=96=87=E6=9C=AC?=
=?UTF-8?q?=E6=A0=B7=E5=BC=8F=E8=87=AA=E5=AE=9A=E4=B9=89=205.=E6=B7=BB?=
=?UTF-8?q?=E5=8A=A0imageClass=E5=B1=9E=E6=80=A7=EF=BC=8C=E5=9B=BE?=
=?UTF-8?q?=E7=89=87=E6=A0=B7=E5=BC=8F=E8=87=AA=E5=AE=9A=E4=B9=89=EF=BC=8C?=
=?UTF-8?q?=E5=8F=AF=E5=9C=A8=E8=BF=99=E9=87=8C=E8=AE=BE=E7=BD=AEanimation?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
gulpfile.js | 1 +
package.json | 1 +
src/controllers/constant.js | 77 +-
src/controllers/filter.js | 8 +-
src/controllers/menuButton.js | 11 +-
src/controllers/pivotTable.js | 8 +-
src/controllers/sheetmanage.js | 6 +-
src/core.js | 3 +-
src/css/luckysheet-core.css | 57 +-
src/global/method.js | 4 +-
src/index.html | 61 +-
src/locale/en.js | 2 +-
src/locale/es.js | 2 +-
src/locale/zh.js | 2 +-
src/locale/zh_tw.js | 2 +-
src/store/index.js | 1 +
yarn.lock | 11586 +++++++++++++++++++++++++++++++
17 files changed, 11760 insertions(+), 72 deletions(-)
create mode 100644 yarn.lock
diff --git a/gulpfile.js b/gulpfile.js
index 0e3e2ff..c5d2f2b 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -87,6 +87,7 @@ const paths = {
css:['src/css/*.css','node_modules/flatpickr/dist/themes/light.css'],
pluginsJs:[
'node_modules/jquery/dist/jquery.min.js',
+ 'node_modules/uuid/dist/umd/uuid.min.js',
'src/plugins/js/clipboard.min.js',
'src/plugins/js/spectrum.min.js',
'src/plugins/js/jquery-ui.min.js',
diff --git a/package.json b/package.json
index c8c0db0..76488fb 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
"rollup": "^2.32.1",
"rollup-plugin-terser": "^6.1.0",
"standard-version": "^8.0.2",
+ "uuid": "^8.3.2",
"vuepress": "^1.5.0",
"vuepress-plugin-baidu-autopush": "^1.0.1",
"vuepress-plugin-code-copy": "^1.0.6",
diff --git a/src/controllers/constant.js b/src/controllers/constant.js
index 5c833e5..16f0a79 100644
--- a/src/controllers/constant.js
+++ b/src/controllers/constant.js
@@ -1580,20 +1580,24 @@ function customLoadingConfig() {
const _locale = locale();
const info = _locale.info;
const config = {
- show: true,
+ enable: true,
image: 'image://css/loading.gif',
text: info.loading,
- customClass:''
+ viewBox: "32 32 64 64", // 只有为path时,才会使用
+ imageClass: '',
+ textClass: '',
+ customClass: ''
}
if (JSON.stringify(luckysheetConfigsetting.loading) !== '{}') {
Object.assign(config, luckysheetConfigsetting.loading);
}
- luckysheetConfigsetting.loading = config;
return config;
}
-const luckysheetloadingImage = function () {
- const config = customLoadingConfig();
+const luckysheetloadingImage = function (config) {
+ if(typeof config.image==="function"){
+ return config.image()
+ }
const regE = new RegExp("^(image|path)://");
const regResult = regE.exec(config.image);
let imageHtml = '';
@@ -1607,12 +1611,13 @@ const luckysheetloadingImage = function () {
break;
case "path":
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
- svg.setAttribute("class", "path-type")
- svg.setAttribute("viewBox", "0 0 64 64")
+ svg.setAttribute("class", "path-type");
+ svg.setAttribute("viewBox", config.viewBox);
const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
path.setAttribute("d", imageStr);
+ path.setAttribute("fill", "currentColor");
svg.appendChild(path);
- imageHtml = svg.outerHTML
+ imageHtml = svg.outerHTML;
break;
default:
break;
@@ -1621,24 +1626,56 @@ const luckysheetloadingImage = function () {
return imageHtml;
}
-const luckysheetlodingHTML = function () {
+const luckysheetlodingHTML = function (target, coverConfig) {
+ if (!target) {
+ return;
+ }
const config = customLoadingConfig();
- if (typeof config.show === "boolean" && config.show === false) {
- return '';
+ if (coverConfig && JSON.stringify(coverConfig) !== "{}") {
+ Object.assign(config, coverConfig);
}
- const imageHtml = luckysheetloadingImage()
- const loadingHtml = `
-
+ if (typeof config.enable === "boolean" && config.enable === false) {
+ return {
+ el: '',
+ show: show,
+ close: close
+ }
+ }
+ const imageHtml = luckysheetloadingImage(config);
+ const id = "luckysheet-loading-" + uuid.v4();
+ const loadingHtml = `
-
+
${imageHtml}
-
${config.text}
-
-
-
`
- return loadingHtml;
+
+ ${config.text}
+
+
`;
+ const loading = document.createElement("div");
+ loading.id = id;
+ loading.className = "luckysheet-loading-mask " + config.customClass;
+ $(loading).html(loadingHtml);
+ $(target).append(loading);
+
+ function show() {
+ if(id){
+ $("#" + id).show();
+ }
+ }
+
+ function close() {
+ if(id){
+ $("#" + id).hide();
+ }
+ }
+ return {
+ el: loading,
+ show: show,
+ close: close
+ };
}
+
// var menusetting = {
// menu_selectall: ' 全选
',
// menu_copy: ' 复制
',
diff --git a/src/controllers/filter.js b/src/controllers/filter.js
index 4561a1a..93a5cfb 100644
--- a/src/controllers/filter.js
+++ b/src/controllers/filter.js
@@ -5,6 +5,7 @@ import tooltip from '../global/tooltip';
import { rowlenByRange } from '../global/getRowlen';
import { selectHightlightShow } from './select';
import { luckysheetMoveEndCell } from './sheetMove';
+import { luckysheetlodingHTML } from '../controllers/constant';
import server from './server';
import locale from '../locale/locale';
import Store from '../store';
@@ -480,7 +481,8 @@ function initialFilterHandler(){
orderbydatafiler(st_r, st_c, ed_r, ed_c, cindex, false);
});
- $("#luckysheet-filter-byvalue-select").empty().html(''+locale_filter.filiterMoreDataTip+' ');
+ const loadingObj = luckysheetlodingHTML("#luckysheet-filter-byvalue-select",{text:locale_filter.filiterMoreDataTip});
+ $("#luckysheet-filter-byvalue-select").empty().append(loadingObj.el);
let rowhiddenother = {}; //其它筛选列的隐藏行
$("#luckysheet-filter-options-sheet" + Store.currentSheetIndex + " .luckysheet-filter-options").not(this).each(function () {
@@ -726,8 +728,8 @@ function initialFilterHandler(){
}
}
}
-
- $("#luckysheet-filter-byvalue-select").html("");
+ $("#luckysheet-filter-byvalue-select").append("");
+ loadingObj.close();
}, 1);
showrightclickmenu($menu, toffset.left, toffset.top + 20);
diff --git a/src/controllers/menuButton.js b/src/controllers/menuButton.js
index 393fad7..0aa2bc4 100644
--- a/src/controllers/menuButton.js
+++ b/src/controllers/menuButton.js
@@ -544,8 +544,6 @@ const menuButton = {
_this.updateFormat(d, "fc", color);
});
-
-
$("#luckysheet-icon-text-color-menu").mousedown(function(e){
hideMenuByCancel(e);
e.stopPropagation();
@@ -600,6 +598,7 @@ const menuButton = {
["#900","#b45f06","#bf9000","#38761d","#134f5c","#0b5394","#351c75","#741b47"],
["#600","#783f04","#7f6000","#274e13","#0c343d","#073763","#20124d","#4c1130"]],
change: function (color) {
+ let $input = $(this);
if (color != null) {
color = color.toHexString();
}
@@ -607,6 +606,7 @@ const menuButton = {
color = "#000";
}
+ let oldcolor = null;
// $("#luckysheet-icon-text-color .luckysheet-color-menu-button-indicator").css("border-bottom-color", color);
// 下边框换成了一个DIV
$("#luckysheet-icon-text-color .text-color-bar").css("background-color", color);
@@ -617,9 +617,6 @@ const menuButton = {
$menuButton.hide();
luckysheetContainerFocus();
-
- /* 备注:在单元格编辑状态下切换了文本的颜色存在bug,此处需设置编辑框的color样式, */
- $("#luckysheet-input-box").css("color",color);
},
});
@@ -741,6 +738,7 @@ const menuButton = {
["#600", "#783f04", "#7f6000", "#274e13", "#0c343d", "#073763", "#20124d", "#4c1130"]
],
change: function (color) {
+ let $input = $(this);
if (color != null) {
color = color.toHexString();
}
@@ -748,6 +746,7 @@ const menuButton = {
color = "#fff";
}
+ let oldcolor = null;
// $("#luckysheet-icon-cell-color .luckysheet-color-menu-button-indicator").css("border-bottom-color", color);
// 下边框换成了一个DIV
$("#luckysheet-icon-cell-color .text-color-bar").css("background-color", color);
@@ -2436,7 +2435,7 @@ const menuButton = {
let dataset = new Function("return " + d)();
setTimeout(function(){
- $("#luckysheetloadingdata").fadeOut().remove();
+ Store.loadingObj.close()
}, 500);
for(let item in dataset){
diff --git a/src/controllers/pivotTable.js b/src/controllers/pivotTable.js
index d8773c1..bf71cb5 100644
--- a/src/controllers/pivotTable.js
+++ b/src/controllers/pivotTable.js
@@ -36,6 +36,7 @@ import {checkProtectionAuthorityNormal} from './protection';
import Store from '../store';
import locale from '../locale/locale';
import numeral from 'numeral';
+import { luckysheetlodingHTML } from '../controllers/constant';
const pivotTable = {
pivotDatas: null,
@@ -283,8 +284,8 @@ const pivotTable = {
else if (byconditiontype == "1") {
$("#luckysheet-pivotTableFilter-menu .luckysheet-pivotTableFilter-selected-input").eq(0).show().find("input").val($t.data("byconditionvalue1"));
}
-
- $("#luckysheet-pivotTableFilter-byvalue-select").empty().html('
'+locale_filter.filiterMoreDataTip+' ');
+ const loadingObj = luckysheetlodingHTML("#luckysheet-pivotTableFilter-byvalue-select",{text:locale_filter.filiterMoreDataTip});
+ $("#luckysheet-pivotTableFilter-byvalue-select").empty().append(loadingObj.el)
let rowhiddenother = {}; //其它筛选列的隐藏行
$("#luckysheet-modal-dialog-pivotTable-list .luckysheet-modal-dialog-slider-list-item").not($t.get(0)).each(function () {
@@ -533,7 +534,8 @@ const pivotTable = {
}
}
- $("#luckysheet-pivotTableFilter-byvalue-select").html("" + item.join("") + "
");
+ $("#luckysheet-pivotTableFilter-byvalue-select").append("" + item.join("") + "
");
+ loadingObj.close()
}, 1);
showrightclickmenu($menu, toffset.left - 250, toffset.top);
diff --git a/src/controllers/sheetmanage.js b/src/controllers/sheetmanage.js
index dc3208a..3a5efe8 100644
--- a/src/controllers/sheetmanage.js
+++ b/src/controllers/sheetmanage.js
@@ -864,12 +864,12 @@ const sheetmanage = {
if(luckysheetConfigsetting.pointEdit){
setTimeout(function(){
- $("#luckysheetloadingdata").remove();
+ Store.loadingObj.close()
}, 0);
}
else{
setTimeout(function(){
- $("#luckysheetloadingdata").fadeOut().remove();
+ Store.loadingObj.close()
}, 500);
}
}
@@ -1243,7 +1243,7 @@ const sheetmanage = {
let data = _this.buildGridData(file);
setTimeout(function(){
- $("#luckysheetloadingdata").fadeOut().remove();
+ Store.loadingObj.close()
}, 500);
for(let item in dataset){
diff --git a/src/core.js b/src/core.js
index 7f7a125..c8d58b8 100644
--- a/src/core.js
+++ b/src/core.js
@@ -157,7 +157,8 @@ luckysheet.create = function (setting) {
Store.devicePixelRatio = Math.ceil(devicePixelRatio);
//loading
- $("#" + container).append(luckysheetlodingHTML());
+ const loadingObj=luckysheetlodingHTML("#" + container)
+ Store.loadingObj=loadingObj
if (loadurl == "") {
sheetmanage.initialjfFile(menu, title);
diff --git a/src/css/luckysheet-core.css b/src/css/luckysheet-core.css
index 7a94f6d..9dcbc28 100644
--- a/src/css/luckysheet-core.css
+++ b/src/css/luckysheet-core.css
@@ -37,21 +37,44 @@
outline: none;
}
+.luckysheetLoaderGif {
+ /*换用GIF loading*/
+ width: 8em;
+ height: 8em;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ -ms-transform: translate(-50%, -100%);
+ -moz-transform: translate(-50%, -100%);
+ -o-transform: translate(-50%, -100%);
+ transform: translate(-50%, -100%);
+
+ background-image: url(loading.gif);
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: 100% 100%;
+}
+
.luckysheet-loading-mask{
- width:100%;
- text-align:center;
position:absolute;
- top:0px;
- height:100%;
- font-size: 16px;
z-index:1000000000;
+ margin: 0;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ width:100%;
+ height:100%;
background:#fff;
}
.luckysheet-loading-content{
position:relative;
- top:40%;
+ top: 50%;
+ transform: translateY(-50%);
width:100%;
+ font-size: 14px;
+ color: #409eff;
text-align:center;
}
@@ -61,6 +84,10 @@
margin: 0 auto;
}
+.luckysheet-loading-text{
+ margin-top: 1em;
+}
+
.luckysheet-loading-image .image-type{
width:100%;
height:100%;
@@ -4973,24 +5000,6 @@ fieldset[disabled] .btn-danger.focus {
animation: load-effect 1s infinite linear;
}
-.luckysheetLoaderGif {
- /*换用GIF loading*/
- width: 8em;
- height: 8em;
- position: absolute;
- top: 50%;
- left: 50%;
- -ms-transform: translate(-50%, -100%);
- -moz-transform: translate(-50%, -100%);
- -o-transform: translate(-50%, -100%);
- transform: translate(-50%, -100%);
-
- background-image: url(loading.gif);
- background-repeat: no-repeat;
- background-position: center;
- background-size: 100% 100%;
-}
-
/*.luckysheetLoaderGif>img{
width:100%;
height:100%;
diff --git a/src/global/method.js b/src/global/method.js
index 9d7eab8..e7ebad1 100644
--- a/src/global/method.js
+++ b/src/global/method.js
@@ -326,7 +326,7 @@ const method = {
luckysheetextendData(dataset["row"], newData);
setTimeout(function(){
- $("#luckysheetloadingdata").fadeOut().remove();
+ Store.loadingObj.close()
}, 500);
if(func && typeof(func)=="function"){
@@ -359,7 +359,7 @@ const method = {
let data = sheetmanage.buildGridData(file);
setTimeout(function(){
- $("#luckysheetloadingdata").fadeOut().remove();
+ Store.loadingObj.close()
}, 500);
file["data"] = data;
diff --git a/src/index.html b/src/index.html
index e098e95..2fa8773 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1869,13 +1869,62 @@
"scrollTop": 0
}]*/
}
- }
-
- luckysheet.create(options);
-
- })
+ }
+ options.loading={
+ image:()=>{
+ return ``
+ },
+ imageClass:"loadingAnimation"
+ }
+ luckysheet.create(options);
+ })
-
+