From 1a6bde32e4d211ba803ec47a03b48b8f70ba79e9 Mon Sep 17 00:00:00 2001 From: guy Date: Sun, 25 Jul 2021 21:08:11 +0800 Subject: [PATCH] =?UTF-8?q?=E5=B8=83=E5=B1=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../layout/float/float.absolute.center.js | 36 +++++++++++ .../layout/float/float.absolute.horizontal.js | 64 +++++++++++++++++++ .../layout/float/float.absolute.vertical.js | 64 +++++++++++++++++++ .../{adapt => float}/float.horizontal.js | 0 src/less/core/wrapper/float.absolute.less | 27 ++++++++ 5 files changed, 191 insertions(+) create mode 100644 src/core/wrapper/layout/float/float.absolute.center.js create mode 100644 src/core/wrapper/layout/float/float.absolute.horizontal.js create mode 100644 src/core/wrapper/layout/float/float.absolute.vertical.js rename src/core/wrapper/layout/{adapt => float}/float.horizontal.js (100%) create mode 100644 src/less/core/wrapper/float.absolute.less diff --git a/src/core/wrapper/layout/float/float.absolute.center.js b/src/core/wrapper/layout/float/float.absolute.center.js new file mode 100644 index 000000000..8781927fb --- /dev/null +++ b/src/core/wrapper/layout/float/float.absolute.center.js @@ -0,0 +1,36 @@ +/** + * absolute实现的居中布局 + * @class BI.FloatAbsoluteCenterLayout + * @extends BI.Layout + */ +BI.FloatAbsoluteCenterLayout = BI.inherit(BI.Layout, { + props: function () { + return BI.extend(BI.FloatAbsoluteCenterLayout.superclass.props.apply(this, arguments), { + baseCls: "bi-fl-abs-c-a", + }); + }, + + render: function () { + BI.FloatAbsoluteCenterLayout.superclass.render.apply(this, arguments); + this.populate(this.options.items); + }, + + _addElement: function (i, item) { + var o = this.options; + var w = BI.FloatAbsoluteCenterLayout.superclass._addElement.apply(this, arguments); + w.element.addClass("bi-abs-c-item").css({ + position: "absolute", + }); + return w; + }, + + resize: function () { + // console.log("float_absolute_center_adapt布局不需要resize"); + }, + + populate: function (items) { + BI.FloatAbsoluteCenterLayout.superclass.populate.apply(this, arguments); + this._mount(); + } +}); +BI.shortcut("bi.float_absolute_center_adapt", BI.FloatAbsoluteCenterLayout); diff --git a/src/core/wrapper/layout/float/float.absolute.horizontal.js b/src/core/wrapper/layout/float/float.absolute.horizontal.js new file mode 100644 index 000000000..9ba904d81 --- /dev/null +++ b/src/core/wrapper/layout/float/float.absolute.horizontal.js @@ -0,0 +1,64 @@ +/** + * absolute实现的居中布局 + * @class BI.FloatAbsoluteHorizontalLayout + * @extends BI.Layout + */ +BI.FloatAbsoluteHorizontalLayout = BI.inherit(BI.Layout, { + props: function () { + return BI.extend(BI.FloatAbsoluteHorizontalLayout.superclass.props.apply(this, arguments), { + baseCls: "bi-abs-h-a", + horizontalAlign: BI.HorizontalAlign.Center, + rowSize: [], + vgap: 0, + tgap: 0, + bgap: 0 + }); + }, + + render: function () { + var self = this, o = this.options; + BI.FloatAbsoluteHorizontalLayout.superclass.render.apply(this, arguments); + return { + type: "bi.vtape", + horizontalAlign: o.horizontalAlign, + rowSize: o.rowSize, + items: this._formatItems(o.items), + scrollx: o.scrollx, + scrolly: o.scrolly, + scrollable: o.scrollable, + ref: function (_ref) { + self.layout = _ref; + }, + hgap: "50%", + vgap: o.vgap, + lgap: o.lgap, + rgap: o.rgap, + tgap: o.tgap, + bgap: o.bgap + }; + }, + + _formatItems: function (items) { + return BI.map(items, function (i, item) { + if(!item || BI.isEmptyObject(item)){ + return item; + } + var el = BI.stripEL(item); + if(BI.isWidget(el)){ + el.element.addClass("bi-abs-c-x-item"); + } else { + el.cls = (el.cls || "") + "bi-abs-c-x-item"; + } + return item; + }); + }, + + resize: function () { + // console.log("float_absolute_horizontal_adapt布局不需要resize"); + }, + + populate: function (items) { + this.layout.populate.apply(this, arguments); + } +}); +BI.shortcut("bi.float_absolute_horizontal_adapt", BI.FloatAbsoluteHorizontalLayout); diff --git a/src/core/wrapper/layout/float/float.absolute.vertical.js b/src/core/wrapper/layout/float/float.absolute.vertical.js new file mode 100644 index 000000000..9e19cec0a --- /dev/null +++ b/src/core/wrapper/layout/float/float.absolute.vertical.js @@ -0,0 +1,64 @@ +/** + * absolute实现的居中布局 + * @class BI.FloatAbsoluteVerticalLayout + * @extends BI.Layout + */ +BI.FloatAbsoluteVerticalLayout = BI.inherit(BI.Layout, { + props: function () { + return BI.extend(BI.FloatAbsoluteVerticalLayout.superclass.props.apply(this, arguments), { + baseCls: "bi-abs-h-a", + verticalAlign: BI.VerticalAlign.Middle, + columnSize: [], + hgap: 0, + lgap: 0, + rgap: 0 + }); + }, + + render: function () { + var self = this, o = this.options; + BI.FloatAbsoluteVerticalLayout.superclass.render.apply(this, arguments); + return { + type: "bi.htape", + verticalAlign: o.verticalAlign, + columnSize: o.columnSize, + items: this._formatItems(o.items), + scrollx: o.scrollx, + scrolly: o.scrolly, + scrollable: o.scrollable, + ref: function (_ref) { + self.layout = _ref; + }, + vgap: "50%", + hgap: o.hgap, + lgap: o.lgap, + rgap: o.rgap, + tgap: o.tgap, + bgap: o.bgap + }; + }, + + _formatItems: function (items) { + return BI.map(items, function (i, item) { + if(!item || BI.isEmptyObject(item)){ + return item; + } + var el = BI.stripEL(item); + if(BI.isWidget(el)){ + el.element.addClass("bi-abs-c-y-item"); + } else { + el.cls = (el.cls || "") + "bi-abs-c-y-item"; + } + return item; + }); + }, + + resize: function () { + // console.log("float_absolute_vertical_adapt布局不需要resize"); + }, + + populate: function (items) { + this.layout.populate.apply(this, arguments); + } +}); +BI.shortcut("bi.float_absolute_vertical_adapt", BI.FloatAbsoluteVerticalLayout); diff --git a/src/core/wrapper/layout/adapt/float.horizontal.js b/src/core/wrapper/layout/float/float.horizontal.js similarity index 100% rename from src/core/wrapper/layout/adapt/float.horizontal.js rename to src/core/wrapper/layout/float/float.horizontal.js diff --git a/src/less/core/wrapper/float.absolute.less b/src/less/core/wrapper/float.absolute.less new file mode 100644 index 000000000..8461b68e1 --- /dev/null +++ b/src/less/core/wrapper/float.absolute.less @@ -0,0 +1,27 @@ +.bi-abs-c-x-item { + left: 50%; + -ms-transform: translateX(-50%); /* IE 9 */ + -moz-transform: translateX(-50%); /* Firefox */ + -webkit-transform: translateX(-50%); /* Safari 和 Chrome */ + -o-transform: translateX(-50%); /* Opera */ + transform: translateX(-50%); +} + +.bi-abs-c-y-item { + top: 50%; + -ms-transform: translateY(-50%); /* IE 9 */ + -moz-transform: translateY(-50%); /* Firefox */ + -webkit-transform: translateY(-50%); /* Safari 和 Chrome */ + -o-transform: translateY(-50%); /* Opera */ + transform: translateY(-50%); +} + +.bi-abs-c-item { + top: 50%; + left: 50%; + -ms-transform: translate(-50%, -50%); /* IE 9 */ + -moz-transform: translate(-50%, -50%); /* Firefox */ + -webkit-transform: translate(-50%, -50%); /* Safari 和 Chrome */ + -o-transform: translate(-50%, -50%); /* Opera */ + transform: translate(-50%, -50%); +} \ No newline at end of file