fanruan
/
fineui
4
1
Fork 2
Code Issues 1 Pull Requests Releases Wiki Activity
Browse Source

KERNEL-13891 refactor:base/layer文件夹es6化

es6
Joker.Wang-王顺 2 years ago
parent
b00440694d
commit
b561bf5d85
4 changed files with 949 additions and 934 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. 391
      src/base/layer/layer.drawer.js
  2. 484
      src/base/layer/layer.popover.js
  3. 798
      src/base/layer/layer.popup.js
  4. 210
      src/base/layer/layer.searcher.js

391
src/base/layer/layer.drawer.js
Unescape View File

@ -3,238 +3,235 @@
* @class BI.Popover * @class BI.Popover
* @extends BI.Widget * @extends BI.Widget
*/ */
BI.Drawer = BI.inherit(BI.Widget, {
SIZE: {
SMALL: "small",
NORMAL: "normal",
BIG: "big",
},
props: {
baseCls: "bi-drawer bi-card",
size: "normal",
placement: "right", // top/bottom/left/right
header: null,
headerHeight: 40,
body: null,
closable: true, // BI-40839 是否显示右上角的关闭按钮
bodyHgap: 20,
bodyTgap: 10,
bodyBgap: 10,
},
render: function () { import { shortcut } from "../../core/decorator";
var self = this; @shortcut()
var o = this.options; export class Drawer extends BI.Widget {
var items = [{ SIZE = {
el: { SMALL: "small",
type: "bi.htape", NORMAL: "normal",
cls: "bi-message-title bi-header-background", BIG: "big",
}
props = {
baseCls: "bi-drawer bi-card",
size: "normal",
placement: "right", // top/bottom/left/right
header: null,
headerHeight: 40,
body: null,
closable: true, // BI-40839 是否显示右上角的关闭按钮
bodyHgap: 20,
bodyTgap: 10,
bodyBgap: 10,
}
static xtype = "bi.drawer";
static EVENT_CLOSE = "EVENT_CLOSE";
static EVENT_OPEN = "EVENT_OPEN";
_getSuitableSize() {
const { size, height, placement, width } = this.options;
let sizeValue = 0;
switch (size) {
case "big":
sizeValue = 736;
break;
case "small":
sizeValue = 200;
break;
case "normal":
default:
sizeValue = 378;
break;
}
if (placement === "top" || placement === "bottom") {
return {
height: height || sizeValue,
};
}
if (placement === "left" || placement === "right") {
return {
width: width || sizeValue,
};
}
}
render() {
const { header, headerHeight, closable, body, bodyHgap, bodyTgap, bodyBgap } = this.options;
const items = [{
el: {
type: "bi.htape",
cls: "bi-message-title bi-header-background",
items: [{
type: "bi.absolute",
items: [{ items: [{
type: "bi.absolute", el: BI.isPlainObject(header) ? BI.extend({}, header, {
items: [{ extraCls: "bi-font-bold",
el: BI.isPlainObject(o.header) ? BI.extend({}, o.header, { }) : {
extraCls: "bi-font-bold", type: "bi.label",
}) : { cls: "bi-font-bold",
type: "bi.label", height: headerHeight,
cls: "bi-font-bold", text: header,
height: o.headerHeight, title: header,
text: o.header, textAlign: "left",
title: o.header,
textAlign: "left",
},
left: 20,
top: 0,
right: 0,
bottom: 0,
}],
}, {
el: o.closable ? {
type: "bi.icon_button",
cls: "bi-message-close close-font",
height: o.headerHeight,
handler: function () {
self.close();
},
} : {
type: "bi.layout",
}, },
width: 56, left: 20,
top: 0,
right: 0,
bottom: 0,
}], }],
height: o.headerHeight, }, {
}, el: closable ? {
height: o.headerHeight, type: "bi.icon_button",
}, { cls: "bi-message-close close-font",
el: { height: headerHeight,
type: "bi.vertical", handler: ()=> {
scrolly: true, this.close();
cls: "drawer-body", },
ref: function () { } : {
self.body = this; type: "bi.layout",
}, },
items: [{ width: 56,
el: o.body, }],
}], height: headerHeight,
},
height: headerHeight,
}, {
el: {
type: "bi.vertical",
scrolly: true,
cls: "drawer-body",
ref: (_ref)=> {
this.body = _ref;
}, },
hgap: o.bodyHgap, items: [{
tgap: o.bodyTgap, el: body,
bgap: o.bodyBgap, }],
}]; },
hgap: bodyHgap,
tgap: bodyTgap,
bgap: bodyBgap,
}];
return BI.extend({ return BI.extend({
type: "bi.vtape", type: "bi.vtape",
items: items, items: items,
}, this._getSuitableSize()); }, this._getSuitableSize());
}, }
mounted() {
const { placement } = this.options;
switch (placement) {
case "right":
this.element.css({
top: 0,
left: "100%",
bottom: 0,
});
break;
case "left":
this.element.css({
top: 0,
right: "100%",
bottom: 0,
});
break;
case "top":
this.element.css({
left: 0,
right: 0,
bottom: "100%",
});
break;
case "bottom":
this.element.css({
left: 0,
right: 0,
top: "100%",
});
break;
default:
break;
}
}
_getSuitableSize: function () { show(callback) {
var o = this.options; const { placement } = this.options;
var size = 0; requestAnimationFrame(()=> {
switch (o.size) { const size = this._getSuitableSize();
case "big": switch (placement) {
size = 736; case "right":
this.element.css({
left: "calc(100% - " + size.width + "px)",
});
break;
case "left":
this.element.css({
right: "calc(100% - " + size.width + "px)",
});
break;
case "top":
this.element.css({
bottom: "calc(100% - " + size.height + "px)",
});
break; break;
case "small": case "bottom":
size = 200; this.element.css({
top: "calc(100% - " + size.height + "px)",
});
break; break;
case "normal":
default: default:
size = 378;
break; break;
} }
if (o.placement === "top" || o.placement === "bottom") { callback && callback();
return { });
height: o.height || size, }
};
}
if (o.placement === "left" || o.placement === "right") {
return {
width: o.width || size,
};
}
},
mounted: function () { hide(callback) {
var self = this, o = this.options; const { placement } = this.options;
switch (o.placement) { requestAnimationFrame(()=> {
switch (placement) {
case "right": case "right":
self.element.css({ this.element.css({
top: 0,
left: "100%", left: "100%",
bottom: 0,
}); });
break; break;
case "left": case "left":
self.element.css({ this.element.css({
top: 0,
right: "100%", right: "100%",
bottom: 0,
}); });
break; break;
case "top": case "top":
self.element.css({ this.element.css({
left: 0,
right: 0,
bottom: "100%", bottom: "100%",
}); });
break; break;
case "bottom": case "bottom":
self.element.css({ this.element.css({
left: 0,
right: 0,
top: "100%", top: "100%",
}); });
break; break;
default: default:
break; break;
} }
}, setTimeout(callback, 300);
});
show: function (callback) { }
var self = this, o = this.options;
requestAnimationFrame(function () {
var size = self._getSuitableSize();
switch (o.placement) {
case "right":
self.element.css({
left: "calc(100% - " + size.width + "px)",
});
break;
case "left":
self.element.css({
right: "calc(100% - " + size.width + "px)",
});
break;
case "top":
self.element.css({
bottom: "calc(100% - " + size.height + "px)",
});
break;
case "bottom":
self.element.css({
top: "calc(100% - " + size.height + "px)",
});
break;
default:
break;
}
callback && callback();
});
},
hide: function (callback) {
var self = this, o = this.options;
requestAnimationFrame(function () {
switch (o.placement) {
case "right":
self.element.css({
left: "100%",
});
break;
case "left":
self.element.css({
right: "100%",
});
break;
case "top":
self.element.css({
bottom: "100%",
});
break;
case "bottom":
self.element.css({
top: "100%",
});
break;
default:
break;
}
setTimeout(callback, 300);
});
},
open: function () {
var self = this;
this.show(function () {
self.fireEvent(BI.Drawer.EVENT_OPEN);
});
},
close: function () { open() {
var self = this; this.show(()=> {
this.hide(function () { this.fireEvent(Drawer.EVENT_OPEN);
self.fireEvent(BI.Drawer.EVENT_CLOSE); });
}); }
},
setZindex: function (zindex) { close() {
this.element.css({ "z-index": zindex }); this.hide(()=> {
}, this.fireEvent(Drawer.EVENT_CLOSE);
});
}
destroyed: function () { setZindex(zindex) {
}, this.element.css({ "z-index": zindex });
}); }
BI.shortcut("bi.drawer", BI.Drawer); destroyed() {
}
BI.Drawer.EVENT_CLOSE = "EVENT_CLOSE"; }
BI.Drawer.EVENT_OPEN = "EVENT_OPEN"; BI.extend(BI, { Drawer });

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

