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
2 years ago · dab7bf9c12
3 changed files with 153 additions and 29 deletions
--- a/examples/替换loading动画.html
+++ b/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>
--- a/src/base/1.pane.js
+++ b/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的时机决定
--- a/src/core/system.js
+++ b/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();