Browse Source

Merge pull request #112691 in DEC/fineui from master to feature/x

* commit 'dab7bf9c12b834ae6178940e529e5dffa1551d7a':
  feat: config中传下context
  feat: 准备demo
  KERNEL-9708 refactor: 提取到system中实现
  refactor: eslint fix
es6
superman 2 years ago
parent
commit
7f99374da2
  1. 104
      examples/替换loading动画.html
  2. 27
      src/base/1.pane.js
  3. 51
      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 () {
var self = this, o = this.options;
var isIE = BI.isIE();
var loadingAnimation = BI.createWidget({
type: "bi.horizontal",
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)
}]
var loadingAnimation = BI.Providers.getProvider("bi.provider.system").getLoading({
loadingSize: o.loadingSize,
context: this
});
// pane在同步方式下由items决定tipText的显示与否
// loading的异步情况下由loaded后对面板的populate的时机决定

51
src/core/system.js

@ -19,6 +19,40 @@
TOAST_TOP: 10,
H_GAP_SIZE: "M",
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,12 +63,11 @@
"L": 24
};
var provider = function () {
function provider () {
this.SYSTEM = system;
this.setSize = function (opt) {
BI.deepExtend(system, {size: opt});
BI.deepExtend(system, { size: opt });
};
this.setResponsiveMode = function (mode) {
@ -60,6 +93,10 @@
BI.extend(system.dependencies, moduleConfig);
};
this.setLoadingCreator = function(creator) {
system.loadingCreator = creator;
};
this.$get = function () {
return BI.inherit(BI.OB, {
@ -88,13 +125,17 @@
getDependencies: function () {
return system.dependencies;
},
getLoading: function(config) {
return system.loadingCreator(config);
}
});
};
};
}
BI.provider("bi.provider.system", provider);
})();
}());
BI.prepares.push(function () {
BI.SIZE_CONSANTS = BI.Providers.getProvider("bi.provider.system").getSize();

Loading…
Cancel
Save