Browse Source

bubble使用popper.js实现

es6
guy 3 years ago
parent
commit
973d4c250a
  1. 1
      changelog.md
  2. 0
      src/core/10.worker.js
  3. 0
      src/core/9.popper.js
  4. 12
      src/core/action/action.js
  5. 4
      src/core/action/action.show.js
  6. 7
      src/core/behavior/0.behavior.js
  7. 11
      src/core/behavior/behavior.highlight.js
  8. 13
      src/core/behavior/behavior.redmark.js
  9. 5
      src/core/controller/0.controller.js
  10. 9
      src/core/controller/controller.broadcast.js
  11. 295
      src/core/controller/controller.bubbles.js
  12. 11
      src/core/controller/controller.layer.js
  13. 10
      src/core/controller/controller.masker.js
  14. 9
      src/core/controller/controller.popover.js
  15. 9
      src/core/controller/controller.resizer.js
  16. 11
      src/core/controller/controller.tooltips.js
  17. 11
      src/core/listener/listener.show.js
  18. 24
      src/core/logic/logic.layout.js
  19. 17
      src/less/base/single/tip/tip.bubble.less

1
changelog.md

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

0
src/core/worker.js → src/core/10.worker.js

0
src/core/popper.js → src/core/9.popper.js

12
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) {
@ -36,4 +32,4 @@ BI.ActionFactory = {
}
return new action(options);
}
};
};

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

7
src/core/behavior/0.behavior.js

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

11
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;
@ -39,4 +30,4 @@ BI.HighlightBehavior = BI.inherit(BI.Behavior, {
}
});
}
});
});

13
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;
@ -31,4 +20,4 @@ BI.RedMarkBehavior = BI.inherit(BI.Behavior, {
}
});
}
});
});

5
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__";

9
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 = {};
},
@ -47,4 +42,4 @@ BI.BroadcastController = BI.inherit(BI.Controller, {
}
return this;
}
});
});

295
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) {
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"]
}]
// var fixed = opt.fixed !== false;
if (!this.storeBubbles[name]) {
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.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.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);
}
BI.createWidget({
type: "bi.absolute",
element: container,
items: [{
el: this.fixedStoreBubbles[name]["bottom"]
}]
});
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.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
});
}
var bubble = this.storeBubbles[name];
BI.createWidget({
type: "bi.default",
element: container,
items: [{
el: bubble
}]
});
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]
}
}
}
}
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;
}
});

11
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;
@ -167,4 +166,4 @@ BI.LayerController = BI.inherit(BI.Controller, {
this.layouts = {};
return this;
}
});
});

10
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;
}
});
});

9
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 = {};

9
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) {
@ -70,4 +65,4 @@ BI.ResizeController = BI.inherit(BI.Controller, {
delete this.resizerManger[name];
return this;
}
});
});

11
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
},

11
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) {
@ -46,4 +45,4 @@ BI.ShowListener = BI.inherit(BI.OB, {
}
}
});
BI.ShowListener.EVENT_CHANGE = "EVENT_CHANGE";
BI.ShowListener.EVENT_CHANGE = "EVENT_CHANGE";

24
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 () {

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

@ -1,30 +1,29 @@
@import "../../../index";
.bi-bubble{
& .bubble-text{
.border-radius(2px);
}
.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;
}

Loading…
Cancel
Save