Browse Source

KERNEL-5172 fix: popover相关修改

master
iapyang 4 years ago
parent
commit
b36f3aeabd
  1. 27
      demo/js/core/popup/demo.popover.js
  2. 95
      src/base/layer/layer.popover.js
  3. 5
      src/less/base/layer/layer.popover.less

27
demo/js/core/popup/demo.popover.js

@ -8,6 +8,7 @@ Demo.Func = BI.inherit(BI.Widget, {
render: function () {
var id = BI.UUID();
var body;
return {
type: "bi.vertical",
vgap: 10,
@ -165,7 +166,31 @@ Demo.Func = BI.inherit(BI.Widget, {
}
}).open(id);
}
}]
}, {
type: "bi.text_button",
height: 30,
text: "弹出一个高度动态的popover层, 此弹出层指定size为small, 但是高度随内容自适应,自适应支持的最大高度为600px",
handler: function() {
var id = "弹出层id1"
BI.Popovers.create(id, {
// String或者是json都行
header: "弹出层标题",
logic: {
dynamic: true
},
size: "small",
body: {
type: "bi.vertical",
items: BI.map(BI.range(0, 50), function(idx, v) {
return {
type: "bi.label",
text: "弹出层内容",
};
}),
},
}).open(id);
},
}],
};
}
});

95
src/base/layer/layer.popover.js

