elink-star
/
luckysheet
12
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

loading配置项补充 

1.image支持function
2.show属性名更改为enable
3.添加viewBox属性，仅在image为path://生效
4.添加textClass属性,文本样式自定义
5.添加imageClass属性，图片样式自定义，可在这里设置animation
master
shixuanhong 5 years ago
parent
9c33054982
commit
3e935e886c
17 changed files with 11760 additions and 72 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      gulpfile.js
  2. 1
      package.json
  3. 75
      src/controllers/constant.js
  4. 8
      src/controllers/filter.js
  5. 11
      src/controllers/menuButton.js
  6. 8
      src/controllers/pivotTable.js
  7. 6
      src/controllers/sheetmanage.js
  8. 3
      src/core.js
  9. 57
      src/css/luckysheet-core.css
  10. 4
      src/global/method.js
  11. 53
      src/index.html
  12. 2
      src/locale/en.js
  13. 2
      src/locale/es.js
  14. 2
      src/locale/zh.js
  15. 2
      src/locale/zh_tw.js
  16. 1
      src/store/index.js
  17. 11586
      yarn.lock

1
gulpfile.js
View File

@ -87,6 +87,7 @@ const paths = {
css:['src/css/*.css','node_modules/flatpickr/dist/themes/light.css'], css:['src/css/*.css','node_modules/flatpickr/dist/themes/light.css'],
pluginsJs:[ pluginsJs:[
'node_modules/jquery/dist/jquery.min.js', 'node_modules/jquery/dist/jquery.min.js',
'node_modules/uuid/dist/umd/uuid.min.js',
'src/plugins/js/clipboard.min.js', 'src/plugins/js/clipboard.min.js',
'src/plugins/js/spectrum.min.js', 'src/plugins/js/spectrum.min.js',
'src/plugins/js/jquery-ui.min.js', 'src/plugins/js/jquery-ui.min.js',

1
package.json
View File

@ -28,6 +28,7 @@
"rollup": "^2.32.1", "rollup": "^2.32.1",
"rollup-plugin-terser": "^6.1.0", "rollup-plugin-terser": "^6.1.0",
"standard-version": "^8.0.2", "standard-version": "^8.0.2",
"uuid": "^8.3.2",
"vuepress": "^1.5.0", "vuepress": "^1.5.0",
"vuepress-plugin-baidu-autopush": "^1.0.1", "vuepress-plugin-baidu-autopush": "^1.0.1",
"vuepress-plugin-code-copy": "^1.0.6", "vuepress-plugin-code-copy": "^1.0.6",

75
src/controllers/constant.js
View File

@ -1580,20 +1580,24 @@ function customLoadingConfig() {
const _locale = locale(); const _locale = locale();
const info = _locale.info; const info = _locale.info;
const config = { const config = {
show: true, enable: true,
image: 'image://css/loading.gif', image: 'image://css/loading.gif',
text: info.loading, text: info.loading,
customClass:'' viewBox: "32 32 64 64", // 只有为path时，才会使用
imageClass: '',
textClass: '',
customClass: ''
} }
if (JSON.stringify(luckysheetConfigsetting.loading) !== '{}') { if (JSON.stringify(luckysheetConfigsetting.loading) !== '{}') {
Object.assign(config, luckysheetConfigsetting.loading); Object.assign(config, luckysheetConfigsetting.loading);
} }
luckysheetConfigsetting.loading = config;
return config; return config;
} }
const luckysheetloadingImage = function () { const luckysheetloadingImage = function (config) {
const config = customLoadingConfig(); if(typeof config.image==="function"){
return config.image()
}
const regE = new RegExp("^(image|path)://"); const regE = new RegExp("^(image|path)://");
const regResult = regE.exec(config.image); const regResult = regE.exec(config.image);
let imageHtml = ''; let imageHtml = '';
@ -1607,12 +1611,13 @@ const luckysheetloadingImage = function () {
break; break;
case "path": case "path":
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("class", "path-type") svg.setAttribute("class", "path-type");
svg.setAttribute("viewBox", "0 0 64 64") svg.setAttribute("viewBox", config.viewBox);
const path = document.createElementNS("http://www.w3.org/2000/svg", "path"); const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
path.setAttribute("d", imageStr); path.setAttribute("d", imageStr);
path.setAttribute("fill", "currentColor");
svg.appendChild(path); svg.appendChild(path);
imageHtml = svg.outerHTML imageHtml = svg.outerHTML;
break; break;
default: default:
break; break;
@ -1621,24 +1626,56 @@ const luckysheetloadingImage = function () {
return imageHtml; return imageHtml;
} }
const luckysheetlodingHTML = function () { const luckysheetlodingHTML = function (target, coverConfig) {
if (!target) {
return;
}
const config = customLoadingConfig(); const config = customLoadingConfig();
if (typeof config.show === "boolean" && config.show === false) { if (coverConfig && JSON.stringify(coverConfig) !== "{}") {
return ''; Object.assign(config, coverConfig);
}
if (typeof config.enable === "boolean" && config.enable === false) {
return {
el: '',
show: show,
close: close
} }
const imageHtml = luckysheetloadingImage() }
const loadingHtml = `<div id="luckysheetloadingdata" class="luckysheet-loading ${config.customClass}"> const imageHtml = luckysheetloadingImage(config);
<div class="luckysheet-loading-mask"> const id = "luckysheet-loading-" + uuid.v4();
const loadingHtml = `
<div class="luckysheet-loading-content"> <div class="luckysheet-loading-content">
<div class="luckysheet-loading-image"> <div class="${config.imageClass} luckysheet-loading-image">
${imageHtml} ${imageHtml}
</div> </div>
<span class="luckysheet-loading-text">${config.text}</span> <div class="${config.textClass} luckysheet-loading-text">
</div> <span>${config.text}</span>
</div> </div>
</div>` </div>`;
return loadingHtml; 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 = { // var menusetting = {
// menu_selectall: '<div id="luckysheet-selectall-btn-title"><i class="fa fa-i-cursor"></i> 全选</div>', // menu_selectall: '<div id="luckysheet-selectall-btn-title"><i class="fa fa-i-cursor"></i> 全选</div>',
// menu_copy: '<div id="luckysheet-copy-btn-title"><i class="fa fa-copy"></i> 复制</div>', // menu_copy: '<div id="luckysheet-copy-btn-title"><i class="fa fa-copy"></i> 复制</div>',

8
src/controllers/filter.js
View File

@ -5,6 +5,7 @@ import tooltip from '../global/tooltip';
import { rowlenByRange } from '../global/getRowlen'; import { rowlenByRange } from '../global/getRowlen';
import { selectHightlightShow } from './select'; import { selectHightlightShow } from './select';
import { luckysheetMoveEndCell } from './sheetMove'; import { luckysheetMoveEndCell } from './sheetMove';
import { luckysheetlodingHTML } from '../controllers/constant';
import server from './server'; import server from './server';
import locale from '../locale/locale'; import locale from '../locale/locale';
import Store from '../store'; import Store from '../store';
@ -480,7 +481,8 @@ function initialFilterHandler(){
orderbydatafiler(st_r, st_c, ed_r, ed_c, cindex, false); orderbydatafiler(st_r, st_c, ed_r, ed_c, cindex, false);
}); });
$("#luckysheet-filter-byvalue-select").empty().html('<div style="width:100%;text-align:center;position:relative;top:45%;font-size:14px;"><div class="luckysheetLoaderGif"></div><span>'+locale_filter.filiterMoreDataTip+'</span></div>'); const loadingObj = luckysheetlodingHTML("#luckysheet-filter-byvalue-select",{text:locale_filter.filiterMoreDataTip});
$("#luckysheet-filter-byvalue-select").empty().append(loadingObj.el);
let rowhiddenother = {}; //其它筛选列的隐藏行 let rowhiddenother = {}; //其它筛选列的隐藏行
$("#luckysheet-filter-options-sheet" + Store.currentSheetIndex + " .luckysheet-filter-options").not(this).each(function () { $("#luckysheet-filter-options-sheet" + Store.currentSheetIndex + " .luckysheet-filter-options").not(this).each(function () {
@ -726,8 +728,8 @@ function initialFilterHandler(){
} }
} }
} }
$("#luckysheet-filter-byvalue-select").append("<div class='ListBox luckysheet-mousedown-cancel' style='min-height: 100px; max-height: " + (winH - toffset.top - 350) + "px; overflow-y: auto; overflow-x: hidden;'><table cellspacing='0' style='width:100%;' class='luckysheet-mousedown-cancel'>" + item.join("") + "</table></div>");
$("#luckysheet-filter-byvalue-select").html("<div class='ListBox luckysheet-mousedown-cancel' style='min-height: 100px; max-height: " + (winH - toffset.top - 350) + "px; overflow-y: auto; overflow-x: hidden;'><table cellspacing='0' style='width:100%;' class='luckysheet-mousedown-cancel'>" + item.join("") + "</table></div>"); loadingObj.close();
}, 1); }, 1);
showrightclickmenu($menu, toffset.left, toffset.top + 20); showrightclickmenu($menu, toffset.left, toffset.top + 20);

