caoww
/
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
Split 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 () {
var id = BI.UUID();
var body;
return {
type: "bi.vertical",
vgap: 10,
@ -165,7 +166,32 @@ 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,
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: {
SMALL: "small",
NORMAL: "normal",
BIG: "big"
BIG: "big",
},
},
_defaultConfig: function () {
return BI.extend(BI.Popover.superclass._defaultConfig.apply(this, arguments), {
baseCls: "bi-popover bi-card bi-border-radius",
// width: 600,
// height: 500,
size: "normal", // small, normal, big
logic: {
dynamic: false
},
header: null,
headerHeight: 40,
body: null,
footer: null,
footerHeight: 44,
closable: true // BI-40839 是否显示右上角的关闭按钮
});
props: {
baseCls: "bi-popover bi-card bi-border-radius",
size: "normal", // small, normal, big
logic: {
dynamic: false,
maxHeight: 600,
},
header: null,
headerHeight: 40,
body: null,
footer: null,
footerHeight: 44,
closable: true, // BI-40839 是否显示右上角的关闭按钮
},
render: function () {
var self = this, o = this.options;
var self = this; var o = this.options;
this.startX = 0;
this.startY = 0;
var size = this._calculateSize();
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 +56,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 +78,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,65 +98,59 @@ 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-" + size.type,
}),
}],
} : {
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,
});
}
var size = this._calculateSize();
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
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;
self.startY = pos.top;
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 () {
@ -168,19 +161,24 @@ BI.Popover = BI.inherit(BI.Widget, {
case this._constant.SIZE.SMALL:
size.width = 450;
size.height = 200;
size.type = "small";
break;
case this._constant.SIZE.BIG:
size.width = 900;
size.height = 500;
size.type = "big";
break;
default:
size.width = 550;
size.height = 500;
size.type = "default";
}
}
return {
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) {
this.element.css({"z-index": zindex});
this.element.css({ "z-index": zindex });
},
destroyed: function () {
}
destroyed: function () {},
});
BI.shortcut("bi.popover", BI.Popover);
@ -211,12 +208,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 +225,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 +234,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);

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