From 8191e94f0beb14b98718f5acd42d8a6dd09ab8c5 Mon Sep 17 00:00:00 2001 From: guy Date: Sat, 27 Mar 2021 21:04:39 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=B8=83=E5=B1=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../wrapper/layout/adapt/inline.center.js | 87 ++++--------------- .../wrapper/layout/adapt/inline.horizontal.js | 87 ++++--------------- .../wrapper/layout/adapt/inline.vertical.js | 74 ++++------------ src/core/wrapper/layout/layout.inline.js | 42 ++++++++- src/less/core/wrapper/inline.less | 24 +++++ 5 files changed, 117 insertions(+), 197 deletions(-) create mode 100644 src/less/core/wrapper/inline.less diff --git a/src/core/wrapper/layout/adapt/inline.center.js b/src/core/wrapper/layout/adapt/inline.center.js index e2caf07c7..0aea35ef1 100644 --- a/src/core/wrapper/layout/adapt/inline.center.js +++ b/src/core/wrapper/layout/adapt/inline.center.js @@ -25,78 +25,27 @@ BI.InlineCenterAdaptLayout = BI.inherit(BI.Layout, { }, render: function () { - BI.InlineCenterAdaptLayout.superclass.render.apply(this, arguments); - var o = this.options; - this.element.css({ - whiteSpace: "nowrap", - textAlign: o.horizontalAlign - }); - this.populate(o.items); - }, - - _addElement: function (i, item, length) { - var o = this.options; - var w = BI.InlineCenterAdaptLayout.superclass._addElement.apply(this, arguments); - w.element.css({ - width: o.columnSize[i] === "" ? "" : (o.columnSize[i] <= 1 ? ((o.columnSize[i] * 100).toFixed(1) + "%") : (o.columnSize[i] / BI.pixRatio + BI.pixUnit)), - position: "relative", - "vertical-align": o.verticalAlign - }); - w.element.addClass("i-c-a-item"); - if (o.columnSize[i] === "fill") { - var left = o.hgap + (item.lgap || 0) + (item.hgap || 0), - right = o.hgap + (item.rgap || 0) + (item.hgap || 0); - for (var k = 0; k < i; k++) { - left += o.hgap + o.lgap + o.rgap + o.columnSize[k]; - } - for (var k = i + 1; k < o.columnSize.length; k++) { - right += o.hgap + o.lgap + o.rgap + o.columnSize[k]; - } - w.element.css("min-width", "calc(100% - " + ((left + right) / BI.pixRatio + BI.pixUnit) + ")"); - } - if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) { - w.element.css({ - "margin-top": (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit - }); - } - if (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) !== 0) { - w.element.css({ - "margin-left": ((i === 0 ? o.hgap : 0) + o.lgap + (item.lgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit - }); - } - if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) { - w.element.css({ - "margin-right": (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit - }); - } - if (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) !== 0) { - w.element.css({ - "margin-bottom": (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0)) - }); - } - return w; - }, - - resize: function () { - this.stroke(this.options.items); - }, - - addItem: function (item) { - throw new Error("不能添加元素"); - }, - - stroke: function (items) { - var self = this; - BI.each(items, function (i, item) { - if (item) { - self._addElement(i, item, items.length); - } - }); + var self = this, o = this.options; + return { + type: "bi.inline", + ref: function (_ref) { + self.layout = _ref; + }, + items: o.items, + horizontalAlign: o.horizontalAlign, + verticalAlign: o.verticalAlign, + columnSize: o.columnSize, + hgap: o.hgap, + vgap: o.vgap, + lgap: o.lgap, + rgap: o.rgap, + tgap: o.tgap, + bgap: o.bgap + }; }, populate: function (items) { - BI.InlineCenterAdaptLayout.superclass.populate.apply(this, arguments); - this._mount(); + this.layout.populate.apply(this.layout, arguments); } }); BI.shortcut("bi.inline_center_adapt", BI.InlineCenterAdaptLayout); diff --git a/src/core/wrapper/layout/adapt/inline.horizontal.js b/src/core/wrapper/layout/adapt/inline.horizontal.js index 32cc6bc50..3ad1bc602 100644 --- a/src/core/wrapper/layout/adapt/inline.horizontal.js +++ b/src/core/wrapper/layout/adapt/inline.horizontal.js @@ -25,78 +25,27 @@ BI.InlineHorizontalAdaptLayout = BI.inherit(BI.Layout, { }, render: function () { - BI.InlineHorizontalAdaptLayout.superclass.render.apply(this, arguments); - var o = this.options; - this.element.css({ - whiteSpace: "nowrap", - textAlign: o.horizontalAlign - }); - this.populate(o.items); - }, - - _addElement: function (i, item, length) { - var o = this.options; - var w = BI.InlineHorizontalAdaptLayout.superclass._addElement.apply(this, arguments); - w.element.css({ - width: o.columnSize[i] === "" ? "" : (o.columnSize[i] <= 1 ? ((o.columnSize[i] * 100).toFixed(1) + "%") : (o.columnSize[i] / BI.pixRatio + BI.pixUnit)), - position: "relative", - "vertical-align": o.verticalAlign - }); - w.element.addClass("i-h-a-item"); - if (o.columnSize[i] === "fill") { - var left = o.hgap + (item.lgap || 0) + (item.hgap || 0), - right = o.hgap + (item.rgap || 0) + (item.hgap || 0); - for (var k = 0; k < i; k++) { - left += o.hgap + o.lgap + o.rgap + o.columnSize[k]; - } - for (var k = i + 1; k < o.columnSize.length; k++) { - right += o.hgap + o.lgap + o.rgap + o.columnSize[k]; - } - w.element.css("min-width", "calc(100% - " + ((left + right) / BI.pixRatio + BI.pixUnit) + ")"); - } - if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) { - w.element.css({ - "margin-top": (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit - }); - } - if (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) !== 0) { - w.element.css({ - "margin-left": ((i === 0 ? o.hgap : 0) + o.lgap + (item.lgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit - }); - } - if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) { - w.element.css({ - "margin-right": (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit - }); - } - if (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) !== 0) { - w.element.css({ - "margin-bottom": (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit - }); - } - return w; - }, - - resize: function () { - this.stroke(this.options.items); - }, - - addItem: function (item) { - throw new Error("不能添加元素"); - }, - - stroke: function (items) { - var self = this; - BI.each(items, function (i, item) { - if (item) { - self._addElement(i, item, items.length); - } - }); + var self = this, o = this.options; + return { + type: "bi.inline", + ref: function (_ref) { + self.layout = _ref; + }, + items: o.items, + horizontalAlign: o.horizontalAlign, + verticalAlign: o.verticalAlign, + columnSize: o.columnSize, + hgap: o.hgap, + vgap: o.vgap, + lgap: o.lgap, + rgap: o.rgap, + tgap: o.tgap, + bgap: o.bgap + }; }, populate: function (items) { - BI.InlineHorizontalAdaptLayout.superclass.populate.apply(this, arguments); - this._mount(); + this.layout.populate.apply(this.layout, arguments); } }); BI.shortcut("bi.inline_horizontal_adapt", BI.InlineHorizontalAdaptLayout); diff --git a/src/core/wrapper/layout/adapt/inline.vertical.js b/src/core/wrapper/layout/adapt/inline.vertical.js index 10b07d357..1e7401e46 100644 --- a/src/core/wrapper/layout/adapt/inline.vertical.js +++ b/src/core/wrapper/layout/adapt/inline.vertical.js @@ -25,65 +25,27 @@ BI.InlineVerticalAdaptLayout = BI.inherit(BI.Layout, { }, render: function () { - BI.InlineVerticalAdaptLayout.superclass.render.apply(this, arguments); - var o = this.options; - this.element.css({ - whiteSpace: "nowrap", - textAlign: o.horizontalAlign - }); - this.populate(o.items); - }, - - _addElement: function (i, item) { - var o = this.options; - var w = BI.InlineVerticalAdaptLayout.superclass._addElement.apply(this, arguments); - w.element.css({ - width: o.columnSize[i] === "" ? "" : (o.columnSize[i] <= 1 ? ((o.columnSize[i] * 100).toFixed(1) + "%") : (o.columnSize[i] / BI.pixRatio + BI.pixUnit)), - position: "relative", - "vertical-align": o.verticalAlign - }); - w.element.addClass("i-v-a-item"); - if (o.columnSize[i] === "fill") { - var left = o.hgap + (item.lgap || 0) + (item.hgap || 0), - right = o.hgap + (item.rgap || 0) + (item.hgap || 0); - for (var k = 0; k < i; k++) { - left += o.hgap + o.lgap + o.rgap + o.columnSize[k]; - } - for (var k = i + 1; k < o.columnSize.length; k++) { - right += o.hgap + o.lgap + o.rgap + o.columnSize[k]; - } - w.element.css("min-width", "calc(100% - " + ((left + right) / BI.pixRatio + BI.pixUnit) + ")"); - } - if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) { - w.element.css({ - "margin-top": (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit - }); - } - if (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) !== 0) { - w.element.css({ - "margin-left": ((i === 0 ? o.hgap : 0) + o.lgap + (item.lgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit - }); - } - if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) { - w.element.css({ - "margin-right": (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit - }); - } - if (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) !== 0) { - w.element.css({ - "margin-bottom": (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit - }); - } - return w; - }, - - resize: function () { - this.stroke(this.options.items); + var self = this, o = this.options; + return { + type: "bi.inline", + ref: function (_ref) { + self.layout = _ref; + }, + items: o.items, + horizontalAlign: o.horizontalAlign, + verticalAlign: o.verticalAlign, + columnSize: o.columnSize, + hgap: o.hgap, + vgap: o.vgap, + lgap: o.lgap, + rgap: o.rgap, + tgap: o.tgap, + bgap: o.bgap + }; }, populate: function (items) { - BI.InlineVerticalAdaptLayout.superclass.populate.apply(this, arguments); - this._mount(); + this.layout.populate.apply(this.layout, arguments); } }); BI.shortcut("bi.inline_vertical_adapt", BI.InlineVerticalAdaptLayout); diff --git a/src/core/wrapper/layout/layout.inline.js b/src/core/wrapper/layout/layout.inline.js index 864b8b35d..24078ace2 100644 --- a/src/core/wrapper/layout/layout.inline.js +++ b/src/core/wrapper/layout/layout.inline.js @@ -12,6 +12,9 @@ BI.InlineLayout = BI.inherit(BI.Layout, { props: function () { return BI.extend(BI.InlineLayout.superclass.props.apply(this, arguments), { baseCls: "bi-i", + horizontalAlign: BI.HorizontalAlign.Left, + verticalAlign: BI.VerticalAlign.Top, + columnSize: [], hgap: 0, vgap: 0, lgap: 0, @@ -23,13 +26,33 @@ BI.InlineLayout = BI.inherit(BI.Layout, { render: function () { BI.InlineLayout.superclass.render.apply(this, arguments); - this.populate(this.options.items); + var o = this.options; + this.element.css({ + textAlign: o.horizontalAlign + }); + this.populate(o.items); }, - _addElement: function (i, item) { + _addElement: function (i, item, length) { var o = this.options; var w = BI.InlineLayout.superclass._addElement.apply(this, arguments); - w.element.css({"position": "relative", display: "inline-block", "*display": "inline", "*zoom": 1}); + w.element.css({ + width: o.columnSize[i] === "" ? "" : (o.columnSize[i] <= 1 ? ((o.columnSize[i] * 100).toFixed(1) + "%") : (o.columnSize[i] / BI.pixRatio + BI.pixUnit)), + position: "relative", + "vertical-align": o.verticalAlign + }); + w.element.addClass("i-item"); + if (o.columnSize[i] === "fill") { + var left = o.hgap + (item.lgap || 0) + (item.hgap || 0), + right = o.hgap + (item.rgap || 0) + (item.hgap || 0); + for (var k = 0; k < i; k++) { + left += o.hgap + o.lgap + o.rgap + o.columnSize[k]; + } + for (var k = i + 1; k < o.columnSize.length; k++) { + right += o.hgap + o.lgap + o.rgap + o.columnSize[k]; + } + w.element.css("min-width", "calc(100% - " + ((left + right) / BI.pixRatio + BI.pixUnit) + ")"); + } if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) { w.element.css({ "margin-top": (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit @@ -57,6 +80,19 @@ BI.InlineLayout = BI.inherit(BI.Layout, { this.stroke(this.options.items); }, + addItem: function (item) { + throw new Error("不能添加元素"); + }, + + stroke: function (items) { + var self = this; + BI.each(items, function (i, item) { + if (item) { + self._addElement(i, item, items.length); + } + }); + }, + populate: function (items) { BI.InlineLayout.superclass.populate.apply(this, arguments); this._mount(); diff --git a/src/less/core/wrapper/inline.less b/src/less/core/wrapper/inline.less new file mode 100644 index 000000000..f87f98c8a --- /dev/null +++ b/src/less/core/wrapper/inline.less @@ -0,0 +1,24 @@ +.bi-i { + white-space: nowrap; + &:after { + display: inline-block; + width: 0; + min-height: 100%; + vertical-align: middle; + content: ' '; + } + + & > .i-item { + display: inline-block; + + &.x-icon { + display: inline-block !important; + } + } + + & > .bi-combo { + &.bi-combo-popup { + display: inline-block !important; + } + } +}