diff --git a/demo/js/core/popup/demo.popover.js b/demo/js/core/popup/demo.popover.js index bb696ea78..82a5e4a9d 100644 --- a/demo/js/core/popup/demo.popover.js +++ b/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,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); + }, + }], }; } }); diff --git a/src/base/layer/layer.popover.js b/src/base/layer/layer.popover.js index f90f8193b..d20167539 100644 --- a/src/base/layer/layer.popover.js +++ b/src/base/layer/layer.popover.js @@ -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); diff --git a/src/less/base/layer/layer.popover.less b/src/less/base/layer/layer.popover.less new file mode 100644 index 000000000..90a1c4ff5 --- /dev/null +++ b/src/less/base/layer/layer.popover.less @@ -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; + } +}