Frank
/
fineui
forked from fanruan/fineui
1
0
Fork 0
Code Issues Pull Requests Projects 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
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 197
      src/base/layer/layer.drawer.js
  2. 250
      src/base/layer/layer.popover.js
  3. 212
      src/base/layer/layer.popup.js
  4. 84
      src/base/layer/layer.searcher.js

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

@ -3,13 +3,16 @@
* @class BI.Popover
* @extends BI.Widget
*/
BI.Drawer = BI.inherit(BI.Widget, {
SIZE: {
import { shortcut } from "../../core/decorator";
@shortcut()
export class Drawer extends BI.Widget {
SIZE = {
SMALL: "small",
NORMAL: "normal",
BIG: "big",
},
props: {
}
props = {
baseCls: "bi-drawer bi-card",
size: "normal",
placement: "right", // top/bottom/left/right
@ -20,26 +23,53 @@ BI.Drawer = BI.inherit(BI.Widget, {
bodyHgap: 20,
bodyTgap: 10,
bodyBgap: 10,
},
render: function () {
var self = this;
var o = this.options;
var items = [{
}
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: [{
el: BI.isPlainObject(o.header) ? BI.extend({}, o.header, {
el: BI.isPlainObject(header) ? BI.extend({}, header, {
extraCls: "bi-font-bold",
}) : {
type: "bi.label",
cls: "bi-font-bold",
height: o.headerHeight,
text: o.header,
title: o.header,
height: headerHeight,
text: header,
title: header,
textAlign: "left",
},
left: 20,
@ -48,97 +78,69 @@ BI.Drawer = BI.inherit(BI.Widget, {
bottom: 0,
}],
}, {
el: o.closable ? {
el: closable ? {
type: "bi.icon_button",
cls: "bi-message-close close-font",
height: o.headerHeight,
handler: function () {
self.close();
height: headerHeight,
handler: ()=> {
this.close();
},
} : {
type: "bi.layout",
},
width: 56,
}],
height: o.headerHeight,
height: headerHeight,
},
height: o.headerHeight,
height: headerHeight,
}, {
el: {
type: "bi.vertical",
scrolly: true,
cls: "drawer-body",
ref: function () {
self.body = this;
ref: (_ref)=> {
this.body = _ref;
},
items: [{
el: o.body,
el: body,
}],
},
hgap: o.bodyHgap,
tgap: o.bodyTgap,
bgap: o.bodyBgap,
hgap: bodyHgap,
tgap: bodyTgap,
bgap: bodyBgap,
}];
return BI.extend({
type: "bi.vtape",
items: items,
}, this._getSuitableSize());
},
_getSuitableSize: function () {
var o = this.options;
var size = 0;
switch (o.size) {
case "big":
size = 736;
break;
case "small":
size = 200;
break;
case "normal":
default:
size = 378;
break;
}
if (o.placement === "top" || o.placement === "bottom") {
return {
height: o.height || size,
};
}
if (o.placement === "left" || o.placement === "right") {
return {
width: o.width || size,
};
}
},
mounted: function () {
var self = this, o = this.options;
switch (o.placement) {
mounted() {
const { placement } = this.options;
switch (placement) {
case "right":
self.element.css({
this.element.css({
top: 0,
left: "100%",
bottom: 0,
});
break;
case "left":
self.element.css({
this.element.css({
top: 0,
right: "100%",
bottom: 0,
});
break;
case "top":
self.element.css({
this.element.css({
left: 0,
right: 0,
bottom: "100%",
});
break;
case "bottom":
self.element.css({
this.element.css({
left: 0,
right: 0,
top: "100%",
@ -147,30 +149,30 @@ BI.Drawer = BI.inherit(BI.Widget, {
default:
break;
}
},
}
show: function (callback) {
var self = this, o = this.options;
requestAnimationFrame(function () {
var size = self._getSuitableSize();
switch (o.placement) {
show(callback) {
const { placement } = this.options;
requestAnimationFrame(()=> {
const size = this._getSuitableSize();
switch (placement) {
case "right":
self.element.css({
this.element.css({
left: "calc(100% - " + size.width + "px)",
});
break;
case "left":
self.element.css({
this.element.css({
right: "calc(100% - " + size.width + "px)",
});
break;
case "top":
self.element.css({
this.element.css({
bottom: "calc(100% - " + size.height + "px)",
});
break;
case "bottom":
self.element.css({
this.element.css({
top: "calc(100% - " + size.height + "px)",
});
break;
@ -179,29 +181,29 @@ BI.Drawer = BI.inherit(BI.Widget, {
}
callback && callback();
});
},
}
hide: function (callback) {
var self = this, o = this.options;
requestAnimationFrame(function () {
switch (o.placement) {
hide(callback) {
const { placement } = this.options;
requestAnimationFrame(()=> {
switch (placement) {
case "right":
self.element.css({
this.element.css({
left: "100%",
});
break;
case "left":
self.element.css({
this.element.css({
right: "100%",
});
break;
case "top":
self.element.css({
this.element.css({
bottom: "100%",
});
break;
case "bottom":
self.element.css({
this.element.css({
top: "100%",
});
break;
@ -210,31 +212,26 @@ BI.Drawer = BI.inherit(BI.Widget, {
}
setTimeout(callback, 300);
});
},
}
open: function () {
var self = this;
this.show(function () {
self.fireEvent(BI.Drawer.EVENT_OPEN);
open() {
this.show(()=> {
this.fireEvent(Drawer.EVENT_OPEN);
});
},
}
close: function () {
var self = this;
this.hide(function () {
self.fireEvent(BI.Drawer.EVENT_CLOSE);
close() {
this.hide(()=> {
this.fireEvent(Drawer.EVENT_CLOSE);
});
},
}
setZindex: function (zindex) {
setZindex(zindex) {
this.element.css({ "z-index": zindex });
},
destroyed: function () {
},
});
}
BI.shortcut("bi.drawer", BI.Drawer);
destroyed() {
}
BI.Drawer.EVENT_CLOSE = "EVENT_CLOSE";
BI.Drawer.EVENT_OPEN = "EVENT_OPEN";
}
BI.extend(BI, { Drawer });

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

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

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

@ -3,12 +3,19 @@
* @class BI.PopupView
* @extends BI.Widget
*/
BI.PopupView = BI.inherit(BI.Widget, {
_const: {
import { shortcut } from "../../core/decorator";
@shortcut()
export class PopupView extends BI.Widget {
_const = {
TRIANGLE_LENGTH: 12,
},
_defaultConfig: function (props) {
return BI.extend(BI.PopupView.superclass._defaultConfig.apply(this, arguments), {
}
static xtype = "bi.popup_view";
static EVENT_CHANGE = "EVENT_CHANGE";
_defaultConfig(props) {
return BI.extend(super._defaultConfig(arguments), {
_baseCls: "bi-popup-view" + (props.primary ? " bi-primary" : ""),
// 品牌色
primary: false,
@ -46,10 +53,10 @@ BI.PopupView = BI.inherit(BI.Widget, {
}],
},
});
},
render: function () {
var self = this, o = this.options;
}
render() {
const { minWidth, maxWidth, stopPropagation, stopEvent,
direction, logic, lgap, rgap, tgap, bgap, vgap, hgap, primary, showArrow } = this.options;
function fn (e) {
e.stopPropagation();
}
@ -60,44 +67,47 @@ BI.PopupView = BI.inherit(BI.Widget, {
}
this.element.css({
"z-index": BI.zIndex_popup,
"min-width": BI.pixFormat(o.minWidth),
"max-width": BI.pixFormat(o.maxWidth),
"min-width": BI.pixFormat(minWidth),
"max-width": BI.pixFormat(maxWidth),
}).bind({ click: fn });
this.element.bind("mousewheel", fn);
o.stopPropagation && this.element.bind({ mousedown: fn, mouseup: fn, mouseover: fn });
o.stopEvent && this.element.bind({ mousedown: stop, mouseup: stop, mouseover: stop });
stopPropagation && this.element.bind({ mousedown: fn, mouseup: fn, mouseover: fn });
stopEvent && this.element.bind({ mousedown: stop, mouseup: stop, mouseover: stop });
this.tool = this._createTool();
this.tab = this._createTab();
this.view = this._createView();
this.toolbar = this._createToolBar();
const self = this;
// TODO:这里需要调整转化方式,仍然采用原来的self
this.view.on(BI.Controller.EVENT_CHANGE, function (type) {
// 箭头函数没有自己的arguments，只会获取外层的，若要获取自己的，需通过剩余参数写法，但这样得到的仍然不是类数组
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
if (type === BI.Events.CLICK) {
self.fireEvent(BI.PopupView.EVENT_CHANGE);
self.fireEvent(PopupView.EVENT_CHANGE);
}
});
BI.createWidget(BI.extend({
element: this,
}, BI.LogicFactory.createLogic(BI.LogicFactory.createLogicTypeByDirection(o.direction), BI.extend({}, o.logic, {
}, BI.LogicFactory.createLogic(BI.LogicFactory.createLogicTypeByDirection(direction), BI.extend({}, logic, {
scrolly: false,
lgap: o.lgap,
rgap: o.rgap,
tgap: o.tgap,
bgap: o.bgap,
vgap: o.vgap,
hgap: o.hgap,
items: BI.LogicFactory.createLogicItemsByDirection(o.direction, BI.extend({
cls: "list-view-outer bi-card list-view-shadow" + (o.primary ? " bi-primary" : ""),
}, BI.LogicFactory.createLogic(BI.LogicFactory.createLogicTypeByDirection(o.direction), BI.extend({}, o.logic, {
items: BI.LogicFactory.createLogicItemsByDirection(o.direction, this.tool, this.tab, this.view, this.toolbar),
lgap,
rgap,
tgap,
bgap,
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 (o.showArrow) {
if (showArrow) {
this.arrow = BI.createWidget({
type: "bi.absolute",
cls: "bi-bubble-arrow",
@ -129,34 +139,33 @@ BI.PopupView = BI.inherit(BI.Widget, {
}],
});
}
},
_createView: function () {
var o = this.options;
this.button_group = BI.createWidget(o.el, { type: "bi.button_group", value: o.value });
}
_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(o.minHeight),
"padding-top": BI.pixFormat(o.innerVgap),
"padding-bottom": BI.pixFormat(o.innerVgap),
"padding-left": BI.pixFormat(o.innerHgap),
"padding-right": BI.pixFormat(o.innerHgap),
"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;
},
}
_createTool: function () {
var o = this.options;
if (false === o.tool) {
_createTool() {
const { tool } = this.options;
if (false === tool) {
return;
}
return BI.createWidget(o.tool);
},
return BI.createWidget(tool);
}
_createTab: function () {
var o = this.options;
if (o.tabs.length === 0) {
_createTab() {
const { tabs, value } = this.options;
if (tabs.length === 0) {
return;
}
@ -164,14 +173,14 @@ BI.PopupView = BI.inherit(BI.Widget, {
type: "bi.center",
cls: "list-view-tab",
height: 25,
items: o.tabs,
value: o.value,
items: tabs,
value: value,
});
},
}
_createToolBar: function () {
var o = this.options;
if (o.buttons.length === 0) {
_createToolBar() {
const { buttons } = this.options;
if (buttons.length === 0) {
return;
}
@ -179,38 +188,38 @@ BI.PopupView = BI.inherit(BI.Widget, {
type: "bi.center",
cls: "list-view-toolbar bi-high-light bi-split-top",
height: 24,
items: BI.createItems(o.buttons, {
items: BI.createItems(buttons, {
once: false,
shadow: true,
isShadowShowingOnSelected: true,
}),
});
},
}
setDirection: function (direction, position) {
var o = this.options;
if (o.showArrow) {
var style = {}, wrapperStyle = {}, placeholderStyle = {};
var adjustXOffset = position.adjustXOffset || 0;
var adjustYOffset = position.adjustYOffset || 0;
var bodyBounds = BI.Widget._renderEngine.createElement("body").bounds();
var bodyWidth = bodyBounds.width;
var bodyHeight = bodyBounds.height;
var popupWidth = this.element.outerWidth();
var popupHeight = this.element.outerHeight();
var offset = position.offset;
var offsetStyle = position.offsetStyle;
var middle = offsetStyle === "center" || offsetStyle === "middle";
setDirection(direction, position) {
const { showArrow, tgap, vgap, bgap, rgap, hgap, lgap } = this.options;
if (showArrow) {
let style = {}, wrapperStyle = {}, placeholderStyle = {};
const adjustXOffset = position.adjustXOffset || 0;
const adjustYOffset = position.adjustYOffset || 0;
const bodyBounds = BI.Widget._renderEngine.createElement("body").bounds();
const bodyWidth = bodyBounds.width;
const bodyHeight = bodyBounds.height;
const popupWidth = this.element.outerWidth();
const popupHeight = this.element.outerHeight();
const offset = position.offset;
const offsetStyle = position.offsetStyle;
const middle = offsetStyle === "center" || offsetStyle === "middle";
var minLeft = Math.max(4, offset.left + 4 + popupWidth - bodyWidth);
var minRight = Math.max(4, popupWidth - (offset.left + 4));
var minTop = Math.max(4, offset.top + 4 + popupHeight - bodyHeight);
var minBottom = Math.max(4, popupHeight - (offset.top + 4));
const minLeft = Math.max(4, offset.left + 4 + popupWidth - bodyWidth);
const minRight = Math.max(4, popupWidth - (offset.left + 4));
const minTop = Math.max(4, offset.top + 4 + popupHeight - bodyHeight);
const minBottom = Math.max(4, popupHeight - (offset.top + 4));
var 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));
var 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 maxLeft = Math.min(popupWidth - 16 - 4, offset.left + position.width - 16 - 4);
const maxRight = Math.min(popupWidth - 16 - 4, bodyWidth - (offset.left + position.width - 16 - 4));
const maxTop = Math.min(popupHeight - 16 - 4, offset.top + position.height - 16 - 4);
const maxBottom = Math.min(popupHeight - 16 - 4, bodyHeight - (offset.top + position.height - 16 - 4));
switch (direction) {
case "bottom":
case "bottom,right":
@ -220,7 +229,7 @@ BI.PopupView = BI.inherit(BI.Widget, {
left: BI.clamp(((middle ? popupWidth : position.width) - adjustXOffset) / 2 - 8, minLeft, maxLeft),
};
wrapperStyle = {
top: o.tgap + o.vgap,
top: tgap + vgap,
left: 0,
right: "",
bottom: "",
@ -239,7 +248,7 @@ BI.PopupView = BI.inherit(BI.Widget, {
right: BI.clamp(((middle ? popupWidth : position.width) + adjustXOffset) / 2 - 8, minRight, maxRight),
};
wrapperStyle = {
top: o.bgap + o.vgap,
top: bgap + vgap,
left: "",
right: 0,
bottom: "",
@ -259,7 +268,7 @@ BI.PopupView = BI.inherit(BI.Widget, {
left: BI.clamp(((middle ? popupWidth : position.width) - adjustXOffset) / 2 - 8, minLeft, maxLeft),
};
wrapperStyle = {
bottom: o.bgap + o.vgap,
bottom: bgap + vgap,
left: 0,
right: "",
top: "",
@ -278,7 +287,7 @@ BI.PopupView = BI.inherit(BI.Widget, {
right: BI.clamp(((middle ? popupWidth : position.width) + adjustXOffset) / 2 - 8, minRight, maxRight),
};
wrapperStyle = {
bottom: o.bgap + o.vgap,
bottom: bgap + vgap,
right: 0,
left: "",
top: "",
@ -298,7 +307,7 @@ BI.PopupView = BI.inherit(BI.Widget, {
top: BI.clamp(((middle ? popupHeight : position.height) - adjustYOffset) / 2 - 8, minTop, maxTop),
};
wrapperStyle = {
right: o.rgap + o.hgap,
right: rgap + hgap,
top: 0,
bottom: "",
left: "",
@ -317,7 +326,7 @@ BI.PopupView = BI.inherit(BI.Widget, {
bottom: BI.clamp(((middle ? popupHeight : position.height) + adjustYOffset) / 2 - 8, minBottom, maxBottom),
};
wrapperStyle = {
right: o.rgap + o.hgap,
right: rgap + hgap,
bottom: 0,
top: "",
left: "",
@ -337,7 +346,7 @@ BI.PopupView = BI.inherit(BI.Widget, {
top: BI.clamp(((middle ? popupHeight : position.height) - adjustYOffset) / 2 - 8, minTop, maxTop),
};
wrapperStyle = {
left: o.lgap + o.hgap,
left: lgap + hgap,
top: 0,
bottom: "",
right: "",
@ -356,7 +365,7 @@ BI.PopupView = BI.inherit(BI.Widget, {
bottom: BI.clamp(((middle ? popupHeight : position.height) + adjustYOffset) / 2 - 8, minBottom, maxBottom),
};
wrapperStyle = {
left: o.lgap + o.hgap,
left: lgap + hgap,
bottom: 0,
top: "",
right: "",
@ -390,38 +399,39 @@ BI.PopupView = BI.inherit(BI.Widget, {
this.arrowWrapper.element.css(wrapperStyle);
this.placeholder.element.css(placeholderStyle);
}
},
}
getView: function () {
getView() {
return this.view;
},
}
populate: function (items) {
populate(items) {
this.view.populate.apply(this.view, arguments);
},
}
resetWidth: function (w) {
resetWidth(w) {
this.options.width = w;
this.element.width(w);
},
}
resetHeight: function (h) {
var tbHeight = this.toolbar ? (this.toolbar.attr("height") || 24) : 0,
resetHeight(h) {
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);
var resetHeight = h - tbHeight - tabHeight - toolHeight - 2 * this.options.innerVgap;
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) });
},
}
setValue: function (selectedValues) {
setValue(selectedValues) {
this.tab && this.tab.setValue(selectedValues);
this.view.setValue(selectedValues);
},
}
getValue: function () {
getValue() {
return this.view.getValue();
},
});
BI.PopupView.EVENT_CHANGE = "EVENT_CHANGE";
BI.shortcut("bi.popup_view", BI.PopupView);
}
}
BI.extend(BI, { PopupView });

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

@ -6,9 +6,15 @@
* @extends BI.Pane
*/
BI.SearcherView = BI.inherit(BI.Pane, {
_defaultConfig: function () {
var conf = BI.SearcherView.superclass._defaultConfig.apply(this, arguments);
import { shortcut } from "../../core/decorator";
@shortcut()
export class SearcherView extends BI.Pane {
static xtype = "bi.searcher_view";
static EVENT_CHANGE = "EVENT_CHANGE";
_defaultConfig() {
const conf = super._defaultConfig(arguments);
return BI.extend(conf, {
baseCls: (conf.baseCls || "") + " bi-searcher-view bi-card",
@ -18,7 +24,7 @@ BI.SearcherView = BI.inherit(BI.Pane, {
matcher: { // 完全匹配的构造器
type: "bi.button_group",
behaviors: {
redmark: function () {
redmark: ()=> {
return true;
},
},
@ -40,28 +46,27 @@ BI.SearcherView = BI.inherit(BI.Pane, {
}],
},
});
},
render: function () {
var self = this, o = this.options;
}
render() {
const { matcher, chooseType, value, searcher } = this.options;
this.matcher = BI.createWidget(o.matcher, {
this.matcher = BI.createWidget(matcher, {
type: "bi.button_group",
chooseType: o.chooseType,
chooseType,
behaviors: {
redmark: function () {
redmark: ()=> {
return true;
},
},
layouts: [{
type: "bi.vertical",
}],
value: o.value,
value,
});
this.matcher.on(BI.Controller.EVENT_CHANGE, function (type, val, ob) {
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
this.matcher.on(BI.Controller.EVENT_CHANGE, (type, val, ob)=> {
this.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
if (type === BI.Events.CLICK) {
self.fireEvent(BI.SearcherView.EVENT_CHANGE, val, ob);
this.fireEvent(SearcherView.EVENT_CHANGE, val, ob);
}
});
this.spliter = BI.createWidget({
@ -74,23 +79,23 @@ BI.SearcherView = BI.inherit(BI.Pane, {
cls: "searcher-view-spliter bi-background",
}],
});
this.searcher = BI.createWidget(o.searcher, {
this.searcher = BI.createWidget(searcher, {
type: "bi.button_group",
chooseType: o.chooseType,
chooseType,
behaviors: {
redmark: function () {
redmark: ()=> {
return true;
},
},
layouts: [{
type: "bi.vertical",
}],
value: o.value,
value,
});
this.searcher.on(BI.Controller.EVENT_CHANGE, function (type, val, ob) {
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
this.searcher.on(BI.Controller.EVENT_CHANGE, (type, val, ob)=> {
this.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
if (type === BI.Events.CLICK) {
self.fireEvent(BI.SearcherView.EVENT_CHANGE, val, ob);
this.fireEvent(BI.SearcherView.EVENT_CHANGE, val, ob);
}
});
@ -99,43 +104,42 @@ BI.SearcherView = BI.inherit(BI.Pane, {
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.searcher.setValue(v);
},
}
getValue: function () {
getValue() {
return this.matcher.getValue().concat(this.searcher.getValue());
},
}
populate: function (searchResult, matchResult, keyword) {
populate(searchResult, matchResult, keyword) {
searchResult || (searchResult = []);
matchResult || (matchResult = []);
this.setTipVisible(searchResult.length + matchResult.length === 0);
this.spliter.setVisible(BI.isNotEmptyArray(matchResult) && BI.isNotEmptyArray(searchResult));
this.matcher.populate(matchResult, keyword);
this.searcher.populate(searchResult, keyword);
},
}
empty: function () {
empty() {
this.searcher.empty();
this.matcher.empty();
},
}
hasMatched: function () {
hasMatched() {
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