diff --git a/examples/config-render.html b/examples/config-render.html index ed1f38dc6..41545d3b4 100644 --- a/examples/config-render.html +++ b/examples/config-render.html @@ -2,8 +2,10 @@ - - + + +
diff --git a/examples/dev.html b/examples/dev.html index 74f0eccdb..17bfd951b 100644 --- a/examples/dev.html +++ b/examples/dev.html @@ -1,46 +1,419 @@ - - - - + + + + + PullRequest | Code Review as a Service + + + - - -
- - + element: "#wrapper", + }); + + diff --git a/examples/effect.html b/examples/effect.html index 65ebd4530..34bae9199 100644 --- a/examples/effect.html +++ b/examples/effect.html @@ -2,8 +2,10 @@ - - + + +
diff --git a/examples/hooks.html b/examples/hooks.html index 66afa9f83..c9302a0d5 100644 --- a/examples/hooks.html +++ b/examples/hooks.html @@ -2,8 +2,10 @@ - - + + +
diff --git a/examples/loader-context.html b/examples/loader-context.html index 72695cc9f..a8ba36a96 100644 --- a/examples/loader-context.html +++ b/examples/loader-context.html @@ -2,8 +2,10 @@ - - + + +
diff --git a/examples/resize.html b/examples/resize.html index 5bd99a35d..dda9edda3 100644 --- a/examples/resize.html +++ b/examples/resize.html @@ -2,8 +2,10 @@ - - + + +
diff --git a/examples/style.html b/examples/style.html index 81063b19c..339f14365 100644 --- a/examples/style.html +++ b/examples/style.html @@ -2,8 +2,10 @@ - - + + +
diff --git a/examples/tab-context.html b/examples/tab-context.html index 9e7cf33ea..6a0a2d130 100644 --- a/examples/tab-context.html +++ b/examples/tab-context.html @@ -2,8 +2,10 @@ - - + + +
diff --git a/examples/test-id.html b/examples/test-id.html index 351cfec20..7eec9e549 100644 --- a/examples/test-id.html +++ b/examples/test-id.html @@ -2,8 +2,10 @@ - - + + +
diff --git a/examples/virtual-group.html b/examples/virtual-group.html index a2e664ea4..a21a37fe6 100644 --- a/examples/virtual-group.html +++ b/examples/virtual-group.html @@ -2,8 +2,10 @@ - - + + +
diff --git a/examples/visible.html b/examples/visible.html index e2ef18d34..790d091c1 100644 --- a/examples/visible.html +++ b/examples/visible.html @@ -2,8 +2,10 @@ - - + + +
diff --git a/examples/worker.html b/examples/worker.html index e9045ab56..03cdc5be6 100644 --- a/examples/worker.html +++ b/examples/worker.html @@ -2,8 +2,10 @@ - - + + + diff --git a/examples/响应式布局.html b/examples/响应式布局.html new file mode 100644 index 000000000..6409fae87 --- /dev/null +++ b/examples/响应式布局.html @@ -0,0 +1,419 @@ + + + + + + PullRequest | Code Review as a Service + + + + + + + + + +
+ + + diff --git a/examples/插件设计.html b/examples/插件设计.html index 3c167f45f..91c2b29c8 100644 --- a/examples/插件设计.html +++ b/examples/插件设计.html @@ -2,10 +2,10 @@ - - - - + + +
diff --git a/src/core/wrapper/layout.js b/src/core/wrapper/layout.js index 04ffa4fa4..08c60b681 100644 --- a/src/core/wrapper/layout.js +++ b/src/core/wrapper/layout.js @@ -267,26 +267,69 @@ BI.Layout = BI.inherit(BI.Widget, { this.options.items.splice(index, 1); }, + _clearGap: function (w) { + w.element.css({ + "margin-top": "", + "margin-bottom": "", + "margin-left": "", + "margin-right": "", + }) + }, + _handleGap: function (w, item, hIndex, vIndex) { var o = this.options; if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) { + var top = ((BI.isNull(vIndex) || vIndex === 0) ? o.vgap : 0) + o.tgap + (item.tgap || 0) + (item.vgap || 0); w.element.css({ - "margin-top": (((BI.isNull(vIndex) || vIndex === 0) ? o.vgap : 0) + o.tgap + (item.tgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit + "margin-top": top >= 1 ? top / BI.pixRatio + BI.pixUnit : (top * 100).toFixed(1) + "%" }); } if (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) !== 0) { + var left = ((BI.isNull(hIndex) || hIndex === 0) ? o.hgap : 0) + o.lgap + (item.lgap || 0) + (item.hgap || 0); w.element.css({ - "margin-left": (((BI.isNull(hIndex) || hIndex === 0) ? o.hgap : 0) + o.lgap + (item.lgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit + "margin-left": left >= 1 ? left / BI.pixRatio + BI.pixUnit : (left * 100).toFixed(1) + "%" }); } if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) { + var right = o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0); w.element.css({ - "margin-right": (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit + "margin-right": right >= 1 ? right / BI.pixRatio + BI.pixUnit : (right * 100).toFixed(1) + "%" }); } if (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) !== 0) { + var bottom = o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0); + w.element.css({ + "margin-bottom": bottom >= 1 ? bottom / BI.pixRatio + BI.pixUnit : (bottom * 100).toFixed(1) + "%" + }); + } + }, + + // 横向换纵向 + _handleReverseGap: function (w, item, index) { + var o = this.options; + if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) { + var top = (index === 0 ? o.vgap : 0) + o.tgap + (item.tgap || 0) + (item.vgap || 0); + w.element.css({ + "margin-top": top >= 1 ? top / BI.pixRatio + BI.pixUnit : (top * 100).toFixed(1) + "%" + }); + } + if (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) !== 0) { + var left = o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0); + w.element.css({ + "margin-left": left >= 1 ? left / BI.pixRatio + BI.pixUnit : (left * 100).toFixed(1) + "%" + }); + } + if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) { + var right = o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0); + w.element.css({ + "margin-right": right >= 1 ? right / BI.pixRatio + BI.pixUnit : (right * 100).toFixed(1) + "%" + }); + } + // 这里的代码是关键 + if (o.vgap + o.hgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) !== 0) { + var bottom = (index === o.items.length - 1 ? o.vgap : o.hgap) + o.bgap + (item.bgap || 0) + (item.vgap || 0); w.element.css({ - "margin-bottom": (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit + "margin-bottom": bottom >= 1 ? bottom / BI.pixRatio + BI.pixUnit : (bottom * 100).toFixed(1) + "%" }); } }, diff --git a/src/core/wrapper/layout/layout.flow.js b/src/core/wrapper/layout/layout.flow.js index 2061b4513..bf4403e84 100644 --- a/src/core/wrapper/layout/layout.flow.js +++ b/src/core/wrapper/layout/layout.flow.js @@ -42,23 +42,27 @@ BI.FloatLeftLayout = BI.inherit(BI.Layout, { w.element.css({bottom: BI.isNumber(item.bottom) ? item.bottom / BI.pixRatio + BI.pixUnit : item.bottom}); } if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) { + var top = o.vgap / 2 + o.tgap + (item.tgap || 0) + (item.vgap || 0); w.element.css({ - "margin-top": (o.vgap / 2 + o.tgap + (item.tgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit + "margin-top": top >= 1 ? top / BI.pixRatio + BI.pixUnit : (top * 100).toFixed(1) + "%" }); } if (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) !== 0) { + var left = o.hgap / 2 + o.lgap + (item.lgap || 0) + (item.hgap || 0); w.element.css({ - "margin-left": (o.hgap / 2 + o.lgap + (item.lgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit + "margin-left": left >= 1 ? left / BI.pixRatio + BI.pixUnit : (left * 100).toFixed(1) + "%" }); } if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) { + var right = o.hgap / 2 + o.rgap + (item.rgap || 0) + (item.hgap || 0); w.element.css({ - "margin-right": (o.hgap / 2 + o.rgap + (item.rgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit + "margin-right": right >= 1 ? right / BI.pixRatio + BI.pixUnit : (right * 100).toFixed(1) + "%" }); } if (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) !== 0) { + var bottom = o.vgap / 2 + o.bgap + (item.bgap || 0) + (item.vgap || 0); w.element.css({ - "margin-bottom": (o.vgap / 2 + o.bgap + (item.bgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit + "margin-bottom": bottom >= 1 ? bottom / BI.pixRatio + BI.pixUnit : (bottom * 100).toFixed(1) + "%" }); } return w; diff --git a/src/core/wrapper/layout/layout.td.js b/src/core/wrapper/layout/layout.td.js index ba5b2adef..ffd58a4ea 100644 --- a/src/core/wrapper/layout/layout.td.js +++ b/src/core/wrapper/layout/layout.td.js @@ -96,26 +96,7 @@ BI.TdLayout = BI.inherit(BI.Layout, { } w.element.css({position: "relative", top: "0", left: "0", margin: "0px auto"}); var item = arr[i]; - 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 - }); - } + this._handleGap(w, item, i); first(w, this.rows++, i); var width = ""; var columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width; diff --git a/src/core/wrapper/layout/responsive/responsive.flex.horizontal.js b/src/core/wrapper/layout/responsive/responsive.flex.horizontal.js index 4d5fa2b27..70d7ddddb 100644 --- a/src/core/wrapper/layout/responsive/responsive.flex.horizontal.js +++ b/src/core/wrapper/layout/responsive/responsive.flex.horizontal.js @@ -6,42 +6,52 @@ * @extends BI.FlexHorizontalLayout */ BI.ResponsiveFlexHorizontalLayout = BI.inherit(BI.FlexHorizontalLayout, { - props: function () { - return BI.extend(BI.ResponsiveFlexHorizontalLayout.superclass.props.apply(this, arguments), { - extraCls: "bi-responsive-f-h" - }); - }, + // props: function () { + // return BI.extend(BI.ResponsiveFlexHorizontalLayout.superclass.props.apply(this, arguments), { + // // extraCls: "bi-responsive-f-h" + // }); + // }, - _addElement: function (i, item) { - var w = BI.ResponsiveFlexHorizontalLayout.superclass._addElement.apply(this, arguments); - var o = this.options; - var columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width >= 1 ? null : item.width; - if (o.columnSize.length > 0) { - if (item.width >= 1 && o.columnSize[i] >= 1 && o.columnSize[i] !== item.width) { - columnSize = null; - } + mounted: function () { + var self = this, o = this.options; + if (o.horizontalAlign !== BI.HorizontalAlign.Center){ + return; } - if (columnSize === "fill") { - // 给自适应列设置一个min-width - var length = 0; - var fillCount = 0, autoCount = 0; - for (var k = 0, len = o.columnSize.length || o.items.length; k < len; k++) { - var cz = o.columnSize.length > 0 ? o.columnSize[k] : o.items[k].width; - if (cz === "fill") { - fillCount++; - cz = 0; - } else if (cz === "" || BI.isNull(cz)) { - autoCount++; - cz = 0; + 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); + }); + self.element.css("flex-direction", "column"); + } } - length += cz; } - var count = (o.columnSize.length || o.items.length) - fillCount - autoCount; - if (count > 0) { - w.element.css("min-width", length / count / BI.pixRatio + BI.pixUnit); + } + 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(); + self.element.css("flex-direction", "row"); + } + } } } - return w; + this.unResize = BI.Resizers.add(this.getName(), resize); + defaultResize(); + }, + + destroyed: function () { + this.unResize(); } }); BI.shortcut("bi.responsive_flex_horizontal", BI.ResponsiveFlexHorizontalLayout); diff --git a/src/core/wrapper/layout/responsive/responsive.flex.wrapper.horizontal.js b/src/core/wrapper/layout/responsive/responsive.flex.wrapper.horizontal.js index 58869e51d..5e8fcfd95 100644 --- a/src/core/wrapper/layout/responsive/responsive.flex.wrapper.horizontal.js +++ b/src/core/wrapper/layout/responsive/responsive.flex.wrapper.horizontal.js @@ -6,42 +6,54 @@ * @extends BI.FlexWrapperHorizontalLayout */ BI.ResponsiveFlexWrapperHorizontalLayout = BI.inherit(BI.FlexWrapperHorizontalLayout, { - props: function () { - return BI.extend(BI.ResponsiveFlexWrapperHorizontalLayout.superclass.props.apply(this, arguments), { - extraCls: "bi-responsive-f-h" - }); - }, + // props: function () { + // return BI.extend(BI.ResponsiveFlexWrapperHorizontalLayout.superclass.props.apply(this, arguments), { + // extraCls: "bi-responsive-f-h" + // }); + // }, - _addElement: function (i, item) { - var w = BI.ResponsiveFlexHorizontalLayout.superclass._addElement.apply(this, arguments); - var o = this.options; - var columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width >= 1 ? null : item.width; - if (o.columnSize.length > 0) { - if (item.width >= 1 && o.columnSize[i] >= 1 && o.columnSize[i] !== item.width) { - columnSize = null; - } + mounted: function () { + var self = this, o = this.options; + if (o.horizontalAlign !== BI.HorizontalAlign.Center){ + return; } - if (columnSize === "fill") { - // 给自适应列设置一个min-width - var length = 0; - var fillCount = 0, autoCount = 0; - for (var k = 0, len = o.columnSize.length || o.items.length; k < len; k++) { - var cz = o.columnSize.length > 0 ? o.columnSize[k] : o.items[k].width; - if (cz === "fill") { - fillCount++; - cz = 0; - } else if (cz === "" || BI.isNull(cz)) { - autoCount++; - cz = 0; + 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); + }); + self.element.css("flex-direction", "column"); + self.$wrapper.element.css("flex-direction", "column"); + } } - length += cz; } - var count = (o.columnSize.length || o.items.length) - fillCount - autoCount; - if (count > 0) { - w.element.css("min-width", length / count / BI.pixRatio + BI.pixUnit); + } + 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(); + self.element.css("flex-direction", "row"); + self.$wrapper.element.css("flex-direction", "row"); + } + } } } - return w; + this.unResize = BI.Resizers.add(this.getName(), resize); + defaultResize(); + }, + + destroyed: function () { + this.unResize(); } }); BI.shortcut("bi.responsive_flex_scrollable_horizontal", BI.ResponsiveFlexWrapperHorizontalLayout); diff --git a/src/core/wrapper/layout/responsive/responsive.inline..js b/src/core/wrapper/layout/responsive/responsive.inline..js index 7b6e97e5b..08f27fcfc 100644 --- a/src/core/wrapper/layout/responsive/responsive.inline..js +++ b/src/core/wrapper/layout/responsive/responsive.inline..js @@ -6,60 +6,45 @@ * @extends BI.InlineLayout */ BI.ResponsiveInlineLayout = BI.inherit(BI.InlineLayout, { - _addElement: function (i, item) { - var o = this.options; - var w = BI.InlineLayout.superclass._addElement.apply(this, arguments); - var columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width >= 1 ? null : item.width; - if (o.columnSize.length > 0) { - if (item.width >= 1 && o.columnSize[i] >= 1 && o.columnSize[i] !== item.width) { - columnSize = null; - } - } - if (columnSize > 0) { - w.element.width(columnSize < 1 ? ((columnSize * 100).toFixed(1) + "%") : (columnSize / BI.pixRatio + BI.pixUnit)); + mounted: function () { + var self = this, o = this.options; + if (o.horizontalAlign !== BI.HorizontalAlign.Center){ + return; } - w.element.css({ - position: "relative", - "vertical-align": o.verticalAlign - }); - w.element.addClass("i-item"); - if (columnSize === "fill" || columnSize === "") { - var length = o.hgap, czs = 0; - var fillCount = 0, autoCount = 0; - for (var k = 0, len = o.columnSize.length || o.items.length; k < len; k++) { - var cz = o.columnSize.length > 0 ? o.columnSize[k] : o.items[k].width; - if (cz === "fill") { - fillCount++; - cz = 0; - } else if (cz === "" || BI.isNull(cz)) { - autoCount++; - cz = 0; - } - length += o.hgap + o.lgap + o.rgap + (o.items[k].lgap || 0) + (o.items[k].rgap || 0) + (o.items[k].hgap || 0) + cz; - czs += cz; - } - if (columnSize === "fill") { - var count = (o.columnSize.length || o.items.length) - fillCount - autoCount; - if (count > 0) { - w.element.css("min-width", czs / count / BI.pixRatio + BI.pixUnit); + 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", ""); + }); + } } - w.element.css("width", "calc((100% - " + (length / BI.pixRatio + BI.pixUnit) + ")" + (fillCount > 1 ? "/" + fillCount : "") + ")"); } - if (o.horizontalAlign === BI.HorizontalAlign.Stretch || !(o.scrollable === true || o.scrollx === true)) { - if (columnSize === "fill") { - w.element.css("max-width", "calc((100% - " + (length / BI.pixRatio + BI.pixUnit) + ")" + (fillCount > 1 ? "/" + fillCount : "") + ")"); - } else { - w.element.css("max-width", "calc((100% - " + (length / BI.pixRatio + BI.pixUnit) + ")" + (autoCount > 1 ? "/" + autoCount : "") + ")"); + } + 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._handleGap(w, item, i); - if (o.verticalAlign === BI.VerticalAlign.Stretch && BI.isNull(item.height)) { - var top = o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0), - bottom = o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0); - w.element.css("height", "calc(100% - " + ((top + bottom) / BI.pixRatio + BI.pixUnit) + ")"); - } - return w; + this.unResize = BI.Resizers.add(this.getName(), resize); + defaultResize(); + }, + + destroyed: function () { + this.unResize(); } }); BI.shortcut("bi.responsive_inline", BI.ResponsiveInlineLayout); diff --git a/src/less/core/wrapper/flex.horizontal.less b/src/less/core/wrapper/flex.horizontal.less index 933df5b33..b58fe25c4 100644 --- a/src/less/core/wrapper/flex.horizontal.less +++ b/src/less/core/wrapper/flex.horizontal.less @@ -62,17 +62,6 @@ -o-flex-wrap: nowrap; flex-wrap: nowrap; - &.bi-responsive-f-h { - /* 09版 */ - /*-webkit-box-lines: multiple;*/ - /* 12版 */ - -webkit-flex-wrap: wrap; - -moz-flex-wrap: wrap; - -ms-flex-wrap: wrap; - -o-flex-wrap: wrap; - flex-wrap: wrap; - } - &.v-middle { /* 09版 */ -webkit-box-align: center; diff --git a/src/less/core/wrapper/flex.wrapper.horizontal.less b/src/less/core/wrapper/flex.wrapper.horizontal.less index 420676ea7..a54b68075 100644 --- a/src/less/core/wrapper/flex.wrapper.horizontal.less +++ b/src/less/core/wrapper/flex.wrapper.horizontal.less @@ -269,17 +269,4 @@ flex-grow: 1; } } - - &.bi-responsive-f-h { - & .f-s-h-w { - /* 09版 */ - /*-webkit-box-lines: multiple;*/ - /* 12版 */ - -webkit-flex-wrap: wrap; - -moz-flex-wrap: wrap; - -ms-flex-wrap: wrap; - -o-flex-wrap: wrap; - flex-wrap: wrap; - } - } }