|
|
@ -3,425 +3,435 @@ |
|
|
|
* @class BI.PopupView |
|
|
|
* @class BI.PopupView |
|
|
|
* @extends BI.Widget |
|
|
|
* @extends BI.Widget |
|
|
|
*/ |
|
|
|
*/ |
|
|
|
BI.PopupView = BI.inherit(BI.Widget, { |
|
|
|
|
|
|
|
_const: { |
|
|
|
|
|
|
|
TRIANGLE_LENGTH: 12, |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
_defaultConfig: function (props) { |
|
|
|
|
|
|
|
return BI.extend(BI.PopupView.superclass._defaultConfig.apply(this, arguments), { |
|
|
|
|
|
|
|
_baseCls: "bi-popup-view" + (props.primary ? " bi-primary" : ""), |
|
|
|
|
|
|
|
// 品牌色
|
|
|
|
|
|
|
|
primary: false, |
|
|
|
|
|
|
|
maxWidth: "auto", |
|
|
|
|
|
|
|
minWidth: 100, |
|
|
|
|
|
|
|
// maxHeight: 200,
|
|
|
|
|
|
|
|
minHeight: 24, |
|
|
|
|
|
|
|
lgap: 0, |
|
|
|
|
|
|
|
rgap: 0, |
|
|
|
|
|
|
|
tgap: 0, |
|
|
|
|
|
|
|
bgap: 0, |
|
|
|
|
|
|
|
vgap: 0, |
|
|
|
|
|
|
|
hgap: 0, |
|
|
|
|
|
|
|
innerVgap: 0, |
|
|
|
|
|
|
|
innerHgap: 0, |
|
|
|
|
|
|
|
showArrow: false, |
|
|
|
|
|
|
|
direction: BI.Direction.Top, // 工具栏的方向
|
|
|
|
|
|
|
|
stopEvent: false, // 是否停止mousedown、mouseup事件
|
|
|
|
|
|
|
|
stopPropagation: false, // 是否停止mousedown、mouseup向上冒泡
|
|
|
|
|
|
|
|
logic: { |
|
|
|
|
|
|
|
dynamic: true, |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
tool: false, // 自定义工具栏
|
|
|
|
import { shortcut } from "../../core/decorator"; |
|
|
|
tabs: [], // 导航栏
|
|
|
|
@shortcut() |
|
|
|
buttons: [], // toolbar栏
|
|
|
|
export class PopupView extends BI.Widget { |
|
|
|
|
|
|
|
_const = { |
|
|
|
|
|
|
|
TRIANGLE_LENGTH: 12, |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
el: { |
|
|
|
static xtype = "bi.popup_view"; |
|
|
|
type: "bi.button_group", |
|
|
|
static EVENT_CHANGE = "EVENT_CHANGE"; |
|
|
|
items: [], |
|
|
|
|
|
|
|
chooseType: 0, |
|
|
|
|
|
|
|
behaviors: {}, |
|
|
|
|
|
|
|
layouts: [{ |
|
|
|
|
|
|
|
type: "bi.vertical", |
|
|
|
|
|
|
|
}], |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
render: function () { |
|
|
|
_defaultConfig(props) { |
|
|
|
var self = this, o = this.options; |
|
|
|
return BI.extend(super._defaultConfig(arguments), { |
|
|
|
function fn (e) { |
|
|
|
_baseCls: "bi-popup-view" + (props.primary ? " bi-primary" : ""), |
|
|
|
e.stopPropagation(); |
|
|
|
// 品牌色
|
|
|
|
} |
|
|
|
primary: false, |
|
|
|
function stop (e) { |
|
|
|
maxWidth: "auto", |
|
|
|
e.stopEvent(); |
|
|
|
minWidth: 100, |
|
|
|
|
|
|
|
// maxHeight: 200,
|
|
|
|
|
|
|
|
minHeight: 24, |
|
|
|
|
|
|
|
lgap: 0, |
|
|
|
|
|
|
|
rgap: 0, |
|
|
|
|
|
|
|
tgap: 0, |
|
|
|
|
|
|
|
bgap: 0, |
|
|
|
|
|
|
|
vgap: 0, |
|
|
|
|
|
|
|
hgap: 0, |
|
|
|
|
|
|
|
innerVgap: 0, |
|
|
|
|
|
|
|
innerHgap: 0, |
|
|
|
|
|
|
|
showArrow: false, |
|
|
|
|
|
|
|
direction: BI.Direction.Top, // 工具栏的方向
|
|
|
|
|
|
|
|
stopEvent: false, // 是否停止mousedown、mouseup事件
|
|
|
|
|
|
|
|
stopPropagation: false, // 是否停止mousedown、mouseup向上冒泡
|
|
|
|
|
|
|
|
logic: { |
|
|
|
|
|
|
|
dynamic: true, |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
return false; |
|
|
|
tool: false, // 自定义工具栏
|
|
|
|
} |
|
|
|
tabs: [], // 导航栏
|
|
|
|
this.element.css({ |
|
|
|
buttons: [], // toolbar栏
|
|
|
|
"z-index": BI.zIndex_popup, |
|
|
|
|
|
|
|
"min-width": BI.pixFormat(o.minWidth), |
|
|
|
|
|
|
|
"max-width": BI.pixFormat(o.maxWidth), |
|
|
|
|
|
|
|
}).bind({ click: fn }); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
this.element.bind("mousewheel", fn); |
|
|
|
el: { |
|
|
|
|
|
|
|
type: "bi.button_group", |
|
|
|
|
|
|
|
items: [], |
|
|
|
|
|
|
|
chooseType: 0, |
|
|
|
|
|
|
|
behaviors: {}, |
|
|
|
|
|
|
|
layouts: [{ |
|
|
|
|
|
|
|
type: "bi.vertical", |
|
|
|
|
|
|
|
}], |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
render() { |
|
|
|
|
|
|
|
const { minWidth, maxWidth, stopPropagation, stopEvent, |
|
|
|
|
|
|
|
direction, logic, lgap, rgap, tgap, bgap, vgap, hgap, primary, showArrow } = this.options; |
|
|
|
|
|
|
|
function fn (e) { |
|
|
|
|
|
|
|
e.stopPropagation(); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
function stop (e) { |
|
|
|
|
|
|
|
e.stopEvent(); |
|
|
|
|
|
|
|
|
|
|
|
o.stopPropagation && this.element.bind({ mousedown: fn, mouseup: fn, mouseover: fn }); |
|
|
|
return false; |
|
|
|
o.stopEvent && this.element.bind({ mousedown: stop, mouseup: stop, mouseover: stop }); |
|
|
|
} |
|
|
|
this.tool = this._createTool(); |
|
|
|
this.element.css({ |
|
|
|
this.tab = this._createTab(); |
|
|
|
"z-index": BI.zIndex_popup, |
|
|
|
this.view = this._createView(); |
|
|
|
"min-width": BI.pixFormat(minWidth), |
|
|
|
this.toolbar = this._createToolBar(); |
|
|
|
"max-width": BI.pixFormat(maxWidth), |
|
|
|
|
|
|
|
}).bind({ click: fn }); |
|
|
|
|
|
|
|
|
|
|
|
this.view.on(BI.Controller.EVENT_CHANGE, function (type) { |
|
|
|
this.element.bind("mousewheel", fn); |
|
|
|
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); |
|
|
|
|
|
|
|
if (type === BI.Events.CLICK) { |
|
|
|
|
|
|
|
self.fireEvent(BI.PopupView.EVENT_CHANGE); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
BI.createWidget(BI.extend({ |
|
|
|
stopPropagation && this.element.bind({ mousedown: fn, mouseup: fn, mouseover: fn }); |
|
|
|
element: this, |
|
|
|
stopEvent && this.element.bind({ mousedown: stop, mouseup: stop, mouseover: stop }); |
|
|
|
}, BI.LogicFactory.createLogic(BI.LogicFactory.createLogicTypeByDirection(o.direction), BI.extend({}, o.logic, { |
|
|
|
this.tool = this._createTool(); |
|
|
|
scrolly: false, |
|
|
|
this.tab = this._createTab(); |
|
|
|
lgap: o.lgap, |
|
|
|
this.view = this._createView(); |
|
|
|
rgap: o.rgap, |
|
|
|
this.toolbar = this._createToolBar(); |
|
|
|
tgap: o.tgap, |
|
|
|
|
|
|
|
bgap: o.bgap, |
|
|
|
const self = this; |
|
|
|
vgap: o.vgap, |
|
|
|
// TODO:这里需要调整转化方式,仍然采用原来的self
|
|
|
|
hgap: o.hgap, |
|
|
|
this.view.on(BI.Controller.EVENT_CHANGE, function (type) { |
|
|
|
items: BI.LogicFactory.createLogicItemsByDirection(o.direction, BI.extend({ |
|
|
|
// 箭头函数没有自己的arguments,只会获取外层的,若要获取自己的,需通过剩余参数写法,但这样得到的仍然不是类数组
|
|
|
|
cls: "list-view-outer bi-card list-view-shadow" + (o.primary ? " bi-primary" : ""), |
|
|
|
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); |
|
|
|
}, BI.LogicFactory.createLogic(BI.LogicFactory.createLogicTypeByDirection(o.direction), BI.extend({}, o.logic, { |
|
|
|
if (type === BI.Events.CLICK) { |
|
|
|
items: BI.LogicFactory.createLogicItemsByDirection(o.direction, this.tool, this.tab, this.view, this.toolbar), |
|
|
|
self.fireEvent(PopupView.EVENT_CHANGE); |
|
|
|
}))) |
|
|
|
|
|
|
|
), |
|
|
|
|
|
|
|
})))); |
|
|
|
|
|
|
|
if (o.showArrow) { |
|
|
|
|
|
|
|
this.arrow = BI.createWidget({ |
|
|
|
|
|
|
|
type: "bi.absolute", |
|
|
|
|
|
|
|
cls: "bi-bubble-arrow", |
|
|
|
|
|
|
|
items: [{ |
|
|
|
|
|
|
|
type: "bi.layout", |
|
|
|
|
|
|
|
cls: "bubble-arrow", |
|
|
|
|
|
|
|
}], |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
this.arrowWrapper = BI.createWidget({ |
|
|
|
|
|
|
|
type: "bi.absolute", |
|
|
|
|
|
|
|
cls: "bi-bubble-arrow-wrapper", |
|
|
|
|
|
|
|
items: [{ |
|
|
|
|
|
|
|
el: this.arrow, |
|
|
|
|
|
|
|
}], |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
// 因为三角符号的原因位置变大了,需要占位
|
|
|
|
|
|
|
|
this.placeholder = BI.createWidget({ |
|
|
|
|
|
|
|
type: "bi.layout", |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
BI.createWidget({ |
|
|
|
|
|
|
|
type: "bi.absolute", |
|
|
|
|
|
|
|
element: this, |
|
|
|
|
|
|
|
items: [{ |
|
|
|
|
|
|
|
el: this.arrowWrapper, |
|
|
|
|
|
|
|
left: 0, |
|
|
|
|
|
|
|
top: 0, |
|
|
|
|
|
|
|
}, { |
|
|
|
|
|
|
|
el: this.placeholder, |
|
|
|
|
|
|
|
}], |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
_createView: function () { |
|
|
|
BI.createWidget(BI.extend({ |
|
|
|
var o = this.options; |
|
|
|
element: this, |
|
|
|
this.button_group = BI.createWidget(o.el, { type: "bi.button_group", value: o.value }); |
|
|
|
}, BI.LogicFactory.createLogic(BI.LogicFactory.createLogicTypeByDirection(direction), BI.extend({}, logic, { |
|
|
|
this.button_group.element.css({ |
|
|
|
scrolly: false, |
|
|
|
"min-height": BI.pixFormat(o.minHeight), |
|
|
|
lgap, |
|
|
|
"padding-top": BI.pixFormat(o.innerVgap), |
|
|
|
rgap, |
|
|
|
"padding-bottom": BI.pixFormat(o.innerVgap), |
|
|
|
tgap, |
|
|
|
"padding-left": BI.pixFormat(o.innerHgap), |
|
|
|
bgap, |
|
|
|
"padding-right": BI.pixFormat(o.innerHgap), |
|
|
|
vgap, |
|
|
|
|
|
|
|
hgap, |
|
|
|
|
|
|
|
items: BI.LogicFactory.createLogicItemsByDirection(direction, BI.extend({ |
|
|
|
|
|
|
|
cls: "list-view-outer bi-card list-view-shadow" + (primary ? " bi-primary" : ""), |
|
|
|
|
|
|
|
}, BI.LogicFactory.createLogic(BI.LogicFactory.createLogicTypeByDirection(direction), BI.extend({}, logic, { |
|
|
|
|
|
|
|
items: BI.LogicFactory.createLogicItemsByDirection(direction, this.tool, this.tab, this.view, this.toolbar), |
|
|
|
|
|
|
|
}))) |
|
|
|
|
|
|
|
), |
|
|
|
|
|
|
|
})))); |
|
|
|
|
|
|
|
if (showArrow) { |
|
|
|
|
|
|
|
this.arrow = BI.createWidget({ |
|
|
|
|
|
|
|
type: "bi.absolute", |
|
|
|
|
|
|
|
cls: "bi-bubble-arrow", |
|
|
|
|
|
|
|
items: [{ |
|
|
|
|
|
|
|
type: "bi.layout", |
|
|
|
|
|
|
|
cls: "bubble-arrow", |
|
|
|
|
|
|
|
}], |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
this.arrowWrapper = BI.createWidget({ |
|
|
|
|
|
|
|
type: "bi.absolute", |
|
|
|
|
|
|
|
cls: "bi-bubble-arrow-wrapper", |
|
|
|
|
|
|
|
items: [{ |
|
|
|
|
|
|
|
el: this.arrow, |
|
|
|
|
|
|
|
}], |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
// 因为三角符号的原因位置变大了,需要占位
|
|
|
|
|
|
|
|
this.placeholder = BI.createWidget({ |
|
|
|
|
|
|
|
type: "bi.layout", |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
BI.createWidget({ |
|
|
|
|
|
|
|
type: "bi.absolute", |
|
|
|
|
|
|
|
element: this, |
|
|
|
|
|
|
|
items: [{ |
|
|
|
|
|
|
|
el: this.arrowWrapper, |
|
|
|
|
|
|
|
left: 0, |
|
|
|
|
|
|
|
top: 0, |
|
|
|
|
|
|
|
}, { |
|
|
|
|
|
|
|
el: this.placeholder, |
|
|
|
|
|
|
|
}], |
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
_createView() { |
|
|
|
|
|
|
|
const { el, value, minHeight, innerVgap, innerHgap } = this.options; |
|
|
|
|
|
|
|
this.button_group = BI.createWidget(el, { type: "bi.button_group", value: value }); |
|
|
|
|
|
|
|
this.button_group.element.css({ |
|
|
|
|
|
|
|
"min-height": BI.pixFormat(minHeight), |
|
|
|
|
|
|
|
"padding-top": BI.pixFormat(innerVgap), |
|
|
|
|
|
|
|
"padding-bottom": BI.pixFormat(innerVgap), |
|
|
|
|
|
|
|
"padding-left": BI.pixFormat(innerHgap), |
|
|
|
|
|
|
|
"padding-right": BI.pixFormat(innerHgap), |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
return this.button_group; |
|
|
|
return this.button_group; |
|
|
|
}, |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
_createTool: function () { |
|
|
|
_createTool() { |
|
|
|
var o = this.options; |
|
|
|
const { tool } = this.options; |
|
|
|
if (false === o.tool) { |
|
|
|
if (false === tool) { |
|
|
|
return; |
|
|
|
return; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
return BI.createWidget(o.tool); |
|
|
|
return BI.createWidget(tool); |
|
|
|
}, |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
_createTab: function () { |
|
|
|
_createTab() { |
|
|
|
var o = this.options; |
|
|
|
const { tabs, value } = this.options; |
|
|
|
if (o.tabs.length === 0) { |
|
|
|
if (tabs.length === 0) { |
|
|
|
return; |
|
|
|
return; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
return BI.createWidget({ |
|
|
|
return BI.createWidget({ |
|
|
|
type: "bi.center", |
|
|
|
type: "bi.center", |
|
|
|
cls: "list-view-tab", |
|
|
|
cls: "list-view-tab", |
|
|
|
height: 25, |
|
|
|
height: 25, |
|
|
|
items: o.tabs, |
|
|
|
items: tabs, |
|
|
|
value: o.value, |
|
|
|
value: value, |
|
|
|
}); |
|
|
|
}); |
|
|
|
}, |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
_createToolBar: function () { |
|
|
|
_createToolBar() { |
|
|
|
var o = this.options; |
|
|
|
const { buttons } = this.options; |
|
|
|
if (o.buttons.length === 0) { |
|
|
|
if (buttons.length === 0) { |
|
|
|
return; |
|
|
|
return; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
return BI.createWidget({ |
|
|
|
return BI.createWidget({ |
|
|
|
type: "bi.center", |
|
|
|
type: "bi.center", |
|
|
|
cls: "list-view-toolbar bi-high-light bi-split-top", |
|
|
|
cls: "list-view-toolbar bi-high-light bi-split-top", |
|
|
|
height: 24, |
|
|
|
height: 24, |
|
|
|
items: BI.createItems(o.buttons, { |
|
|
|
items: BI.createItems(buttons, { |
|
|
|
once: false, |
|
|
|
once: false, |
|
|
|
shadow: true, |
|
|
|
shadow: true, |
|
|
|
isShadowShowingOnSelected: true, |
|
|
|
isShadowShowingOnSelected: true, |
|
|
|
}), |
|
|
|
}), |
|
|
|
}); |
|
|
|
}); |
|
|
|
}, |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
setDirection: function (direction, position) { |
|
|
|
setDirection(direction, position) { |
|
|
|
var o = this.options; |
|
|
|
const { showArrow, tgap, vgap, bgap, rgap, hgap, lgap } = this.options; |
|
|
|
if (o.showArrow) { |
|
|
|
if (showArrow) { |
|
|
|
var style = {}, wrapperStyle = {}, placeholderStyle = {}; |
|
|
|
let style = {}, wrapperStyle = {}, placeholderStyle = {}; |
|
|
|
var adjustXOffset = position.adjustXOffset || 0; |
|
|
|
const adjustXOffset = position.adjustXOffset || 0; |
|
|
|
var adjustYOffset = position.adjustYOffset || 0; |
|
|
|
const adjustYOffset = position.adjustYOffset || 0; |
|
|
|
var bodyBounds = BI.Widget._renderEngine.createElement("body").bounds(); |
|
|
|
const bodyBounds = BI.Widget._renderEngine.createElement("body").bounds(); |
|
|
|
var bodyWidth = bodyBounds.width; |
|
|
|
const bodyWidth = bodyBounds.width; |
|
|
|
var bodyHeight = bodyBounds.height; |
|
|
|
const bodyHeight = bodyBounds.height; |
|
|
|
var popupWidth = this.element.outerWidth(); |
|
|
|
const popupWidth = this.element.outerWidth(); |
|
|
|
var popupHeight = this.element.outerHeight(); |
|
|
|
const popupHeight = this.element.outerHeight(); |
|
|
|
var offset = position.offset; |
|
|
|
const offset = position.offset; |
|
|
|
var offsetStyle = position.offsetStyle; |
|
|
|
const offsetStyle = position.offsetStyle; |
|
|
|
var middle = offsetStyle === "center" || offsetStyle === "middle"; |
|
|
|
const middle = offsetStyle === "center" || offsetStyle === "middle"; |
|
|
|
|
|
|
|
|
|
|
|
var minLeft = Math.max(4, offset.left + 4 + popupWidth - bodyWidth); |
|
|
|
const minLeft = Math.max(4, offset.left + 4 + popupWidth - bodyWidth); |
|
|
|
var minRight = Math.max(4, popupWidth - (offset.left + 4)); |
|
|
|
const minRight = Math.max(4, popupWidth - (offset.left + 4)); |
|
|
|
var minTop = Math.max(4, offset.top + 4 + popupHeight - bodyHeight); |
|
|
|
const minTop = Math.max(4, offset.top + 4 + popupHeight - bodyHeight); |
|
|
|
var minBottom = Math.max(4, popupHeight - (offset.top + 4)); |
|
|
|
const minBottom = Math.max(4, popupHeight - (offset.top + 4)); |
|
|
|
|
|
|
|
|
|
|
|
var maxLeft = Math.min(popupWidth - 16 - 4, offset.left + position.width - 16 - 4); |
|
|
|
const maxLeft = Math.min(popupWidth - 16 - 4, offset.left + position.width - 16 - 4); |
|
|
|
var maxRight = Math.min(popupWidth - 16 - 4, bodyWidth - (offset.left + position.width - 16 - 4)); |
|
|
|
const maxRight = Math.min(popupWidth - 16 - 4, bodyWidth - (offset.left + position.width - 16 - 4)); |
|
|
|
var maxTop = Math.min(popupHeight - 16 - 4, offset.top + position.height - 16 - 4); |
|
|
|
const maxTop = Math.min(popupHeight - 16 - 4, offset.top + position.height - 16 - 4); |
|
|
|
var maxBottom = Math.min(popupHeight - 16 - 4, bodyHeight - (offset.top + position.height - 16 - 4)); |
|
|
|
const maxBottom = Math.min(popupHeight - 16 - 4, bodyHeight - (offset.top + position.height - 16 - 4)); |
|
|
|
switch (direction) { |
|
|
|
switch (direction) { |
|
|
|
case "bottom": |
|
|
|
case "bottom": |
|
|
|
case "bottom,right": |
|
|
|
case "bottom,right": |
|
|
|
direction = "bottom"; |
|
|
|
direction = "bottom"; |
|
|
|
style = { |
|
|
|
style = { |
|
|
|
// 5表示留出一定的空间
|
|
|
|
// 5表示留出一定的空间
|
|
|
|
left: BI.clamp(((middle ? popupWidth : position.width) - adjustXOffset) / 2 - 8, minLeft, maxLeft), |
|
|
|
left: BI.clamp(((middle ? popupWidth : position.width) - adjustXOffset) / 2 - 8, minLeft, maxLeft), |
|
|
|
}; |
|
|
|
}; |
|
|
|
wrapperStyle = { |
|
|
|
wrapperStyle = { |
|
|
|
top: o.tgap + o.vgap, |
|
|
|
top: tgap + vgap, |
|
|
|
left: 0, |
|
|
|
left: 0, |
|
|
|
right: "", |
|
|
|
right: "", |
|
|
|
bottom: "", |
|
|
|
bottom: "", |
|
|
|
}; |
|
|
|
}; |
|
|
|
placeholderStyle = { |
|
|
|
placeholderStyle = { |
|
|
|
left: 0, |
|
|
|
left: 0, |
|
|
|
right: 0, |
|
|
|
right: 0, |
|
|
|
height: this._const.TRIANGLE_LENGTH, |
|
|
|
height: this._const.TRIANGLE_LENGTH, |
|
|
|
top: -this._const.TRIANGLE_LENGTH, |
|
|
|
top: -this._const.TRIANGLE_LENGTH, |
|
|
|
bottom: "", |
|
|
|
bottom: "", |
|
|
|
}; |
|
|
|
}; |
|
|
|
break; |
|
|
|
break; |
|
|
|
case "bottom,left": |
|
|
|
case "bottom,left": |
|
|
|
direction = "bottom"; |
|
|
|
direction = "bottom"; |
|
|
|
style = { |
|
|
|
style = { |
|
|
|
right: BI.clamp(((middle ? popupWidth : position.width) + adjustXOffset) / 2 - 8, minRight, maxRight), |
|
|
|
right: BI.clamp(((middle ? popupWidth : position.width) + adjustXOffset) / 2 - 8, minRight, maxRight), |
|
|
|
}; |
|
|
|
}; |
|
|
|
wrapperStyle = { |
|
|
|
wrapperStyle = { |
|
|
|
top: o.bgap + o.vgap, |
|
|
|
top: bgap + vgap, |
|
|
|
left: "", |
|
|
|
left: "", |
|
|
|
right: 0, |
|
|
|
right: 0, |
|
|
|
bottom: "", |
|
|
|
bottom: "", |
|
|
|
}; |
|
|
|
}; |
|
|
|
placeholderStyle = { |
|
|
|
placeholderStyle = { |
|
|
|
left: 0, |
|
|
|
left: 0, |
|
|
|
right: 0, |
|
|
|
right: 0, |
|
|
|
height: this._const.TRIANGLE_LENGTH, |
|
|
|
height: this._const.TRIANGLE_LENGTH, |
|
|
|
top: -this._const.TRIANGLE_LENGTH, |
|
|
|
top: -this._const.TRIANGLE_LENGTH, |
|
|
|
bottom: "", |
|
|
|
bottom: "", |
|
|
|
}; |
|
|
|
}; |
|
|
|
break; |
|
|
|
break; |
|
|
|
case "top": |
|
|
|
case "top": |
|
|
|
case "top,right": |
|
|
|
case "top,right": |
|
|
|
direction = "top"; |
|
|
|
direction = "top"; |
|
|
|
style = { |
|
|
|
style = { |
|
|
|
left: BI.clamp(((middle ? popupWidth : position.width) - adjustXOffset) / 2 - 8, minLeft, maxLeft), |
|
|
|
left: BI.clamp(((middle ? popupWidth : position.width) - adjustXOffset) / 2 - 8, minLeft, maxLeft), |
|
|
|
}; |
|
|
|
}; |
|
|
|
wrapperStyle = { |
|
|
|
wrapperStyle = { |
|
|
|
bottom: o.bgap + o.vgap, |
|
|
|
bottom: bgap + vgap, |
|
|
|
left: 0, |
|
|
|
left: 0, |
|
|
|
right: "", |
|
|
|
right: "", |
|
|
|
top: "", |
|
|
|
top: "", |
|
|
|
}; |
|
|
|
}; |
|
|
|
placeholderStyle = { |
|
|
|
placeholderStyle = { |
|
|
|
left: 0, |
|
|
|
left: 0, |
|
|
|
right: 0, |
|
|
|
right: 0, |
|
|
|
height: this._const.TRIANGLE_LENGTH, |
|
|
|
height: this._const.TRIANGLE_LENGTH, |
|
|
|
top: "", |
|
|
|
top: "", |
|
|
|
bottom: -this._const.TRIANGLE_LENGTH, |
|
|
|
bottom: -this._const.TRIANGLE_LENGTH, |
|
|
|
}; |
|
|
|
}; |
|
|
|
break; |
|
|
|
break; |
|
|
|
case "top,left": |
|
|
|
case "top,left": |
|
|
|
direction = "top"; |
|
|
|
direction = "top"; |
|
|
|
style = { |
|
|
|
style = { |
|
|
|
right: BI.clamp(((middle ? popupWidth : position.width) + adjustXOffset) / 2 - 8, minRight, maxRight), |
|
|
|
right: BI.clamp(((middle ? popupWidth : position.width) + adjustXOffset) / 2 - 8, minRight, maxRight), |
|
|
|
}; |
|
|
|
}; |
|
|
|
wrapperStyle = { |
|
|
|
wrapperStyle = { |
|
|
|
bottom: o.bgap + o.vgap, |
|
|
|
bottom: bgap + vgap, |
|
|
|
right: 0, |
|
|
|
right: 0, |
|
|
|
left: "", |
|
|
|
left: "", |
|
|
|
top: "", |
|
|
|
top: "", |
|
|
|
}; |
|
|
|
}; |
|
|
|
placeholderStyle = { |
|
|
|
placeholderStyle = { |
|
|
|
left: 0, |
|
|
|
left: 0, |
|
|
|
right: 0, |
|
|
|
right: 0, |
|
|
|
height: this._const.TRIANGLE_LENGTH, |
|
|
|
height: this._const.TRIANGLE_LENGTH, |
|
|
|
top: "", |
|
|
|
top: "", |
|
|
|
bottom: -this._const.TRIANGLE_LENGTH, |
|
|
|
bottom: -this._const.TRIANGLE_LENGTH, |
|
|
|
}; |
|
|
|
}; |
|
|
|
break; |
|
|
|
break; |
|
|
|
case "left": |
|
|
|
case "left": |
|
|
|
case "left,bottom": |
|
|
|
case "left,bottom": |
|
|
|
direction = "left"; |
|
|
|
direction = "left"; |
|
|
|
style = { |
|
|
|
style = { |
|
|
|
top: BI.clamp(((middle ? popupHeight : position.height) - adjustYOffset) / 2 - 8, minTop, maxTop), |
|
|
|
top: BI.clamp(((middle ? popupHeight : position.height) - adjustYOffset) / 2 - 8, minTop, maxTop), |
|
|
|
}; |
|
|
|
}; |
|
|
|
wrapperStyle = { |
|
|
|
wrapperStyle = { |
|
|
|
right: o.rgap + o.hgap, |
|
|
|
right: rgap + hgap, |
|
|
|
top: 0, |
|
|
|
top: 0, |
|
|
|
bottom: "", |
|
|
|
bottom: "", |
|
|
|
left: "", |
|
|
|
left: "", |
|
|
|
}; |
|
|
|
}; |
|
|
|
placeholderStyle = { |
|
|
|
placeholderStyle = { |
|
|
|
top: 0, |
|
|
|
top: 0, |
|
|
|
bottom: 0, |
|
|
|
bottom: 0, |
|
|
|
width: this._const.TRIANGLE_LENGTH, |
|
|
|
width: this._const.TRIANGLE_LENGTH, |
|
|
|
right: -this._const.TRIANGLE_LENGTH, |
|
|
|
right: -this._const.TRIANGLE_LENGTH, |
|
|
|
left: "", |
|
|
|
left: "", |
|
|
|
}; |
|
|
|
}; |
|
|
|
break; |
|
|
|
break; |
|
|
|
case "left,top": |
|
|
|
case "left,top": |
|
|
|
direction = "left"; |
|
|
|
direction = "left"; |
|
|
|
style = { |
|
|
|
style = { |
|
|
|
bottom: BI.clamp(((middle ? popupHeight : position.height) + adjustYOffset) / 2 - 8, minBottom, maxBottom), |
|
|
|
bottom: BI.clamp(((middle ? popupHeight : position.height) + adjustYOffset) / 2 - 8, minBottom, maxBottom), |
|
|
|
}; |
|
|
|
}; |
|
|
|
wrapperStyle = { |
|
|
|
wrapperStyle = { |
|
|
|
right: o.rgap + o.hgap, |
|
|
|
right: rgap + hgap, |
|
|
|
bottom: 0, |
|
|
|
bottom: 0, |
|
|
|
top: "", |
|
|
|
top: "", |
|
|
|
left: "", |
|
|
|
left: "", |
|
|
|
}; |
|
|
|
}; |
|
|
|
placeholderStyle = { |
|
|
|
placeholderStyle = { |
|
|
|
top: 0, |
|
|
|
top: 0, |
|
|
|
bottom: 0, |
|
|
|
bottom: 0, |
|
|
|
width: this._const.TRIANGLE_LENGTH, |
|
|
|
width: this._const.TRIANGLE_LENGTH, |
|
|
|
right: -this._const.TRIANGLE_LENGTH, |
|
|
|
right: -this._const.TRIANGLE_LENGTH, |
|
|
|
left: "", |
|
|
|
left: "", |
|
|
|
}; |
|
|
|
}; |
|
|
|
break; |
|
|
|
break; |
|
|
|
case "right": |
|
|
|
case "right": |
|
|
|
case "right,bottom": |
|
|
|
case "right,bottom": |
|
|
|
direction = "right"; |
|
|
|
direction = "right"; |
|
|
|
style = { |
|
|
|
style = { |
|
|
|
top: BI.clamp(((middle ? popupHeight : position.height) - adjustYOffset) / 2 - 8, minTop, maxTop), |
|
|
|
top: BI.clamp(((middle ? popupHeight : position.height) - adjustYOffset) / 2 - 8, minTop, maxTop), |
|
|
|
}; |
|
|
|
}; |
|
|
|
wrapperStyle = { |
|
|
|
wrapperStyle = { |
|
|
|
left: o.lgap + o.hgap, |
|
|
|
left: lgap + hgap, |
|
|
|
top: 0, |
|
|
|
top: 0, |
|
|
|
bottom: "", |
|
|
|
bottom: "", |
|
|
|
right: "", |
|
|
|
right: "", |
|
|
|
}; |
|
|
|
}; |
|
|
|
placeholderStyle = { |
|
|
|
placeholderStyle = { |
|
|
|
top: 0, |
|
|
|
top: 0, |
|
|
|
bottom: 0, |
|
|
|
bottom: 0, |
|
|
|
width: this._const.TRIANGLE_LENGTH, |
|
|
|
width: this._const.TRIANGLE_LENGTH, |
|
|
|
left: -this._const.TRIANGLE_LENGTH, |
|
|
|
left: -this._const.TRIANGLE_LENGTH, |
|
|
|
right: "", |
|
|
|
right: "", |
|
|
|
}; |
|
|
|
}; |
|
|
|
break; |
|
|
|
break; |
|
|
|
case "right,top": |
|
|
|
case "right,top": |
|
|
|
direction = "right"; |
|
|
|
direction = "right"; |
|
|
|
style = { |
|
|
|
style = { |
|
|
|
bottom: BI.clamp(((middle ? popupHeight : position.height) + adjustYOffset) / 2 - 8, minBottom, maxBottom), |
|
|
|
bottom: BI.clamp(((middle ? popupHeight : position.height) + adjustYOffset) / 2 - 8, minBottom, maxBottom), |
|
|
|
}; |
|
|
|
}; |
|
|
|
wrapperStyle = { |
|
|
|
wrapperStyle = { |
|
|
|
left: o.lgap + o.hgap, |
|
|
|
left: lgap + hgap, |
|
|
|
bottom: 0, |
|
|
|
bottom: 0, |
|
|
|
top: "", |
|
|
|
top: "", |
|
|
|
right: "", |
|
|
|
right: "", |
|
|
|
}; |
|
|
|
}; |
|
|
|
placeholderStyle = { |
|
|
|
placeholderStyle = { |
|
|
|
top: 0, |
|
|
|
top: 0, |
|
|
|
bottom: 0, |
|
|
|
bottom: 0, |
|
|
|
width: this._const.TRIANGLE_LENGTH, |
|
|
|
width: this._const.TRIANGLE_LENGTH, |
|
|
|
left: -this._const.TRIANGLE_LENGTH, |
|
|
|
left: -this._const.TRIANGLE_LENGTH, |
|
|
|
right: "", |
|
|
|
right: "", |
|
|
|
}; |
|
|
|
}; |
|
|
|
break; |
|
|
|
break; |
|
|
|
case "right,innerRight": |
|
|
|
case "right,innerRight": |
|
|
|
break; |
|
|
|
break; |
|
|
|
case "right,innerLeft": |
|
|
|
case "right,innerLeft": |
|
|
|
break; |
|
|
|
break; |
|
|
|
case "innerRight": |
|
|
|
case "innerRight": |
|
|
|
break; |
|
|
|
break; |
|
|
|
case "innerLeft": |
|
|
|
case "innerLeft": |
|
|
|
break; |
|
|
|
break; |
|
|
|
default: |
|
|
|
default: |
|
|
|
break; |
|
|
|
break; |
|
|
|
} |
|
|
|
|
|
|
|
this.element |
|
|
|
|
|
|
|
.removeClass("left") |
|
|
|
|
|
|
|
.removeClass("right") |
|
|
|
|
|
|
|
.removeClass("top") |
|
|
|
|
|
|
|
.removeClass("bottom") |
|
|
|
|
|
|
|
.addClass(direction); |
|
|
|
|
|
|
|
this.arrow.element.css(style); |
|
|
|
|
|
|
|
this.arrowWrapper.element.css(wrapperStyle); |
|
|
|
|
|
|
|
this.placeholder.element.css(placeholderStyle); |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
this.element |
|
|
|
|
|
|
|
.removeClass("left") |
|
|
|
|
|
|
|
.removeClass("right") |
|
|
|
|
|
|
|
.removeClass("top") |
|
|
|
|
|
|
|
.removeClass("bottom") |
|
|
|
|
|
|
|
.addClass(direction); |
|
|
|
|
|
|
|
this.arrow.element.css(style); |
|
|
|
|
|
|
|
this.arrowWrapper.element.css(wrapperStyle); |
|
|
|
|
|
|
|
this.placeholder.element.css(placeholderStyle); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
getView() { |
|
|
|
|
|
|
|
return this.view; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
populate(items) { |
|
|
|
|
|
|
|
this.view.populate.apply(this.view, arguments); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
getView: function () { |
|
|
|
resetWidth(w) { |
|
|
|
return this.view; |
|
|
|
this.options.width = w; |
|
|
|
}, |
|
|
|
this.element.width(w); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
populate: function (items) { |
|
|
|
resetHeight(h) { |
|
|
|
this.view.populate.apply(this.view, arguments); |
|
|
|
const tbHeight = this.toolbar ? (this.toolbar.attr("height") || 24) : 0, |
|
|
|
}, |
|
|
|
tabHeight = this.tab ? (this.tab.attr("height") || 24) : 0, |
|
|
|
|
|
|
|
toolHeight = ((this.tool && this.tool.attr("height")) || 24) * ((this.tool && this.tool.isVisible()) ? 1 : 0); |
|
|
|
|
|
|
|
const resetHeight = h - tbHeight - tabHeight - toolHeight - 2 * this.options.innerVgap; |
|
|
|
|
|
|
|
this.view.resetHeight ? this.view.resetHeight(resetHeight) : |
|
|
|
|
|
|
|
this.view.element.css({ "max-height": BI.pixFormat(resetHeight) }); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
resetWidth: function (w) { |
|
|
|
setValue(selectedValues) { |
|
|
|
this.options.width = w; |
|
|
|
this.tab && this.tab.setValue(selectedValues); |
|
|
|
this.element.width(w); |
|
|
|
this.view.setValue(selectedValues); |
|
|
|
}, |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
resetHeight: function (h) { |
|
|
|
getValue() { |
|
|
|
var tbHeight = this.toolbar ? (this.toolbar.attr("height") || 24) : 0, |
|
|
|
return this.view.getValue(); |
|
|
|
tabHeight = this.tab ? (this.tab.attr("height") || 24) : 0, |
|
|
|
} |
|
|
|
toolHeight = ((this.tool && this.tool.attr("height")) || 24) * ((this.tool && this.tool.isVisible()) ? 1 : 0); |
|
|
|
|
|
|
|
var resetHeight = h - tbHeight - tabHeight - toolHeight - 2 * this.options.innerVgap; |
|
|
|
|
|
|
|
this.view.resetHeight ? this.view.resetHeight(resetHeight) : |
|
|
|
|
|
|
|
this.view.element.css({ "max-height": BI.pixFormat(resetHeight) }); |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
setValue: function (selectedValues) { |
|
|
|
} |
|
|
|
this.tab && this.tab.setValue(selectedValues); |
|
|
|
|
|
|
|
this.view.setValue(selectedValues); |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
getValue: function () { |
|
|
|
BI.extend(BI, { PopupView }); |
|
|
|
return this.view.getValue(); |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
BI.PopupView.EVENT_CHANGE = "EVENT_CHANGE"; |
|
|
|
|
|
|
|
BI.shortcut("bi.popup_view", BI.PopupView); |
|
|
|
|
|
|
|