Browse Source

Pull request #2925: KERNEL-9708 新增loading动画可重新配置

Merge in VISUAL/fineui from ~TELLER/fineui:KERNEL-9708 to master

* commit '56497d7b2eac8693c895bc0df2f6fdc70a806b08':
  feat: config中传下context
  feat: 准备demo
  KERNEL-9708 refactor: 提取到system中实现
  refactor: eslint fix
es6
Teller 2 years ago
parent
commit
dab7bf9c12
  1. 104
      examples/替换loading动画.html
  2. 27
      src/base/1.pane.js
  3. 49
      src/core/system.js

104
examples/替换loading动画.html

@ -0,0 +1,104 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="https://fanruan.design/fineui/2.0/fineui_without_normalize.css" />
<!-- <script src="/fineui.js"></script> -->
<script src="https://fanruan.design/fineui/2.0/fineui.js"></script>
</head>
<body>
<div id="wrapper"></div>
<script>
var LoadingPane = BI.inherit(BI.Pane, {});
BI.shortcut("demo.loading_pane", LoadingPane);
var loadingPane;
BI.createWidget({
type: "bi.vertical",
element: "#wrapper",
items: [{
type: "bi.vertical",
items: [{
type: "demo.loading_pane",
width: 800,
height: 600,
cls: "bi-border",
ref: function(ref) {
loadingPane = ref;
},
}, {
type: "bi.left",
rgap: 10,
items: [{
type: "bi.button",
text: "开始loading",
handler: function () {
loadingPane.loading();
},
}, {
type: "bi.button",
text: "停止loading",
handler: function () {
loadingPane.loaded();
},
}, {
type: "bi.button",
text: "设置文字loading",
handler: function () {
BI.config("bi.provider.system", function (provider) {
provider.setLoadingCreator(function () {
return {
type: "bi.label",
text: "我是被替换了的loading"
};
});
});
},
}, {
type: "bi.button",
text: "恢复波浪线loading",
handler: function () {
BI.config("bi.provider.system", function (provider) {
provider.setLoadingCreator(function () {
return {
type: "bi.horizontal",
cls: "bi-loading-widget",
height: 30,
width: 30,
hgap: 5,
vgap: 2.5,
items: [{
type: "bi.layout",
cls: "animate-rect rect1",
height: 25,
width: 2.5
}, {
type: "bi.layout",
cls: "animate-rect rect2",
height: 25,
width: 2.5
}, {
type: "bi.layout",
cls: "animate-rect rect3",
height: 25,
width: 2.5
}]
};
});
});
},
}]
}],
}],
});
</script>
</body>
</html>

27
src/base/1.pane.js

@ -40,30 +40,9 @@ BI.Pane = BI.inherit(BI.Widget, {
loading: function () { loading: function () {
var self = this, o = this.options; var self = this, o = this.options;
var isIE = BI.isIE(); var loadingAnimation = BI.Providers.getProvider("bi.provider.system").getLoading({
var loadingAnimation = BI.createWidget({ loadingSize: o.loadingSize,
type: "bi.horizontal", context: this
cls: "bi-loading-widget" + (isIE ? " wave-loading hack" : ""),
height: this._getSize(60),
width: this._getSize(60),
hgap: this._getSize(10),
vgap: 2.5,
items: isIE ? [] : [{
type: "bi.layout",
cls: "animate-rect rect1",
height: this._getSize(50),
width: this._getSize(5)
}, {
type: "bi.layout",
cls: "animate-rect rect2",
height: this._getSize(50),
width: this._getSize(5)
}, {
type: "bi.layout",
cls: "animate-rect rect3",
height: this._getSize(50),
width: this._getSize(5)
}]
}); });
// pane在同步方式下由items决定tipText的显示与否 // pane在同步方式下由items决定tipText的显示与否
// loading的异步情况下由loaded后对面板的populate的时机决定 // loading的异步情况下由loaded后对面板的populate的时机决定

49
src/core/system.js

@ -19,6 +19,40 @@
TOAST_TOP: 10, TOAST_TOP: 10,
H_GAP_SIZE: "M", H_GAP_SIZE: "M",
V_GAP_SIZE: "S" V_GAP_SIZE: "S"
},
loadingCreator: function(config) {
var loadingSize = (config ? config.loadingSize : "small") || "small";
var isIE = BI.isIE();
function getSize(v) {
return Math.ceil(v / (loadingSize === "small" ? 2 : 1));
}
return {
type: "bi.horizontal",
cls: "bi-loading-widget" + (isIE ? " wave-loading hack" : ""),
height: getSize(60),
width: getSize(60),
hgap: getSize(10),
vgap: 2.5,
items: isIE ? [] : [{
type: "bi.layout",
cls: "animate-rect rect1",
height: getSize(50),
width: getSize(5)
}, {
type: "bi.layout",
cls: "animate-rect rect2",
height: getSize(50),
width: getSize(5)
}, {
type: "bi.layout",
cls: "animate-rect rect3",
height: getSize(50),
width: getSize(5)
}]
};
} }
}; };
@ -29,8 +63,7 @@
"L": 24 "L": 24
}; };
var provider = function () { function provider () {
this.SYSTEM = system; this.SYSTEM = system;
this.setSize = function (opt) { this.setSize = function (opt) {
@ -60,6 +93,10 @@
BI.extend(system.dependencies, moduleConfig); BI.extend(system.dependencies, moduleConfig);
}; };
this.setLoadingCreator = function(creator) {
system.loadingCreator = creator;
};
this.$get = function () { this.$get = function () {
return BI.inherit(BI.OB, { return BI.inherit(BI.OB, {
@ -88,13 +125,17 @@
getDependencies: function () { getDependencies: function () {
return system.dependencies; return system.dependencies;
},
getLoading: function(config) {
return system.loadingCreator(config);
} }
}); });
}; };
}; }
BI.provider("bi.provider.system", provider); BI.provider("bi.provider.system", provider);
})(); }());
BI.prepares.push(function () { BI.prepares.push(function () {
BI.SIZE_CONSANTS = BI.Providers.getProvider("bi.provider.system").getSize(); BI.SIZE_CONSANTS = BI.Providers.getProvider("bi.provider.system").getSize();

Loading…
Cancel
Save