From 0ac1e8483ca229410b2daa20564c9da6f4a0f3c9 Mon Sep 17 00:00:00 2001 From: "Zhenfei.Li" Date: Tue, 15 Nov 2022 11:44:55 +0800 Subject: [PATCH 1/2] =?UTF-8?q?KERNEL-13521=20refactor:=20segment=E4=BD=BF?= =?UTF-8?q?=E7=94=A8grid=E5=B8=83=E5=B1=80=EF=BC=8C=E4=BD=BF=E5=85=B6?= =?UTF-8?q?=E9=BB=98=E8=AE=A4=E4=BD=BF=E7=94=A8=E6=9C=80=E9=95=BF=E9=A1=B9?= =?UTF-8?q?=E5=AE=BD=E5=BA=A6=E7=AD=89=E5=88=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- demo/js/case/demo.segment.js | 8 ++++---- src/case/segment/segment.js | 11 +++++------ src/less/base/segment/segment.less | 2 +- 3 files changed, 10 insertions(+), 11 deletions(-) diff --git a/demo/js/case/demo.segment.js b/demo/js/case/demo.segment.js index 8831c11f3..f6b2b0068 100644 --- a/demo/js/case/demo.segment.js +++ b/demo/js/case/demo.segment.js @@ -5,20 +5,20 @@ Demo.Func = BI.inherit(BI.Widget, { render: function () { BI.createWidget({ - type: "bi.vertical", + type: "bi.horizontal", element: this, vgap: 20, hgap: 30, items: [{ type: "bi.segment", items: [{ - text: "1", + text: "较长的选项1", value: 1 }, { - text: "2", + text: "选项2", value: 2 }, { - text: "3", + text: "选项3", value: 3 }] }] diff --git a/src/case/segment/segment.js b/src/case/segment/segment.js index dac7754d1..ef52ae24a 100644 --- a/src/case/segment/segment.js +++ b/src/case/segment/segment.js @@ -23,13 +23,12 @@ BI.Segment = BI.inherit(BI.Widget, { items: BI.createItems(o.items, { type: "bi.segment_button", height: BI.toPix(o.height, 2), - whiteSpace: o.whiteSpace + whiteSpace: o.whiteSpace, }), - layout: [ - { - type: "bi.center" - } - ] + layouts: o.layouts || [{ + type: "bi.table", + columnSize: BI.makeArrayByArray(o.items, "fill"), + }], }); this.buttonGroup.on(BI.Controller.EVENT_CHANGE, function () { self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); diff --git a/src/less/base/segment/segment.less b/src/less/base/segment/segment.less index 69aa01dbc..74ffe2f16 100644 --- a/src/less/base/segment/segment.less +++ b/src/less/base/segment/segment.less @@ -7,7 +7,7 @@ border-top: 1px solid @color-bi-split-segment; border-bottom: 1px solid @color-bi-split-segment; } - & > .first-element{ + & > .first-element, & > .first-row{ border-left: 1px solid @color-bi-split-segment; .border-corner-radius(2px,0px,0px,2px) } From b5bdace1fbbd6ee371dac0708a62e5240d21368c Mon Sep 17 00:00:00 2001 From: "Zhenfei.Li" Date: Tue, 15 Nov 2022 17:17:06 +0800 Subject: [PATCH 2/2] =?UTF-8?q?KERNEL-13521=20refactor:=20segment=E8=B0=83?= =?UTF-8?q?=E6=95=B4&=E8=A1=8C=E5=88=97=E5=B8=83=E5=B1=80=E7=9A=84?= =?UTF-8?q?=E7=B1=BB=E5=90=8D=E6=96=B9=E6=B3=95=E6=8A=BD=E5=88=B0layout?= =?UTF-8?q?=E4=B8=8A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- demo/js/case/demo.segment.js | 16 +++--- src/case/segment/segment.js | 12 ++--- src/core/wrapper/layout.js | 21 +++++++- src/core/wrapper/layout/layout.division.js | 44 ++++++--------- src/core/wrapper/layout/layout.grid.js | 31 ++++------- src/core/wrapper/layout/layout.table.js | 62 +++++++++------------- src/core/wrapper/layout/layout.window.js | 39 +++++--------- src/less/base/segment/segment.less | 8 +-- 8 files changed, 101 insertions(+), 132 deletions(-) diff --git a/demo/js/case/demo.segment.js b/demo/js/case/demo.segment.js index f6b2b0068..946c5d952 100644 --- a/demo/js/case/demo.segment.js +++ b/demo/js/case/demo.segment.js @@ -1,6 +1,6 @@ Demo.Func = BI.inherit(BI.Widget, { props: { - baseCls: "demo-func" + baseCls: "demo-func", }, render: function () { @@ -13,16 +13,16 @@ Demo.Func = BI.inherit(BI.Widget, { type: "bi.segment", items: [{ text: "较长的选项1", - value: 1 + value: 1, }, { text: "选项2", - value: 2 + value: 2, }, { text: "选项3", - value: 3 - }] - }] + value: 3, + }], + }], }); - } + }, }); -BI.shortcut("demo.segment", Demo.Func); \ No newline at end of file +BI.shortcut("demo.segment", Demo.Func); diff --git a/src/case/segment/segment.js b/src/case/segment/segment.js index ef52ae24a..3f323ffb6 100644 --- a/src/case/segment/segment.js +++ b/src/case/segment/segment.js @@ -10,7 +10,7 @@ BI.Segment = BI.inherit(BI.Widget, { return BI.extend(BI.Segment.superclass._defaultConfig.apply(this, arguments), { baseCls: "bi-segment", items: [], - height: 24 + height: 24, }); }, _init: function () { @@ -20,12 +20,12 @@ BI.Segment = BI.inherit(BI.Widget, { element: this, type: "bi.button_group", value: o.value, - items: BI.createItems(o.items, { + items: [BI.createItems(o.items, { type: "bi.segment_button", height: BI.toPix(o.height, 2), whiteSpace: o.whiteSpace, - }), - layouts: o.layouts || [{ + })], + layouts: [{ type: "bi.table", columnSize: BI.makeArrayByArray(o.items, "fill"), }], @@ -57,7 +57,7 @@ BI.Segment = BI.inherit(BI.Widget, { getValue: function () { return this.buttonGroup.getValue(); - } + }, }); BI.Segment.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.segment", BI.Segment); \ No newline at end of file +BI.shortcut("bi.segment", BI.Segment); diff --git a/src/core/wrapper/layout.js b/src/core/wrapper/layout.js index 8ca284d30..d2926385d 100644 --- a/src/core/wrapper/layout.js +++ b/src/core/wrapper/layout.js @@ -16,7 +16,7 @@ BI.Layout = BI.inherit(BI.Widget, { scrolly: false, // true, false items: [], innerHgap: 0, - innerVgap: 0 + innerVgap: 0, }; }, @@ -727,6 +727,25 @@ BI.Layout = BI.inherit(BI.Widget, { }); }, + getRowColumnCls: function (rowIndex, colIndex, lastRowIndex, lastColIndex) { + var cls = ""; + if (rowIndex === 0) { + cls += " first-row"; + } else if (rowIndex === lastRowIndex) { + cls += " last-row"; + } + if (colIndex === 0) { + cls += " first-col"; + } else if (colIndex === lastColIndex) { + cls += " last-col"; + } + BI.isOdd(rowIndex + 1) ? (cls += " odd-row") : (cls += " even-row"); + BI.isOdd(colIndex + 1) ? (cls += " odd-col") : (cls += " even-col"); + cls += " center-element"; + + return cls; + }, + removeWidget: function (nameOrWidget) { var removeIndex, self = this; if (BI.isWidget(nameOrWidget)) { diff --git a/src/core/wrapper/layout/layout.division.js b/src/core/wrapper/layout/layout.division.js index 988d118be..307166283 100644 --- a/src/core/wrapper/layout/layout.division.js +++ b/src/core/wrapper/layout/layout.division.js @@ -28,44 +28,31 @@ BI.DivisionLayout = BI.inherit(BI.Layout, { }, stroke: function (items) { - var o = this.options; + var o = this.options, self = this; var rows = o.rows || o.items.length, columns = o.columns || ((o.items[0] && o.items[0].length) | 0); var map = BI.makeArray(rows), widths = {}, heights = {}; - function firstElement (item, row, col) { - if (row === 0) { - item.addClass("first-row"); - } - if (col === 0) { - item.addClass("first-col"); - } - item.addClass(BI.isOdd(row + 1) ? "odd-row" : "even-row"); - item.addClass(BI.isOdd(col + 1) ? "odd-col" : "even-col"); - item.addClass("center-element"); + function firstElement (item, cls) { + item.addClass(cls); + + return item; } - function firstObject (item, row, col) { - var cls = ""; - if (row === 0) { - cls += " first-row"; - } - if (col === 0) { - cls += " first-col"; - } - BI.isOdd(row + 1) ? (cls += " odd-row") : (cls += " even-row"); - BI.isOdd(col + 1) ? (cls += " odd-col") : (cls += " even-col"); - item.cls = (item.cls || "") + cls + " center-element"; + function firstObject (item, cls) { + item.cls = (item.cls || "") + cls; + + return item; } - function first (item, row, col) { + function first (item, cls) { if (item instanceof BI.Widget) { - firstElement(item.element, row, col); + firstElement(item.element, cls); } else if (item.el instanceof BI.Widget) { - firstElement(item.el.element, row, col); + firstElement(item.el.element, cls); } else if (item.el) { - firstObject(item.el, row, col); + firstObject(item.el, cls); } else { - firstObject(item, row, col); + firstObject(item, cls); } } @@ -79,6 +66,7 @@ BI.DivisionLayout = BI.inherit(BI.Layout, { heights[j] = (heights[j] || 0) + item.height; map[i][j] = el; }); + return; } widths[item.row] = (widths[item.row] || 0) + item.width; @@ -106,7 +94,7 @@ BI.DivisionLayout = BI.inherit(BI.Layout, { if (j == o.columns - 1) { w.element.css({right: "0%"}); } - first(w, i, j); + first(w, self.getRowColumnCls(i, j, rows - 1, columns - 1)); totalW += map[i][j].width; } } diff --git a/src/core/wrapper/layout/layout.grid.js b/src/core/wrapper/layout/layout.grid.js index a81c31681..53e4cf00b 100644 --- a/src/core/wrapper/layout/layout.grid.js +++ b/src/core/wrapper/layout/layout.grid.js @@ -36,29 +36,16 @@ BI.GridLayout = BI.inherit(BI.Layout, { els[i] = []; } - function firstElement (item, row, col) { - if (row === 0) { - item.addClass("first-row"); - } - if (col === 0) { - item.addClass("first-col"); - } - item.addClass(BI.isOdd(row + 1) ? "odd-row" : "even-row"); - item.addClass(BI.isOdd(col + 1) ? "odd-col" : "even-col"); - item.addClass("center-element"); + function firstElement (item, cls) { + item.addClass(cls); + + return item; } - function firstObject (item, row, col) { - var cls = ""; - if (row === 0) { - cls += " first-row"; - } - if (col === 0) { - cls += " first-col"; - } - BI.isOdd(row + 1) ? (cls += " odd-row") : (cls += " even-row"); - BI.isOdd(col + 1) ? (cls += " odd-col") : (cls += " even-col"); - item.cls = (item.cls || "") + cls + " center-element"; + function firstObject (item, cls) { + item.cls = (item.cls || "") + cls; + + return item; } function first (item, row, col) { @@ -89,7 +76,7 @@ BI.GridLayout = BI.inherit(BI.Layout, { type: "bi.layout" }); } - first(els[i][j], i, j); + first(els[i][j], self.getRowColumnCls(i, j, rows - 1, columns - 1)); els[i][j].element.css({ position: "absolute", top: height * i + "%", diff --git a/src/core/wrapper/layout/layout.table.js b/src/core/wrapper/layout/layout.table.js index 6352672c2..51d6eeb14 100644 --- a/src/core/wrapper/layout/layout.table.js +++ b/src/core/wrapper/layout/layout.table.js @@ -16,7 +16,7 @@ BI.TableLayout = BI.inherit(BI.Layout, { // rowSize: 30, // or [30,30,30] hgap: 0, vgap: 0, - items: [] + items: [], }); }, render: function () { @@ -45,57 +45,43 @@ BI.TableLayout = BI.inherit(BI.Layout, { return self._optimiseGap(size); }).join(" ") : BI.range(o.items.length).fill(this._optimiseGap(o.rowSize)).join(" "), "grid-row-gap": this._optimiseGap(o.vgap), - "grid-column-gap": this._optimiseGap(o.hgap) + "grid-column-gap": this._optimiseGap(o.hgap), }); } + return { type: "bi.default", ref: function (_ref) { self.layout = _ref; }, - items: this._formatItems(items) + items: this._formatItems(items), }; }, _formatItems: function (items) { - var o = this.options; + var o = this.options, self = this; + + function firstElement (item, cls) { + item.addClass(cls); - function firstElement (item, row, col) { - if (row === 0) { - item.addClass("first-row"); - } - if (col === 0) { - item.addClass("first-col"); - } - item.addClass(BI.isOdd(row + 1) ? "odd-row" : "even-row"); - item.addClass(BI.isOdd(col + 1) ? "odd-col" : "even-col"); - item.addClass("center-element"); return item; } - function firstObject (item, row, col) { - var cls = ""; - if (row === 0) { - cls += " first-row"; - } - if (col === 0) { - cls += " first-col"; - } - BI.isOdd(row + 1) ? (cls += " odd-row") : (cls += " even-row"); - BI.isOdd(col + 1) ? (cls += " odd-col") : (cls += " even-col"); - item.cls = (item.cls || "") + cls + " center-element"; + function firstObject (item, cls) { + item.cls = (item.cls || "") + cls; + return item; } - function first (item, row, col) { + function first (item, cls) { if (item instanceof BI.Widget) { - return firstElement(item.element, row, col); + return firstElement(item.element, cls); } else if (item.el instanceof BI.Widget) { - return firstElement(item.el.element, row, col); + return firstElement(item.el.element, cls); } else if (item.el) { - return firstObject(item.el, row, col); + return firstObject(item.el, cls); } else { - return firstObject(item, row, col); + return firstObject(item, cls); } } @@ -105,18 +91,20 @@ BI.TableLayout = BI.inherit(BI.Layout, { columnSize: ["fill"], horizontalAlign: o.horizontalAlign, verticalAlign: o.verticalAlign, - items: [BI.formatEL(item)] + items: [BI.formatEL(item)], }; } - return BI.reduce(items, function (row, result, i) { - return result.concat(BI.map(row, function (j, item) { + return BI.reduce(items, function (rowItems, result, rowIndex) { + return result.concat(BI.map(rowItems, function (colIndex, item) { + var cls = self.getRowColumnCls(rowIndex, colIndex, items.length - 1, rowItems.length - 1); if (BI.isEmpty(item)) { return first(wrapLayout({ - type: "bi.layout" - }), i, j); + type: "bi.layout", + }), cls); } - return first(wrapLayout(item), i, j); + + return first(wrapLayout(item), cls); })); }, []); }, @@ -127,6 +115,6 @@ BI.TableLayout = BI.inherit(BI.Layout, { populate: function (items) { this.layout.populate(this._formatItems(items)); - } + }, }); BI.shortcut("bi.table", BI.TableLayout); diff --git a/src/core/wrapper/layout/layout.window.js b/src/core/wrapper/layout/layout.window.js index c7d14623c..a6e6c6a26 100644 --- a/src/core/wrapper/layout/layout.window.js +++ b/src/core/wrapper/layout/layout.window.js @@ -35,7 +35,7 @@ BI.WindowLayout = BI.inherit(BI.Layout, { }, stroke: function (items) { - var o = this.options; + var o = this.options, self = this; if (BI.isNumber(o.rowSize)) { o.rowSize = BI.makeArray(o.items.length, 1 / o.items.length); } @@ -43,29 +43,16 @@ BI.WindowLayout = BI.inherit(BI.Layout, { o.columnSize = BI.makeArray(o.items[0].length, 1 / o.items[0].length); } - function firstElement (item, row, col) { - if (row === 0) { - item.addClass("first-row"); - } - if (col === 0) { - item.addClass("first-col"); - } - item.addClass(BI.isOdd(row + 1) ? "odd-row" : "even-row"); - item.addClass(BI.isOdd(col + 1) ? "odd-col" : "even-col"); - item.addClass("center-element"); + function firstElement (item, cls) { + item.addClass(cls); + + return item; } - function firstObject (item, row, col) { - var cls = ""; - if (row === 0) { - cls += " first-row"; - } - if (col === 0) { - cls += " first-col"; - } - BI.isOdd(row + 1) ? (cls += " odd-row") : (cls += " even-row"); - BI.isOdd(col + 1) ? (cls += " odd-col") : (cls += " even-col"); - item.cls = (item.cls || "") + cls + " center-element"; + function firstObject (item, cls) { + item.cls = (item.cls || "") + cls; + + return item; } function first (item, row, col) { @@ -109,7 +96,7 @@ BI.WindowLayout = BI.inherit(BI.Layout, { h = this._optimiseGap(o.rowSize[i]); } wi.element.css({top: t, height: h}); - first(wi, i, j); + first(wi, self.getRowColumnCls(i, j, o.rows - 1, o.columns - 1)); } if (!BI.isNumber(o.rowSize[i])) { break; @@ -127,7 +114,7 @@ BI.WindowLayout = BI.inherit(BI.Layout, { h = this._optimiseGap(o.rowSize[i]); } wi.element.css({bottom: b, height: h}); - first(wi, i, j); + first(wi, self.getRowColumnCls(i, j, o.rows - 1, o.columns - 1)); } if (!BI.isNumber(o.rowSize[i])) { break; @@ -145,7 +132,7 @@ BI.WindowLayout = BI.inherit(BI.Layout, { w = this._optimiseGap(o.columnSize[j]); } wi.element.css({left: l, width: w}); - first(wi, i, j); + first(wi, self.getRowColumnCls(i, j, o.rows - 1, o.columns - 1)); } if (!BI.isNumber(o.columnSize[j])) { break; @@ -163,7 +150,7 @@ BI.WindowLayout = BI.inherit(BI.Layout, { w = this._optimiseGap(o.columnSize[j]); } wi.element.css({right: r, width: w}); - first(wi, i, j); + first(wi, self.getRowColumnCls(i, j, o.rows - 1, o.columns - 1)); } if (!BI.isNumber(o.columnSize[j])) { break; diff --git a/src/less/base/segment/segment.less b/src/less/base/segment/segment.less index 74ffe2f16..08fec037a 100644 --- a/src/less/base/segment/segment.less +++ b/src/less/base/segment/segment.less @@ -7,14 +7,14 @@ border-top: 1px solid @color-bi-split-segment; border-bottom: 1px solid @color-bi-split-segment; } - & > .first-element, & > .first-row{ + & > .first-col{ border-left: 1px solid @color-bi-split-segment; .border-corner-radius(2px,0px,0px,2px) } - & > .last-element{ + & > .last-col{ .border-corner-radius(0px,2px,2px,0px) } - &.disabled > .center-element, &.disabled > .first-element{ + &.disabled > .center-element, &.disabled > .first-col{ border-color: @color-bi-split-disabled-segment; } } @@ -34,7 +34,7 @@ border-top: 1px solid @color-bi-split-segment-theme-dark; border-bottom: 1px solid @color-bi-split-segment-theme-dark; } - & > .first-element{ + & > .first-col{ border-left: 1px solid @color-bi-split-segment-theme-dark; } }