bubble使用popper.js实现

changelog.md

@@ -1,5 +1,6 @@
 # 更新日志
 2.0(2021-07)
+- bubble使用popper.js实现
 - 优化了日期类型控件标红时的报错提示
 - 支持虚拟dom
 - 修复了树控件节点未初始化时调用树的getValue始终为空的问题

src/core/action/action.js

@@ -6,15 +6,11 @@
  * @abstract
  */
 BI.Action = BI.inherit(BI.OB, {
-    _defaultConfig: function () {
-        return BI.extend(BI.Action.superclass._defaultConfig.apply(this, arguments), {
+    props: function () {
+        return {
             src: null,
             tar: null
-        });
-    },
-
-    _init: function () {
-        BI.Action.superclass._init.apply(this, arguments);
+        };
     },
 
     actionPerformed: function (src, tar, callback) {

src/core/action/action.show.js

@@ -5,10 +5,6 @@
  * @extends BI.Action
  */
 BI.ShowAction = BI.inherit(BI.Action, {
-    _defaultConfig: function () {
-        return BI.extend(BI.ShowAction.superclass._defaultConfig.apply(this, arguments), {});
-    },
-
     actionPerformed: function (src, tar, callback) {
         tar = tar || this.options.tar;
         tar.setVisible(true);

src/core/behavior/0.behavior.js

@@ -26,11 +26,6 @@ BI.Behavior = BI.inherit(BI.OB, {
         });
     },
 
-    _init: function () {
-        BI.Behavior.superclass._init.apply(this, arguments);
-
-    },
-
     doBehavior: function () {
 
     }

src/core/behavior/behavior.highlight.js

@@ -5,15 +5,6 @@
  * @extends BI.Behavior
  */
 BI.HighlightBehavior = BI.inherit(BI.Behavior, {
-    _defaultConfig: function () {
-        return BI.extend(BI.HighlightBehavior.superclass._defaultConfig.apply(this, arguments), {});
-    },
-
-    _init: function () {
-        BI.HighlightBehavior.superclass._init.apply(this, arguments);
-
-    },
-
     doBehavior: function (items) {
         var args = Array.prototype.slice.call(arguments, 1),
             o = this.options;

src/core/behavior/behavior.redmark.js

@@ -5,17 +5,6 @@
  * @extends BI.Behavior
  */
 BI.RedMarkBehavior = BI.inherit(BI.Behavior, {
-    _defaultConfig: function () {
-        return BI.extend(BI.RedMarkBehavior.superclass._defaultConfig.apply(this, arguments), {
-
-        });
-    },
-
-    _init: function () {
-        BI.RedMarkBehavior.superclass._init.apply(this, arguments);
-
-    },
-
     doBehavior: function (items) {
         var args  = Array.prototype.slice.call(arguments, 1),
             o     = this.options;

src/core/controller/0.controller.js

@@ -7,10 +7,5 @@
  * @abstract
  */
 BI.Controller = BI.inherit(BI.OB, {
-    _defaultConfig: function () {
-        return BI.extend(BI.Controller.superclass._defaultConfig.apply(this, arguments), {
-
-        });
-    }
 });
 BI.Controller.EVENT_CHANGE = "__EVENT_CHANGE__";

src/core/controller/controller.broadcast.js

@@ -5,12 +5,7 @@
  * @class
  */
 BI.BroadcastController = BI.inherit(BI.Controller, {
-    _defaultConfig: function () {
-        return BI.extend(BI.BroadcastController.superclass._defaultConfig.apply(this, arguments), {});
-    },
-
-    _init: function () {
-        BI.BroadcastController.superclass._init.apply(this, arguments);
+    init: function () {
         this._broadcasts = {};
     },
 

src/core/controller/controller.bubbles.js

@@ -6,99 +6,8 @@
  * @class
  */
 BI.BubblesController = BI.inherit(BI.Controller, {
-    _defaultConfig: function () {
-        return BI.extend(BI.BubblesController.superclass._defaultConfig.apply(this, arguments), {});
-    },
-
-    _const: {
-        bubbleHeight: 18
-    },
-
-    _init: function () {
-        BI.BubblesController.superclass._init.apply(this, arguments);
-        var self = this;
-        this.fixedBubblesManager = {};
-        this.fixedStoreBubbles = {};
-        this.bubblesManager = {};
+    init: function () {
         this.storeBubbles = {};
-        BI.Resizers.add("bubbleController" + BI.uniqueId(), function () {
-            BI.each(self.fixedBubblesManager, function (name) {
-                self.remove(name);
-            });
-            self.fixedBubblesManager = {};
-            self.fixedStoreBubbles = {};
-        });
-    },
-
-    _createBubble: function (direct, text, level, height, fixed) {
-        return BI.createWidget({
-            type: fixed === false ? "bi.bubble_view" : "bi.bubble",
-            text: text,
-            level: level,
-            height: height || 18,
-            direction: direct
-        });
-    },
-
-    _getOffsetLeft: function (name, context, offsetStyle) {
-        var left = 0;
-        if ("center" === offsetStyle) {
-            left = context.element.offset().left + (context.element.bounds().width - this.get(name).element.bounds().width) / 2;
-            if (left < 0) {
-                left = 0;
-            }
-            return left;
-        }
-        if ("right" === offsetStyle) {
-            left = context.element.offset().left + context.element.bounds().width - this.get(name).element.bounds().width;
-            if (left < 0) {
-                left = 0;
-            }
-            return left;
-        }
-        return context.element.offset().left;
-    },
-
-    _getOffsetTop: function (name, context, offsetStyle) {
-        var top = 0;
-        if ("center" === offsetStyle) {
-            top = context.element.offset().top + (context.element.bounds().height - this.get(name).element.bounds().height) / 2;
-            if (top < 0) {
-                top = 0;
-            }
-            return top;
-        } else if ("right" === offsetStyle) {
-            top = context.element.offset().top + context.element.bounds().height - this.get(name).element.bounds().height;
-            if (top < 0) {
-                top = 0;
-            }
-            return top;
-        }
-        return context.element.offset().top;
-    },
-
-    _getLeftPosition: function (name, context, offsetStyle) {
-        var position = BI.DOM.getLeftPosition(context, this.get(name));
-        position.top = this._getOffsetTop(name, context, offsetStyle);
-        return position;
-    },
-
-    _getBottomPosition: function (name, context, offsetStyle) {
-        var position = BI.DOM.getBottomPosition(context, this.get(name));
-        position.left = this._getOffsetLeft(name, context, offsetStyle);
-        return position;
-    },
-
-    _getTopPosition: function (name, context, offsetStyle) {
-        var position = BI.DOM.getTopPosition(context, this.get(name));
-        position.left = this._getOffsetLeft(name, context, offsetStyle);
-        return position;
-    },
-
-    _getRightPosition: function (name, context, offsetStyle) {
-        var position = BI.DOM.getRightPosition(context, this.get(name));
-        position.top = this._getOffsetTop(name, context, offsetStyle);
-        return position;
     },
 
     /**
@@ -111,194 +20,66 @@ BI.BubblesController = BI.inherit(BI.Controller, {
      */
     show: function (name, text, context, opt) {
         opt || (opt = {});
-        var container = opt.container || context;
+        var container = opt.container || "body";
         var offsetStyle = opt.offsetStyle || "left";
         var level = opt.level || "error";
         var adjustYOffset = opt.adjustYOffset || 0;
         var adjustXOffset = opt.adjustXOffset || 0;
-        var fixed = opt.fixed !== false;
-        // 如果是非固定位置（fixed）的bubble
-        if (fixed === false) {
+        // var fixed = opt.fixed !== false;
+
         if (!this.storeBubbles[name]) {
-                this.storeBubbles[name] = {};
-            }
-            if (!this.storeBubbles[name]["top"]) {
-                this.storeBubbles[name]["top"] = this._createBubble("top", text, level, null, fixed);
-            }
-            BI.createWidget({
-                type: "bi.absolute",
-                element: container,
-                items: [{
-                    el: this.storeBubbles[name]["top"]
-                }]
-            });
-            this.set(name, this.storeBubbles[name]["top"]);
-            var bubble = this.storeBubbles[name]["top"];
-            var bounds = bubble.element.bounds();
-            if (BI.DOM.isTopSpaceEnough(context, this.get(name), adjustYOffset)) {
-                var top = -(bounds.height + adjustYOffset);
-                switch (offsetStyle) {
-                    case "center":
-                        bubble.element.css({
-                            left: (context.element.bounds().width - bounds.width) / 2 + adjustXOffset,
-                            top: top
-                        });
-                        break;
-                    case "right":
-                        bubble.element.css({
-                            right: adjustXOffset,
-                            top: top
-                        });
-                        break;
-                    default:
-                        bubble.element.css({
-                            left: adjustXOffset,
-                            top: top
-                        });
-                        break;
-                }
-            } else {
-                var bottom = -(bounds.height + adjustYOffset);
-                switch (offsetStyle) {
-                    case "center":
-                        bubble.element.css({
-                            left: (context.element.bounds().width - bounds.width) / 2 + adjustXOffset,
-                            bottom: bottom
-                        });
-                        break;
-                    case "right":
-                        bubble.element.css({
-                            right: adjustXOffset,
-                            bottom: bottom
-                        });
-                        break;
-                    default:
-                        bubble.element.css({
-                            left: adjustXOffset,
-                            bottom: bottom
-                        });
-                        break;
-                }
-            }
-        } else {
-            if (!this.fixedStoreBubbles[name]) {
-                this.fixedStoreBubbles[name] = {};
-            }
-            if (!this.fixedStoreBubbles[name]["top"]) {
-                this.fixedStoreBubbles[name]["top"] = this._createBubble("top", text, level, null, fixed);
-            }
-            BI.createWidget({
-                type: "bi.absolute",
-                element: container,
-                items: [{
-                    el: this.fixedStoreBubbles[name]["top"]
-                }]
+            this.storeBubbles[name] = BI.createWidget({
+                type: "bi.label",
+                root: true,
+                cls: "bi-bubble" + " bubble-" + level,
+                text: text,
+                hgap: 5,
+                height: 18
             });
-            this.set(name, this.fixedStoreBubbles[name]["top"]);
-            var position = this._getTopPosition(name, context, offsetStyle);
-            this.get(name).element.css({left: position.left + adjustXOffset, top: position.top - adjustYOffset});
-            if (!BI.DOM.isTopSpaceEnough(context, this.get(name), adjustYOffset)) {
-                this.get(name).invisible();
-                if (!this.fixedStoreBubbles[name]["bottom"]) {
-                    this.fixedStoreBubbles[name]["bottom"] = this._createBubble("bottom", text, level);
         }
+        var bubble = this.storeBubbles[name];
+
         BI.createWidget({
-                    type: "bi.absolute",
+            type: "bi.default",
             element: container,
             items: [{
-                        el: this.fixedStoreBubbles[name]["bottom"]
+                el: bubble
             }]
         });
-                this.set(name, this.fixedStoreBubbles[name]["bottom"]);
-                var position = this._getBottomPosition(name, context, offsetStyle);
-                this.get(name).element.css({left: position.left + adjustXOffset, top: position.top + adjustYOffset});
-                if (!BI.DOM.isBottomSpaceEnough(context, this.get(name), adjustYOffset)) {
-                    this.get(name).invisible();
-                    if (!this.fixedStoreBubbles[name]["right"]) {
-                        this.fixedStoreBubbles[name]["right"] = this._createBubble("right", text, level);
+        BI.Popper.createPopper(context.element[0], bubble.element[0], {
+            placement: ({
+                left: "top-start",
+                center: "top",
+                right: "top-end"
+            })[offsetStyle],
+            modifiers: [
+                {
+                    name: "offset",
+                    options: {
+                        offset: [adjustXOffset, adjustYOffset]
                     }
-                    BI.createWidget({
-                        type: "bi.absolute",
-                        element: container,
-                        items: [{
-                            el: this.fixedStoreBubbles[name]["right"]
-                        }]
-                    });
-                    this.set(name, this.fixedStoreBubbles[name]["right"]);
-                    var position = this._getRightPosition(name, context, offsetStyle);
-                    this.get(name).element.css({
-                        left: position.left + adjustXOffset,
-                        top: position.top - adjustYOffset
-                    });
-                    if (!BI.DOM.isRightSpaceEnough(context, this.get(name), adjustXOffset)) {
-                        this.get(name).invisible();
-                        if (!this.fixedStoreBubbles[name]["left"]) {
-                            this.fixedStoreBubbles[name]["left"] = this._createBubble("left", text, level, 30);
                 }
-                        BI.createWidget({
-                            type: "bi.absolute",
-                            element: container,
-                            items: [{
-                                el: this.fixedStoreBubbles[name]["left"]
-                            }]
-                        });
-                        this.set(name, this.fixedStoreBubbles[name]["left"]);
-                        var position = this._getLeftPosition(name, context, offsetStyle);
-                        this.get(name).element.css({
-                            left: position.left - adjustXOffset,
-                            top: position.top - adjustYOffset
+            ]
         });
-                    }
-                }
-            }
-        }
-        this.get(name).setText(text);
-        this.get(name).visible();
         return this;
     },
 
     hide: function (name) {
-        if (!this.has(name)) {
-            return this;
-        }
-        this.get(name).invisible();
-        return this;
-    },
-
-    add: function (name, bubble) {
-        if (this.has(name)) {
-            return this;
-        }
-        this.set(name, bubble);
-        return this;
-    },
-
-    get: function (name) {
-        return this.fixedBubblesManager[name] || this.bubblesManager[name];
-    },
-
-    set: function (name, bubble, fixed) {
-        fixed === false ? (this.bubblesManager[name] = bubble) : (this.fixedBubblesManager[name] = bubble);
+        this.remove(name);
     },
 
     has: function (name) {
-        return this.fixedBubblesManager[name] != null || this.bubblesManager[name] != null;
+        return this.storeBubbles[name] != null;
     },
 
     remove: function (name) {
         if (!this.has(name)) {
             return this;
         }
-        BI.each(this.fixedStoreBubbles[name], function (dir, bubble) {
-            bubble.destroy();
-        });
-        delete this.fixedStoreBubbles[name];
-        delete this.fixedBubblesManager[name];
-        BI.each(this.storeBubbles[name], function (dir, bubble) {
+        BI.each(this.storeBubbles, function (dir, bubble) {
             bubble.destroy();
         });
         delete this.storeBubbles[name];
-        delete this.bubblesManager[name];
         return this;
     }
 });

src/core/controller/controller.layer.js

@@ -5,14 +5,13 @@
  * @class
  */
 BI.LayerController = BI.inherit(BI.Controller, {
-    _defaultConfig: function () {
-        return BI.extend(BI.LayerController.superclass._defaultConfig.apply(this, arguments), {
+    props: function () {
+        return {
             render: "body"
-        });
+        };
     },
 
-    _init: function () {
-        BI.LayerController.superclass._init.apply(this, arguments);
+    init: function () {
         this.layerManager = {};
         this.layouts = {};
         this.zindex = BI.zIndex_layer;

src/core/controller/controller.masker.js

@@ -5,12 +5,8 @@
  * @class
  */
 BI.MaskersController = BI.inherit(BI.LayerController, {
-    _defaultConfig: function () {
-        return BI.extend(BI.MaskersController.superclass._defaultConfig.apply(this, arguments), {});
-    },
-
-    _init: function () {
-        BI.MaskersController.superclass._init.apply(this, arguments);
+    init: function () {
+        BI.MaskersController.superclass.init.apply(this, arguments);
         this.zindex = BI.zIndex_masker;
     }
 });

src/core/controller/controller.popover.js

@@ -5,15 +5,14 @@
  * @extends BI.Controller
  */
 BI.PopoverController = BI.inherit(BI.Controller, {
-    _defaultConfig: function () {
-        return BI.extend(BI.PopoverController.superclass._defaultConfig.apply(this, arguments), {
+    props: function () {
+        return {
             modal: true, // 模态窗口
             render: "body"
-        });
+        };
     },
 
-    _init: function () {
-        BI.PopoverController.superclass._init.apply(this, arguments);
+    init: function () {
         this.modal = this.options.modal;
         this.floatManager = {};
         this.floatLayer = {};

src/core/controller/controller.resizer.js

@@ -5,12 +5,7 @@
  * @class
  */
 BI.ResizeController = BI.inherit(BI.Controller, {
-    _defaultConfig: function () {
-        return BI.extend(BI.ResizeController.superclass._defaultConfig.apply(this, arguments), {});
-    },
-
-    _init: function () {
-        BI.ResizeController.superclass._init.apply(this, arguments);
+    init: function () {
         var self = this;
         this.resizerManger = {};
         var fn = BI.debounce(function (ev) {

src/core/controller/controller.tooltips.js

@@ -7,16 +7,7 @@
  * @extends BI.Controller
  */
 BI.TooltipsController = BI.inherit(BI.Controller, {
-    _defaultConfig: function () {
-        return BI.extend(BI.TooltipsController.superclass._defaultConfig.apply(this, arguments), {});
-    },
-
-    _const: {
-        height: 18
-    },
-
-    _init: function () {
-        BI.TooltipsController.superclass._init.apply(this, arguments);
+    init: function () {
         this.tooltipsManager = {};
         this.showingTips = {};// 存储正在显示的tooltip
     },

src/core/listener/listener.show.js

@@ -6,8 +6,8 @@
  * @extends BI.OB
  */
 BI.ShowListener = BI.inherit(BI.OB, {
-    _defaultConfig: function () {
-        return BI.extend(BI.ShowListener.superclass._defaultConfig.apply(this, arguments), {
+    props: function () {
+        return {
             eventObj: BI.createWidget(),
             cardLayout: null,
             cardNameCreator: function (v) {
@@ -16,11 +16,10 @@ BI.ShowListener = BI.inherit(BI.OB, {
             cardCreator: BI.emptyFn,
             afterCardCreated: BI.emptyFn,
             afterCardShow: BI.emptyFn
-        });
+        };
     },
 
-    _init: function () {
-        BI.ShowListener.superclass._init.apply(this, arguments);
+    init: function () {
         var self = this, o = this.options;
         if (o.eventObj) {
             o.eventObj.on(BI.Controller.EVENT_CHANGE, function (type, v, ob) {

src/core/logic/logic.layout.js

@@ -7,8 +7,8 @@
  * @extends BI.Logic
  */
 BI.VerticalLayoutLogic = BI.inherit(BI.Logic, {
-    _defaultConfig: function () {
-        return BI.extend(BI.VerticalLayoutLogic.superclass._defaultConfig.apply(this, arguments), {
+    props: function () {
+        return {
             dynamic: false,
             scrollable: null,
             scrolly: false,
@@ -20,7 +20,7 @@ BI.VerticalLayoutLogic = BI.inherit(BI.Logic, {
             rgap: 0,
             tgap: 0,
             bgap: 0
-        });
+        };
     },
 
     createLogic: function () {
@@ -56,8 +56,8 @@ BI.VerticalLayoutLogic = BI.inherit(BI.Logic, {
  * @extends BI.Logic
  */
 BI.HorizontalLayoutLogic = BI.inherit(BI.Logic, {
-    _defaultConfig: function () {
-        return BI.extend(BI.HorizontalLayoutLogic.superclass._defaultConfig.apply(this, arguments), {
+    props: function () {
+        return {
             dynamic: false,
             scrollable: null,
             scrolly: false,
@@ -69,7 +69,7 @@ BI.HorizontalLayoutLogic = BI.inherit(BI.Logic, {
             rgap: 0,
             tgap: 0,
             bgap: 0
-        });
+        };
     },
 
     createLogic: function () {
@@ -104,8 +104,8 @@ BI.HorizontalLayoutLogic = BI.inherit(BI.Logic, {
  * @extends BI.OB
  */
 BI.TableLayoutLogic = BI.inherit(BI.Logic, {
-    _defaultConfig: function () {
-        return BI.extend(BI.TableLayoutLogic.superclass._defaultConfig.apply(this, arguments), {
+    props: function () {
+        return {
             dynamic: false,
             scrollable: null,
             scrolly: false,
@@ -117,7 +117,7 @@ BI.TableLayoutLogic = BI.inherit(BI.Logic, {
             hgap: 0,
             vgap: 0,
             items: []
-        });
+        };
     },
 
     createLogic: function () {
@@ -151,8 +151,8 @@ BI.TableLayoutLogic = BI.inherit(BI.Logic, {
  * @extends BI.Logic
  */
 BI.HorizontalFillLayoutLogic = BI.inherit(BI.Logic, {
-    _defaultConfig: function () {
-        return BI.extend(BI.HorizontalFillLayoutLogic.superclass._defaultConfig.apply(this, arguments), {
+    props: function () {
+        return {
             dynamic: false,
             scrollable: null,
             scrolly: false,
@@ -164,7 +164,7 @@ BI.HorizontalFillLayoutLogic = BI.inherit(BI.Logic, {
             rgap: 0,
             tgap: 0,
             bgap: 0
-        });
+        };
     },
 
     createLogic: function () {

src/less/base/single/tip/tip.bubble.less

@@ -1,30 +1,29 @@
 @import "../../../index";
 
-.bi-bubble{
-  & .bubble-text{
+.bi-bubble {
+  z-index: @zIndex-tip;
   .border-radius(2px);
-  }
 
-  & .bubble-error{
+  &.bubble-error{
     background: @color-bi-background-light-failure;
     color: @color-bi-text-failure;
   }
 
-  .bi-theme-dark & .bubble-error {
+  .bi-theme-dark &.bubble-error {
     background: @color-bi-background-dark-failure;
   }
 
-  & .bubble-common{
+  &.bubble-common{
     background: @color-bi-background-light-highlight;
     color: @color-bi-text-highlight;
   }
 
-  & .bubble-success{
+  &.bubble-success{
     background: @color-bi-background-light-success;
     color: @color-bi-text-success;
   }
 
-  & .bubble-warning{
+  &.bubble-warning{
     background: @color-bi-background-light-warning;
     color: @color-bi-text-redmark;
   }