@ -3,276 +3,280 @@
* @class BI.Popover * @class BI.Popover
* @extends BI.Widget * @extends BI.Widget
*/ */
BI.Popover = BI.inherit(BI.Widget, {
_constant: {
SIZE: {
SMALL: "small",
NORMAL: "normal",
BIG: "big",
},
MAX_HEIGHT: 600,
},
props: function () { import { shortcut } from "../../core/decorator";
return { @shortcut()
baseCls: "bi-popover bi-card bi-border-radius", export class Popover extends BI.Widget {
size: "normal", // small, normal, big _constant = {
logic: { SIZE: {
dynamic: false, SMALL: "small",
}, NORMAL: "normal",
header: null, BIG: "big",
headerHeight: 40, },
body: null, MAX_HEIGHT: 600,
footer: null, }
footerHeight: 44,
closable: true, // BI-40839 是否显示右上角的关闭按钮
bodyHgap: BI.SIZE_CONSANTS.H_GAP_SIZE,
bodyTgap: BI.SIZE_CONSANTS.V_GAP_SIZE,
};
},
render: function () { props() {
var self = this; return {
var o = this.options; baseCls: "bi-popover bi-card bi-border-radius",
var c = this._constant; size: "normal", // small, normal, big
this.startX = 0; logic: {
this.startY = 0; dynamic: false,
var size = this._calculateSize(); },
this.tracker = new BI.MouseMoveTracker(function (deltaX, deltaY) { header: null,
var W = BI.Widget._renderEngine.createElement("body").width(); headerHeight: 40,
var H = BI.Widget._renderEngine.createElement("body").height(); body: null,
self.startX += deltaX; footer: null,
self.startY += deltaY; footerHeight: 44,
self.element.css({ closable: true, // BI-40839 是否显示右上角的关闭按钮
left: BI.clamp(self.startX, 0, W - self.element.width()) + "px", bodyHgap: BI.SIZE_CONSANTS.H_GAP_SIZE,
top: BI.clamp(self.startY, 0, H - self.element.height()) + "px", bodyTgap: BI.SIZE_CONSANTS.V_GAP_SIZE,
}); };
// BI-12134 没有什么特别好的方法 }
BI.Resizers._resize({
target: self.element[0], static xtype = "bi.popover";
}); static EVENT_CLOSE = "EVENT_CLOSE";
}, function () { static EVENT_OPEN = "EVENT_OPEN";
self.tracker.releaseMouseMoves(); static EVENT_CANCEL = "EVENT_CANCEL";
}, _global); static EVENT_CONFIRM = "EVENT_CONFIRM";
var items = [{
el: { render() {
type: "bi.htape", // var self = this;
cls: "bi-message-title bi-header-background", const { header, headerHeight, closable, logic, footer, footerHeight, body, bodyTgap, bodyHgap } = this.options;
items: [{ const c = this._constant;
el: { this.startX = 0;
type: "bi.absolute", this.startY = 0;
ref: function (_ref) { const size = this._calculateSize();
self.dragger = _ref; this.tracker = new BI.MouseMoveTracker(function (deltaX, deltaY) {
}, const W = BI.Widget._renderEngine.createElement("body").width();
items: [{ const H = BI.Widget._renderEngine.createElement("body").height();
el: BI.isPlainObject(o.header) ? BI.extend({}, o.header, { this.startX += deltaX;
extraCls: "bi-font-bold", this.startY += deltaY;
}) : { this.element.css({
type: "bi.label", left: BI.clamp(this.startX, 0, W - this.element.width()) + "px",
cls: "bi-font-bold", top: BI.clamp(this.startY, 0, H - this.element.height()) + "px",
height: o.headerHeight, });
text: o.header, // BI-12134 没有什么特别好的方法
title: o.header, BI.Resizers._resize({
textAlign: "left", target: this.element[0],
}, });
top: 0, }, ()=> {
bottom: 0, this.tracker.releaseMouseMoves();
left: BI.SIZE_CONSANTS.H_GAP_SIZE, }, _global);
right: o.closable ? 0 : BI.SIZE_CONSANTS.H_GAP_SIZE, const items = [{
}], el: {
type: "bi.htape",
cls: "bi-message-title bi-header-background",
items: [{
el: {
type: "bi.absolute",
ref: (_ref)=> {
this.dragger = _ref;
}, },
}, o.closable ? { items: [{
el: { el: BI.isPlainObject(header) ? BI.extend({}, header, {
type: "bi.icon_button", extraCls: "bi-font-bold",
cls: "bi-message-close close-font", }) : {
height: o.headerHeight, type: "bi.label",
handler: function () { cls: "bi-font-bold",
self.close(); height: headerHeight,
text: header,
title: header,
textAlign: "left",
}, },
}, top: 0,
width: 56, bottom: 0,
} : null], left: BI.SIZE_CONSANTS.H_GAP_SIZE,
height: o.headerHeight, right: closable ? 0 : BI.SIZE_CONSANTS.H_GAP_SIZE,
}, }],
height: o.headerHeight,
}, o.logic.dynamic ? {
el: {
type: "bi.vertical",
scrolly: true,
cls: "popover-body",
ref: function () {
self.body = this;
}, },
css: { }, closable ? {
"max-height": this._getSuitableBodyHeight(c.MAX_HEIGHT - o.headerHeight - (o.footer ? o.footerHeight : 0) - o.bodyTgap), el: {
"min-height": this._getSuitableBodyHeight(size.height - o.headerHeight - (o.footer ? o.footerHeight : 0) - o.bodyTgap), type: "bi.icon_button",
cls: "bi-message-close close-font",
height: headerHeight,
handler: ()=> {
this.close();
},
}, },
items: [{ width: 56,
el: o.body, } : null],
}], height: headerHeight,
hgap: o.bodyHgap, },
tgap: o.bodyTgap, height: headerHeight,
}, logic.dynamic ? {
el: {
type: "bi.vertical",
scrolly: true,
cls: "popover-body",
ref: (_ref)=> {
this.body = _ref;
},
css: {
"max-height": this._getSuitableBodyHeight(c.MAX_HEIGHT - headerHeight - (footer ? footerHeight : 0) - bodyTgap),
"min-height": this._getSuitableBodyHeight(size.height - headerHeight - (footer ? footerHeight : 0) - bodyTgap),
}, },
} : { items: [{
el: body,
}],
hgap: bodyHgap,
tgap: bodyTgap,
},
} : {
el: {
type: "bi.absolute",
items: [{
el: body,
left: bodyHgap,
top: bodyTgap,
right: bodyHgap,
bottom: 0,
}],
},
}];
if (footer) {
items.push({
el: { el: {
type: "bi.absolute", type: "bi.absolute",
items: [{ items: [{
el: o.body, el: footer,
left: o.bodyHgap, left: BI.SIZE_CONSANTS.H_GAP_SIZE,
top: o.bodyTgap, top: 0,
right: o.bodyHgap, right: BI.SIZE_CONSANTS.H_GAP_SIZE,
bottom: 0, bottom: 0,
}], }],
height: footerHeight,
}, },
}]; height: footerHeight,
if (o.footer) {
items.push({
el: {
type: "bi.absolute",
items: [{
el: o.footer,
left: BI.SIZE_CONSANTS.H_GAP_SIZE,
top: 0,
right: BI.SIZE_CONSANTS.H_GAP_SIZE,
bottom: 0,
}],
height: o.footerHeight,
},
height: o.footerHeight,
});
}
return BI.extend({
items: items,
width: this._getSuitableWidth(size.width),
}, o.logic.dynamic ? {
type: "bi.vertical",
scrolly: false,
} : {
type: "bi.vtape",
height: this._getSuitableHeight(size.height),
}); });
}, }
// mounted之后绑定事件 return BI.extend({
mounted: function () { items: items,
var self = this; width: this._getSuitableWidth(size.width),
this.dragger.element.mousedown(function (e) { }, logic.dynamic ? {
if (self.options.draggable !== false) { type: "bi.vertical",
self.startX = self.element[0].offsetLeft; scrolly: false,
self.startY = self.element[0].offsetTop; } : {
self.tracker.captureMouseMoves(e); type: "bi.vtape",
} height: this._getSuitableHeight(size.height),
}); });
}, }
// mounted之后绑定事件
mounted() {
this.dragger.element.mousedown(function (e) {
if (this.options.draggable !== false) {
this.startX = this.element[0].offsetLeft;
this.startY = this.element[0].offsetTop;
this.tracker.captureMouseMoves(e);
}
});
}
_getSuitableBodyHeight: function (height) { _getSuitableBodyHeight(height) {
var o = this.options; const { headerHeight, footer, footerHeight, bodyTgap } = this.options;
return BI.clamp(height, 0, BI.Widget._renderEngine.createElement("body")[0].clientHeight - o.headerHeight - (o.footer ? o.footerHeight : 0) - o.bodyTgap); return BI.clamp(height, 0, BI.Widget._renderEngine.createElement("body")[0].clientHeight - headerHeight - (footer ? footerHeight : 0) - bodyTgap);
}, }
_getSuitableHeight: function (height) { _getSuitableHeight(height) {
return BI.clamp(height, 0, BI.Widget._renderEngine.createElement("body")[0].clientHeight); return BI.clamp(height, 0, BI.Widget._renderEngine.createElement("body")[0].clientHeight);
}, }
_getSuitableWidth: function (width) { _getSuitableWidth(width) {
return BI.clamp(width, 0, BI.Widget._renderEngine.createElement("body").width()); return BI.clamp(width, 0, BI.Widget._renderEngine.createElement("body").width());
}, }
_calculateSize: function () { _calculateSize() {
var o = this.options; const { size, width, height } = this.options;
var size = {}; const sizeValue = {};
if (BI.isNotNull(o.size)) { if (BI.isNotNull(size)) {
switch (o.size) { switch (size) {
case this._constant.SIZE.SMALL: case this._constant.SIZE.SMALL:
size.width = 450; sizeValue.width = 450;
size.height = 200; sizeValue.height = 200;
size.type = "small"; sizeValue.type = "small";
break; break;
case this._constant.SIZE.BIG: case this._constant.SIZE.BIG:
size.width = 900; sizeValue.width = 900;
size.height = 500; sizeValue.height = 500;
size.type = "big"; sizeValue.type = "big";
break; break;
default: default:
size.width = 550; sizeValue.width = 550;
size.height = 500; sizeValue.height = 500;
size.type = "default"; sizeValue.type = "default";
}
} }
}
return { return {
width: o.width || size.width, width: width || sizeValue.width,
height: o.height || size.height, height: height || sizeValue.height,
type: size.type || "default", type: sizeValue.type || "default",
}; };
}, }
setDraggable(b) {
this.options.draggable = b;
}
setDraggable: function (b) { hide() {
this.options.draggable = b;
},
hide: function () { }
}, open() {
this.show();
this.fireEvent(Popover.EVENT_OPEN, arguments);
}
open: function () { close() {
this.show(); this.hide();
this.fireEvent(BI.Popover.EVENT_OPEN, arguments); this.fireEvent(Popover.EVENT_CLOSE, arguments);
}, }
close: function () { setZindex(zindex) {
this.hide(); this.element.css({ "z-index": zindex });
this.fireEvent(BI.Popover.EVENT_CLOSE, arguments); }
}, }
setZindex: function (zindex) { BI.extend(BI, { Popover });
this.element.css({ "z-index": zindex });
},
});
BI.shortcut("bi.popover", BI.Popover); @shortcut()
export class BarPopover extends BI.Popover {
static xtype = "bi.bar_popover";
BI.BarPopover = BI.inherit(BI.Popover, { _defaultConfig() {
_defaultConfig: function () { return BI.extend(super._defaultConfig(arguments), {
return BI.extend(BI.BarPopover.superclass._defaultConfig.apply(this, arguments), { btns: [BI.i18nText("BI-Basic_OK"), BI.i18nText("BI-Basic_Cancel")],
btns: [BI.i18nText("BI-Basic_OK"), BI.i18nText("BI-Basic_Cancel")], });
}); }
},
beforeCreate: function () { beforeCreate() {
var self = this; const { footer, warningTitle } = this.options;
var o = this.options; footer || (this.options.footer = {
o.footer || (o.footer = { type: "bi.right_vertical_adapt",
type: "bi.right_vertical_adapt", lgap: 10,
lgap: 10, items: [{
items: [{ type: "bi.button",
type: "bi.button", text: this.options.btns[1],
text: this.options.btns[1], value: 1,
value: 1, level: "ignore",
level: "ignore", handler: (v)=> {
handler: function (v) { this.fireEvent(Popover.EVENT_CANCEL, v);
self.fireEvent(BI.Popover.EVENT_CANCEL, v); this.close(v);
self.close(v); },
}, }, {
}, { type: "bi.button",
type: "bi.button", text: this.options.btns[0],
text: this.options.btns[0], warningTitle: warningTitle,
warningTitle: o.warningTitle, value: 0,
value: 0, handler: (v)=> {
handler: function (v) { this.fireEvent(Popover.EVENT_CONFIRM, v);
self.fireEvent(BI.Popover.EVENT_CONFIRM, v); this.close(v);
self.close(v); },
}, }],
}], });
}); }
}, }
});
BI.shortcut("bi.bar_popover", BI.BarPopover); BI.extend(BI, { BarPopover });
BI.Popover.EVENT_CLOSE = "EVENT_CLOSE";
BI.Popover.EVENT_OPEN = "EVENT_OPEN";
BI.Popover.EVENT_CANCEL = "EVENT_CANCEL";
BI.Popover.EVENT_CONFIRM = "EVENT_CONFIRM";

