Joker.Wang-王顺
2 years ago
48 changed files with 2295 additions and 1831 deletions
@ -0,0 +1,134 @@ |
|||||||
|
const fs = require("fs"); |
||||||
|
|
||||||
|
const srcName = process.argv[2]; |
||||||
|
|
||||||
|
const sourceCode = fs.readFileSync(srcName).toString(); |
||||||
|
|
||||||
|
const clzName = /BI\.(.*?)\s\=\sBI\.inherit\(/.exec(sourceCode)[1]; |
||||||
|
|
||||||
|
const superName = /inherit\(BI\.(.*?),/.exec(sourceCode)[1]; |
||||||
|
|
||||||
|
// const xtype = /BI.shortcut\(\"(.*?)\"/.exec(sourceCode)[1];
|
||||||
|
|
||||||
|
const collection = { |
||||||
|
"static": {}, |
||||||
|
attr: {}, |
||||||
|
}; |
||||||
|
|
||||||
|
const BI = { |
||||||
|
inherit(_, options) { |
||||||
|
collection.methods = Object.keys(options) |
||||||
|
.filter(key => typeof options[key] === "function") |
||||||
|
.map(key => options[key]); |
||||||
|
Object.keys(options) |
||||||
|
.filter(key => typeof options[key] !== "function") |
||||||
|
.forEach(key => { |
||||||
|
collection.attr[key] = options[key]; |
||||||
|
}); |
||||||
|
|
||||||
|
return collection.static; |
||||||
|
}, |
||||||
|
shortcut(xtype) { |
||||||
|
collection.xtype = xtype; |
||||||
|
}, |
||||||
|
}; |
||||||
|
|
||||||
|
eval(sourceCode); |
||||||
|
|
||||||
|
let M = ""; |
||||||
|
let E = ""; |
||||||
|
let I = ""; |
||||||
|
let A = ""; |
||||||
|
|
||||||
|
const coreImport = { |
||||||
|
shortcut: true, |
||||||
|
}; |
||||||
|
|
||||||
|
if (superName === "Widget") { |
||||||
|
coreImport.Widget = true; |
||||||
|
} |
||||||
|
|
||||||
|
Object.keys(collection.attr).forEach(key => { |
||||||
|
A = `${key} = ${JSON.stringify(collection.attr[key])};`; |
||||||
|
}); |
||||||
|
|
||||||
|
// 静态方法
|
||||||
|
Object.keys(collection.static).forEach(key => { |
||||||
|
E += `\tstatic ${key} = "${collection.static[key]}"\n`; |
||||||
|
}); |
||||||
|
|
||||||
|
// 对函数进行替换
|
||||||
|
collection.methods.forEach(el => { |
||||||
|
let f = `${el.toString().replace(/^function/, el.name)}\n`; |
||||||
|
|
||||||
|
// 换 BI.Button.superclass
|
||||||
|
f = f.replace(`BI.${clzName}.superclass`, "super"); |
||||||
|
// 换 super._defaultConfig
|
||||||
|
f = f.replace( |
||||||
|
`super\._defaultConfig\.apply\(this\,\sarguments\)`, |
||||||
|
"super._defaultConfig(arguments)" |
||||||
|
); |
||||||
|
// 换 super.xxx.apply
|
||||||
|
f = f.replace(/super\.(.*?)\.apply\(this\,\sarguments\)/, a => { |
||||||
|
const f = /super\.(.*?)\.apply\(this\,\sarguments\)/.exec(a); |
||||||
|
|
||||||
|
return `super.${f[1]}(...arguments)`; |
||||||
|
}); |
||||||
|
|
||||||
|
const target = [ |
||||||
|
"isNull", |
||||||
|
"toPix", |
||||||
|
"isKey", |
||||||
|
"isObject", |
||||||
|
"map", |
||||||
|
"extend", |
||||||
|
"isFunction", |
||||||
|
"isEmptyArray", |
||||||
|
"isArray", |
||||||
|
"Controller", |
||||||
|
clzName, |
||||||
|
"createWidget", |
||||||
|
"Events", |
||||||
|
"emptyFn", |
||||||
|
"nextTick", |
||||||
|
"bind", |
||||||
|
"i18nText", |
||||||
|
"isNotNull", |
||||||
|
"isString", |
||||||
|
"isNumber", |
||||||
|
"isEmpty", |
||||||
|
]; |
||||||
|
|
||||||
|
target.forEach(t => { |
||||||
|
const arr = f.split(`BI.${t}`); |
||||||
|
// nodejs 低版本没有 replaceAll
|
||||||
|
if (arr.length > 1) { |
||||||
|
if (t !== clzName) coreImport[t] = true; |
||||||
|
f = arr.join(t); |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
M += `${f}\n`; |
||||||
|
}); |
||||||
|
|
||||||
|
Object.keys(coreImport).forEach(el => { |
||||||
|
I += `${el},`; |
||||||
|
}); |
||||||
|
|
||||||
|
const outputCode = ` |
||||||
|
import {${I}} from "@/core" |
||||||
|
|
||||||
|
@shortcut() |
||||||
|
export class ${clzName} extends ${superName} { |
||||||
|
\tstatic xtype = "${collection.xtype}" |
||||||
|
|
||||||
|
${A} |
||||||
|
|
||||||
|
${E} |
||||||
|
|
||||||
|
${M} |
||||||
|
} |
||||||
|
`;
|
||||||
|
|
||||||
|
// fs.writeFileSync(`${srcName}.js.raw`, sourceCode);
|
||||||
|
fs.writeFileSync(srcName, outputCode); |
||||||
@ -0,0 +1,6 @@ |
|||||||
|
export { ClearEditor } from "./editor.clear"; |
||||||
|
export { DefaultTextEditor } from "./editor.defaulttext"; |
||||||
|
export { ShelterEditor } from "./editor.shelter"; |
||||||
|
export { SignEditor } from "./editor.sign"; |
||||||
|
export { StateEditor } from "./editor.state"; |
||||||
|
export { SimpleStateEditor } from "./editor.state.simple"; |
||||||
@ -1,13 +1,17 @@ |
|||||||
import * as button from "./button"; |
import * as button from "./button"; |
||||||
import * as calendarItem from "./calendar"; |
import * as calendarItem from "./calendar"; |
||||||
import * as pager from "./pager"; |
import * as pager from "./pager"; |
||||||
|
import * as editor from "./editor"; |
||||||
|
|
||||||
Object.assign(BI, { |
Object.assign(BI, { |
||||||
...button, |
...button, |
||||||
...calendarItem, |
...calendarItem, |
||||||
...pager, |
...pager, |
||||||
|
...editor, |
||||||
}); |
}); |
||||||
|
|
||||||
export * from "./button"; |
export * from "./button"; |
||||||
export * from "./calendar"; |
export * from "./calendar"; |
||||||
export * from "./pager"; |
export * from "./pager"; |
||||||
|
export * from "./editor"; |
||||||
|
|
||||||
|
|||||||
@ -1,6 +1,9 @@ |
|||||||
|
import { shortcut } from "@/core/decorator"; |
||||||
|
|
||||||
/** |
/** |
||||||
* 横向填满布局 |
* 横向填满布局 |
||||||
*/ |
*/ |
||||||
BI.HorizontalFillLayout = function () { |
@shortcut() |
||||||
}; |
export class HorizontalFillLayout { |
||||||
BI.shortcut("bi.horizontal_fill", BI.HorizontalFillLayout); |
static xtype = "bi.horizontal_fill"; |
||||||
|
} |
||||||
|
|||||||
@ -1,6 +1,9 @@ |
|||||||
|
import { shortcut } from "@/core/decorator"; |
||||||
|
|
||||||
/** |
/** |
||||||
* 纵向填满布局 |
* 纵向填满布局 |
||||||
*/ |
*/ |
||||||
BI.VerticalFillLayout = function () { |
@shortcut() |
||||||
}; |
export class VerticalFillLayout { |
||||||
BI.shortcut("bi.vertical_fill", BI.VerticalFillLayout); |
static xtype = "bi.vertical_fill"; |
||||||
|
} |
||||||
|
|||||||
@ -0,0 +1,4 @@ |
|||||||
|
export { AutoVerticalTapeLayout } from "./auto.vtape"; |
||||||
|
export { HorizontalFillLayout } from "./fill.horizontal"; |
||||||
|
export { VerticalFillLayout } from "./fill.vertical"; |
||||||
|
export { FloatHorizontalFillLayout } from "./float.fill.horizontal"; |
||||||
@ -0,0 +1,7 @@ |
|||||||
|
export { FlexCenterLayout } from "./flex.center"; |
||||||
|
export { FlexHorizontalCenter, FlexHorizontalCenterAdapt } from "./flex.horizontal.center"; |
||||||
|
export { FlexHorizontalLayout } from "./flex.horizontal"; |
||||||
|
export { FlexLeftRightVerticalAdaptLayout } from "./flex.leftrightvertical.center"; |
||||||
|
export { FlexVerticalCenter, FlexVerticalCenterAdapt } from "./flex.vertical.center"; |
||||||
|
export { FlexVerticalLayout } from "./flex.vertical"; |
||||||
|
export * from "./wrapper"; |
||||||
@ -0,0 +1,5 @@ |
|||||||
|
export { FlexWrapperCenterLayout } from "./flex.wrapper.center"; |
||||||
|
export { FlexWrapperHorizontalCenter, FlexWrapperHorizontalCenterAdapt } from "./flex.wrapper.horizontal.center"; |
||||||
|
export { FlexWrapperHorizontalLayout } from "./flex.wrapper.horizontal"; |
||||||
|
export { FlexWrapperVerticalCenter, FlexWrapperVerticalCenterAdapt } from "./flex.wrapper.vertical.center"; |
||||||
|
export { FlexWrapperVerticalLayout } from "./flex.wrapper.vertical"; |
||||||
@ -1,36 +1,42 @@ |
|||||||
|
import { shortcut } from "@/core/decorator"; |
||||||
|
import { extend, isFunction } from "@/core/2.base"; |
||||||
|
import { Layout } from "../../layout"; |
||||||
|
|
||||||
/** |
/** |
||||||
* absolute实现的居中布局 |
* absolute实现的居中布局 |
||||||
* @class BI.FloatAbsoluteCenterLayout |
* @class FloatAbsoluteCenterLayout |
||||||
* @extends BI.Layout |
* @extends Layout |
||||||
*/ |
*/ |
||||||
BI.FloatAbsoluteCenterLayout = BI.inherit(BI.Layout, { |
@shortcut() |
||||||
props: function () { |
export class FloatAbsoluteCenterLayout extends Layout { |
||||||
return BI.extend(BI.FloatAbsoluteCenterLayout.superclass.props.apply(this, arguments), { |
static xtype = "bi.absolute_center_float"; |
||||||
|
|
||||||
|
props() { |
||||||
|
return extend(super.props(...arguments), { |
||||||
baseCls: "bi-abs-c-fl", |
baseCls: "bi-abs-c-fl", |
||||||
}); |
}); |
||||||
}, |
} |
||||||
|
|
||||||
render: function () { |
render() { |
||||||
BI.FloatAbsoluteCenterLayout.superclass.render.apply(this, arguments); |
super.render(...arguments); |
||||||
var self = this, o = this.options; |
const o = this.options; |
||||||
var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) { |
const items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => { |
||||||
self.populate(newValue); |
this.populate(newValue); |
||||||
}) : o.items; |
}) : o.items; |
||||||
this.populate(items); |
this.populate(items); |
||||||
}, |
} |
||||||
|
|
||||||
_addElement: function (i, item) { |
_addElement(i, item) { |
||||||
var o = this.options; |
const w = super._addElement(...arguments); |
||||||
var w = BI.FloatAbsoluteCenterLayout.superclass._addElement.apply(this, arguments); |
|
||||||
w.element.addClass("bi-abs-c-item").css({ |
w.element.addClass("bi-abs-c-item").css({ |
||||||
position: "absolute", |
position: "absolute", |
||||||
}); |
}); |
||||||
|
|
||||||
return w; |
return w; |
||||||
}, |
} |
||||||
|
|
||||||
populate: function (items) { |
populate(items) { |
||||||
BI.FloatAbsoluteCenterLayout.superclass.populate.apply(this, arguments); |
super.populate(...arguments); |
||||||
this._mount(); |
this._mount(); |
||||||
} |
} |
||||||
}); |
} |
||||||
BI.shortcut("bi.absolute_center_float", BI.FloatAbsoluteCenterLayout); |
|
||||||
|
|||||||
@ -0,0 +1,5 @@ |
|||||||
|
export { FloatAbsoluteCenterLayout } from "./float.absolute.center"; |
||||||
|
export { FloatAbsoluteHorizontalLayout } from "./float.absolute.horizontal"; |
||||||
|
export { FloatAbsoluteLeftRightVerticalAdaptLayout, FloatAbsoluteRightVerticalAdaptLayout } from "./float.absolute.leftrightvertical"; |
||||||
|
export { FloatAbsoluteVerticalLayout } from "./float.absolute.vertical"; |
||||||
|
export { FloatHorizontalLayout } from "./float.horizontal"; |
||||||
@ -0,0 +1,4 @@ |
|||||||
|
export { CenterLayout } from "./middle.center"; |
||||||
|
export { FloatCenterLayout } from "./middle.float.center"; |
||||||
|
export { HorizontalCenterLayout } from "./middle.horizontal"; |
||||||
|
export { VerticalCenterLayout } from "./middle.vertical"; |
||||||
@ -1,72 +1,80 @@ |
|||||||
|
import { shortcut } from "@/core/decorator"; |
||||||
|
import { extend, each } from "@/core/2.base"; |
||||||
|
import { _lazyCreateWidget } from "@/core/5.inject"; |
||||||
|
import { Layout } from "../../layout"; |
||||||
|
|
||||||
/** |
/** |
||||||
* 水平和垂直方向都居中容器, 非自适应，用于宽度高度固定的面板 |
* 水平和垂直方向都居中容器, 非自适应，用于宽度高度固定的面板 |
||||||
* @class BI.CenterLayout |
* @class CenterLayout |
||||||
* @extends BI.Layout |
* @extends Layout |
||||||
*/ |
*/ |
||||||
BI.CenterLayout = BI.inherit(BI.Layout, { |
@shortcut() |
||||||
props: function () { |
export class CenterLayout extends Layout { |
||||||
return BI.extend(BI.CenterLayout.superclass.props.apply(this, arguments), { |
static xtype = "bi.center"; |
||||||
|
|
||||||
|
props() { |
||||||
|
return extend(super.props(...arguments), { |
||||||
baseCls: "bi-center", |
baseCls: "bi-center", |
||||||
hgap: 0, |
hgap: 0, |
||||||
vgap: 0, |
vgap: 0, |
||||||
lgap: 0, |
lgap: 0, |
||||||
rgap: 0, |
rgap: 0, |
||||||
tgap: 0, |
tgap: 0, |
||||||
bgap: 0 |
bgap: 0, |
||||||
}); |
}); |
||||||
}, |
} |
||||||
|
|
||||||
render: function () { |
render() { |
||||||
BI.CenterLayout.superclass.render.apply(this, arguments); |
super.render(...arguments); |
||||||
var self = this, o = this.options; |
const o = this.options; |
||||||
var list = [], items = o.items; |
const list = [], items = o.items; |
||||||
BI.each(items, function (i) { |
each(items, i => { |
||||||
list.push({ |
list.push({ |
||||||
column: i, |
column: i, |
||||||
row: 0, |
row: 0, |
||||||
el: BI._lazyCreateWidget({ |
el: _lazyCreateWidget({ |
||||||
type: "bi.default", |
type: "bi.default", |
||||||
cls: "center-element " + (i === 0 ? "first-element " : "") + (i === items.length - 1 ? "last-element" : "") |
cls: `center-element ${i === 0 ? "first-element " : ""}${i === items.length - 1 ? "last-element" : ""}`, |
||||||
}) |
}), |
||||||
}); |
}); |
||||||
}); |
}); |
||||||
BI.each(items, function (i, item) { |
each(items, (i, item) => { |
||||||
if (item) { |
if (item) { |
||||||
var w = BI._lazyCreateWidget(item); |
const w = _lazyCreateWidget(item); |
||||||
w.element.css({ |
w.element.css({ |
||||||
position: "absolute", |
position: "absolute", |
||||||
left: self._optimiseGap(o.hgap + o.lgap), |
left: this._optimiseGap(o.hgap + o.lgap), |
||||||
right: self._optimiseGap(o.hgap + o.rgap), |
right: this._optimiseGap(o.hgap + o.rgap), |
||||||
top: self._optimiseGap(o.vgap + o.tgap), |
top: this._optimiseGap(o.vgap + o.tgap), |
||||||
bottom: self._optimiseGap(o.vgap + o.bgap), |
bottom: this._optimiseGap(o.vgap + o.bgap), |
||||||
width: "auto", |
width: "auto", |
||||||
height: "auto" |
height: "auto", |
||||||
}); |
}); |
||||||
list[i].el.addItem(w); |
list[i].el.addItem(w); |
||||||
} |
} |
||||||
}); |
}); |
||||||
|
|
||||||
return { |
return { |
||||||
type: "bi.grid", |
type: "bi.grid", |
||||||
ref: function (_ref) { |
ref: _ref => { |
||||||
self.layout = _ref; |
this.layout = _ref; |
||||||
}, |
}, |
||||||
columns: list.length, |
columns: list.length, |
||||||
rows: 1, |
rows: 1, |
||||||
items: list |
items: list, |
||||||
}; |
}; |
||||||
}, |
} |
||||||
|
|
||||||
resize: function () { |
resize() { |
||||||
// console.log("center布局不需要resize");
|
// console.log("center布局不需要resize");
|
||||||
}, |
} |
||||||
|
|
||||||
addItem: function (item) { |
addItem(item) { |
||||||
// do nothing
|
// do nothing
|
||||||
throw new Error("不能添加子组件"); |
throw new Error("不能添加子组件"); |
||||||
}, |
} |
||||||
|
|
||||||
populate: function (items) { |
populate(items) { |
||||||
this.layout.populate.apply(this.layout, arguments); |
this.layout.populate(...arguments); |
||||||
} |
} |
||||||
}); |
} |
||||||
BI.shortcut("bi.center", BI.CenterLayout); |
|
||||||
|
|||||||
@ -1,71 +1,80 @@ |
|||||||
|
import { shortcut } from "@/core/decorator"; |
||||||
|
import { extend, each } from "@/core/2.base"; |
||||||
|
import { _lazyCreateWidget } from "@/core/5.inject"; |
||||||
|
import { Layout } from "../../layout"; |
||||||
|
|
||||||
/** |
/** |
||||||
* 浮动布局实现的居中容器 |
* 浮动布局实现的居中容器 |
||||||
* @class BI.FloatCenterLayout |
* @class FloatCenterLayout |
||||||
* @extends BI.Layout |
* @extends Layout |
||||||
*/ |
*/ |
||||||
BI.FloatCenterLayout = BI.inherit(BI.Layout, { |
@shortcut() |
||||||
props: function () { |
export class FloatCenterLayout extends Layout { |
||||||
return BI.extend(BI.FloatCenterLayout.superclass.props.apply(this, arguments), { |
static xtype = "bi.float_center"; |
||||||
|
|
||||||
|
props() { |
||||||
|
return extend(super.props(...arguments), { |
||||||
baseCls: "bi-float-center", |
baseCls: "bi-float-center", |
||||||
hgap: 0, |
hgap: 0, |
||||||
vgap: 0, |
vgap: 0, |
||||||
lgap: 0, |
lgap: 0, |
||||||
rgap: 0, |
rgap: 0, |
||||||
tgap: 0, |
tgap: 0, |
||||||
bgap: 0 |
bgap: 0, |
||||||
}); |
}); |
||||||
}, |
} |
||||||
render: function () { |
|
||||||
BI.FloatCenterLayout.superclass.render.apply(this, arguments); |
render() { |
||||||
var self = this, o = this.options, items = o.items; |
super.render(...arguments); |
||||||
var list = [], width = 100 / items.length; |
const o = this.options, items = o.items; |
||||||
BI.each(items, function (i) { |
const list = [], width = 100 / items.length; |
||||||
var widget = BI._lazyCreateWidget({ |
each(items, i => { |
||||||
type: "bi.default" |
const widget = _lazyCreateWidget({ |
||||||
|
type: "bi.default", |
||||||
}); |
}); |
||||||
widget.element.addClass("center-element " + (i === 0 ? "first-element " : "") + (i === items.length - 1 ? "last-element" : "")).css({ |
widget.element.addClass(`center-element ${i === 0 ? "first-element " : ""}${i === items.length - 1 ? "last-element" : ""}`).css({ |
||||||
width: width + "%", |
width: `${width}%`, |
||||||
height: "100%" |
height: "100%", |
||||||
}); |
}); |
||||||
list.push({ |
list.push({ |
||||||
el: widget |
el: widget, |
||||||
}); |
}); |
||||||
}); |
}); |
||||||
BI.each(items, function (i, item) { |
each(items, (i, item) => { |
||||||
if (item) { |
if (item) { |
||||||
var w = BI._lazyCreateWidget(item); |
const w = _lazyCreateWidget(item); |
||||||
w.element.css({ |
w.element.css({ |
||||||
position: "absolute", |
position: "absolute", |
||||||
left: self._optimiseGap(o.hgap + o.lgap), |
left: this._optimiseGap(o.hgap + o.lgap), |
||||||
right: self._optimiseGap(o.hgap + o.rgap), |
right: this._optimiseGap(o.hgap + o.rgap), |
||||||
top: self._optimiseGap(o.vgap + o.tgap), |
top: this._optimiseGap(o.vgap + o.tgap), |
||||||
bottom: self._optimiseGap(o.vgap + o.bgap), |
bottom: this._optimiseGap(o.vgap + o.bgap), |
||||||
width: "auto", |
width: "auto", |
||||||
height: "auto" |
height: "auto", |
||||||
}); |
}); |
||||||
list[i].el.addItem(w); |
list[i].el.addItem(w); |
||||||
} |
} |
||||||
}); |
}); |
||||||
|
|
||||||
return { |
return { |
||||||
type: "bi.left", |
type: "bi.left", |
||||||
ref: function (_ref) { |
ref: _ref => { |
||||||
self.layout = _ref; |
this.layout = _ref; |
||||||
}, |
}, |
||||||
items: list |
items: list, |
||||||
}; |
}; |
||||||
}, |
} |
||||||
|
|
||||||
resize: function () { |
resize() { |
||||||
// console.log("floatcenter布局不需要resize");
|
// console.log("floatcenter布局不需要resize");
|
||||||
}, |
} |
||||||
|
|
||||||
addItem: function (item) { |
addItem(item) { |
||||||
// do nothing
|
// do nothing
|
||||||
throw new Error("不能添加子组件"); |
throw new Error("不能添加子组件"); |
||||||
}, |
} |
||||||
|
|
||||||
populate: function (items) { |
populate(items) { |
||||||
this.layout.populate.apply(this.layout, arguments); |
this.layout.populate(...arguments); |
||||||
} |
} |
||||||
}); |
} |
||||||
BI.shortcut("bi.float_center", BI.FloatCenterLayout); |
|
||||||
|
|||||||
@ -1,70 +1,79 @@ |
|||||||
|
import { shortcut } from "@/core/decorator"; |
||||||
|
import { extend, each } from "@/core/2.base"; |
||||||
|
import { _lazyCreateWidget } from "@/core/5.inject"; |
||||||
|
import { Layout } from "../../layout"; |
||||||
|
|
||||||
/** |
/** |
||||||
* 水平和垂直方向都居中容器, 非自适应，用于宽度高度固定的面板 |
* 水平和垂直方向都居中容器, 非自适应，用于宽度高度固定的面板 |
||||||
* @class BI.HorizontalCenterLayout |
* @class HorizontalCenterLayout |
||||||
* @extends BI.Layout |
* @extends Layout |
||||||
*/ |
*/ |
||||||
BI.HorizontalCenterLayout = BI.inherit(BI.Layout, { |
@shortcut() |
||||||
props: function () { |
export class HorizontalCenterLayout extends Layout { |
||||||
return BI.extend(BI.HorizontalCenterLayout.superclass.props.apply(this, arguments), { |
static xtype = "bi.horizontal_center"; |
||||||
|
|
||||||
|
props() { |
||||||
|
return extend(super.props(...arguments), { |
||||||
baseCls: "bi-h-center", |
baseCls: "bi-h-center", |
||||||
hgap: 0, |
hgap: 0, |
||||||
vgap: 0, |
vgap: 0, |
||||||
lgap: 0, |
lgap: 0, |
||||||
rgap: 0, |
rgap: 0, |
||||||
tgap: 0, |
tgap: 0, |
||||||
bgap: 0 |
bgap: 0, |
||||||
}); |
}); |
||||||
}, |
} |
||||||
render: function () { |
|
||||||
BI.HorizontalCenterLayout.superclass.render.apply(this, arguments); |
render() { |
||||||
var self = this, o = this.options, items = o.items; |
super.render(...arguments); |
||||||
var list = []; |
const o = this.options, items = o.items; |
||||||
BI.each(items, function (i) { |
const list = []; |
||||||
|
each(items, i => { |
||||||
list.push({ |
list.push({ |
||||||
column: i, |
column: i, |
||||||
row: 0, |
row: 0, |
||||||
el: BI._lazyCreateWidget({ |
el: _lazyCreateWidget({ |
||||||
type: "bi.default", |
type: "bi.default", |
||||||
cls: "center-element " + (i === 0 ? "first-element " : "") + (i === items.length - 1 ? "last-element" : "") |
cls: `center-element ${i === 0 ? "first-element " : ""}${i === items.length - 1 ? "last-element" : ""}`, |
||||||
}) |
}), |
||||||
}); |
}); |
||||||
}); |
}); |
||||||
BI.each(items, function (i, item) { |
each(items, (i, item) => { |
||||||
if (item) { |
if (item) { |
||||||
var w = BI._lazyCreateWidget(item); |
const w = _lazyCreateWidget(item); |
||||||
w.element.css({ |
w.element.css({ |
||||||
position: "absolute", |
position: "absolute", |
||||||
left: self._optimiseGap(o.hgap + o.lgap), |
left: this._optimiseGap(o.hgap + o.lgap), |
||||||
right: self._optimiseGap(o.hgap + o.rgap), |
right: this._optimiseGap(o.hgap + o.rgap), |
||||||
top: self._optimiseGap(o.vgap + o.tgap), |
top: this._optimiseGap(o.vgap + o.tgap), |
||||||
bottom: self._optimiseGap(o.vgap + o.bgap), |
bottom: this._optimiseGap(o.vgap + o.bgap), |
||||||
width: "auto" |
width: "auto", |
||||||
}); |
}); |
||||||
list[i].el.addItem(w); |
list[i].el.addItem(w); |
||||||
} |
} |
||||||
}); |
}); |
||||||
|
|
||||||
return { |
return { |
||||||
type: "bi.grid", |
type: "bi.grid", |
||||||
ref: function (_ref) { |
ref: _ref => { |
||||||
self.layout = _ref; |
this.layout = _ref; |
||||||
}, |
}, |
||||||
columns: list.length, |
columns: list.length, |
||||||
rows: 1, |
rows: 1, |
||||||
items: list |
items: list, |
||||||
}; |
}; |
||||||
}, |
} |
||||||
|
|
||||||
resize: function () { |
resize() { |
||||||
// console.log("horizontal_center布局不需要resize");
|
// console.log("horizontal_center布局不需要resize");
|
||||||
}, |
} |
||||||
|
|
||||||
addItem: function (item) { |
addItem(item) { |
||||||
// do nothing
|
// do nothing
|
||||||
throw new Error("不能添加子组件"); |
throw new Error("不能添加子组件"); |
||||||
}, |
} |
||||||
|
|
||||||
populate: function (items) { |
populate(items) { |
||||||
this.layout.populate.apply(this.layout, arguments); |
this.layout.populate(...arguments); |
||||||
} |
} |
||||||
}); |
} |
||||||
BI.shortcut("bi.horizontal_center", BI.HorizontalCenterLayout); |
|
||||||
|
|||||||
@ -1,71 +1,79 @@ |
|||||||
|
import { shortcut } from "@/core/decorator"; |
||||||
|
import { extend, each } from "@/core/2.base"; |
||||||
|
import { _lazyCreateWidget } from "@/core/5.inject"; |
||||||
|
import { Layout } from "../../layout"; |
||||||
|
|
||||||
/** |
/** |
||||||
* 垂直方向都居中容器, 非自适应，用于高度不固定的面板 |
* 垂直方向都居中容器, 非自适应，用于高度不固定的面板 |
||||||
* @class BI.VerticalCenterLayout |
* @class VerticalCenterLayout |
||||||
* @extends BI.Layout |
* @extends Layout |
||||||
*/ |
*/ |
||||||
BI.VerticalCenterLayout = BI.inherit(BI.Layout, { |
@shortcut() |
||||||
props: function () { |
export class VerticalCenterLayout extends Layout { |
||||||
return BI.extend(BI.VerticalCenterLayout.superclass.props.apply(this, arguments), { |
static xtype = "bi.vertical_center"; |
||||||
|
|
||||||
|
props() { |
||||||
|
return extend(super.props(...arguments), { |
||||||
baseCls: "bi-v-center", |
baseCls: "bi-v-center", |
||||||
hgap: 0, |
hgap: 0, |
||||||
vgap: 0, |
vgap: 0, |
||||||
lgap: 0, |
lgap: 0, |
||||||
rgap: 0, |
rgap: 0, |
||||||
tgap: 0, |
tgap: 0, |
||||||
bgap: 0 |
bgap: 0, |
||||||
}); |
}); |
||||||
}, |
} |
||||||
|
|
||||||
render: function () { |
render() { |
||||||
BI.VerticalCenterLayout.superclass.render.apply(this, arguments); |
super.render(...arguments); |
||||||
var self = this, o = this.options, items = o.items; |
const self = this, o = this.options, items = o.items; |
||||||
var list = []; |
const list = []; |
||||||
BI.each(items, function (i) { |
each(items, i => { |
||||||
list.push({ |
list.push({ |
||||||
column: 0, |
column: 0, |
||||||
row: i, |
row: i, |
||||||
el: BI._lazyCreateWidget({ |
el: _lazyCreateWidget({ |
||||||
type: "bi.default", |
type: "bi.default", |
||||||
cls: "center-element " + (i === 0 ? "first-element " : "") + (i === items.length - 1 ? "last-element" : "") |
cls: `center-element ${i === 0 ? "first-element " : ""}${i === items.length - 1 ? "last-element" : ""}`, |
||||||
}) |
}), |
||||||
}); |
}); |
||||||
}); |
}); |
||||||
BI.each(items, function (i, item) { |
each(items, (i, item) => { |
||||||
if (item) { |
if (item) { |
||||||
var w = BI._lazyCreateWidget(item); |
const w = _lazyCreateWidget(item); |
||||||
w.element.css({ |
w.element.css({ |
||||||
position: "absolute", |
position: "absolute", |
||||||
left: self._optimiseGap(o.hgap + o.lgap), |
left: self._optimiseGap(o.hgap + o.lgap), |
||||||
right: self._optimiseGap(o.hgap + o.rgap), |
right: self._optimiseGap(o.hgap + o.rgap), |
||||||
top: self._optimiseGap(o.vgap + o.tgap), |
top: self._optimiseGap(o.vgap + o.tgap), |
||||||
bottom: self._optimiseGap(o.vgap + o.bgap), |
bottom: self._optimiseGap(o.vgap + o.bgap), |
||||||
height: "auto" |
height: "auto", |
||||||
}); |
}); |
||||||
list[i].el.addItem(w); |
list[i].el.addItem(w); |
||||||
} |
} |
||||||
}); |
}); |
||||||
|
|
||||||
return { |
return { |
||||||
type: "bi.grid", |
type: "bi.grid", |
||||||
ref: function (_ref) { |
ref: _ref => { |
||||||
self.layout = _ref; |
this.layout = _ref; |
||||||
}, |
}, |
||||||
columns: 1, |
columns: 1, |
||||||
rows: list.length, |
rows: list.length, |
||||||
items: list |
items: list, |
||||||
}; |
}; |
||||||
}, |
} |
||||||
|
|
||||||
resize: function () { |
resize() { |
||||||
// console.log("vertical_center布局不需要resize");
|
// console.log("vertical_center布局不需要resize");
|
||||||
}, |
} |
||||||
|
|
||||||
addItem: function (item) { |
addItem(item) { |
||||||
// do nothing
|
// do nothing
|
||||||
throw new Error("不能添加子组件"); |
throw new Error("不能添加子组件"); |
||||||
}, |
} |
||||||
|
|
||||||
populate: function (items) { |
populate(items) { |
||||||
this.layout.populate.apply(this.layout, arguments); |
this.layout.populate(...arguments); |
||||||
} |
} |
||||||
}); |
} |
||||||
BI.shortcut("bi.vertical_center", BI.VerticalCenterLayout); |
|
||||||
|
|||||||
@ -0,0 +1,3 @@ |
|||||||
|
export { ResponsiveFlexHorizontalLayout } from "./responsive.flex.horizontal"; |
||||||
|
export { ResponsiveFlexWrapperHorizontalLayout } from "./responsive.flex.wrapper.horizontal"; |
||||||
|
export { ResponsiveInlineLayout } from "./responsive.inline"; |
||||||
@ -1,57 +1,59 @@ |
|||||||
|
import { shortcut } from "@/core/decorator"; |
||||||
|
import { each } from "@/core/2.base"; |
||||||
|
import { HorizontalAlign } from "@/core/constant"; |
||||||
|
import { Resizers } from "@/base"; |
||||||
|
import { FlexHorizontalLayout } from "../flex"; |
||||||
|
|
||||||
/** |
/** |
||||||
* 横向响应式布局 |
* 横向响应式布局 |
||||||
* Created by GUY on 2016/12/2. |
* Created by GUY on 2016/12/2. |
||||||
* |
* |
||||||
* @class BI.ResponsiveFlexHorizontalLayout |
* @class ResponsiveFlexHorizontalLayout |
||||||
* @extends BI.FlexHorizontalLayout |
* @extends FlexHorizontalLayout |
||||||
*/ |
*/ |
||||||
BI.ResponsiveFlexHorizontalLayout = BI.inherit(BI.FlexHorizontalLayout, { |
@shortcut() |
||||||
// props: function () {
|
export class ResponsiveFlexHorizontalLayout extends FlexHorizontalLayout { |
||||||
// return BI.extend(BI.ResponsiveFlexHorizontalLayout.superclass.props.apply(this, arguments), {
|
static xtype = "bi.responsive_flex_horizontal"; |
||||||
// // extraCls: "bi-responsive-f-h"
|
|
||||||
// });
|
|
||||||
// },
|
|
||||||
|
|
||||||
mounted: function () { |
mounted() { |
||||||
var self = this, o = this.options; |
const o = this.options; |
||||||
if (o.horizontalAlign !== BI.HorizontalAlign.Center){ |
if (o.horizontalAlign !== HorizontalAlign.Center) { |
||||||
return; |
return; |
||||||
} |
} |
||||||
var defaultResize = function () { |
const defaultResize = () => { |
||||||
if (o.scrollable !== true && o.scrollx !== true) { |
if (o.scrollable !== true && o.scrollx !== true) { |
||||||
var clientWidth = document.body.clientWidth; |
const clientWidth = document.body.clientWidth; |
||||||
if(self.element.width() > 2/3 * clientWidth){ |
if (this.element.width() > 2 / 3 * clientWidth) { |
||||||
if (clientWidth <= 768) { |
if (clientWidth <= 768) { |
||||||
BI.each(self._children, function (i, child) { |
each(this._children, (i, child) => { |
||||||
self._clearGap(child); |
this._clearGap(child); |
||||||
self._handleReverseGap(child, o.items[i], i | 0); |
this._handleReverseGap(child, o.items[i], i | 0); |
||||||
}); |
}); |
||||||
self.element.css("flex-direction", "column"); |
this.element.css("flex-direction", "column"); |
||||||
} |
|
||||||
} |
} |
||||||
} |
} |
||||||
} |
} |
||||||
var resize = function () { |
}; |
||||||
|
const resize = () => { |
||||||
defaultResize(); |
defaultResize(); |
||||||
if (o.scrollable !== true && o.scrollx !== true) { |
if (o.scrollable !== true && o.scrollx !== true) { |
||||||
var clientWidth = document.body.clientWidth; |
const clientWidth = document.body.clientWidth; |
||||||
if(self.element.width() > 2/3 * clientWidth){ |
if (this.element.width() > 2 / 3 * clientWidth) { |
||||||
if (clientWidth > 768) { |
if (clientWidth > 768) { |
||||||
BI.each(self._children, function (i, child) { |
each(this._children, (i, child) => { |
||||||
self._clearGap(child); |
this._clearGap(child); |
||||||
}) |
}); |
||||||
self.resize(); |
this.resize(); |
||||||
self.element.css("flex-direction", "row"); |
this.element.css("flex-direction", "row"); |
||||||
} |
|
||||||
} |
} |
||||||
} |
} |
||||||
} |
} |
||||||
this.unResize = BI.Resizers.add(this.getName(), resize); |
}; |
||||||
|
this.unResize = Resizers.add(this.getName(), resize); |
||||||
defaultResize(); |
defaultResize(); |
||||||
}, |
} |
||||||
|
|
||||||
destroyed: function () { |
destroyed() { |
||||||
this.unResize?.(); |
this.unResize?.(); |
||||||
} |
} |
||||||
}); |
} |
||||||
BI.shortcut("bi.responsive_flex_horizontal", BI.ResponsiveFlexHorizontalLayout); |
|
||||||
|
|||||||
@ -1,59 +1,61 @@ |
|||||||
|
import { shortcut } from "@/core/decorator"; |
||||||
|
import { each } from "@/core/2.base"; |
||||||
|
import { HorizontalAlign } from "@/core/constant"; |
||||||
|
import { Resizers } from "@/base"; |
||||||
|
import { FlexWrapperHorizontalLayout } from "../flex"; |
||||||
|
|
||||||
/** |
/** |
||||||
* 横向响应式布局 |
* 横向响应式布局 |
||||||
* Created by GUY on 2016/12/2. |
* Created by GUY on 2016/12/2. |
||||||
* |
* |
||||||
* @class BI.ResponsiveFlexWrapperHorizontalLayout |
* @class ResponsiveFlexWrapperHorizontalLayout |
||||||
* @extends BI.FlexWrapperHorizontalLayout |
* @extends FlexWrapperHorizontalLayout |
||||||
*/ |
*/ |
||||||
BI.ResponsiveFlexWrapperHorizontalLayout = BI.inherit(BI.FlexWrapperHorizontalLayout, { |
@shortcut() |
||||||
// props: function () {
|
export class ResponsiveFlexWrapperHorizontalLayout extends FlexWrapperHorizontalLayout { |
||||||
// return BI.extend(BI.ResponsiveFlexWrapperHorizontalLayout.superclass.props.apply(this, arguments), {
|
static xtype = "bi.responsive_flex_scrollable_horizontal"; |
||||||
// extraCls: "bi-responsive-f-h"
|
|
||||||
// });
|
|
||||||
// },
|
|
||||||
|
|
||||||
mounted: function () { |
mounted() { |
||||||
var self = this, o = this.options; |
const o = this.options; |
||||||
if (o.horizontalAlign !== BI.HorizontalAlign.Center){ |
if (o.horizontalAlign !== HorizontalAlign.Center) { |
||||||
return; |
return; |
||||||
} |
} |
||||||
var defaultResize = function () { |
const defaultResize = () => { |
||||||
if (o.scrollable !== true && o.scrollx !== true) { |
if (o.scrollable !== true && o.scrollx !== true) { |
||||||
var clientWidth = document.body.clientWidth; |
const clientWidth = document.body.clientWidth; |
||||||
if(self.element.width() > 2/3 * clientWidth){ |
if (this.element.width() > 2 / 3 * clientWidth) { |
||||||
if (clientWidth <= 768) { |
if (clientWidth <= 768) { |
||||||
BI.each(self._children, function (i, child) { |
each(this._children, (i, child) => { |
||||||
self._clearGap(child); |
this._clearGap(child); |
||||||
self._handleReverseGap(child, o.items[i], i | 0); |
this._handleReverseGap(child, o.items[i], i | 0); |
||||||
}); |
}); |
||||||
self.element.css("flex-direction", "column"); |
this.element.css("flex-direction", "column"); |
||||||
self.$wrapper.element.css("flex-direction", "column"); |
this.$wrapper.element.css("flex-direction", "column"); |
||||||
} |
|
||||||
} |
} |
||||||
} |
} |
||||||
} |
} |
||||||
var resize = function () { |
}; |
||||||
|
const resize = () => { |
||||||
defaultResize(); |
defaultResize(); |
||||||
if (o.scrollable !== true && o.scrollx !== true) { |
if (o.scrollable !== true && o.scrollx !== true) { |
||||||
var clientWidth = document.body.clientWidth; |
const clientWidth = document.body.clientWidth; |
||||||
if(self.element.width() > 2/3 * clientWidth){ |
if (this.element.width() > 2 / 3 * clientWidth) { |
||||||
if (clientWidth > 768) { |
if (clientWidth > 768) { |
||||||
BI.each(self._children, function (i, child) { |
each(this._children, (i, child) => { |
||||||
self._clearGap(child); |
this._clearGap(child); |
||||||
}) |
}); |
||||||
self.resize(); |
this.resize(); |
||||||
self.element.css("flex-direction", "row"); |
this.element.css("flex-direction", "row"); |
||||||
self.$wrapper.element.css("flex-direction", "row"); |
this.$wrapper.element.css("flex-direction", "row"); |
||||||
} |
|
||||||
} |
} |
||||||
} |
} |
||||||
} |
} |
||||||
this.unResize = BI.Resizers.add(this.getName(), resize); |
}; |
||||||
|
this.unResize = Resizers.add(this.getName(), resize); |
||||||
defaultResize(); |
defaultResize(); |
||||||
}, |
} |
||||||
|
|
||||||
destroyed: function () { |
destroyed() { |
||||||
this.unResize(); |
this.unResize(); |
||||||
} |
} |
||||||
}); |
} |
||||||
BI.shortcut("bi.responsive_flex_scrollable_horizontal", BI.ResponsiveFlexWrapperHorizontalLayout); |
|
||||||
|
|||||||
@ -1,50 +0,0 @@ |
|||||||
/** |
|
||||||
* 横向响应式布局 |
|
||||||
* Created by GUY on 2016/12/2. |
|
||||||
* |
|
||||||
* @class BI.ResponsiveInlineLayout |
|
||||||
* @extends BI.InlineLayout |
|
||||||
*/ |
|
||||||
BI.ResponsiveInlineLayout = BI.inherit(BI.InlineLayout, { |
|
||||||
mounted: function () { |
|
||||||
var self = this, o = this.options; |
|
||||||
if (o.horizontalAlign !== BI.HorizontalAlign.Center){ |
|
||||||
return; |
|
||||||
} |
|
||||||
var defaultResize = function () { |
|
||||||
if (o.scrollable !== true && o.scrollx !== true) { |
|
||||||
var clientWidth = document.body.clientWidth; |
|
||||||
if(self.element.width() > 2/3 * clientWidth){ |
|
||||||
if (clientWidth <= 768) { |
|
||||||
BI.each(self._children, function (i, child) { |
|
||||||
self._clearGap(child); |
|
||||||
self._handleReverseGap(child, o.items[i], i | 0); |
|
||||||
child.elemenet.css("display", ""); |
|
||||||
}); |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
var resize = function () { |
|
||||||
defaultResize(); |
|
||||||
if (o.scrollable !== true && o.scrollx !== true) { |
|
||||||
var clientWidth = document.body.clientWidth; |
|
||||||
if(self.element.width() > 2/3 * clientWidth){ |
|
||||||
if (clientWidth > 768) { |
|
||||||
BI.each(self._children, function (i, child) { |
|
||||||
self._clearGap(child); |
|
||||||
}) |
|
||||||
self.resize(); |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
this.unResize = BI.Resizers.add(this.getName(), resize); |
|
||||||
defaultResize(); |
|
||||||
}, |
|
||||||
|
|
||||||
destroyed: function () { |
|
||||||
this.unResize(); |
|
||||||
} |
|
||||||
}); |
|
||||||
BI.shortcut("bi.responsive_inline", BI.ResponsiveInlineLayout); |
|
||||||
@ -0,0 +1,58 @@ |
|||||||
|
import { shortcut } from "@/core/decorator"; |
||||||
|
import { each } from "@/core/2.base"; |
||||||
|
import { HorizontalAlign } from "@/core/constant"; |
||||||
|
import { Resizers } from "@/base"; |
||||||
|
import { InlineLayout } from "../layout.inline"; |
||||||
|
|
||||||
|
/** |
||||||
|
* 横向响应式布局 |
||||||
|
* Created by GUY on 2016/12/2. |
||||||
|
* |
||||||
|
* @class ResponsiveInlineLayout |
||||||
|
* @extends InlineLayout |
||||||
|
*/ |
||||||
|
@shortcut() |
||||||
|
export class ResponsiveInlineLayout extends InlineLayout { |
||||||
|
static xtype = "bi.responsive_inline"; |
||||||
|
|
||||||
|
mounted() { |
||||||
|
const o = this.options; |
||||||
|
if (o.horizontalAlign !== HorizontalAlign.Center) { |
||||||
|
return; |
||||||
|
} |
||||||
|
const defaultResize = () => { |
||||||
|
if (o.scrollable !== true && o.scrollx !== true) { |
||||||
|
const clientWidth = document.body.clientWidth; |
||||||
|
if (this.element.width() > 2 / 3 * clientWidth) { |
||||||
|
if (clientWidth <= 768) { |
||||||
|
each(this._children, (i, child) => { |
||||||
|
this._clearGap(child); |
||||||
|
this._handleReverseGap(child, o.items[i], i | 0); |
||||||
|
child.element.css("display", ""); |
||||||
|
}); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
const resize = () => { |
||||||
|
defaultResize(); |
||||||
|
if (o.scrollable !== true && o.scrollx !== true) { |
||||||
|
const clientWidth = document.body.clientWidth; |
||||||
|
if (this.element.width() > 2 / 3 * clientWidth) { |
||||||
|
if (clientWidth > 768) { |
||||||
|
each(this._children, (i, child) => { |
||||||
|
this._clearGap(child); |
||||||
|
}); |
||||||
|
this.resize(); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
this.unResize = Resizers.add(this.getName(), resize); |
||||||
|
defaultResize(); |
||||||
|
} |
||||||
|
|
||||||
|
destroyed() { |
||||||
|
this.unResize(); |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,2 @@ |
|||||||
|
export { HorizontalStickyLayout } from "./sticky.horizontal"; |
||||||
|
export { VerticalStickyLayout } from "./sticky.vertical"; |
||||||
Loading…
Reference in new issue