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

Pull request #1452: KERNEL-5172 popover动态效果修改 

Merge in VISUAL/fineui from ~TELLER/fineui:master to master

* commit '237a003e4f180272b46d85719c213e623c97eb27':
  refactor: 改为css控制
  refactor: 调整下代码
  refactor: 修改
  KERNEL-5172 fix: popover相关修改
es6
guy 4 years ago
parent
88fe77b6a4 237a003e4f
commit
292505e938
3 changed files with 105 additions and 64 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. 28
      demo/js/core/popup/demo.popover.js
  2. 123
      src/base/layer/layer.popover.js
  3. 18
      src/less/base/layer/layer.popover.less

28
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,32 @@ 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,
maxHeight: 700,
},
size: "small",
body: {
type: "bi.vertical",
items: BI.map(BI.range(0, 50), function(idx, v) {
return {
type: "bi.label",
text: "弹出层内容",
};
}),
},
}).open(id);
},
}],
}; };
} }
}); });

123
src/base/layer/layer.popover.js
Unescape View File

@ -8,39 +8,38 @@ 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", size: "normal", // small, normal, big
// width: 600, logic: {
// height: 500, dynamic: false,
size: "normal", // small, normal, big maxHeight: 600,
logic: { },
dynamic: false header: null,
}, headerHeight: 40,
header: null, body: null,
headerHeight: 40, footer: null,
body: null, footerHeight: 44,
footer: null, closable: true, // BI-40839 是否显示右上角的关闭按钮
footerHeight: 44,
closable: true // BI-40839 是否显示右上角的关闭按钮
});
}, },
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;
var size = this._calculateSize();
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 +56,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 +78,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,65 +98,59 @@ 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-" + size.type,
}),
}],
} : { } : {
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,
}); });
} }
var size = this._calculateSize();
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 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;
self.startY = pos.top; self.startY = pos.top;
self.tracker.captureMouseMoves(e); self.tracker.captureMouseMoves(e);
}); });
if (o.logic.dynamic) {
var size = this._calculateSize();
var height = this.element.height();
var compareHeight = BI.clamp(height, size.height, 600) - (o.footer ? o.footerHeight + o.headerHeight : o.headerHeight);
this.body.element.height(compareHeight);
}
}, },
_calculateSize: function () { _calculateSize: function () {
@ -168,19 +161,24 @@ BI.Popover = BI.inherit(BI.Widget, {
case this._constant.SIZE.SMALL: case this._constant.SIZE.SMALL:
size.width = 450; size.width = 450;
size.height = 200; size.height = 200;
size.type = "small";
break; break;
case this._constant.SIZE.BIG: case this._constant.SIZE.BIG:
size.width = 900; size.width = 900;
size.height = 500; size.height = 500;
size.type = "big";
break; break;
default: default:
size.width = 550; size.width = 550;
size.height = 500; size.height = 500;
size.type = "default";
} }
} }
return { return {
width: o.width || size.width, width: o.width || size.width,
height: o.height || size.height height: o.height || size.height,
type: size.type || "default",
}; };
}, },
@ -199,11 +197,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 +208,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 +225,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 +234,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);

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

@ -0,0 +1,18 @@
@maxHeight: 600px;
.bi-popover {
.dynamic-height-limit-layout-small {
min-height: 200px;
max-height: @maxHeight;
}
.dynamic-height-limit-layout-big {
min-height: 500px;
max-height: @maxHeight;
}
.dynamic-height-limit-layout-small {
min-height: 500px;
max-height: @maxHeight;
}
}
Write Preview
Loading…
Cancel
Save