Browse Source

KERNEL-14035 refactor: 剩余的layout

es6
Zhenfei.Li 2 years ago
parent
commit
2aefcaac8b
  1. 2
      src/base/0.base.js
  2. 100
      src/core/wrapper/layout/fill/auto.vtape.js
  3. 9
      src/core/wrapper/layout/fill/fill.horizontal.js
  4. 9
      src/core/wrapper/layout/fill/fill.vertical.js
  5. 147
      src/core/wrapper/layout/fill/float.fill.horizontal.js
  6. 4
      src/core/wrapper/layout/fill/index.js
  7. 49
      src/core/wrapper/layout/flex/flex.center.js
  8. 55
      src/core/wrapper/layout/flex/flex.horizontal.center.js
  9. 72
      src/core/wrapper/layout/flex/flex.horizontal.js
  10. 96
      src/core/wrapper/layout/flex/flex.leftrightvertical.center.js
  11. 55
      src/core/wrapper/layout/flex/flex.vertical.center.js
  12. 68
      src/core/wrapper/layout/flex/flex.vertical.js
  13. 7
      src/core/wrapper/layout/flex/index.js
  14. 49
      src/core/wrapper/layout/flex/wrapper/flex.wrapper.center.js
  15. 55
      src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.center.js
  16. 83
      src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.js
  17. 55
      src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.center.js
  18. 83
      src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.js
  19. 5
      src/core/wrapper/layout/flex/wrapper/index.js
  20. 46
      src/core/wrapper/layout/float/float.absolute.center.js
  21. 66
      src/core/wrapper/layout/float/float.absolute.horizontal.js
  22. 178
      src/core/wrapper/layout/float/float.absolute.leftrightvertical.js
  23. 66
      src/core/wrapper/layout/float/float.absolute.vertical.js
  24. 68
      src/core/wrapper/layout/float/float.horizontal.js
  25. 5
      src/core/wrapper/layout/float/index.js
  26. 6
      src/core/wrapper/layout/index.js
  27. 4
      src/core/wrapper/layout/middle/index.js
  28. 76
      src/core/wrapper/layout/middle/middle.center.js
  29. 83
      src/core/wrapper/layout/middle/middle.float.center.js
  30. 77
      src/core/wrapper/layout/middle/middle.horizontal.js
  31. 68
      src/core/wrapper/layout/middle/middle.vertical.js
  32. 3
      src/core/wrapper/layout/responsive/index.js
  33. 68
      src/core/wrapper/layout/responsive/responsive.flex.horizontal.js
  34. 72
      src/core/wrapper/layout/responsive/responsive.flex.wrapper.horizontal.js
  35. 50
      src/core/wrapper/layout/responsive/responsive.inline..js
  36. 58
      src/core/wrapper/layout/responsive/responsive.inline.js
  37. 2
      src/core/wrapper/layout/sticky/index.js
  38. 42
      src/core/wrapper/layout/sticky/sticky.horizontal.js
  39. 42
      src/core/wrapper/layout/sticky/sticky.vertical.js

2
src/base/0.base.js

@ -7,7 +7,7 @@ import {
PopoverController, PopoverController,
ResizeController, ResizeController,
TooltipsController, TooltipsController,
StyleLoaderManager, StyleLoaderManager
} from "../core"; } from "../core";
const Resizers = new ResizeController(); const Resizers = new ResizeController();

100
src/core/wrapper/layout/fill/auto.vtape.js