@ -8,39 +8,35 @@ BI.Popover = BI.inherit(BI.Widget, {
SIZE: {
SMALL: "small",
NORMAL: "normal",
BIG: "big"
BIG: "big",
},
},
_defaultConfig: function () {
return BI.extend(BI.Popover.superclass._defaultConfig.apply(this, arguments), {
props: {
baseCls: "bi-popover bi-card bi-border-radius",
// width: 600,
// height: 500,
size: "normal", // small, normal, big
logic: {
dynamic: false
dynamic: false,
},
header: null,
headerHeight: 40,
body: null,
footer: null,
footerHeight: 44,
closable: true // BI-40839 是否显示右上角的关闭按钮
});
closable: true, // BI-40839 是否显示右上角的关闭按钮
headerHeight: 40,
},
render: function () {
var self = this, o = this.options;
var self = this; var o = this.options;
this.startX = 0;
this.startY = 0;
this.tracker = new BI.MouseMoveTracker(function (deltaX, deltaY) {
var size = self._calculateSize();
var W = BI.Widget._renderEngine.createElement("body").width(), H = BI.Widget._renderEngine.createElement("body").height();
var W = BI.Widget._renderEngine.createElement("body").width();
var H = BI.Widget._renderEngine.createElement("body").height();
self.startX += deltaX;
self.startY += deltaY;
self.element.css({
left: BI.clamp(self.startX, 0, W - self.element.width()) + "px",
top: BI.clamp(self.startY, 0, H - self.element.height()) + "px"
top: BI.clamp(self.startY, 0, H - self.element.height()) + "px",
});
// BI-12134 没有什么特别好的方法
BI.Resizers._resize();
@ -57,21 +53,21 @@ BI.Popover = BI.inherit(BI.Widget, {
items: [{
type: "bi.absolute",
items: [{
el: BI.isPlainObject(o.header) ? BI.createWidget(o.header, {
extraCls: "bi-font-bold"
el: BI.isPlainObject(o.header) ? BI.extend({}, o.header, {
extraCls: "bi-font-bold",
}) : {
type: "bi.label",
cls: "bi-font-bold",
height: o.headerHeight,
text: o.header,
title: o.header,
textAlign: "left"
textAlign: "left",
},
left: 20,
top: 0,
right: 0,
bottom: 0
}]
bottom: 0,
}],
}, {
el: o.closable ? {
type: "bi.icon_button",
@ -79,15 +75,15 @@ BI.Popover = BI.inherit(BI.Widget, {
height: o.headerHeight,
handler: function () {
self.close();
}
},
} : {
type: "bi.layout"
type: "bi.layout",
},
width: 56
width: 56,
}],
height: o.headerHeight
height: o.headerHeight,
},
height: o.headerHeight
height: o.headerHeight,
}, {
el: o.logic.dynamic ? {
type: "bi.vertical",
@ -99,33 +95,35 @@ BI.Popover = BI.inherit(BI.Widget, {
hgap: 20,
tgap: 10,
items: [{
el: BI.createWidget(o.body)
}]
el: BI.extend({}, o.body, {
extraCls: "dynamic-height-limit-layout",
}),
}],
} : {
type: "bi.absolute",
items: [{
el: BI.createWidget(o.body),
el: o.body,
left: 20,
top: 10,
right: 20,
bottom: 0
}]
}
bottom: 0,
}],
},
}];
if (o.footer) {
items.push({
el: {
type: "bi.absolute",
items: [{
el: BI.createWidget(o.footer),
el: o.footer,
left: 20,
top: 0,
right: 20,
bottom: 0
bottom: 0,
}],
height: o.footerHeight
height: o.footerHeight,
},
height: o.footerHeight
height: o.footerHeight,
});
}
@ -134,18 +132,19 @@ BI.Popover = BI.inherit(BI.Widget, {
return BI.extend({
type: o.logic.dynamic ? "bi.vertical" : "bi.vtape",
items: items,
width: size.width
width: size.width,
}, o.logic.dynamic ? {
type: "bi.vertical",
scrolly: false
extraCls: "dynamic-layout",
scrolly: false,
} : {
type: "bi.vtape",
height: size.height
height: size.height,
});
},
mounted: function () {
var self = this, o = this.options;
var self = this; var o = this.options;
this.dragger.element.mousedown(function (e) {
var pos = self.element.offset();
self.startX = pos.left;
@ -178,9 +177,10 @@ BI.Popover = BI.inherit(BI.Widget, {
size.height = 500;
}
}
return {
width: o.width || size.width,
height: o.height || size.height
height: o.height || size.height,
};
},
@ -199,11 +199,10 @@ BI.Popover = BI.inherit(BI.Widget, {
},
setZindex: function (zindex) {
this.element.css({"z-index": zindex});
this.element.css({ "z-index": zindex });
},
destroyed: function () {
}
destroyed: function () {},
});
BI.shortcut("bi.popover", BI.Popover);
@ -211,12 +210,12 @@ BI.shortcut("bi.popover", BI.Popover);
BI.BarPopover = BI.inherit(BI.Popover, {
_defaultConfig: function () {
return BI.extend(BI.BarPopover.superclass._defaultConfig.apply(this, arguments), {
btns: [BI.i18nText("BI-Basic_Sure"), BI.i18nText("BI-Basic_Cancel")]
btns: [BI.i18nText("BI-Basic_Sure"), BI.i18nText("BI-Basic_Cancel")],
});
},
beforeCreate: function () {
var self = this, o = this.options;
var self = this; var o = this.options;
o.footer || (o.footer = {
type: "bi.right_vertical_adapt",
lgap: 10,
@ -228,7 +227,7 @@ BI.BarPopover = BI.inherit(BI.Popover, {
handler: function (v) {
self.fireEvent(BI.Popover.EVENT_CANCEL, v);
self.close(v);
}
},
}, {
type: "bi.button",
text: this.options.btns[0],
@ -237,10 +236,10 @@ BI.BarPopover = BI.inherit(BI.Popover, {
handler: function (v) {
self.fireEvent(BI.Popover.EVENT_CONFIRM, v);
self.close(v);
}
}]
},
}],
});
}
},
});
BI.shortcut("bi.bar_popover", BI.BarPopover);

5
src/less/base/layer/layer.popover.less

@ -0,0 +1,5 @@
.bi-popover {
.dynamic-height-limit-layout {
max-height: 100%;
}
}
Loading…
Cancel
Save