798
src/base/layer/layer.popup.js
Unescape View File

@ -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);

210
src/base/layer/layer.searcher.js
Unescape View File

@ -6,136 +6,140 @@
* @extends BI.Pane * @extends BI.Pane
*/ */
BI.SearcherView = BI.inherit(BI.Pane, { import { shortcut } from "../../core/decorator";
_defaultConfig: function () { @shortcut()
var conf = BI.SearcherView.superclass._defaultConfig.apply(this, arguments); export class SearcherView extends BI.Pane {
return BI.extend(conf, {
baseCls: (conf.baseCls || "") + " bi-searcher-view bi-card",
tipText: BI.i18nText("BI-No_Select"),
chooseType: BI.Selection.Single,
matcher: { // 完全匹配的构造器
type: "bi.button_group",
behaviors: {
redmark: function () {
return true;
},
},
items: [],
layouts: [{
type: "bi.vertical",
}],
},
searcher: {
type: "bi.button_group",
behaviors: {
redmark: function () {
return true;
},
},
items: [],
layouts: [{
type: "bi.vertical",
}],
},
});
},
render: function () { static xtype = "bi.searcher_view";
var self = this, o = this.options; static EVENT_CHANGE = "EVENT_CHANGE";
this.matcher = BI.createWidget(o.matcher, { _defaultConfig() {
const conf = super._defaultConfig(arguments);
return BI.extend(conf, {
baseCls: (conf.baseCls || "") + " bi-searcher-view bi-card",
tipText: BI.i18nText("BI-No_Select"),
chooseType: BI.Selection.Single,
matcher: { // 完全匹配的构造器
type: "bi.button_group", type: "bi.button_group",
chooseType: o.chooseType,
behaviors: { behaviors: {
redmark: function () { redmark: ()=> {
return true; return true;
}, },
}, },
items: [],
layouts: [{ layouts: [{
type: "bi.vertical", type: "bi.vertical",
}], }],
value: o.value, },
}); searcher: {
this.matcher.on(BI.Controller.EVENT_CHANGE, function (type, val, ob) {
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
if (type === BI.Events.CLICK) {
self.fireEvent(BI.SearcherView.EVENT_CHANGE, val, ob);
}
});
this.spliter = BI.createWidget({
type: "bi.vertical",
height: 1,
hgap: 10,
items: [{
type: "bi.layout",
height: 1,
cls: "searcher-view-spliter bi-background",
}],
});
this.searcher = BI.createWidget(o.searcher, {
type: "bi.button_group", type: "bi.button_group",
chooseType: o.chooseType,
behaviors: { behaviors: {
redmark: function () { redmark: function () {
return true; return true;
}, },
}, },
items: [],
layouts: [{ layouts: [{
type: "bi.vertical", type: "bi.vertical",
}], }],
value: o.value, },
}); });
this.searcher.on(BI.Controller.EVENT_CHANGE, function (type, val, ob) { }
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); render() {
if (type === BI.Events.CLICK) { const { matcher, chooseType, value, searcher } = this.options;
self.fireEvent(BI.SearcherView.EVENT_CHANGE, val, ob);
} this.matcher = BI.createWidget(matcher, {
}); type: "bi.button_group",
chooseType,
BI.createWidget({ behaviors: {
redmark: ()=> {
return true;
},
},
layouts: [{
type: "bi.vertical", type: "bi.vertical",
element: this, }],
items: [this.matcher, this.spliter, this.searcher], value,
}); });
}, this.matcher.on(BI.Controller.EVENT_CHANGE, (type, val, ob)=> {
this.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
if (type === BI.Events.CLICK) {
this.fireEvent(SearcherView.EVENT_CHANGE, val, ob);
}
});
this.spliter = BI.createWidget({
type: "bi.vertical",
height: 1,
hgap: 10,
items: [{
type: "bi.layout",
height: 1,
cls: "searcher-view-spliter bi-background",
}],
});
this.searcher = BI.createWidget(searcher, {
type: "bi.button_group",
chooseType,
behaviors: {
redmark: ()=> {
return true;
},
},
layouts: [{
type: "bi.vertical",
}],
value,
});
this.searcher.on(BI.Controller.EVENT_CHANGE, (type, val, ob)=> {
this.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
if (type === BI.Events.CLICK) {
this.fireEvent(BI.SearcherView.EVENT_CHANGE, val, ob);
}
});
BI.createWidget({
type: "bi.vertical",
element: this,
items: [this.matcher, this.spliter, this.searcher],
});
}
startSearch: function () { startSearch() {
}, }
stopSearch: function () { stopSearch() {
}, }
setValue: function (v) { setValue(v) {
this.matcher.setValue(v); this.matcher.setValue(v);
this.searcher.setValue(v); this.searcher.setValue(v);
}, }
getValue: function () { getValue() {
return this.matcher.getValue().concat(this.searcher.getValue()); return this.matcher.getValue().concat(this.searcher.getValue());
}, }
populate: function (searchResult, matchResult, keyword) { populate(searchResult, matchResult, keyword) {
searchResult || (searchResult = []); searchResult || (searchResult = []);
matchResult || (matchResult = []); matchResult || (matchResult = []);
this.setTipVisible(searchResult.length + matchResult.length === 0); this.setTipVisible(searchResult.length + matchResult.length === 0);
this.spliter.setVisible(BI.isNotEmptyArray(matchResult) && BI.isNotEmptyArray(searchResult)); this.spliter.setVisible(BI.isNotEmptyArray(matchResult) && BI.isNotEmptyArray(searchResult));
this.matcher.populate(matchResult, keyword); this.matcher.populate(matchResult, keyword);
this.searcher.populate(searchResult, keyword); this.searcher.populate(searchResult, keyword);
}, }
empty: function () { empty() {
this.searcher.empty(); this.searcher.empty();
this.matcher.empty(); this.matcher.empty();
}, }
hasMatched: function () { hasMatched() {
return this.matcher.getAllButtons().length > 0; return this.matcher.getAllButtons().length > 0;
}, }
}); }
BI.SearcherView.EVENT_CHANGE = "EVENT_CHANGE";
BI.shortcut("bi.searcher_view", BI.SearcherView); BI.extend(BI, { SearcherView });

Write Preview
Loading…
Cancel
Save