@ -1,9 +1,17 @@
BI.AutoVerticalTapeLayout = BI.inherit(BI.Layout, { import { shortcut } from "@/core/decorator";
props: function () { import { extend, any, isEmptyObject, isNull, backAny } from "@/core/2.base";
return BI.extend(BI.AutoVerticalTapeLayout.superclass.props.apply(this, arguments), { import { HorizontalAlign, VerticalAlign } from "@/core/constant";
import { Layout } from "../../layout";
@shortcut()
export class AutoVerticalTapeLayout extends Layout {
static xtype = "bi.vtape_auto";
props() {
return extend(super.props(...arguments), {
baseCls: "bi-auto-htape", baseCls: "bi-auto-htape",
horizontalAlign: BI.HorizontalAlign.Stretch, horizontalAlign: HorizontalAlign.Stretch,
verticalAlign: BI.VerticalAlign.Stretch, verticalAlign: VerticalAlign.Stretch,
hgap: 0, hgap: 0,
vgap: 0, vgap: 0,
lgap: 0, lgap: 0,
@ -11,16 +19,17 @@ BI.AutoVerticalTapeLayout = BI.inherit(BI.Layout, {
tgap: 0, tgap: 0,
bgap: 0, bgap: 0,
rowSize: [], rowSize: [],
items: [] items: [],
}); });
}, }
render() {
const o = this.options;
render: function () {
var self = this, o = this.options;
return { return {
type: "bi.vtape", type: "bi.vtape",
ref: function (_ref) { ref: _ref => {
self.layout = _ref; this.layout = _ref;
}, },
items: o.items, items: o.items,
horizontalAlign: o.horizontalAlign, horizontalAlign: o.horizontalAlign,
@ -35,65 +44,65 @@ BI.AutoVerticalTapeLayout = BI.inherit(BI.Layout, {
innerHgap: o.innerHgap, innerHgap: o.innerHgap,
innerVgap: o.innerVgap, innerVgap: o.innerVgap,
}; };
}, }
_handleResize: function () { _handleResize() {
var self = this, o = this.options; const o = this.options;
var items = o.items; const items = o.items;
var top = {}, bottom = {}; const top = {}, bottom = {};
top[0] = o.innerVgap; top[0] = o.innerVgap;
bottom[items.length - 1] = o.innerVgap; bottom[items.length - 1] = o.innerVgap;
BI.any(items, function (i, item) { any(items, (i, item) => {
if (BI.isEmptyObject(item)) { if (isEmptyObject(item)) {
return true; return true;
} }
var w = self.layout.getWidgetByName(self._getChildName(i)); const w = this.layout.getWidgetByName(this._getChildName(i));
var rowSize = o.rowSize.length > 0 ? o.rowSize[i] : item.height; let rowSize = o.rowSize.length > 0 ? o.rowSize[i] : item.height;
if (o.rowSize.length > 0) { if (o.rowSize.length > 0) {
if (item.height >= 1 && o.rowSize[i] >= 1 && o.rowSize[i] !== item.height) { if (item.height >= 1 && o.rowSize[i] >= 1 && o.rowSize[i] !== item.height) {
rowSize = item.height; rowSize = item.height;
} }
} }
if (BI.isNull(top[i])) { if (isNull(top[i])) {
var preRowSize = o.rowSize.length > 0 ? o.rowSize[i - 1] : items[i - 1].height; let preRowSize = o.rowSize.length > 0 ? o.rowSize[i - 1] : items[i - 1].height;
if (preRowSize === "") { if (preRowSize === "") {
preRowSize = self.layout.getWidgetByName(self._getChildName(i - 1)).element.height(); preRowSize = this.layout.getWidgetByName(this._getChildName(i - 1)).element.height();
} }
top[i] = top[i - 1] + preRowSize + self._optimiseItemTgap(items[i - 1]) + self._optimiseItemBgap(items[i - 1]) + 2 * self._optimiseItemVgap(items[i - 1]) + o.vgap + o.tgap + o.bgap; top[i] = top[i - 1] + preRowSize + this._optimiseItemTgap(items[i - 1]) + this._optimiseItemBgap(items[i - 1]) + 2 * this._optimiseItemVgap(items[i - 1]) + o.vgap + o.tgap + o.bgap;
} }
w.element.css({ w.element.css({
top: self._optimiseGap(top[i] + self._optimiseItemTgap(item) + self._optimiseItemVgap(item) + o.vgap + o.tgap) top: this._optimiseGap(top[i] + this._optimiseItemTgap(item) + this._optimiseItemVgap(item) + o.vgap + o.tgap),
}); });
if (rowSize === "fill") { if (rowSize === "fill") {
return true; return true;
} }
}); });
BI.backAny(items, function (i, item) { backAny(items, (i, item) => {
if (BI.isEmptyObject(item)) { if (isEmptyObject(item)) {
return true; return true;
} }
var w = self.layout.getWidgetByName(self._getChildName(i)); const w = this.layout.getWidgetByName(this._getChildName(i));
var rowSize = o.rowSize.length > 0 ? o.rowSize[i] : item.height; const rowSize = o.rowSize.length > 0 ? o.rowSize[i] : item.height;
if (BI.isNull(bottom[i])) { if (isNull(bottom[i])) {
var nextRowSize = o.rowSize.length > 0 ? o.rowSize[i + 1] : items[i + 1].height; let nextRowSize = o.rowSize.length > 0 ? o.rowSize[i + 1] : items[i + 1].height;
if (nextRowSize === "") { if (nextRowSize === "") {
nextRowSize = self.layout.getWidgetByName(self._getChildName(i + 1)).element.height(); nextRowSize = this.layout.getWidgetByName(this._getChildName(i + 1)).element.height();
} }
bottom[i] = bottom[i + 1] + nextRowSize + self._optimiseItemTgap(items[i + 1]) + self._optimiseItemBgap(items[i + 1]) + 2 * self._optimiseItemVgap(items[i + 1]) + o.vgap + o.tgap + o.bgap; bottom[i] = bottom[i + 1] + nextRowSize + this._optimiseItemTgap(items[i + 1]) + this._optimiseItemBgap(items[i + 1]) + 2 * this._optimiseItemVgap(items[i + 1]) + o.vgap + o.tgap + o.bgap;
} }
w.element.css({ w.element.css({
bottom: self._optimiseGap(bottom[i] + self._optimiseItemBgap(item) + self._optimiseItemVgap(item) + o.vgap + o.bgap), bottom: this._optimiseGap(bottom[i] + this._optimiseItemBgap(item) + this._optimiseItemVgap(item) + o.vgap + o.bgap),
}); });
if (rowSize === "fill") { if (rowSize === "fill") {
return true; return true;
} }
}); });
}, }
mounted: function () { mounted() {
if (window.ResizeObserver) { if (window.ResizeObserver) {
this.resizeObserver = new window.ResizeObserver(this._handleResize.bind(this)); this.resizeObserver = new window.ResizeObserver(this._handleResize.bind(this));
this.resizeObserver.observe(this.element[0]); this.resizeObserver.observe(this.element[0]);
@ -103,23 +112,22 @@ BI.AutoVerticalTapeLayout = BI.inherit(BI.Layout, {
this.mutationObserver.observe(this.element[0], { this.mutationObserver.observe(this.element[0], {
attributes: true, attributes: true,
childList: true, childList: true,
subtree: true subtree: true,
}); });
} }
this._handleResize(); this._handleResize();
}, }
destroyed: function () { destroyed() {
this.resizeObserver && this.resizeObserver.unobserve(this.element[0]); this.resizeObserver && this.resizeObserver.unobserve(this.element[0]);
this.mutationObserver && this.mutationObserver.disconnect(); this.mutationObserver && this.mutationObserver.disconnect();
}, }
resize: function () { resize() {
this.layout.resize(); this.layout.resize();
}, }
populate: function (items) { populate(...args) {
this.layout.populate.apply(this.layout, arguments); this.layout.populate(...args);
}
} }
});
BI.shortcut("bi.vtape_auto", BI.AutoVerticalTapeLayout);

9
src/core/wrapper/layout/fill/fill.horizontal.js

@ -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";
}

9
src/core/wrapper/layout/fill/fill.vertical.js

@ -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";
}

147
src/core/wrapper/layout/fill/float.fill.horizontal.js

@ -1,9 +1,18 @@
BI.FloatHorizontalFillLayout = BI.inherit(BI.Layout, { import { shortcut } from "@/core/decorator";
props: function () { import { extend, any, isEmptyObject, isNull, backAny, isFunction, compact, each } from "@/core/2.base";
return BI.extend(BI.FloatHorizontalFillLayout.superclass.props.apply(this, arguments), { import { _lazyCreateWidget } from "@/core/5.inject";
import { HorizontalAlign, VerticalAlign } from "@/core/constant";
import { Layout } from "../../layout";
@shortcut()
export class FloatHorizontalFillLayout extends Layout {
static xtype = "bi.horizontal_float_fill";
props() {
return extend(super.props(...arguments), {
baseCls: "bi-h-float-fill clearfix", baseCls: "bi-h-float-fill clearfix",
horizontalAlign: BI.HorizontalAlign.Stretch, horizontalAlign: HorizontalAlign.Stretch,
verticalAlign: BI.VerticalAlign.Stretch, verticalAlign: VerticalAlign.Stretch,
hgap: 0, hgap: 0,
vgap: 0, vgap: 0,
lgap: 0, lgap: 0,
@ -11,134 +20,136 @@ BI.FloatHorizontalFillLayout = BI.inherit(BI.Layout, {
tgap: 0, tgap: 0,
bgap: 0, bgap: 0,
columnSize: [], columnSize: [],
items: [] items: [],
}); });
}, }
render: function () {
BI.FloatHorizontalFillLayout.superclass.render.apply(this, arguments); render() {
var self = this, o = this.options; super.render(...arguments);
var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) { const o = this.options;
self.populate(newValue); const items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => {
this.populate(newValue);
}) : o.items; }) : o.items;
this.populate(items); this.populate(items);
}, }
addItem: function (item) { addItem(item) {
// do nothing // do nothing
throw new Error("不能添加子组件"); throw new Error("不能添加子组件");
}, }
stroke: function (items) { stroke(items) {
var self = this, o = this.options; const o = this.options;
items = BI.compact(items); items = compact(items);
var rank = 0; let rank = 0;
function createWidget (i, item, desc) { const createWidget = (i, item, desc) => {
if (o.verticalAlign !== BI.VerticalAlign.Stretch) { let w;
var w = BI._lazyCreateWidget({ if (o.verticalAlign !== VerticalAlign.Stretch) {
w = _lazyCreateWidget({
type: "bi.vertical_adapt", type: "bi.vertical_adapt",
horizontalAlign: BI.HorizontalAlign.Stretch, horizontalAlign: HorizontalAlign.Stretch,
verticalAlign: o.verticalAlign, verticalAlign: o.verticalAlign,
columnSize: ["fill"], columnSize: ["fill"],
items: [item] items: [item],
}); });
} else { } else {
var w = BI._lazyCreateWidget(item); w = _lazyCreateWidget(item);
} }
if (o.vgap + o.tgap + self._optimiseItemTgap(item) + self._optimiseItemVgap(item) !== 0) { if (o.vgap + o.tgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item) !== 0) {
w.element.css({ w.element.css({
"margin-top": self._optimiseGap(o.vgap + o.tgap + self._optimiseItemTgap(item) + self._optimiseItemVgap(item)) "margin-top": this._optimiseGap(o.vgap + o.tgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item)),
}); });
} }
if (desc) { if (desc) {
if (o.hgap + o.rgap + self._optimiseItemRgap(item) + self._optimiseItemHgap(item) !== 0) { if (o.hgap + o.rgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item) !== 0) {
w.element.css({ w.element.css({
"margin-right": self._optimiseGap((i === o.items.length - 1 ? o.hgap : 0) + o.rgap + self._optimiseItemRgap(item) + self._optimiseItemHgap(item)) "margin-right": this._optimiseGap((i === o.items.length - 1 ? o.hgap : 0) + o.rgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item)),
}); });
} }
if (o.hgap + o.lgap + self._optimiseItemLgap(item) + self._optimiseItemHgap(item) !== 0) { if (o.hgap + o.lgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item) !== 0) {
w.element.css({ w.element.css({
"margin-left": self._optimiseGap(o.hgap + o.lgap + self._optimiseItemLgap(item) + self._optimiseItemHgap(item)) "margin-left": this._optimiseGap(o.hgap + o.lgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item)),
}); });
} }
} else { } else {
if (o.hgap + o.lgap + self._optimiseItemLgap(item) + self._optimiseItemHgap(item) !== 0) { if (o.hgap + o.lgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item) !== 0) {
w.element.css({ w.element.css({
"margin-left": self._optimiseGap((i === 0 ? o.hgap : 0) + o.lgap + self._optimiseItemLgap(item) + self._optimiseItemHgap(item)) "margin-left": this._optimiseGap((i === 0 ? o.hgap : 0) + o.lgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item)),
}); });
} }
if (o.hgap + o.rgap + self._optimiseItemRgap(item) + self._optimiseItemHgap(item) !== 0) { if (o.hgap + o.rgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item) !== 0) {
w.element.css({ w.element.css({
"margin-right": self._optimiseGap(o.hgap + o.rgap + self._optimiseItemRgap(item) + self._optimiseItemHgap(item)) "margin-right": this._optimiseGap(o.hgap + o.rgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item)),
}); });
} }
} }
if (o.vgap + o.bgap + self._optimiseItemBgap(item) + self._optimiseItemVgap(item) !== 0) { if (o.vgap + o.bgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item) !== 0) {
w.element.css({ w.element.css({
"margin-bottom": self._optimiseGap(o.vgap + o.bgap + self._optimiseItemBgap(item) + self._optimiseItemVgap(item)) "margin-bottom": this._optimiseGap(o.vgap + o.bgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item)),
}); });
} }
var top = o.vgap + o.tgap + self._optimiseItemTgap(item) + self._optimiseItemVgap(item), const top = o.vgap + o.tgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item),
bottom = o.vgap + o.bgap + self._optimiseItemBgap(item) + self._optimiseItemVgap(item); bottom = o.vgap + o.bgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item);
if (o.verticalAlign === BI.VerticalAlign.Stretch && BI.isNull(item.height)) { if (o.verticalAlign === VerticalAlign.Stretch && isNull(item.height)) {
w.element.css({ w.element.css({
height: "calc(100% - " + self._optimiseGap(top + bottom) + ")" height: `calc(100% - ${this._optimiseGap(top + bottom)})`,
}); });
} }
w.element.css({ w.element.css({
position: "relative" position: "relative",
}); });
return w; return w;
} };
BI.any(items, function (i, item) { any(items, (i, item) => {
if (BI.isEmptyObject(item)) { if (isEmptyObject(item)) {
return true; return true;
} }
var columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width; const columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width;
if (columnSize === "fill") { if (columnSize === "fill") {
return true; return true;
} }
var w = createWidget(i, item); const w = createWidget(i, item);
self.addWidget(self._getChildName(rank++), w); this.addWidget(this._getChildName(rank++), w);
w.element.css({ w.element.css({
float: "left" "float": "left",
}); });
}); });
BI.backAny(items, function (i, item) { backAny(items, (i, item) => {
if (BI.isEmptyObject(item)) { if (isEmptyObject(item)) {
return true; return true;
} }
var columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width; const columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width;
if (columnSize === "fill") { if (columnSize === "fill") {
return true; return true;
} }
var w = createWidget(i, item, true); const w = createWidget(i, item, true);
self.addWidget(self._getChildName(rank++), w); this.addWidget(this._getChildName(rank++), w);
w.element.css({ w.element.css({
float: "right" "float": "right",
}); });
}); });
BI.each(items, function (i, item) { each(items, (i, item) => {
var columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width; const columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width;
if (columnSize === "fill") { if (columnSize === "fill") {
var w = createWidget(i, item); const w = createWidget(i, item);
self.addWidget(self._getChildName(rank++), w); this.addWidget(this._getChildName(rank++), w);
} }
}); });
}, }
resize: function () { resize() {
// console.log("填充布局不需要resize"); // console.log("填充布局不需要resize");
}, }
update: function (opt) { update(opt) {
return this.forceUpdate(opt); return this.forceUpdate(opt);
}, }
populate: function (items) { populate(...args) {
BI.FloatHorizontalFillLayout.superclass.populate.apply(this, arguments); super.populate(...args);
this._mount(); this._mount();
} }
}); }
BI.shortcut("bi.horizontal_float_fill", BI.FloatHorizontalFillLayout);

4
src/core/wrapper/layout/fill/index.js

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

49
src/core/wrapper/layout/flex/flex.center.js

