Browse Source
Merge in VISUAL/fineui from ~ZHENFEI.LI/fineui:es6 to es6 * commit '2aefcaac8b8a6d9ad2787dd2e4215d0184f514ae': KERNEL-14035 refactor: 剩余的layoutes6
Zhenfei.Li-李振飞
2 years ago
39 changed files with 1190 additions and 895 deletions
@ -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