Frank
/
fineui
forked from fanruan/fineui
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

KERNEL-5172 fix: popover相关修改

es6
iapyang 4 years ago
parent
c31cda75dc
commit
b36f3aeabd
3 changed files with 85 additions and 56 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  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
Unescape View File

@ -8,6 +8,7 @@ Demo.Func = BI.inherit(BI.Widget, {
render: function () { render: function () {
var id = BI.UUID(); var id = BI.UUID();
var body; var body;
return { return {
type: "bi.vertical", type: "bi.vertical",
vgap: 10, vgap: 10,
@ -165,7 +166,31 @@ Demo.Func = BI.inherit(BI.Widget, {
} }
}).open(id); }).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
Unescape View File

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

5
src/less/base/layer/layer.popover.less
Unescape View File

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