@ -1,30 +1,40 @@
import { shortcut } from "@/core/decorator";
import { extend } from "@/core/2.base";
import { HorizontalAlign, VerticalAlign } from "@/core/constant";
import { Layout } from "../../layout";
/** /**
*自适应水平和垂直方向都居中容器 *自适应水平和垂直方向都居中容器
* Created by GUY on 2016/12/2. * Created by GUY on 2016/12/2.
* *
* @class BI.FlexCenterLayout * @class FlexCenterLayout
* @extends BI.Layout * @extends Layout
*/ */
BI.FlexCenterLayout = BI.inherit(BI.Layout, { @shortcut()
props: function () { export class FlexCenterLayout extends Layout {
return BI.extend(BI.FlexCenterLayout.superclass.props.apply(this, arguments), { static xtype = "bi.flex_center_adapt";
props() {
return extend(super.props(...arguments), {
baseCls: "bi-f-c", baseCls: "bi-f-c",
verticalAlign: BI.VerticalAlign.Middle, verticalAlign: VerticalAlign.Middle,
horizontalAlign: BI.HorizontalAlign.Center, horizontalAlign: HorizontalAlign.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 () {
var self = this, o = this.options; render() {
const o = this.options;
return { return {
type: "bi.flex_horizontal", type: "bi.flex_horizontal",
ref: function (_ref) { ref: _ref => {
self.layout = _ref; this.layout = _ref;
}, },
horizontalAlign: o.horizontalAlign, horizontalAlign: o.horizontalAlign,
verticalAlign: o.verticalAlign, verticalAlign: o.verticalAlign,
@ -39,16 +49,15 @@ BI.FlexCenterLayout = BI.inherit(BI.Layout, {
bgap: o.bgap, bgap: o.bgap,
innerHgap: o.innerHgap, innerHgap: o.innerHgap,
innerVgap: o.innerVgap, innerVgap: o.innerVgap,
items: o.items items: o.items,
}; };
}, }
resize: function () { resize() {
this.layout.resize(); this.layout.resize();
}, }
populate: function (items) { populate(items) {
this.layout.populate(items); this.layout.populate(items);
} }
}); }
BI.shortcut("bi.flex_center_adapt", BI.FlexCenterLayout);

55
src/core/wrapper/layout/flex/flex.horizontal.center.js

@ -1,15 +1,23 @@
import { shortcut } from "@/core/decorator";
import { extend } from "@/core/2.base";
import { HorizontalAlign, VerticalAlign } from "@/core/constant";
import { Layout } from "../../layout";
/** /**
* Created by GUY on 2016/12/2. * Created by GUY on 2016/12/2.
* *
* @class BI.FlexHorizontalCenter * @class FlexHorizontalCenter
* @extends BI.Layout * @extends Layout
*/ */
BI.FlexHorizontalCenter = BI.inherit(BI.Layout, { @shortcut()
props: function () { export class FlexHorizontalCenter extends Layout {
return BI.extend(BI.FlexHorizontalCenter.superclass.props.apply(this, arguments), { static xtype = "bi.flex_horizontal_adapt";
props() {
return extend(super.props(...arguments), {
baseCls: "bi-f-h-c", baseCls: "bi-f-h-c",
horizontalAlign: BI.HorizontalAlign.Center, horizontalAlign: HorizontalAlign.Center,
verticalAlign: BI.VerticalAlign.Top, verticalAlign: VerticalAlign.Top,
rowSize: [], rowSize: [],
scrolly: false, scrolly: false,
hgap: 0, hgap: 0,
@ -17,15 +25,17 @@ BI.FlexHorizontalCenter = BI.inherit(BI.Layout, {
lgap: 0, lgap: 0,
rgap: 0, rgap: 0,
tgap: 0, tgap: 0,
bgap: 0 bgap: 0,
}); });
}, }
render: function () {
var self = this, o = this.options; render() {
const o = this.options;
return { return {
type: "bi.flex_vertical", type: "bi.flex_vertical",
ref: function (_ref) { ref: _ref => {
self.layout = _ref; this.layout = _ref;
}, },
horizontalAlign: o.horizontalAlign, horizontalAlign: o.horizontalAlign,
verticalAlign: o.verticalAlign, verticalAlign: o.verticalAlign,
@ -40,17 +50,20 @@ BI.FlexHorizontalCenter = BI.inherit(BI.Layout, {
bgap: o.bgap, bgap: o.bgap,
innerHgap: o.innerHgap, innerHgap: o.innerHgap,
innerVgap: o.innerVgap, innerVgap: o.innerVgap,
items: o.items items: o.items,
}; };
}, }
resize: function () { resize() {
this.layout.resize(); this.layout.resize();
}, }
populate: function (items) { populate(items) {
this.layout.populate(items); this.layout.populate(items);
} }
}); }
BI.shortcut("bi.flex_horizontal_adapt", BI.FlexHorizontalCenter);
BI.shortcut("bi.flex_horizontal_center_adapt", BI.FlexHorizontalCenter); @shortcut()
export class FlexHorizontalCenterAdapt extends FlexHorizontalCenter {
static xtype = "bi.flex_horizontal_center_adapt";
}

72
src/core/wrapper/layout/flex/flex.horizontal.js

@ -1,16 +1,24 @@
import { shortcut } from "@/core/decorator";
import { extend, isFunction, some } from "@/core/2.base";
import { HorizontalAlign, VerticalAlign } from "@/core/constant";
import { Layout } from "../../layout";
/** /**
*自适应水平和垂直方向都居中容器 *自适应水平和垂直方向都居中容器
* Created by GUY on 2016/12/2. * Created by GUY on 2016/12/2.
* *
* @class BI.FlexHorizontalLayout * @class FlexHorizontalLayout
* @extends BI.Layout * @extends Layout
*/ */
BI.FlexHorizontalLayout = BI.inherit(BI.Layout, { @shortcut()
props: function () { export class FlexHorizontalLayout extends Layout {
return BI.extend(BI.FlexHorizontalLayout.superclass.props.apply(this, arguments), { static xtype = "bi.flex_horizontal";
props() {
return extend(super.props(...arguments), {
baseCls: "bi-f-h", baseCls: "bi-f-h",
verticalAlign: BI.VerticalAlign.Top, verticalAlign: VerticalAlign.Top,
horizontalAlign: BI.HorizontalAlign.Left, // 如果只有一个子元素且想让该子元素横向撑满,设置成Stretch horizontalAlign: HorizontalAlign.Left, // 如果只有一个子元素且想让该子元素横向撑满,设置成Stretch
columnSize: [], columnSize: [],
scrollx: true, scrollx: true,
hgap: 0, hgap: 0,
@ -18,52 +26,54 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
lgap: 0, lgap: 0,
rgap: 0, rgap: 0,
tgap: 0, tgap: 0,
bgap: 0 bgap: 0,
}); });
}, }
render: function () {
BI.FlexHorizontalLayout.superclass.render.apply(this, arguments); render() {
var self = this, o = this.options; super.render(...arguments);
this.element.addClass("v-" + o.verticalAlign).addClass("h-" + o.horizontalAlign); const o = this.options;
this.element.addClass(`v-${o.verticalAlign}`).addClass(`h-${o.horizontalAlign}`);
if (o.scrollable === true || o.scrollx === true) { if (o.scrollable === true || o.scrollx === true) {
this.element.addClass("f-scroll-x"); this.element.addClass("f-scroll-x");
} }
if (o.scrollable === true || o.scrolly === true) { if (o.scrollable === true || o.scrolly === true) {
this.element.addClass("f-scroll-y"); this.element.addClass("f-scroll-y");
} }
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);
}, }
_hasFill: function () { _hasFill() {
var o = this.options; const o = this.options;
if (o.columnSize.length > 0) { if (o.columnSize.length > 0) {
return o.columnSize.indexOf("fill") >= 0 || o.columnSize.indexOf("auto") >= 0; return o.columnSize.indexOf("fill") >= 0 || o.columnSize.indexOf("auto") >= 0;
} }
return BI.some(o.items, function (i, item) {
return some(o.items, (i, item) => {
if (item.width === "fill" || item.width === "auto") { if (item.width === "fill" || item.width === "auto") {
return true; return true;
} }
}); });
}, }
_addElement: function (i, item) { _addElement(i, item) {
var o = this.options; const o = this.options;
var w = BI.FlexHorizontalLayout.superclass._addElement.apply(this, arguments); const w = super._addElement(...arguments);
var columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width; let columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width;
if (o.columnSize.length > 0) { if (o.columnSize.length > 0) {
if (item.width >= 1 && o.columnSize[i] >= 1 && o.columnSize[i] !== item.width) { if (item.width >= 1 && o.columnSize[i] >= 1 && o.columnSize[i] !== item.width) {
columnSize = null; columnSize = null;
} }
} }
w.element.css({ w.element.css({
position: "relative" position: "relative",
}); });
if (columnSize !== "auto") { if (columnSize !== "auto") {
if (columnSize === "fill" || columnSize === "") { if (columnSize === "fill" || columnSize === "") {
if (o.horizontalAlign !== BI.HorizontalAlign.Stretch) { if (o.horizontalAlign !== HorizontalAlign.Stretch) {
if (o.scrollable === true || o.scrollx === true) { if (o.scrollable === true || o.scrollx === true) {
w.element.addClass("f-s-n"); w.element.addClass("f-s-n");
} }
@ -93,12 +103,12 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
w.element.addClass("l-c"); w.element.addClass("l-c");
} }
this._handleGap(w, item, i); this._handleGap(w, item, i);
return w; return w;
}, }
populate: function (items) { populate(...args) {
BI.FlexHorizontalLayout.superclass.populate.apply(this, arguments); super.populate(...args);
this._mount(); this._mount();
} }
}); }
BI.shortcut("bi.flex_horizontal", BI.FlexHorizontalLayout);

96
src/core/wrapper/layout/flex/flex.leftrightvertical.center.js

@ -1,6 +1,13 @@
BI.FlexLeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, { import { shortcut } from "@/core/decorator";
props: function () { import { extend, isArray, each, map, stripEL } from "@/core/2.base";
return BI.extend(BI.FlexLeftRightVerticalAdaptLayout.superclass.props.apply(this, arguments), { import { Layout } from "../../layout";
@shortcut()
export class FlexLeftRightVerticalAdaptLayout extends Layout {
static xtype = "bi.flex_left_right_vertical_adapt";
props() {
return extend(super.props(...arguments), {
baseCls: "bi-f-lr-v-c", baseCls: "bi-f-lr-v-c",
columnSize: [], columnSize: [],
items: {}, items: {},
@ -15,33 +22,35 @@ BI.FlexLeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
rhgap: 0, rhgap: 0,
rtgap: 0, rtgap: 0,
rbgap: 0, rbgap: 0,
rvgap: 0 rvgap: 0,
}); });
}, }
render: function () {
var o = this.options, self = this; render() {
BI.FlexLeftRightVerticalAdaptLayout.superclass.render.apply(this, arguments); const o = this.options;
var items = this._formatItems(o.items); super.render(...arguments);
const items = this._formatItems(o.items);
return { return {
type: "bi.flex_vertical_adapt", type: "bi.flex_vertical_adapt",
ref: function (_ref) { ref: _ref => {
self.layout = _ref; this.layout = _ref;
}, },
columnSize: o.columnSize.slice(0, (o.items.left || []).length).concat((o.items.right || []).length > 0 ? [""] : []), columnSize: o.columnSize.slice(0, (o.items.left || []).length).concat((o.items.right || []).length > 0 ? [""] : []),
items: items, items,
scrollx: o.scrollx, scrollx: o.scrollx,
scrolly: o.scrolly, scrolly: o.scrolly,
scrollable: o.scrollable, scrollable: o.scrollable,
innerHgap: o.innerHgap, innerHgap: o.innerHgap,
innerVgap: o.innerVgap innerVgap: o.innerVgap,
}; };
}, }
_formatItems: function (items) { _formatItems(items) {
var self = this, o = this.options; const o = this.options;
var left, right; let left, right;
if (BI.isArray(items)) { if (isArray(items)) {
BI.each(items, function (i, item) { each(items, (i, item) => {
if (item.left) { if (item.left) {
left = item.left; left = item.left;
} }
@ -50,32 +59,34 @@ BI.FlexLeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
} }
}); });
} }
var leftItems = left || items.left || []; let leftItems = left || items.left || [];
var rightItems = right || items.right || []; const rightItems = right || items.right || [];
leftItems = BI.map(leftItems, function (i, item) { leftItems = map(leftItems, (i, item) => {
var json = { const json = {
el: BI.stripEL(item) el: stripEL(item),
}; };
if (o.lvgap + o.ltgap + self._optimiseItemTgap(item) + self._optimiseItemVgap(item) !== 0) { if (o.lvgap + o.ltgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item) !== 0) {
json.tgap = o.lvgap + o.ltgap + self._optimiseItemTgap(item) + self._optimiseItemVgap(item); json.tgap = o.lvgap + o.ltgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item);
} }
if (o.lhgap + o.llgap + self._optimiseItemLgap(item) + self._optimiseItemHgap(item) !== 0) { if (o.lhgap + o.llgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item) !== 0) {
json.lgap = (i === 0 ? o.lhgap : 0) + o.llgap + self._optimiseItemLgap(item) + self._optimiseItemHgap(item); json.lgap = (i === 0 ? o.lhgap : 0) + o.llgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item);
} }
if (o.lhgap + o.lrgap + self._optimiseItemRgap(item) + self._optimiseItemHgap(item) !== 0) { if (o.lhgap + o.lrgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item) !== 0) {
json.rgap = o.lhgap + o.lrgap + self._optimiseItemRgap(item) + self._optimiseItemHgap(item); json.rgap = o.lhgap + o.lrgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item);
} }
if (o.lvgap + o.lbgap + self._optimiseItemBgap(item) + self._optimiseItemVgap(item) !== 0) { if (o.lvgap + o.lbgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item) !== 0) {
json.bgap = o.lvgap + o.lbgap + self._optimiseItemBgap(item) + self._optimiseItemVgap(item); json.bgap = o.lvgap + o.lbgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item);
} }
return json; return json;
}); });
return leftItems.concat({ return leftItems.concat({
el: { el: {
type: "bi.flex_vertical_adapt", type: "bi.flex_vertical_adapt",
columnSize: o.columnSize.slice(leftItems.length), columnSize: o.columnSize.slice(leftItems.length),
css: { css: {
"margin-left": "auto" "margin-left": "auto",
}, },
hgap: o.rhgap, hgap: o.rhgap,
vgap: o.rvgap, vgap: o.rvgap,
@ -83,22 +94,21 @@ BI.FlexLeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
rgap: o.rrgap, rgap: o.rrgap,
tgap: o.rtgap, tgap: o.rtgap,
bgap: o.rbgap, bgap: o.rbgap,
items: rightItems items: rightItems,
}
});
}, },
});
}
resize: function () { resize() {
this.layout.stroke(this._formatItems(this.options.items)); this.layout.stroke(this._formatItems(this.options.items));
}, }
addItem: function () { addItem() {
// do nothing // do nothing
throw new Error("不能添加子组件"); throw new Error("不能添加子组件");
}, }
populate: function (items) { populate(items) {
this.layout.populate(this._formatItems(items)); this.layout.populate(this._formatItems(items));
} }
}); }
BI.shortcut("bi.flex_left_right_vertical_adapt", BI.FlexLeftRightVerticalAdaptLayout);

55
src/core/wrapper/layout/flex/flex.vertical.center.js

@ -1,16 +1,24 @@
import { shortcut } from "@/core/decorator";
import { extend } from "@/core/2.base";
import { HorizontalAlign, VerticalAlign } from "@/core/constant";
import { Layout } from "../../layout";
/** /**
*自适应水平和垂直方向都居中容器 *自适应水平和垂直方向都居中容器
* Created by GUY on 2016/12/2. * Created by GUY on 2016/12/2.
* *
* @class BI.FlexVerticalCenter * @class FlexVerticalCenter
* @extends BI.Layout * @extends Layout
*/ */
BI.FlexVerticalCenter = BI.inherit(BI.Layout, { @shortcut()
props: function () { export class FlexVerticalCenter extends Layout {
return BI.extend(BI.FlexVerticalCenter.superclass.props.apply(this, arguments), { static xtype = "bi.flex_vertical_adapt";
props() {
return extend(super.props(...arguments), {
baseCls: "bi-f-v-c", baseCls: "bi-f-v-c",
horizontalAlign: BI.HorizontalAlign.Left, horizontalAlign: HorizontalAlign.Left,
verticalAlign: BI.VerticalAlign.Middle, verticalAlign: VerticalAlign.Middle,
columnSize: [], columnSize: [],
scrollx: false, scrollx: false,
hgap: 0, hgap: 0,
@ -18,15 +26,17 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
lgap: 0, lgap: 0,
rgap: 0, rgap: 0,
tgap: 0, tgap: 0,
bgap: 0 bgap: 0,
}); });
}, }
render: function () {
var self = this, o = this.options; render() {
const o = this.options;
return { return {
type: "bi.flex_horizontal", type: "bi.flex_horizontal",
ref: function (_ref) { ref: _ref => {
self.layout = _ref; this.layout = _ref;
}, },
verticalAlign: o.verticalAlign, verticalAlign: o.verticalAlign,
horizontalAlign: o.horizontalAlign, horizontalAlign: o.horizontalAlign,
@ -41,17 +51,20 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
hgap: o.hgap, hgap: o.hgap,
innerHgap: o.innerHgap, innerHgap: o.innerHgap,
innerVgap: o.innerVgap, innerVgap: o.innerVgap,
items: o.items items: o.items,
}; };
}, }
resize: function () { resize() {
this.layout.resize(); this.layout.resize();
}, }
populate: function (items) { populate(items) {
this.layout.populate(items); this.layout.populate(items);
} }
}); }
BI.shortcut("bi.flex_vertical_adapt", BI.FlexVerticalCenter);
BI.shortcut("bi.flex_vertical_center_adapt", BI.FlexVerticalCenter); @shortcut()
export class FlexVerticalCenterAdapt extends FlexVerticalCenter {
static xtype = "bi.flex_vertical_center_adapt"
}

68
src/core/wrapper/layout/flex/flex.vertical.js

@ -1,15 +1,21 @@
import { shortcut } from "@/core/decorator";
import { extend, isFunction, some } from "@/core/2.base";
import { HorizontalAlign, VerticalAlign } from "@/core/constant";
import { Layout } from "../../layout";
/** /**
* Created by GUY on 2016/12/2. * Created by GUY on 2016/12/2.
* *
* @class BI.FlexVerticalLayout * @class FlexVerticalLayout
* @extends BI.Layout * @extends Layout
*/ */
BI.FlexVerticalLayout = BI.inherit(BI.Layout, { @shortcut()
props: function () { export class FlexVerticalLayout extends Layout {
return BI.extend(BI.FlexVerticalLayout.superclass.props.apply(this, arguments), { props() {
return extend(super.props(...arguments), {
baseCls: "bi-f-v", baseCls: "bi-f-v",
horizontalAlign: BI.HorizontalAlign.Left, horizontalAlign: HorizontalAlign.Left,
verticalAlign: BI.VerticalAlign.Top, verticalAlign: VerticalAlign.Top,
rowSize: [], rowSize: [],
scrolly: true, scrolly: true,
hgap: 0, hgap: 0,
@ -17,52 +23,54 @@ BI.FlexVerticalLayout = BI.inherit(BI.Layout, {
lgap: 0, lgap: 0,
rgap: 0, rgap: 0,
tgap: 0, tgap: 0,
bgap: 0 bgap: 0,
}); });
}, }
render: function () {
BI.FlexVerticalLayout.superclass.render.apply(this, arguments); render() {
var self = this, o = this.options; super.render(...arguments);
this.element.addClass("h-" + o.horizontalAlign).addClass("v-" + o.verticalAlign); const self = this, o = this.options;
this.element.addClass(`h-${o.horizontalAlign}`).addClass(`v-${o.verticalAlign}`);
if (o.scrollable === true || o.scrollx === true) { if (o.scrollable === true || o.scrollx === true) {
this.element.addClass("f-scroll-x"); this.element.addClass("f-scroll-x");
} }
if (o.scrollable === true || o.scrolly === true) { if (o.scrollable === true || o.scrolly === true) {
this.element.addClass("f-scroll-y"); this.element.addClass("f-scroll-y");
} }
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); self.populate(newValue);
}) : o.items; }) : o.items;
this.populate(items); this.populate(items);
}, }
_hasFill: function () { _hasFill() {
var o = this.options; const o = this.options;
if (o.rowSize.length > 0) { if (o.rowSize.length > 0) {
return o.rowSize.indexOf("fill") >= 0 || o.rowSize.indexOf("auto") >= 0; return o.rowSize.indexOf("fill") >= 0 || o.rowSize.indexOf("auto") >= 0;
} }
return BI.some(o.items, function (i, item) {
return some(o.items, (i, item) => {
if (item.height === "fill" || item.height === "auto") { if (item.height === "fill" || item.height === "auto") {
return true; return true;
} }
}); });
}, }
_addElement: function (i, item) { _addElement(i, item) {
var o = this.options; const o = this.options;
var w = BI.FlexVerticalLayout.superclass._addElement.apply(this, arguments); const w = super._addElement.apply(this, arguments);
var rowSize = o.rowSize.length > 0 ? o.rowSize[i] : item.height; let rowSize = o.rowSize.length > 0 ? o.rowSize[i] : item.height;
if (o.rowSize.length > 0) { if (o.rowSize.length > 0) {
if (item.height >= 1 && o.rowSize[i] >= 1 && o.rowSize[i] !== item.height) { if (item.height >= 1 && o.rowSize[i] >= 1 && o.rowSize[i] !== item.height) {
rowSize = null; rowSize = null;
} }
} }
w.element.css({ w.element.css({
position: "relative" position: "relative",
}); });
if (rowSize !== "auto") { if (rowSize !== "auto") {
if (rowSize === "fill" || rowSize === "") { if (rowSize === "fill" || rowSize === "") {
if (o.verticalAlign !== BI.VerticalAlign.Stretch) { if (o.verticalAlign !== VerticalAlign.Stretch) {
if (o.scrollable === true || o.scrolly === true) { if (o.scrollable === true || o.scrolly === true) {
w.element.addClass("f-s-n"); w.element.addClass("f-s-n");
} }
@ -92,12 +100,12 @@ BI.FlexVerticalLayout = BI.inherit(BI.Layout, {
w.element.addClass("l-c"); w.element.addClass("l-c");
} }
this._handleGap(w, item, null, i); this._handleGap(w, item, null, i);
return w; return w;
}, }
populate: function (items) { populate(items) {
BI.FlexVerticalLayout.superclass.populate.apply(this, arguments); super.populate.apply(this, arguments);
this._mount(); this._mount();
} }
}); }
BI.shortcut("bi.flex_vertical", BI.FlexVerticalLayout);

7
src/core/wrapper/layout/flex/index.js

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

49
src/core/wrapper/layout/flex/wrapper/flex.wrapper.center.js

@ -1,16 +1,24 @@
import { shortcut } from "@/core/decorator";
import { extend } from "@/core/2.base";
import { HorizontalAlign, VerticalAlign } from "@/core/constant";
import { Layout } from "@/core/wrapper/layout";
/** /**
*自适应水平和垂直方向都居中容器 *自适应水平和垂直方向都居中容器
* Created by GUY on 2016/12/2. * Created by GUY on 2016/12/2.
* *
* @class BI.FlexWrapperCenterLayout * @class FlexWrapperCenterLayout
* @extends BI.Layout * @extends Layout
*/ */
BI.FlexWrapperCenterLayout = BI.inherit(BI.Layout, { @shortcut()
props: function () { export class FlexWrapperCenterLayout extends Layout {
return BI.extend(BI.FlexWrapperCenterLayout.superclass.props.apply(this, arguments), { static xtype = "bi.flex_scrollable_center_adapt";
props() {
return extend(super.props(...arguments), {
baseCls: "bi-f-s-c", baseCls: "bi-f-s-c",
horizontalAlign: BI.HorizontalAlign.Center, horizontalAlign: HorizontalAlign.Center,
verticalAlign: BI.VerticalAlign.Middle, verticalAlign: VerticalAlign.Middle,
columnSize: [], columnSize: [],
scrollx: false, scrollx: false,
scrollable: true, scrollable: true,
@ -19,15 +27,17 @@ BI.FlexWrapperCenterLayout = BI.inherit(BI.Layout, {
lgap: 0, lgap: 0,
rgap: 0, rgap: 0,
tgap: 0, tgap: 0,
bgap: 0 bgap: 0,
}); });
}, }
render: function () {
var self = this, o = this.options; render() {
const o = this.options;
return { return {
type: "bi.flex_scrollable_horizontal", type: "bi.flex_scrollable_horizontal",
ref: function (_ref) { ref: _ref => {
self.layout = _ref; this.layout = _ref;
}, },
horizontalAlign: o.horizontalAlign, horizontalAlign: o.horizontalAlign,
verticalAlign: o.verticalAlign, verticalAlign: o.verticalAlign,
@ -40,16 +50,15 @@ BI.FlexWrapperCenterLayout = BI.inherit(BI.Layout, {
vgap: o.vgap, vgap: o.vgap,
lgap: o.lgap, lgap: o.lgap,
rgap: o.rgap, rgap: o.rgap,
items: o.items items: o.items,
}; };
}, }
resize: function () { resize() {
this.layout.resize(); this.layout.resize();
}, }
populate: function (items) { populate(items) {
this.layout.populate(items); this.layout.populate(items);
} }
}); }
BI.shortcut("bi.flex_scrollable_center_adapt", BI.FlexWrapperCenterLayout);

55
src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.center.js

@ -1,16 +1,24 @@
import { shortcut } from "@/core/decorator";
import { extend } from "@/core/2.base";
import { HorizontalAlign, VerticalAlign } from "@/core/constant";
import { Layout } from "@/core/wrapper/layout";
/** /**
*自适应水平和垂直方向都居中容器 *自适应水平和垂直方向都居中容器
* Created by GUY on 2016/12/2. * Created by GUY on 2016/12/2.
* *
* @class BI.FlexVerticalCenter * @class FlexVerticalCenter
* @extends BI.Layout * @extends Layout
*/ */
BI.FlexWrapperHorizontalCenter = BI.inherit(BI.Layout, { @shortcut()
props: function () { export class FlexWrapperHorizontalCenter extends Layout {
return BI.extend(BI.FlexWrapperHorizontalCenter.superclass.props.apply(this, arguments), { static xtype = "bi.flex_scrollable_horizontal_adapt";
props() {
return extend(super.props(...arguments), {
baseCls: "bi-f-s-v-c", baseCls: "bi-f-s-v-c",
horizontalAlign: BI.HorizontalAlign.Center, horizontalAlign: HorizontalAlign.Center,
verticalAlign: BI.VerticalAlign.Top, verticalAlign: VerticalAlign.Top,
rowSize: [], rowSize: [],
scrollable: true, scrollable: true,
scrolly: false, scrolly: false,
@ -19,15 +27,17 @@ BI.FlexWrapperHorizontalCenter = BI.inherit(BI.Layout, {
lgap: 0, lgap: 0,
rgap: 0, rgap: 0,
tgap: 0, tgap: 0,
bgap: 0 bgap: 0,
}); });
}, }
render: function () {
var self = this, o = this.options; render() {
const o = this.options;
return { return {
type: "bi.flex_scrollable_vertical", type: "bi.flex_scrollable_vertical",
ref: function (_ref) { ref: _ref => {
self.layout = _ref; this.layout = _ref;
}, },
horizontalAlign: o.horizontalAlign, horizontalAlign: o.horizontalAlign,
verticalAlign: o.verticalAlign, verticalAlign: o.verticalAlign,
@ -40,17 +50,20 @@ BI.FlexWrapperHorizontalCenter = BI.inherit(BI.Layout, {
vgap: o.vgap, vgap: o.vgap,
tgap: o.tgap, tgap: o.tgap,
bgap: o.bgap, bgap: o.bgap,
items: o.items items: o.items,
}; };
}, }
resize: function () { resize() {
this.layout.resize(); this.layout.resize();
}, }
populate: function (items) { populate(items) {
this.layout.populate(items); this.layout.populate(items);
} }
}); }
BI.shortcut("bi.flex_scrollable_horizontal_adapt", BI.FlexWrapperHorizontalCenter);
BI.shortcut("bi.flex_scrollable_horizontal_center_adapt", BI.FlexWrapperHorizontalCenter); @shortcut()
export class FlexWrapperHorizontalCenterAdapt extends FlexWrapperHorizontalCenter {
static xtype = "bi.flex_scrollable_horizontal_center_adapt";
}

83
src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.js

@ -1,16 +1,25 @@
import { shortcut } from "@/core/decorator";
import { extend, isFunction, some } from "@/core/2.base";
import { Widget } from "@/core/4.widget";
import { HorizontalAlign, VerticalAlign } from "@/core/constant";
import { Layout } from "@/core/wrapper/layout";
/** /**
*自适应水平和垂直方向都居中容器 *自适应水平和垂直方向都居中容器
* Created by GUY on 2016/12/2. * Created by GUY on 2016/12/2.
* *
* @class BI.FlexHorizontalLayout * @class FlexHorizontalLayout
* @extends BI.Layout * @extends Layout
*/ */
BI.FlexWrapperHorizontalLayout = BI.inherit(BI.Layout, { @shortcut()
props: function () { export class FlexWrapperHorizontalLayout extends Layout {
return BI.extend(BI.FlexWrapperHorizontalLayout.superclass.props.apply(this, arguments), { static xtype = "bi.flex_scrollable_horizontal";
props() {
return extend(super.props(...arguments), {
baseCls: "bi-f-s-h", baseCls: "bi-f-s-h",
verticalAlign: BI.VerticalAlign.Top, verticalAlign: VerticalAlign.Top,
horizontalAlign: BI.HorizontalAlign.Left, horizontalAlign: HorizontalAlign.Left,
columnSize: [], columnSize: [],
scrollable: null, scrollable: null,
scrollx: true, scrollx: true,
@ -19,47 +28,49 @@ BI.FlexWrapperHorizontalLayout = BI.inherit(BI.Layout, {
lgap: 0, lgap: 0,
rgap: 0, rgap: 0,
tgap: 0, tgap: 0,
bgap: 0 bgap: 0,
}); });
}, }
render: function () {
BI.FlexWrapperHorizontalLayout.superclass.render.apply(this, arguments); render() {
var self = this, o = this.options; super.render(...arguments);
this.element.addClass("v-" + o.verticalAlign).addClass("h-" + o.horizontalAlign); const o = this.options;
this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("f-s-h-w v-" + o.verticalAlign).addClass("h-" + o.horizontalAlign); this.element.addClass(`v-${o.verticalAlign}`).addClass(`h-${o.horizontalAlign}`);
var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) { this.$wrapper = Widget._renderEngine.createElement("<div>").addClass(`f-s-h-w v-${o.verticalAlign}`).addClass(`h-${o.horizontalAlign}`);
self.populate(newValue); const items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => {
this.populate(newValue);
}) : o.items; }) : o.items;
this.populate(items); this.populate(items);
}, }
_hasFill: function () { _hasFill() {
var o = this.options; const o = this.options;
if (o.columnSize.length > 0) { if (o.columnSize.length > 0) {
return o.columnSize.indexOf("fill") >= 0 || o.columnSize.indexOf("auto") >= 0; return o.columnSize.indexOf("fill") >= 0 || o.columnSize.indexOf("auto") >= 0;
} }
return BI.some(o.items, function (i, item) {
return some(o.items, (i, item) => {
if (item.width === "fill" || item.width === "auto") { if (item.width === "fill" || item.width === "auto") {
return true; return true;
} }
}); });
}, }
_addElement: function (i, item) { _addElement(i, item) {
var o = this.options; const o = this.options;
var w = BI.FlexWrapperHorizontalLayout.superclass._addElement.apply(this, arguments); const w = super._addElement(...arguments);
var columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width; let columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width;
if (o.columnSize.length > 0) { if (o.columnSize.length > 0) {
if (item.width >= 1 && o.columnSize[i] >= 1 && o.columnSize[i] !== item.width) { if (item.width >= 1 && o.columnSize[i] >= 1 && o.columnSize[i] !== item.width) {
columnSize = null; columnSize = null;
} }
} }
w.element.css({ w.element.css({
position: "relative" position: "relative",
}); });
if (columnSize !== "auto") { if (columnSize !== "auto") {
if (columnSize === "fill" || columnSize === "") { if (columnSize === "fill" || columnSize === "") {
if (o.horizontalAlign !== BI.HorizontalAlign.Stretch) { if (o.horizontalAlign !== HorizontalAlign.Stretch) {
if (o.scrollable === true || o.scrollx === true) { if (o.scrollable === true || o.scrollx === true) {
w.element.addClass("f-s-n"); w.element.addClass("f-s-n");
} }
@ -91,21 +102,21 @@ BI.FlexWrapperHorizontalLayout = BI.inherit(BI.Layout, {
w.element.addClass("l-c"); w.element.addClass("l-c");
} }
this._handleGap(w, item, i); this._handleGap(w, item, i);
return w; return w;
}, }
appendFragment: function (frag) { appendFragment(frag) {
this.$wrapper.append(frag); this.$wrapper.append(frag);
this.element.append(this.$wrapper); this.element.append(this.$wrapper);
}, }
_getWrapper: function () { _getWrapper() {
return this.$wrapper; return this.$wrapper;
}, }
populate: function (items) { populate(items) {
BI.FlexWrapperHorizontalLayout.superclass.populate.apply(this, arguments); super.populate(...arguments);
this._mount(); this._mount();
} }
}); }
BI.shortcut("bi.flex_scrollable_horizontal", BI.FlexWrapperHorizontalLayout);

55
src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.center.js

@ -1,16 +1,24 @@
import { shortcut } from "@/core/decorator";
import { extend } from "@/core/2.base";
import { HorizontalAlign, VerticalAlign } from "@/core/constant";
import { Layout } from "@/core/wrapper/layout";
/** /**
*自适应水平和垂直方向都居中容器 *自适应水平和垂直方向都居中容器
* Created by GUY on 2016/12/2. * Created by GUY on 2016/12/2.
* *
* @class BI.FlexVerticalCenter * @class FlexVerticalCenter
* @extends BI.Layout * @extends Layout
*/ */
BI.FlexWrapperVerticalCenter = BI.inherit(BI.Layout, { @shortcut()
props: function () { export class FlexWrapperVerticalCenter extends Layout {
return BI.extend(BI.FlexWrapperVerticalCenter.superclass.props.apply(this, arguments), { static xtype = "bi.flex_scrollable_vertical_adapt";
props() {
return extend(super.props(...arguments), {
baseCls: "bi-f-s-v-c", baseCls: "bi-f-s-v-c",
horizontalAlign: BI.HorizontalAlign.Left, horizontalAlign: HorizontalAlign.Left,
verticalAlign: BI.VerticalAlign.Middle, verticalAlign: VerticalAlign.Middle,
columnSize: [], columnSize: [],
scrollx: false, scrollx: false,
scrollable: true, scrollable: true,
@ -19,15 +27,17 @@ BI.FlexWrapperVerticalCenter = BI.inherit(BI.Layout, {
lgap: 0, lgap: 0,
rgap: 0, rgap: 0,
tgap: 0, tgap: 0,
bgap: 0 bgap: 0,
}); });
}, }
render: function () {
var self = this, o = this.options; render() {
const o = this.options;
return { return {
type: "bi.flex_scrollable_horizontal", type: "bi.flex_scrollable_horizontal",
ref: function (_ref) { ref: _ref => {
self.layout = _ref; this.layout = _ref;
}, },
verticalAlign: o.verticalAlign, verticalAlign: o.verticalAlign,
horizontalAlign: o.horizontalAlign, horizontalAlign: o.horizontalAlign,
@ -40,17 +50,20 @@ BI.FlexWrapperVerticalCenter = BI.inherit(BI.Layout, {
vgap: o.vgap, vgap: o.vgap,
lgap: o.lgap, lgap: o.lgap,
rgap: o.rgap, rgap: o.rgap,
items: o.items items: o.items,
}; };
}, }
resize: function () { resize() {
this.layout.resize(); this.layout.resize();
}, }
populate: function (items) { populate(items) {
this.layout.populate(items); this.layout.populate(items);
} }
}); }
BI.shortcut("bi.flex_scrollable_vertical_adapt", BI.FlexWrapperVerticalCenter);
BI.shortcut("bi.flex_scrollable_vertical_center_adapt", BI.FlexWrapperVerticalCenter); @shortcut()
export class FlexWrapperVerticalCenterAdapt extends FlexWrapperVerticalCenter {
static xtype = "bi.flex_scrollable_vertical_center_adapt";
}

83
src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.js

@ -1,16 +1,25 @@
import { shortcut } from "@/core/decorator";
import { extend, isFunction, some } from "@/core/2.base";
import { Widget } from "@/core/4.widget";
import { HorizontalAlign, VerticalAlign } from "@/core/constant";
import { Layout } from "@/core/wrapper/layout";
/** /**
*自适应水平和垂直方向都居中容器 *自适应水平和垂直方向都居中容器
* Created by GUY on 2016/12/2. * Created by GUY on 2016/12/2.
* *
* @class BI.FlexWrapperVerticalLayout * @class FlexWrapperVerticalLayout
* @extends BI.Layout * @extends Layout
*/ */
BI.FlexWrapperVerticalLayout = BI.inherit(BI.Layout, { @shortcut()
props: function () { export class FlexWrapperVerticalLayout extends Layout {
return BI.extend(BI.FlexWrapperVerticalLayout.superclass.props.apply(this, arguments), { static xtype = "bi.flex_scrollable_vertical";
props() {
return extend(super.props(...arguments), {
baseCls: "bi-f-s-v", baseCls: "bi-f-s-v",
horizontalAlign: BI.HorizontalAlign.Left, horizontalAlign: HorizontalAlign.Left,
verticalAlign: BI.VerticalAlign.Top, verticalAlign: VerticalAlign.Top,
rowSize: [], rowSize: [],
scrollable: null, scrollable: null,
scrolly: true, scrolly: true,
@ -19,47 +28,49 @@ BI.FlexWrapperVerticalLayout = BI.inherit(BI.Layout, {
lgap: 0, lgap: 0,
rgap: 0, rgap: 0,
tgap: 0, tgap: 0,
bgap: 0 bgap: 0,
}); });
}, }
render: function () {
BI.FlexWrapperVerticalLayout.superclass.render.apply(this, arguments); render() {
var self = this, o = this.options; super.render(...arguments);
this.element.addClass("v-" + o.verticalAlign).addClass("h-" + o.horizontalAlign); const o = this.options;
this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("f-s-v-w h-" + o.horizontalAlign).addClass("v-" + o.verticalAlign); this.element.addClass(`v-${o.verticalAlign}`).addClass(`h-${o.horizontalAlign}`);
var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) { this.$wrapper = Widget._renderEngine.createElement("<div>").addClass(`f-s-v-w h-${o.horizontalAlign}`).addClass(`v-${o.verticalAlign}`);
self.populate(newValue); const items = isFunction(o.items) ? this.__watch(o.items, (context, newValue) => {
this.populate(newValue);
}) : o.items; }) : o.items;
this.populate(items); this.populate(items);
}, }
_hasFill: function () { _hasFill() {
var o = this.options; const o = this.options;
if (o.rowSize.length > 0) { if (o.rowSize.length > 0) {
return o.rowSize.indexOf("fill") >= 0 || o.rowSize.indexOf("auto") >= 0; return o.rowSize.indexOf("fill") >= 0 || o.rowSize.indexOf("auto") >= 0;
} }
return BI.some(o.items, function (i, item) {
return some(o.items, (i, item) => {
if (item.height === "fill" || item.height === "auto") { if (item.height === "fill" || item.height === "auto") {
return true; return true;
} }
}); });
}, }
_addElement: function (i, item) { _addElement(i, item) {
var o = this.options; const o = this.options;
var w = BI.FlexWrapperVerticalLayout.superclass._addElement.apply(this, arguments); const w = super._addElement(...arguments);
var rowSize = o.rowSize.length > 0 ? o.rowSize[i] : item.height; let rowSize = o.rowSize.length > 0 ? o.rowSize[i] : item.height;
if (o.rowSize.length > 0) { if (o.rowSize.length > 0) {
if (item.height >= 1 && o.rowSize[i] >= 1 && o.rowSize[i] !== item.height) { if (item.height >= 1 && o.rowSize[i] >= 1 && o.rowSize[i] !== item.height) {
rowSize = null; rowSize = null;
} }
} }
w.element.css({ w.element.css({
position: "relative" position: "relative",
}); });
if (rowSize !== "auto") { if (rowSize !== "auto") {
if (rowSize === "fill" || rowSize === "") { if (rowSize === "fill" || rowSize === "") {
if (o.verticalAlign !== BI.VerticalAlign.Stretch) { if (o.verticalAlign !== VerticalAlign.Stretch) {
if (o.scrollable === true || o.scrolly === true) { if (o.scrollable === true || o.scrolly === true) {
w.element.addClass("f-s-n"); w.element.addClass("f-s-n");
} }
@ -91,21 +102,21 @@ BI.FlexWrapperVerticalLayout = BI.inherit(BI.Layout, {
w.element.addClass("l-c"); w.element.addClass("l-c");
} }
this._handleGap(w, item, null, i); this._handleGap(w, item, null, i);
return w; return w;
}, }
appendFragment: function (frag) { appendFragment(frag) {
this.$wrapper.append(frag); this.$wrapper.append(frag);
this.element.append(this.$wrapper); this.element.append(this.$wrapper);
}, }
_getWrapper: function () { _getWrapper() {
return this.$wrapper; return this.$wrapper;
}, }
populate: function (items) { populate(items) {
BI.FlexWrapperVerticalLayout.superclass.populate.apply(this, arguments); super.populate(...arguments);
this._mount(); this._mount();
} }
}); }
BI.shortcut("bi.flex_scrollable_vertical", BI.FlexWrapperVerticalLayout);

5
src/core/wrapper/layout/flex/wrapper/index.js

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

46
src/core/wrapper/layout/float/float.absolute.center.js

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

66
src/core/wrapper/layout/float/float.absolute.horizontal.js

@ -1,23 +1,32 @@
import { shortcut } from "@/core/decorator";
import { extend, map, isEmptyObject, stripEL, isWidget } from "@/core/2.base";
import { HorizontalAlign } from "@/core/constant";
import { Layout } from "../../layout";
/** /**
* absolute实现的居中布局 * absolute实现的居中布局
* @class BI.FloatAbsoluteHorizontalLayout * @class FloatAbsoluteHorizontalLayout
* @extends BI.Layout * @extends Layout
*/ */
BI.FloatAbsoluteHorizontalLayout = BI.inherit(BI.Layout, { @shortcut()
props: function () { export class FloatAbsoluteHorizontalLayout extends Layout {
return BI.extend(BI.FloatAbsoluteHorizontalLayout.superclass.props.apply(this, arguments), { static xtype = "bi.absolute_horizontal_float";
props() {
return extend(super.props(...arguments), {
baseCls: "bi-abs-h-fl", baseCls: "bi-abs-h-fl",
horizontalAlign: BI.HorizontalAlign.Center, horizontalAlign: HorizontalAlign.Center,
rowSize: [], rowSize: [],
vgap: 0, vgap: 0,
tgap: 0, tgap: 0,
bgap: 0 bgap: 0,
}); });
}, }
render() {
const o = this.options;
super.render(...arguments);
render: function () {
var self = this, o = this.options;
BI.FloatAbsoluteHorizontalLayout.superclass.render.apply(this, arguments);
return { return {
type: "bi.vtape", type: "bi.vtape",
horizontalAlign: o.horizontalAlign, horizontalAlign: o.horizontalAlign,
@ -26,8 +35,8 @@ BI.FloatAbsoluteHorizontalLayout = BI.inherit(BI.Layout, {
scrollx: o.scrollx, scrollx: o.scrollx,
scrolly: o.scrolly, scrolly: o.scrolly,
scrollable: o.scrollable, scrollable: o.scrollable,
ref: function (_ref) { ref: _ref => {
self.layout = _ref; this.layout = _ref;
}, },
hgap: "50%", hgap: "50%",
vgap: o.vgap, vgap: o.vgap,
@ -39,34 +48,35 @@ BI.FloatAbsoluteHorizontalLayout = BI.inherit(BI.Layout, {
innerHgap: o.innerHgap, innerHgap: o.innerHgap,
innerVgap: o.innerVgap, innerVgap: o.innerVgap,
}; };
}, }
_formatItems: function (items) { _formatItems(items) {
var o = this.options; const o = this.options;
if (o.horizontalAlign === BI.HorizontalAlign.Left) { if (o.horizontalAlign === HorizontalAlign.Left) {
return items; return items;
} }
var cls = o.horizontalAlign === BI.HorizontalAlign.Right ? "bi-abs-r-x-item" : "bi-abs-c-x-item"; const cls = o.horizontalAlign === HorizontalAlign.Right ? "bi-abs-r-x-item" : "bi-abs-c-x-item";
return BI.map(items, function (i, item) {
if (!item || BI.isEmptyObject(item)) { return map(items, (i, item) => {
if (!item || isEmptyObject(item)) {
return item; return item;
} }
var el = BI.stripEL(item); const el = stripEL(item);
if (BI.isWidget(el)) { if (isWidget(el)) {
el.element.addClass(cls); el.element.addClass(cls);
} else { } else {
el.cls = (el.cls || "") + cls; el.cls = (el.cls || "") + cls;
} }
return item; return item;
}); });
}, }
resize: function () { resize() {
this.layout.stroke(this._formatItems(this.options.items)); this.layout.stroke(this._formatItems(this.options.items));
}, }
populate: function (items) { populate(items) {
this.layout.populate(this._formatItems(items)); this.layout.populate(this._formatItems(items));
} }
}); }
BI.shortcut("bi.absolute_horizontal_float", BI.FloatAbsoluteHorizontalLayout);

178
src/core/wrapper/layout/float/float.absolute.leftrightvertical.js

@ -1,8 +1,16 @@
BI.FloatAbsoluteLeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, { import { shortcut } from "@/core/decorator";
props: function () { import { extend, map, isEmptyObject, stripEL, isWidget, isArray, each } from "@/core/2.base";
return BI.extend(BI.FloatAbsoluteLeftRightVerticalAdaptLayout.superclass.props.apply(this, arguments), { import { VerticalAlign } from "@/core/constant";
import { Layout } from "../../layout";
@shortcut()
export class FloatAbsoluteLeftRightVerticalAdaptLayout extends Layout {
static xtype = "bi.absolute_left_right_vertical_float";
props() {
return extend(super.props(...arguments), {
baseCls: "bi-abs-lr-v-fl", baseCls: "bi-abs-lr-v-fl",
verticalAlign: BI.VerticalAlign.Middle, verticalAlign: VerticalAlign.Middle,
items: {}, items: {},
llgap: 0, llgap: 0,
lrgap: 0, lrgap: 0,
@ -15,16 +23,18 @@ BI.FloatAbsoluteLeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
rhgap: 0, rhgap: 0,
rtgap: 0, rtgap: 0,
rbgap: 0, rbgap: 0,
rvgap: 0 rvgap: 0,
}); });
}, }
render: function () {
var o = this.options, self = this; render() {
BI.FloatAbsoluteLeftRightVerticalAdaptLayout.superclass.render.apply(this, arguments); const o = this.options;
super.render(...arguments);
return { return {
type: "bi.htape", type: "bi.htape",
ref: function (_ref) { ref: _ref => {
self.layout = _ref; this.layout = _ref;
}, },
verticalAlign: o.verticalAlign, verticalAlign: o.verticalAlign,
items: this._formatItems(o.items), items: this._formatItems(o.items),
@ -33,15 +43,15 @@ BI.FloatAbsoluteLeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
innerVgap: o.innerVgap, innerVgap: o.innerVgap,
scrollx: o.scrollx, scrollx: o.scrollx,
scrolly: o.scrolly, scrolly: o.scrolly,
scrollable: o.scrollable scrollable: o.scrollable,
}; };
}, }
_formatItems: function (items) { _formatItems(items) {
var self = this, o = this.options; const o = this.options;
var left, right; let left, right;
if (BI.isArray(items)) { if (isArray(items)) {
BI.each(items, function (i, item) { each(items, (i, item) => {
if (item.left) { if (item.left) {
left = item.left; left = item.left;
} }
@ -50,98 +60,105 @@ BI.FloatAbsoluteLeftRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
} }
}); });
} }
var leftItems = left || items.left || []; let leftItems = left || items.left || [];
var rightItems = right || items.right || []; let rightItems = right || items.right || [];
leftItems = BI.map(leftItems, function (i, item) { leftItems = map(leftItems, (i, item) => {
var el = BI.stripEL(item); const el = stripEL(item);
if (o.verticalAlign === BI.VerticalAlign.Middle) { if (o.verticalAlign === VerticalAlign.Middle) {
if (BI.isWidget(el)) { if (isWidget(el)) {
el.element.addClass("bi-abs-c-y-item"); el.element.addClass("bi-abs-c-y-item");
} else { } else {
el.cls = (el.cls || "") + "bi-abs-c-y-item"; el.cls = `${el.cls || ""}bi-abs-c-y-item`;
} }
} }
var json = { const json = {
el: el, el,
width: item.width width: item.width,
}; };
// if (o.lvgap + o.ltgap + (item.tgap || 0) + (item.vgap || 0) !== 0) { // if (o.lvgap + o.ltgap + (item.tgap || 0) + (item.vgap || 0) !== 0) {
// json.tgap = o.lvgap + o.ltgap + (item.tgap || 0) + (item.vgap || 0); // json.tgap = o.lvgap + o.ltgap + (item.tgap || 0) + (item.vgap || 0);
// } // }
if (o.lhgap + o.llgap + self._optimiseItemLgap(item) + self._optimiseItemHgap(item) !== 0) { if (o.lhgap + o.llgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item) !== 0) {
json.lgap = (i === 0 ? o.lhgap : 0) + o.llgap + self._optimiseItemLgap(item) + self._optimiseItemHgap(item); json.lgap = (i === 0 ? o.lhgap : 0) + o.llgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item);
} }
if (o.lhgap + o.lrgap + self._optimiseItemRgap(item) + self._optimiseItemHgap(item) !== 0) { if (o.lhgap + o.lrgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item) !== 0) {
json.rgap = o.lhgap + o.lrgap + self._optimiseItemRgap(item) + self._optimiseItemHgap(item); json.rgap = o.lhgap + o.lrgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item);
} }
// if (o.lvgap + o.lbgap + (item.bgap || 0) + (item.vgap || 0) !== 0) { // if (o.lvgap + o.lbgap + (item.bgap || 0) + (item.vgap || 0) !== 0) {
// json.bgap = o.lvgap + o.lbgap + (item.bgap || 0) + (item.vgap || 0); // json.bgap = o.lvgap + o.lbgap + (item.bgap || 0) + (item.vgap || 0);
// } // }
return json; return json;
}); });
rightItems = BI.map(rightItems, function (i, item) { rightItems = map(rightItems, (i, item) => {
var el = BI.stripEL(item); const el = stripEL(item);
if (o.verticalAlign === BI.VerticalAlign.Middle) { if (o.verticalAlign === VerticalAlign.Middle) {
if (BI.isWidget(el)) { if (isWidget(el)) {
el.element.addClass("bi-abs-c-y-item"); el.element.addClass("bi-abs-c-y-item");
} else { } else {
el.cls = (el.cls || "") + "bi-abs-c-y-item"; el.cls = `${el.cls || ""}bi-abs-c-y-item`;
} }
} }
var json = { const json = {
el: el, el,
width: item.width width: item.width,
}; };
// if (o.rvgap + o.rtgap + (item.tgap || 0) + (item.vgap || 0) !== 0) { // if (o.rvgap + o.rtgap + (item.tgap || 0) + (item.vgap || 0) !== 0) {
// json.tgap = o.rvgap + o.rtgap + (item.tgap || 0) + (item.vgap || 0); // json.tgap = o.rvgap + o.rtgap + (item.tgap || 0) + (item.vgap || 0);
// } // }
if (o.rhgap + o.rlgap + self._optimiseItemLgap(item) + self._optimiseItemHgap(item) !== 0) { if (o.rhgap + o.rlgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item) !== 0) {
json.lgap = (i === 0 ? o.rhgap : 0) + o.rlgap + self._optimiseItemLgap(item) + self._optimiseItemHgap(item); json.lgap = (i === 0 ? o.rhgap : 0) + o.rlgap + this._optimiseItemLgap(item) + this._optimiseItemHgap(item);
} }
if (o.rhgap + o.rrgap + self._optimiseItemRgap(item) + self._optimiseItemHgap(item) !== 0) { if (o.rhgap + o.rrgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item) !== 0) {
json.rgap = o.rhgap + o.rrgap + self._optimiseItemRgap(item) + self._optimiseItemHgap(item); json.rgap = o.rhgap + o.rrgap + this._optimiseItemRgap(item) + this._optimiseItemHgap(item);
} }
// if (o.rvgap + o.rbgap + (item.bgap || 0) + (item.vgap || 0) !== 0) { // if (o.rvgap + o.rbgap + (item.bgap || 0) + (item.vgap || 0) !== 0) {
// json.bgap = o.rvgap + o.rbgap + (item.bgap || 0) + (item.vgap || 0); // json.bgap = o.rvgap + o.rbgap + (item.bgap || 0) + (item.vgap || 0);
// } // }
return json; return json;
}); });
return leftItems.concat({}, rightItems); return leftItems.concat({}, rightItems);
}, }
resize: function () { resize() {
this.layout.stroke(this._formatItems(this.options.items)); this.layout.stroke(this._formatItems(this.options.items));
}, }
addItem: function () { addItem() {
// do nothing // do nothing
throw new Error("不能添加子组件"); throw new Error("不能添加子组件");
}, }
populate: function (items) { populate(items) {
this.layout.populate(this._formatItems(items)); this.layout.populate(this._formatItems(items));
} }
}); }
BI.shortcut("bi.absolute_left_right_vertical_float", BI.FloatAbsoluteLeftRightVerticalAdaptLayout);
@shortcut()
export class FloatAbsoluteRightVerticalAdaptLayout extends Layout {
static xtype = "bi.absolute_right_vertical_float";
BI.FloatAbsoluteRightVerticalAdaptLayout = BI.inherit(BI.Layout, { props() {
props: function () { return extend(super.props(...arguments), {
return BI.extend(BI.FloatAbsoluteRightVerticalAdaptLayout.superclass.props.apply(this, arguments), {
baseCls: "bi-abs-r-v-fl", baseCls: "bi-abs-r-v-fl",
verticalAlign: BI.VerticalAlign.Middle, verticalAlign: VerticalAlign.Middle,
items: [], items: [],
lgap: 0, lgap: 0,
rgap: 0, rgap: 0,
hgap: 0 hgap: 0,
}); });
}, }
render: function () {
var o = this.options, self = this; render() {
BI.FloatAbsoluteRightVerticalAdaptLayout.superclass.render.apply(this, arguments); const o = this.options;
super.render(...arguments);
return { return {
type: "bi.htape", type: "bi.htape",
ref: function (_ref) { ref: _ref => {
self.layout = _ref; this.layout = _ref;
}, },
verticalAlign: o.verticalAlign, verticalAlign: o.verticalAlign,
items: [{}].concat(this._formatItems(o.items)), items: [{}].concat(this._formatItems(o.items)),
@ -151,39 +168,40 @@ BI.FloatAbsoluteRightVerticalAdaptLayout = BI.inherit(BI.Layout, {
vgap: "50%", vgap: "50%",
scrollx: o.scrollx, scrollx: o.scrollx,
scrolly: o.scrolly, scrolly: o.scrolly,
scrollable: o.scrollable scrollable: o.scrollable,
}; };
}, }
_formatItems: function (items) { _formatItems(items) {
if (this.options.verticalAlign !== BI.VerticalAlign.Middle) { if (this.options.verticalAlign !== VerticalAlign.Middle) {
return items; return items;
} }
return BI.map(items, function (i, item) {
if (!item || BI.isEmptyObject(item)) { return map(items, (i, item) => {
if (!item || isEmptyObject(item)) {
return item; return item;
} }
var el = BI.stripEL(item); const el = stripEL(item);
if (BI.isWidget(el)) { if (isWidget(el)) {
el.element.addClass("bi-abs-c-y-item"); el.element.addClass("bi-abs-c-y-item");
} else { } else {
el.cls = (el.cls || "") + "bi-abs-c-y-item"; el.cls = `${el.cls || ""}bi-abs-c-y-item`;
} }
return item; return item;
}); });
}, }
resize: function () { resize() {
this.layout.stroke([{}].concat(this._formatItems(this.options.items))); this.layout.stroke([{}].concat(this._formatItems(this.options.items)));
}, }
addItem: function () { addItem() {
// do nothing // do nothing
throw new Error("不能添加子组件"); throw new Error("不能添加子组件");
}, }
populate: function (items) { populate(items) {
this.layout.populate([{}].concat(this._formatItems(items))); this.layout.populate([{}].concat(this._formatItems(items)));
} }
}); }
BI.shortcut("bi.absolute_right_vertical_float", BI.FloatAbsoluteRightVerticalAdaptLayout);

66
src/core/wrapper/layout/float/float.absolute.vertical.js

@ -1,23 +1,32 @@
import { shortcut } from "@/core/decorator";
import { extend, map, isEmptyObject, stripEL, isWidget } from "@/core/2.base";
import { VerticalAlign } from "@/core/constant";
import { Layout } from "../../layout";
/** /**
* absolute实现的居中布局 * absolute实现的居中布局
* @class BI.FloatAbsoluteVerticalLayout * @class FloatAbsoluteVerticalLayout
* @extends BI.Layout * @extends Layout
*/ */
BI.FloatAbsoluteVerticalLayout = BI.inherit(BI.Layout, { @shortcut()
props: function () { export class FloatAbsoluteVerticalLayout extends Layout {
return BI.extend(BI.FloatAbsoluteVerticalLayout.superclass.props.apply(this, arguments), { static xtype = "bi.absolute_vertical_float";
props() {
return extend(super.props(...arguments), {
baseCls: "bi-abs-h-fl", baseCls: "bi-abs-h-fl",
verticalAlign: BI.VerticalAlign.Middle, verticalAlign: VerticalAlign.Middle,
columnSize: [], columnSize: [],
hgap: 0, hgap: 0,
lgap: 0, lgap: 0,
rgap: 0 rgap: 0,
}); });
}, }
render() {
const o = this.options;
super.render(...arguments);
render: function () {
var self = this, o = this.options;
BI.FloatAbsoluteVerticalLayout.superclass.render.apply(this, arguments);
return { return {
type: "bi.htape", type: "bi.htape",
verticalAlign: o.verticalAlign, verticalAlign: o.verticalAlign,
@ -26,8 +35,8 @@ BI.FloatAbsoluteVerticalLayout = BI.inherit(BI.Layout, {
scrollx: o.scrollx, scrollx: o.scrollx,
scrolly: o.scrolly, scrolly: o.scrolly,
scrollable: o.scrollable, scrollable: o.scrollable,
ref: function (_ref) { ref: _ref => {
self.layout = _ref; this.layout = _ref;
}, },
vgap: "50%", vgap: "50%",
hgap: o.hgap, hgap: o.hgap,
@ -39,34 +48,35 @@ BI.FloatAbsoluteVerticalLayout = BI.inherit(BI.Layout, {
innerHgap: o.innerHgap, innerHgap: o.innerHgap,
innerVgap: o.innerVgap, innerVgap: o.innerVgap,
}; };
}, }
_formatItems: function (items) { _formatItems(items) {
var o = this.options; const o = this.options;
if (o.verticalAlign === BI.VerticalAlign.Top) { if (o.verticalAlign === VerticalAlign.Top) {
return items; return items;
} }
var cls = o.verticalAlign === BI.VerticalAlign.Bottom ? "bi-abs-b-y-item" : "bi-abs-c-y-item"; const cls = o.verticalAlign === VerticalAlign.Bottom ? "bi-abs-b-y-item" : "bi-abs-c-y-item";
return BI.map(items, function (i, item) {
if (!item || BI.isEmptyObject(item)) { return map(items, (i, item) => {
if (!item || isEmptyObject(item)) {
return item; return item;
} }
var el = BI.stripEL(item); const el = stripEL(item);
if (BI.isWidget(el)) { if (isWidget(el)) {
el.element.addClass(cls); el.element.addClass(cls);
} else { } else {
el.cls = (el.cls || "") + cls; el.cls = (el.cls || "") + cls;
} }
return item; return item;
}); });
}, }
resize: function () { resize() {
this.layout.stroke(this._formatItems(this.options.items)); this.layout.stroke(this._formatItems(this.options.items));
}, }
populate: function (items) { populate(items) {
this.layout.populate(this._formatItems(items)); this.layout.populate(this._formatItems(items));
} }
}); }
BI.shortcut("bi.absolute_vertical_float", BI.FloatAbsoluteVerticalLayout);

68
src/core/wrapper/layout/float/float.horizontal.js

@ -1,30 +1,37 @@
import { shortcut } from "@/core/decorator";
import { extend, map } from "@/core/2.base";
import { VerticalAlign, HorizontalAlign } from "@/core/constant";
import { Layout } from "../../layout";
/** /**
* 浮动的水平居中布局 * 浮动的水平居中布局
*/ */
BI.FloatHorizontalLayout = BI.inherit(BI.Layout, { @shortcut()
export class FloatHorizontalLayout extends Layout {
static xtype = "bi.horizontal_float";
props: function () { props() {
return BI.extend(BI.InlineHorizontalAdaptLayout.superclass.props.apply(this, arguments), { return extend(super.props(...arguments), {
baseCls: "bi-h-fl", baseCls: "bi-h-fl",
horizontalAlign: BI.HorizontalAlign.Center, horizontalAlign: HorizontalAlign.Center,
verticalAlign: BI.VerticalAlign.Top, verticalAlign: VerticalAlign.Top,
rowSize: [], rowSize: [],
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() {
var self = this, o = this.options; const o = this.options;
if (o.verticalAlign === BI.VerticalAlign.Top) { if (o.verticalAlign === VerticalAlign.Top) {
return { return {
type: "bi.vertical", type: "bi.vertical",
ref: function (_ref) { ref: _ref => {
self.layout = _ref; this.layout = _ref;
}, },
items: this._formatItems(o.items), items: this._formatItems(o.items),
vgap: o.vgap, vgap: o.vgap,
@ -32,22 +39,23 @@ BI.FloatHorizontalLayout = BI.inherit(BI.Layout, {
bgap: o.bgap, bgap: o.bgap,
scrollx: o.scrollx, scrollx: o.scrollx,
scrolly: o.scrolly, scrolly: o.scrolly,
scrollable: o.scrollable scrollable: o.scrollable,
}; };
} }
return { return {
type: "bi.inline", type: "bi.inline",
items: [{ items: [{
el: { el: {
type: "bi.vertical", type: "bi.vertical",
ref: function (_ref) { ref: _ref => {
self.layout = _ref; this.layout = _ref;
}, },
items: this._formatItems(o.items), items: this._formatItems(o.items),
vgap: o.vgap, vgap: o.vgap,
tgap: o.tgap, tgap: o.tgap,
bgap: o.bgap bgap: o.bgap,
} },
}], }],
horizontalAlign: o.horizontalAlign, horizontalAlign: o.horizontalAlign,
verticalAlign: o.verticalAlign, verticalAlign: o.verticalAlign,
@ -55,13 +63,14 @@ BI.FloatHorizontalLayout = BI.inherit(BI.Layout, {
innerVgap: o.innerVgap, innerVgap: o.innerVgap,
scrollx: o.scrollx, scrollx: o.scrollx,
scrolly: o.scrolly, scrolly: o.scrolly,
scrollable: o.scrollable scrollable: o.scrollable,
}; };
}, }
_formatItems: function (items) { _formatItems(items) {
var o = this.options; const o = this.options;
return BI.map(items, function (i, item) {
return map(items, (i, item) => {
return { return {
el: { el: {
type: "bi.inline_horizontal_adapt", type: "bi.inline_horizontal_adapt",
@ -69,18 +78,17 @@ BI.FloatHorizontalLayout = BI.inherit(BI.Layout, {
items: [item], items: [item],
hgap: o.hgap, hgap: o.hgap,
lgap: o.lgap, lgap: o.lgap,
rgap: o.rgap rgap: o.rgap,
} },
}; };
}); });
}, }
resize: function () { resize() {
this.layout.stroke(this._formatItems(this.options.items)); this.layout.stroke(this._formatItems(this.options.items));
}, }
populate: function (items) { populate(items) {
this.layout.populate(this._formatItems(items)); this.layout.populate(this._formatItems(items));
} }
}); }
BI.shortcut("bi.horizontal_float", BI.FloatHorizontalLayout);

5
src/core/wrapper/layout/float/index.js

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

6
src/core/wrapper/layout/index.js

@ -15,3 +15,9 @@ export { TdLayout } from "./layout.td";
export { VerticalLayout } from "./layout.vertical"; export { VerticalLayout } from "./layout.vertical";
export { WindowLayout } from "./layout.window"; export { WindowLayout } from "./layout.window";
export * from "./adapt"; export * from "./adapt";
export * from "./fill";
export * from "./flex";
export * from "./float";
export * from "./middle";
export * from "./responsive";
export * from "./sticky";

4
src/core/wrapper/layout/middle/index.js

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

76
src/core/wrapper/layout/middle/middle.center.js

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

83
src/core/wrapper/layout/middle/middle.float.center.js

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

77
src/core/wrapper/layout/middle/middle.horizontal.js

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

68
src/core/wrapper/layout/middle/middle.vertical.js

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

3
src/core/wrapper/layout/responsive/index.js

@ -0,0 +1,3 @@
export { ResponsiveFlexHorizontalLayout } from "./responsive.flex.horizontal";
export { ResponsiveFlexWrapperHorizontalLayout } from "./responsive.flex.wrapper.horizontal";
export { ResponsiveInlineLayout } from "./responsive.inline";

68
src/core/wrapper/layout/responsive/responsive.flex.horizontal.js

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

72
src/core/wrapper/layout/responsive/responsive.flex.wrapper.horizontal.js

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

50
src/core/wrapper/layout/responsive/responsive.inline..js

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

58
src/core/wrapper/layout/responsive/responsive.inline.js

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

2
src/core/wrapper/layout/sticky/index.js

@ -0,0 +1,2 @@
export { HorizontalStickyLayout } from "./sticky.horizontal";
export { VerticalStickyLayout } from "./sticky.vertical";

42
src/core/wrapper/layout/sticky/sticky.horizontal.js

@ -1,29 +1,37 @@
import { shortcut } from "@/core/decorator";
import { extend, count, isNotNull } from "@/core/2.base";
import { VerticalAlign } from "@/core/constant";
import { FlexHorizontalLayout } from "../flex";
/** /**
* 横向黏性布局 * 横向黏性布局
*/ */
BI.HorizontalStickyLayout = BI.inherit(BI.FlexHorizontalLayout, { @shortcut()
props: function () { export class HorizontalStickyLayout extends FlexHorizontalLayout {
return BI.extend(BI.HorizontalStickyLayout.superclass.props.apply(this, arguments), { static xtype = "bi.horizontal_sticky";
props() {
return extend(super.props(...arguments), {
extraCls: "bi-h-sticky", extraCls: "bi-h-sticky",
scrollx: true, scrollx: true,
// horizontalAlign: BI.HorizontalAlign.Stretch, // horizontalAlign: HorizontalAlign.Stretch,
verticalAlign: BI.VerticalAlign.Stretch verticalAlign: VerticalAlign.Stretch,
}); });
}, }
_addElement: function (i, item) { _addElement(i, item) {
var o = this.options; const o = this.options;
var w = BI.HorizontalStickyLayout.superclass._addElement.apply(this, arguments); const w = super._addElement(...arguments);
var columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width; let columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width;
if (o.columnSize.length > 0) { if (o.columnSize.length > 0) {
if (item.width >= 1 && o.columnSize[i] >= 1 && o.columnSize[i] !== item.width) { if (item.width >= 1 && o.columnSize[i] >= 1 && o.columnSize[i] !== item.width) {
columnSize = null; columnSize = null;
} }
} }
if (columnSize !== "fill") { if (columnSize !== "fill") {
var fillIndex; let fillIndex;
BI.count(0, o.items.length, index => { count(0, o.items.length, index => {
if (BI.isNotNull(fillIndex)) { if (isNotNull(fillIndex)) {
return; return;
} }
if ((o.columnSize[index] === "fill" || o.items[index].width === "fill")) { if ((o.columnSize[index] === "fill" || o.items[index].width === "fill")) {
@ -41,15 +49,15 @@ BI.HorizontalStickyLayout = BI.inherit(BI.FlexHorizontalLayout, {
w.element.css({ w.element.css({
position: "sticky", position: "sticky",
zIndex: 1, zIndex: 1,
right: 0 right: 0,
}); });
} }
} else { } else {
w.element.css({ w.element.css({
overflow: "" overflow: "",
}); });
} }
return w; return w;
} }
}); }
BI.shortcut("bi.horizontal_sticky", BI.HorizontalStickyLayout);

42
src/core/wrapper/layout/sticky/sticky.vertical.js

@ -1,29 +1,37 @@
import { shortcut } from "@/core/decorator";
import { extend, count, isNotNull } from "@/core/2.base";
import { HorizontalAlign } from "@/core/constant";
import { FlexVerticalLayout } from "../flex";
/** /**
* 纵向黏性布局 * 纵向黏性布局
*/ */
BI.VerticalStickyLayout = BI.inherit(BI.FlexVerticalLayout, { @shortcut()
props: function () { export class VerticalStickyLayout extends FlexVerticalLayout {
return BI.extend(BI.VerticalStickyLayout.superclass.props.apply(this, arguments), { static xtype = "bi.vertical_sticky";
props() {
return extend(super.props(...arguments), {
extraCls: "bi-v-sticky", extraCls: "bi-v-sticky",
scrolly: true, scrolly: true,
horizontalAlign: BI.HorizontalAlign.Stretch, horizontalAlign: HorizontalAlign.Stretch,
// verticalAlign: BI.VerticalAlign.Stretch // verticalAlign: VerticalAlign.Stretch
}); });
}, }
_addElement: function (i, item) { _addElement(i, item) {
var o = this.options; const o = this.options;
var w = BI.VerticalStickyLayout.superclass._addElement.apply(this, arguments); const w = super._addElement(...arguments);
var rowSize = o.rowSize.length > 0 ? o.rowSize[i] : item.height; let rowSize = o.rowSize.length > 0 ? o.rowSize[i] : item.height;
if (o.rowSize.length > 0) { if (o.rowSize.length > 0) {
if (item.height >= 1 && o.rowSize[i] >= 1 && o.rowSize[i] !== item.height) { if (item.height >= 1 && o.rowSize[i] >= 1 && o.rowSize[i] !== item.height) {
rowSize = null; rowSize = null;
} }
} }
if (rowSize !== "fill") { if (rowSize !== "fill") {
var fillIndex; let fillIndex;
BI.count(0, o.items.length, index => { count(0, o.items.length, index => {
if (BI.isNotNull(fillIndex)) { if (isNotNull(fillIndex)) {
return; return;
} }
if ((o.rowSize[index] === "fill" || o.items[index].height === "fill")) { if ((o.rowSize[index] === "fill" || o.items[index].height === "fill")) {
@ -41,15 +49,15 @@ BI.VerticalStickyLayout = BI.inherit(BI.FlexVerticalLayout, {
w.element.css({ w.element.css({
position: "sticky", position: "sticky",
zIndex: 1, zIndex: 1,
bottom: 0 bottom: 0,
}); });
} }
} else { } else {
w.element.css({ w.element.css({
overflow: "" overflow: "",
}); });
} }
return w; return w;
} }
}); }
BI.shortcut("bi.vertical_sticky", BI.VerticalStickyLayout);

Loading…
Cancel
Save