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
Unified 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 * @class BI.Popover
* @extends BI.Widget * @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", SMALL: "small",
NORMAL: "normal", NORMAL: "normal",
BIG: "big", BIG: "big",
}, }
props: { props = {
baseCls: "bi-drawer bi-card", baseCls: "bi-drawer bi-card",
size: "normal", size: "normal",
placement: "right", // top/bottom/left/right placement: "right", // top/bottom/left/right
@ -20,26 +23,53 @@ BI.Drawer = BI.inherit(BI.Widget, {
bodyHgap: 20, bodyHgap: 20,
bodyTgap: 10, bodyTgap: 10,
bodyBgap: 10, bodyBgap: 10,
}, }
static xtype = "bi.drawer";
render: function () { static EVENT_CLOSE = "EVENT_CLOSE";
var self = this; static EVENT_OPEN = "EVENT_OPEN";
var o = this.options; _getSuitableSize() {
var items = [{ 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: { el: {
type: "bi.htape", type: "bi.htape",
cls: "bi-message-title bi-header-background", cls: "bi-message-title bi-header-background",
items: [{ items: [{
type: "bi.absolute", type: "bi.absolute",
items: [{ items: [{
el: BI.isPlainObject(o.header) ? BI.extend({}, o.header, { el: BI.isPlainObject(header) ? BI.extend({}, header, {
extraCls: "bi-font-bold", extraCls: "bi-font-bold",
}) : { }) : {
type: "bi.label", type: "bi.label",
cls: "bi-font-bold", cls: "bi-font-bold",
height: o.headerHeight, height: headerHeight,
text: o.header, text: header,
title: o.header, title: header,
textAlign: "left", textAlign: "left",
}, },
left: 20, left: 20,
@ -48,97 +78,69 @@ BI.Drawer = BI.inherit(BI.Widget, {
bottom: 0, bottom: 0,
}], }],
}, { }, {
el: o.closable ? { el: closable ? {
type: "bi.icon_button", type: "bi.icon_button",
cls: "bi-message-close close-font", cls: "bi-message-close close-font",
height: o.headerHeight, height: headerHeight,
handler: function () { handler: ()=> {
self.close(); this.close();
}, },
} : { } : {
type: "bi.layout", type: "bi.layout",
}, },
width: 56, width: 56,
}], }],
height: o.headerHeight, height: headerHeight,
}, },
height: o.headerHeight, height: headerHeight,
}, { }, {
el: { el: {
type: "bi.vertical", type: "bi.vertical",
scrolly: true, scrolly: true,
cls: "drawer-body", cls: "drawer-body",
ref: function () { ref: (_ref)=> {
self.body = this; this.body = _ref;
}, },
items: [{ items: [{
el: o.body, el: body,
}], }],
}, },
hgap: o.bodyHgap, hgap: bodyHgap,
tgap: o.bodyTgap, tgap: bodyTgap,
bgap: o.bodyBgap, bgap: bodyBgap,
}]; }];
return BI.extend({ return BI.extend({
type: "bi.vtape", type: "bi.vtape",
items: items, items: items,
}, this._getSuitableSize()); }, 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") { mounted() {
return { const { placement } = this.options;
height: o.height || size, switch (placement) {
};
}
if (o.placement === "left" || o.placement === "right") {
return {
width: o.width || size,
};
}
},
mounted: function () {
var self = this, o = this.options;
switch (o.placement) {
case "right": case "right":
self.element.css({ this.element.css({
top: 0, top: 0,
left: "100%", left: "100%",
bottom: 0, bottom: 0,
}); });
break; break;
case "left": case "left":
self.element.css({ this.element.css({
top: 0, top: 0,
right: "100%", right: "100%",
bottom: 0, bottom: 0,
}); });
break; break;
case "top": case "top":
self.element.css({ this.element.css({
left: 0, left: 0,
right: 0, right: 0,
bottom: "100%", bottom: "100%",
}); });
break; break;
case "bottom": case "bottom":
self.element.css({ this.element.css({
left: 0, left: 0,
right: 0, right: 0,
top: "100%", top: "100%",
@ -147,30 +149,30 @@ BI.Drawer = BI.inherit(BI.Widget, {
default: default:
break; break;
} }
}, }
show: function (callback) { show(callback) {
var self = this, o = this.options; const { placement } = this.options;
requestAnimationFrame(function () { requestAnimationFrame(()=> {
var size = self._getSuitableSize(); const size = this._getSuitableSize();
switch (o.placement) { switch (placement) {
case "right": case "right":
self.element.css({ this.element.css({
left: "calc(100% - " + size.width + "px)", left: "calc(100% - " + size.width + "px)",
}); });
break; break;
case "left": case "left":
self.element.css({ this.element.css({
right: "calc(100% - " + size.width + "px)", right: "calc(100% - " + size.width + "px)",
}); });
break; break;
case "top": case "top":
self.element.css({ this.element.css({
bottom: "calc(100% - " + size.height + "px)", bottom: "calc(100% - " + size.height + "px)",
}); });
break; break;
case "bottom": case "bottom":
self.element.css({ this.element.css({
top: "calc(100% - " + size.height + "px)", top: "calc(100% - " + size.height + "px)",
}); });
break; break;
@ -179,29 +181,29 @@ BI.Drawer = BI.inherit(BI.Widget, {
} }
callback && callback(); callback && callback();
}); });
}, }
hide: function (callback) { hide(callback) {
var self = this, o = this.options; const { placement } = this.options;
requestAnimationFrame(function () { requestAnimationFrame(()=> {
switch (o.placement) { switch (placement) {
case "right": case "right":
self.element.css({ this.element.css({
left: "100%", left: "100%",
}); });
break; break;
case "left": case "left":
self.element.css({ this.element.css({
right: "100%", right: "100%",
}); });
break; break;
case "top": case "top":
self.element.css({ this.element.css({
bottom: "100%", bottom: "100%",
}); });
break; break;
case "bottom": case "bottom":
self.element.css({ this.element.css({
top: "100%", top: "100%",
}); });
break; break;
@ -210,31 +212,26 @@ BI.Drawer = BI.inherit(BI.Widget, {
} }
setTimeout(callback, 300); setTimeout(callback, 300);
}); });
}, }
open: function () { open() {
var self = this; this.show(()=> {
this.show(function () { this.fireEvent(Drawer.EVENT_OPEN);
self.fireEvent(BI.Drawer.EVENT_OPEN);
}); });
}, }
close: function () { close() {
var self = this; this.hide(()=> {
this.hide(function () { this.fireEvent(Drawer.EVENT_CLOSE);
self.fireEvent(BI.Drawer.EVENT_CLOSE);
}); });
}, }
setZindex: function (zindex) { setZindex(zindex) {
this.element.css({ "z-index": 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 * @class BI.Popover
* @extends BI.Widget * @extends BI.Widget
*/ */
BI.Popover = BI.inherit(BI.Widget, {
_constant: { import { shortcut } from "../../core/decorator";
@shortcut()
export class Popover extends BI.Widget {
_constant = {
SIZE: { SIZE: {
SMALL: "small", SMALL: "small",
NORMAL: "normal", NORMAL: "normal",
BIG: "big", BIG: "big",
}, },
MAX_HEIGHT: 600, MAX_HEIGHT: 600,
}, }
props: function () { props() {
return { return {
baseCls: "bi-popover bi-card bi-border-radius", baseCls: "bi-popover bi-card bi-border-radius",
size: "normal", // small, normal, big size: "normal", // small, normal, big
@ -29,222 +32,227 @@ BI.Popover = BI.inherit(BI.Widget, {
bodyHgap: BI.SIZE_CONSANTS.H_GAP_SIZE, bodyHgap: BI.SIZE_CONSANTS.H_GAP_SIZE,
bodyTgap: BI.SIZE_CONSANTS.V_GAP_SIZE, bodyTgap: BI.SIZE_CONSANTS.V_GAP_SIZE,
}; };
}, }
render: function () { static xtype = "bi.popover";
var self = this; static EVENT_CLOSE = "EVENT_CLOSE";
var o = this.options; static EVENT_OPEN = "EVENT_OPEN";
var c = this._constant; 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.startX = 0;
this.startY = 0; this.startY = 0;
var size = this._calculateSize(); const size = this._calculateSize();
this.tracker = new BI.MouseMoveTracker(function (deltaX, deltaY) { this.tracker = new BI.MouseMoveTracker(function (deltaX, deltaY) {
var W = BI.Widget._renderEngine.createElement("body").width(); const W = BI.Widget._renderEngine.createElement("body").width();
var H = BI.Widget._renderEngine.createElement("body").height(); const H = BI.Widget._renderEngine.createElement("body").height();
self.startX += deltaX; this.startX += deltaX;
self.startY += deltaY; this.startY += deltaY;
self.element.css({ this.element.css({
left: BI.clamp(self.startX, 0, W - self.element.width()) + "px", left: BI.clamp(this.startX, 0, W - this.element.width()) + "px",
top: BI.clamp(self.startY, 0, H - self.element.height()) + "px", top: BI.clamp(this.startY, 0, H - this.element.height()) + "px",
}); });
// BI-12134 没有什么特别好的方法 // BI-12134 没有什么特别好的方法
BI.Resizers._resize({ BI.Resizers._resize({
target: self.element[0], target: this.element[0],
}); });
}, function () { }, ()=> {
self.tracker.releaseMouseMoves(); this.tracker.releaseMouseMoves();
}, _global); }, _global);
var items = [{ const items = [{
el: { el: {
type: "bi.htape", type: "bi.htape",
cls: "bi-message-title bi-header-background", cls: "bi-message-title bi-header-background",
items: [{ items: [{
el: { el: {
type: "bi.absolute", type: "bi.absolute",
ref: function (_ref) { ref: (_ref)=> {
self.dragger = _ref; this.dragger = _ref;
}, },
items: [{ items: [{
el: BI.isPlainObject(o.header) ? BI.extend({}, o.header, { el: BI.isPlainObject(header) ? BI.extend({}, header, {
extraCls: "bi-font-bold", extraCls: "bi-font-bold",
}) : { }) : {
type: "bi.label", type: "bi.label",
cls: "bi-font-bold", cls: "bi-font-bold",
height: o.headerHeight, height: headerHeight,
text: o.header, text: header,
title: o.header, title: header,
textAlign: "left", textAlign: "left",
}, },
top: 0, top: 0,
bottom: 0, bottom: 0,
left: BI.SIZE_CONSANTS.H_GAP_SIZE, 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: { el: {
type: "bi.icon_button", type: "bi.icon_button",
cls: "bi-message-close close-font", cls: "bi-message-close close-font",
height: o.headerHeight, height: headerHeight,
handler: function () { handler: ()=> {
self.close(); this.close();
}, },
}, },
width: 56, width: 56,
} : null], } : null],
height: o.headerHeight, height: headerHeight,
}, },
height: o.headerHeight, height: headerHeight,
}, o.logic.dynamic ? { }, logic.dynamic ? {
el: { el: {
type: "bi.vertical", type: "bi.vertical",
scrolly: true, scrolly: true,
cls: "popover-body", cls: "popover-body",
ref: function () { ref: (_ref)=> {
self.body = this; this.body = _ref;
}, },
css: { css: {
"max-height": this._getSuitableBodyHeight(c.MAX_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 - o.headerHeight - (o.footer ? o.footerHeight : 0) - o.bodyTgap), "min-height": this._getSuitableBodyHeight(size.height - headerHeight - (footer ? footerHeight : 0) - bodyTgap),
}, },
items: [{ items: [{
el: o.body, el: body,
}], }],
hgap: o.bodyHgap, hgap: bodyHgap,
tgap: o.bodyTgap, tgap: bodyTgap,
}, },
} : { } : {
el: { el: {
type: "bi.absolute", type: "bi.absolute",
items: [{ items: [{
el: o.body, el: body,
left: o.bodyHgap, left: bodyHgap,
top: o.bodyTgap, top: bodyTgap,
right: o.bodyHgap, right: bodyHgap,
bottom: 0, bottom: 0,
}], }],
}, },
}]; }];
if (o.footer) { if (footer) {
items.push({ items.push({
el: { el: {
type: "bi.absolute", type: "bi.absolute",
items: [{ items: [{
el: o.footer, el: footer,
left: BI.SIZE_CONSANTS.H_GAP_SIZE, left: BI.SIZE_CONSANTS.H_GAP_SIZE,
top: 0, top: 0,
right: BI.SIZE_CONSANTS.H_GAP_SIZE, right: BI.SIZE_CONSANTS.H_GAP_SIZE,
bottom: 0, bottom: 0,
}], }],
height: o.footerHeight, height: footerHeight,
}, },
height: o.footerHeight, height: footerHeight,
}); });
} }
return BI.extend({ return BI.extend({
items: items, items: items,
width: this._getSuitableWidth(size.width), width: this._getSuitableWidth(size.width),
}, o.logic.dynamic ? { }, logic.dynamic ? {
type: "bi.vertical", type: "bi.vertical",
scrolly: false, scrolly: false,
} : { } : {
type: "bi.vtape", type: "bi.vtape",
height: this._getSuitableHeight(size.height), height: this._getSuitableHeight(size.height),
}); });
}, }
// mounted之后绑定事件 // mounted之后绑定事件
mounted: function () { mounted() {
var self = this;
this.dragger.element.mousedown(function (e) { this.dragger.element.mousedown(function (e) {
if (self.options.draggable !== false) { if (this.options.draggable !== false) {
self.startX = self.element[0].offsetLeft; this.startX = this.element[0].offsetLeft;
self.startY = self.element[0].offsetTop; this.startY = this.element[0].offsetTop;
self.tracker.captureMouseMoves(e); 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) {
setDraggable: function (b) {
this.options.draggable = b; this.options.draggable = b;
}, }
hide: function () { hide() {
}, }
open: function () { open() {
this.show(); this.show();
this.fireEvent(BI.Popover.EVENT_OPEN, arguments); this.fireEvent(Popover.EVENT_OPEN, arguments);
}, }
close: function () { close() {
this.hide(); 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 }); 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() {
_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: [{
@ -252,27 +260,23 @@ BI.BarPopover = BI.inherit(BI.Popover, {
text: this.options.btns[1], text: this.options.btns[1],
value: 1, value: 1,
level: "ignore", level: "ignore",
handler: function (v) { handler: (v)=> {
self.fireEvent(BI.Popover.EVENT_CANCEL, v); this.fireEvent(Popover.EVENT_CANCEL, v);
self.close(v); this.close(v);
}, },
}, { }, {
type: "bi.button", type: "bi.button",
text: this.options.btns[0], text: this.options.btns[0],
warningTitle: o.warningTitle, warningTitle: warningTitle,
value: 0, value: 0,
handler: function (v) { handler: (v)=> {
self.fireEvent(BI.Popover.EVENT_CONFIRM, v); this.fireEvent(Popover.EVENT_CONFIRM, v);
self.close(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 * @class BI.PopupView
* @extends BI.Widget * @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, 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" : ""), _baseCls: "bi-popup-view" + (props.primary ? " bi-primary" : ""),
// 品牌色 // 品牌色
primary: false, primary: false,
@ -46,10 +53,10 @@ BI.PopupView = BI.inherit(BI.Widget, {
}], }],
}, },
}); });
}, }
render() {
render: function () { const { minWidth, maxWidth, stopPropagation, stopEvent,
var self = this, o = this.options; direction, logic, lgap, rgap, tgap, bgap, vgap, hgap, primary, showArrow } = this.options;
function fn (e) { function fn (e) {
e.stopPropagation(); e.stopPropagation();
} }
@ -60,44 +67,47 @@ BI.PopupView = BI.inherit(BI.Widget, {
} }
this.element.css({ this.element.css({
"z-index": BI.zIndex_popup, "z-index": BI.zIndex_popup,
"min-width": BI.pixFormat(o.minWidth), "min-width": BI.pixFormat(minWidth),
"max-width": BI.pixFormat(o.maxWidth), "max-width": BI.pixFormat(maxWidth),
}).bind({ click: fn }); }).bind({ click: fn });
this.element.bind("mousewheel", fn); this.element.bind("mousewheel", fn);
o.stopPropagation && this.element.bind({ mousedown: fn, mouseup: fn, mouseover: fn }); stopPropagation && this.element.bind({ mousedown: fn, mouseup: fn, mouseover: fn });
o.stopEvent && this.element.bind({ mousedown: stop, mouseup: stop, mouseover: stop }); stopEvent && this.element.bind({ mousedown: stop, mouseup: stop, mouseover: stop });
this.tool = this._createTool(); this.tool = this._createTool();
this.tab = this._createTab(); this.tab = this._createTab();
this.view = this._createView(); this.view = this._createView();
this.toolbar = this._createToolBar(); this.toolbar = this._createToolBar();
const self = this;
// TODO:这里需要调整转化方式,仍然采用原来的self
this.view.on(BI.Controller.EVENT_CHANGE, function (type) { this.view.on(BI.Controller.EVENT_CHANGE, function (type) {
// 箭头函数没有自己的arguments，只会获取外层的，若要获取自己的，需通过剩余参数写法，但这样得到的仍然不是类数组
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
if (type === BI.Events.CLICK) { if (type === BI.Events.CLICK) {
self.fireEvent(BI.PopupView.EVENT_CHANGE); self.fireEvent(PopupView.EVENT_CHANGE);
} }
}); });
BI.createWidget(BI.extend({ BI.createWidget(BI.extend({
element: this, 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, scrolly: false,
lgap: o.lgap, lgap,
rgap: o.rgap, rgap,
tgap: o.tgap, tgap,
bgap: o.bgap, bgap,
vgap: o.vgap, vgap,
hgap: o.hgap, hgap,
items: BI.LogicFactory.createLogicItemsByDirection(o.direction, BI.extend({ items: BI.LogicFactory.createLogicItemsByDirection(direction, BI.extend({
cls: "list-view-outer bi-card list-view-shadow" + (o.primary ? " bi-primary" : ""), cls: "list-view-outer bi-card list-view-shadow" + (primary ? " bi-primary" : ""),
}, BI.LogicFactory.createLogic(BI.LogicFactory.createLogicTypeByDirection(o.direction), BI.extend({}, o.logic, { }, BI.LogicFactory.createLogic(BI.LogicFactory.createLogicTypeByDirection(direction), BI.extend({}, logic, {
items: BI.LogicFactory.createLogicItemsByDirection(o.direction, this.tool, this.tab, this.view, this.toolbar), items: BI.LogicFactory.createLogicItemsByDirection(direction, this.tool, this.tab, this.view, this.toolbar),
}))) })))
), ),
})))); }))));
if (o.showArrow) { if (showArrow) {
this.arrow = BI.createWidget({ this.arrow = BI.createWidget({
type: "bi.absolute", type: "bi.absolute",
cls: "bi-bubble-arrow", cls: "bi-bubble-arrow",
@ -129,34 +139,33 @@ BI.PopupView = BI.inherit(BI.Widget, {
}], }],
}); });
} }
}, }
_createView() {
_createView: function () { const { el, value, minHeight, innerVgap, innerHgap } = this.options;
var o = this.options; this.button_group = BI.createWidget(el, { type: "bi.button_group", value: value });
this.button_group = BI.createWidget(o.el, { type: "bi.button_group", value: o.value });
this.button_group.element.css({ this.button_group.element.css({
"min-height": BI.pixFormat(o.minHeight), "min-height": BI.pixFormat(minHeight),
"padding-top": BI.pixFormat(o.innerVgap), "padding-top": BI.pixFormat(innerVgap),
"padding-bottom": BI.pixFormat(o.innerVgap), "padding-bottom": BI.pixFormat(innerVgap),
"padding-left": BI.pixFormat(o.innerHgap), "padding-left": BI.pixFormat(innerHgap),
"padding-right": BI.pixFormat(o.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;
} }
@ -164,14 +173,14 @@ BI.PopupView = BI.inherit(BI.Widget, {
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;
} }
@ -179,38 +188,38 @@ BI.PopupView = BI.inherit(BI.Widget, {
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":
@ -220,7 +229,7 @@ BI.PopupView = BI.inherit(BI.Widget, {
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: "",
@ -239,7 +248,7 @@ BI.PopupView = BI.inherit(BI.Widget, {
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: "",
@ -259,7 +268,7 @@ BI.PopupView = BI.inherit(BI.Widget, {
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: "",
@ -278,7 +287,7 @@ BI.PopupView = BI.inherit(BI.Widget, {
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: "",
@ -298,7 +307,7 @@ BI.PopupView = BI.inherit(BI.Widget, {
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: "",
@ -317,7 +326,7 @@ BI.PopupView = BI.inherit(BI.Widget, {
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: "",
@ -337,7 +346,7 @@ BI.PopupView = BI.inherit(BI.Widget, {
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: "",
@ -356,7 +365,7 @@ BI.PopupView = BI.inherit(BI.Widget, {
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: "",
@ -390,38 +399,39 @@ BI.PopupView = BI.inherit(BI.Widget, {
this.arrowWrapper.element.css(wrapperStyle); this.arrowWrapper.element.css(wrapperStyle);
this.placeholder.element.css(placeholderStyle); this.placeholder.element.css(placeholderStyle);
} }
}, }
getView: function () { getView() {
return this.view; return this.view;
}, }
populate: function (items) { populate(items) {
this.view.populate.apply(this.view, arguments); this.view.populate.apply(this.view, arguments);
}, }
resetWidth: function (w) { resetWidth(w) {
this.options.width = w; this.options.width = w;
this.element.width(w); this.element.width(w);
}, }
resetHeight: function (h) { resetHeight(h) {
var tbHeight = this.toolbar ? (this.toolbar.attr("height") || 24) : 0, const tbHeight = this.toolbar ? (this.toolbar.attr("height") || 24) : 0,
tabHeight = this.tab ? (this.tab.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); 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.resetHeight ? this.view.resetHeight(resetHeight) :
this.view.element.css({ "max-height": BI.pixFormat(resetHeight) }); this.view.element.css({ "max-height": BI.pixFormat(resetHeight) });
}, }
setValue: function (selectedValues) { setValue(selectedValues) {
this.tab && this.tab.setValue(selectedValues); this.tab && this.tab.setValue(selectedValues);
this.view.setValue(selectedValues); this.view.setValue(selectedValues);
}, }
getValue: function () { getValue() {
return this.view.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 * @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 {
static xtype = "bi.searcher_view";
static EVENT_CHANGE = "EVENT_CHANGE";
_defaultConfig() {
const conf = super._defaultConfig(arguments);
return BI.extend(conf, { return BI.extend(conf, {
baseCls: (conf.baseCls || "") + " bi-searcher-view bi-card", baseCls: (conf.baseCls || "") + " bi-searcher-view bi-card",
@ -18,7 +24,7 @@ BI.SearcherView = BI.inherit(BI.Pane, {
matcher: { // 完全匹配的构造器 matcher: { // 完全匹配的构造器
type: "bi.button_group", type: "bi.button_group",
behaviors: { behaviors: {
redmark: function () { redmark: ()=> {
return true; return true;
}, },
}, },
@ -40,28 +46,27 @@ BI.SearcherView = BI.inherit(BI.Pane, {
}], }],
}, },
}); });
}, }
render() {
render: function () { const { matcher, chooseType, value, searcher } = this.options;
var self = this, o = this.options;
this.matcher = BI.createWidget(o.matcher, { this.matcher = BI.createWidget(matcher, {
type: "bi.button_group", type: "bi.button_group",
chooseType: o.chooseType, chooseType,
behaviors: { behaviors: {
redmark: function () { redmark: ()=> {
return true; return true;
}, },
}, },
layouts: [{ layouts: [{
type: "bi.vertical", type: "bi.vertical",
}], }],
value: o.value, value,
}); });
this.matcher.on(BI.Controller.EVENT_CHANGE, function (type, val, ob) { this.matcher.on(BI.Controller.EVENT_CHANGE, (type, val, ob)=> {
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); this.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
if (type === BI.Events.CLICK) { if (type === BI.Events.CLICK) {
self.fireEvent(BI.SearcherView.EVENT_CHANGE, val, ob); this.fireEvent(SearcherView.EVENT_CHANGE, val, ob);
} }
}); });
this.spliter = BI.createWidget({ this.spliter = BI.createWidget({
@ -74,23 +79,23 @@ BI.SearcherView = BI.inherit(BI.Pane, {
cls: "searcher-view-spliter bi-background", cls: "searcher-view-spliter bi-background",
}], }],
}); });
this.searcher = BI.createWidget(o.searcher, { this.searcher = BI.createWidget(searcher, {
type: "bi.button_group", type: "bi.button_group",
chooseType: o.chooseType, chooseType,
behaviors: { behaviors: {
redmark: function () { redmark: ()=> {
return true; return true;
}, },
}, },
layouts: [{ layouts: [{
type: "bi.vertical", type: "bi.vertical",
}], }],
value: o.value, value,
}); });
this.searcher.on(BI.Controller.EVENT_CHANGE, function (type, val, ob) { this.searcher.on(BI.Controller.EVENT_CHANGE, (type, val, ob)=> {
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); this.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
if (type === BI.Events.CLICK) { 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, element: this,
items: [this.matcher, this.spliter, this.searcher], 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