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
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      gulpfile.js
  2. 1
      package.json
  3. 77
      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. 61
      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'],
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',

1
package.json
View File

@ -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",

77
src/controllers/constant.js
View File

@ -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 = `<div id="luckysheetloadingdata" class="luckysheet-loading ${config.customClass}">
<div class="luckysheet-loading-mask">
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 = `
<div class="luckysheet-loading-content">
<div class="luckysheet-loading-image">
<div class="${config.imageClass} luckysheet-loading-image">
${imageHtml}
</div>
<span class="luckysheet-loading-text">${config.text}</span>
</div>
</div>
</div>`
return loadingHtml;
<div class="${config.textClass} luckysheet-loading-text">
<span>${config.text}</span>
</div>
</div>`;
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: '<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>',

8
src/controllers/filter.js
View File

@ -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('<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 = {}; //其它筛选列的隐藏行
$("#luckysheet-filter-options-sheet" + Store.currentSheetIndex + " .luckysheet-filter-options").not(this).each(function () {
@ -726,8 +728,8 @@ function initialFilterHandler(){
}
}
}
$("#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>");
$("#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>");
loadingObj.close();
}, 1);
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);
});
$("#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){

8
src/controllers/pivotTable.js
View File

@ -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('<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-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("<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);
showrightclickmenu($menu, toffset.left - 250, toffset.top);

6
src/controllers/sheetmanage.js
View File

@ -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){

3
src/core.js
View File

@ -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);

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

@ -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%;

4
src/global/method.js
View File

@ -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;

61
src/index.html
View File

@ -1869,13 +1869,62 @@
"scrollTop": 0
}]*/
}
}
luckysheet.create(options);
})
}
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);
})
</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>
</html>

2
src/locale/en.js
View File

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

2
src/locale/es.js
View File

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

2
src/locale/zh.js
View File

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

2
src/locale/zh_tw.js
View File

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

1
src/store/index.js
View File

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

11586
yarn.lock
View File

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