11
src/controllers/menuButton.js
View File

@ -544,8 +544,6 @@ const menuButton = {
_this.updateFormat(d, "fc", color); _this.updateFormat(d, "fc", color);
}); });
$("#luckysheet-icon-text-color-menu").mousedown(function(e){ $("#luckysheet-icon-text-color-menu").mousedown(function(e){
hideMenuByCancel(e); hideMenuByCancel(e);
e.stopPropagation(); e.stopPropagation();
@ -600,6 +598,7 @@ const menuButton = {
["#900","#b45f06","#bf9000","#38761d","#134f5c","#0b5394","#351c75","#741b47"], ["#900","#b45f06","#bf9000","#38761d","#134f5c","#0b5394","#351c75","#741b47"],
["#600","#783f04","#7f6000","#274e13","#0c343d","#073763","#20124d","#4c1130"]], ["#600","#783f04","#7f6000","#274e13","#0c343d","#073763","#20124d","#4c1130"]],
change: function (color) { change: function (color) {
let $input = $(this);
if (color != null) { if (color != null) {
color = color.toHexString(); color = color.toHexString();
} }
@ -607,6 +606,7 @@ const menuButton = {
color = "#000"; color = "#000";
} }
let oldcolor = null;
// $("#luckysheet-icon-text-color .luckysheet-color-menu-button-indicator").css("border-bottom-color", color); // $("#luckysheet-icon-text-color .luckysheet-color-menu-button-indicator").css("border-bottom-color", color);
// 下边框换成了一个DIV // 下边框换成了一个DIV
$("#luckysheet-icon-text-color .text-color-bar").css("background-color", color); $("#luckysheet-icon-text-color .text-color-bar").css("background-color", color);
@ -617,9 +617,6 @@ const menuButton = {
$menuButton.hide(); $menuButton.hide();
luckysheetContainerFocus(); luckysheetContainerFocus();
/* 备注：在单元格编辑状态下切换了文本的颜色存在bug，此处需设置编辑框的color样式， */
$("#luckysheet-input-box").css("color",color);
}, },
}); });
@ -741,6 +738,7 @@ const menuButton = {
["#600", "#783f04", "#7f6000", "#274e13", "#0c343d", "#073763", "#20124d", "#4c1130"] ["#600", "#783f04", "#7f6000", "#274e13", "#0c343d", "#073763", "#20124d", "#4c1130"]
], ],
change: function (color) { change: function (color) {
let $input = $(this);
if (color != null) { if (color != null) {
color = color.toHexString(); color = color.toHexString();
} }
@ -748,6 +746,7 @@ const menuButton = {
color = "#fff"; color = "#fff";
} }
let oldcolor = null;
// $("#luckysheet-icon-cell-color .luckysheet-color-menu-button-indicator").css("border-bottom-color", color); // $("#luckysheet-icon-cell-color .luckysheet-color-menu-button-indicator").css("border-bottom-color", color);
// 下边框换成了一个DIV // 下边框换成了一个DIV
$("#luckysheet-icon-cell-color .text-color-bar").css("background-color", color); $("#luckysheet-icon-cell-color .text-color-bar").css("background-color", color);
@ -2436,7 +2435,7 @@ const menuButton = {
let dataset = new Function("return " + d)(); let dataset = new Function("return " + d)();
setTimeout(function(){ setTimeout(function(){
$("#luckysheetloadingdata").fadeOut().remove(); Store.loadingObj.close()
}, 500); }, 500);
for(let item in dataset){ for(let item in dataset){

8
src/controllers/pivotTable.js
View File

@ -36,6 +36,7 @@ import {checkProtectionAuthorityNormal} from './protection';
import Store from '../store'; import Store from '../store';
import locale from '../locale/locale'; import locale from '../locale/locale';
import numeral from 'numeral'; import numeral from 'numeral';
import { luckysheetlodingHTML } from '../controllers/constant';
const pivotTable = { const pivotTable = {
pivotDatas: null, pivotDatas: null,
@ -283,8 +284,8 @@ const pivotTable = {
else if (byconditiontype == "1") { else if (byconditiontype == "1") {
$("#luckysheet-pivotTableFilter-menu .luckysheet-pivotTableFilter-selected-input").eq(0).show().find("input").val($t.data("byconditionvalue1")); $("#luckysheet-pivotTableFilter-menu .luckysheet-pivotTableFilter-selected-input").eq(0).show().find("input").val($t.data("byconditionvalue1"));
} }
const loadingObj = luckysheetlodingHTML("#luckysheet-pivotTableFilter-byvalue-select",{text:locale_filter.filiterMoreDataTip});
$("#luckysheet-pivotTableFilter-byvalue-select").empty().html('<div style="width:100%;text-align:center;position:relative;top:45%;font-size: 14px;"> <div class="luckysheetLoaderGif"> </div> <span>'+locale_filter.filiterMoreDataTip+'</span></div>'); $("#luckysheet-pivotTableFilter-byvalue-select").empty().append(loadingObj.el)
let rowhiddenother = {}; //其它筛选列的隐藏行 let rowhiddenother = {}; //其它筛选列的隐藏行
$("#luckysheet-modal-dialog-pivotTable-list .luckysheet-modal-dialog-slider-list-item").not($t.get(0)).each(function () { $("#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("<div class='ListBox luckysheet-mousedown-cancel' style='max-height:" + (winH - toffset.top - 350) + "px;overflow-y:auto;overflow-x:hidden;'>" + item.join("") + "</div>"); $("#luckysheet-pivotTableFilter-byvalue-select").append("<div class='ListBox luckysheet-mousedown-cancel' style='max-height:" + (winH - toffset.top - 350) + "px;overflow-y:auto;overflow-x:hidden;'>" + item.join("") + "</div>");
loadingObj.close()
}, 1); }, 1);
showrightclickmenu($menu, toffset.left - 250, toffset.top); showrightclickmenu($menu, toffset.left - 250, toffset.top);

6
src/controllers/sheetmanage.js
View File

@ -864,12 +864,12 @@ const sheetmanage = {
if(luckysheetConfigsetting.pointEdit){ if(luckysheetConfigsetting.pointEdit){
setTimeout(function(){ setTimeout(function(){
$("#luckysheetloadingdata").remove(); Store.loadingObj.close()
}, 0); }, 0);
} }
else{ else{
setTimeout(function(){ setTimeout(function(){
$("#luckysheetloadingdata").fadeOut().remove(); Store.loadingObj.close()
}, 500); }, 500);
} }
} }
@ -1243,7 +1243,7 @@ const sheetmanage = {
let data = _this.buildGridData(file); let data = _this.buildGridData(file);
setTimeout(function(){ setTimeout(function(){
$("#luckysheetloadingdata").fadeOut().remove(); Store.loadingObj.close()
}, 500); }, 500);
for(let item in dataset){ for(let item in dataset){

3
src/core.js
View File

@ -157,7 +157,8 @@ luckysheet.create = function (setting) {
Store.devicePixelRatio = Math.ceil(devicePixelRatio); Store.devicePixelRatio = Math.ceil(devicePixelRatio);
//loading //loading
$("#" + container).append(luckysheetlodingHTML()); const loadingObj=luckysheetlodingHTML("#" + container)
Store.loadingObj=loadingObj
if (loadurl == "") { if (loadurl == "") {
sheetmanage.initialjfFile(menu, title); sheetmanage.initialjfFile(menu, title);

57
src/css/luckysheet-core.css
View File

@ -37,21 +37,44 @@
outline: none; 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{ .luckysheet-loading-mask{
width:100%;
text-align:center;
position:absolute; position:absolute;
top:0px;
height:100%;
font-size: 16px;
z-index:1000000000; z-index:1000000000;
margin: 0;
top: 0;
right: 0;
bottom: 0;
left: 0;
width:100%;
height:100%;
background:#fff; background:#fff;
} }
.luckysheet-loading-content{ .luckysheet-loading-content{
position:relative; position:relative;
top:40%; top: 50%;
transform: translateY(-50%);
width:100%; width:100%;
font-size: 14px;
color: #409eff;
text-align:center; text-align:center;
} }
@ -61,6 +84,10 @@
margin: 0 auto; margin: 0 auto;
} }
.luckysheet-loading-text{
margin-top: 1em;
}
.luckysheet-loading-image .image-type{ .luckysheet-loading-image .image-type{
width:100%; width:100%;
height:100%; height:100%;
@ -4973,24 +5000,6 @@ fieldset[disabled] .btn-danger.focus {
animation: load-effect 1s infinite linear; 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{ /*.luckysheetLoaderGif>img{
width:100%; width:100%;
height:100%; height:100%;

4
src/global/method.js
View File

@ -326,7 +326,7 @@ const method = {
luckysheetextendData(dataset["row"], newData); luckysheetextendData(dataset["row"], newData);
setTimeout(function(){ setTimeout(function(){
$("#luckysheetloadingdata").fadeOut().remove(); Store.loadingObj.close()
}, 500); }, 500);
if(func && typeof(func)=="function"){ if(func && typeof(func)=="function"){
@ -359,7 +359,7 @@ const method = {
let data = sheetmanage.buildGridData(file); let data = sheetmanage.buildGridData(file);
setTimeout(function(){ setTimeout(function(){
$("#luckysheetloadingdata").fadeOut().remove(); Store.loadingObj.close()
}, 500); }, 500);
file["data"] = data; file["data"] = data;

53
src/index.html
View File

@ -1870,12 +1870,61 @@
}]*/ }]*/
} }
} }
options.loading={
image:()=>{
return `<svg viewBox="25 25 50 50" class="circular">
<circle cx="50" cy="50" r="20" fill="none"></circle>
</svg>`
},
imageClass:"loadingAnimation"
}
luckysheet.create(options); luckysheet.create(options);
}) })
</script> </script>
<style>
/* 自定义loading演示样式 */
@keyframes loading-rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes loading-dash {
0% {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -40px;
}
100% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -120px;
}
}
.loadingAnimation {
width: 3em;
height: 3em;
animation: loading-rotate 2s linear infinite;
}
.loadingAnimation circle {
animation: loading-dash 1.5s ease-in-out infinite;
stroke-dasharray: 90, 150;
stroke-dashoffset: 0;
stroke-width: 2;
stroke: currentColor;
stroke-linecap: round;
}
</style>
</body> </body>
</html> </html>

2
src/locale/en.js
View File

@ -8942,7 +8942,7 @@ export default {
detailSave: 'Local cache restored', detailSave: 'Local cache restored',
row: '', row: '',
column: '', column: '',
loading:"Loading", loading:"Loading...",
copy:"Copy", copy:"Copy",
return:"Exit", return:"Exit",

2
src/locale/es.js
View File

@ -8941,7 +8941,7 @@ export default {
detailSave: 'Cache local restaurado', detailSave: 'Cache local restaurado',
row: '', row: '',
column: '', column: '',
loading:"Cargando", loading:"Cargando...",
copy:"Copiar", copy:"Copiar",
return:"Salir", return:"Salir",

2
src/locale/zh.js
View File

@ -9167,7 +9167,7 @@ export default {
detailSave: '已恢复本地缓存', detailSave: '已恢复本地缓存',
row: '行', row: '行',
column: '列', column: '列',
loading:"渲染中", loading:"渲染中···",
copy:"副本", copy:"副本",
return:"返回", return:"返回",

2
src/locale/zh_tw.js
View File

@ -9161,7 +9161,7 @@ export default {
detailSave : '已恢復本地緩存', detailSave : '已恢復本地緩存',
row : '行', row : '行',
column : '列', column : '列',
loading : '渲染中', loading : '渲染中···',
copy : '副本', copy : '副本',
return: '返回', return: '返回',

1
src/store/index.js
View File

@ -1,5 +1,6 @@
const Store = { const Store = {
container: null, container: null,
loadingObj:{},
luckysheetfile: null, luckysheetfile: null,
defaultcolumnNum: 60, defaultcolumnNum: 60,
defaultrowNum: 84, defaultrowNum: 84,

11586
yarn.lock
View File

File diff suppressed because it is too large
Write Preview
Loading…
Cancel
Save