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/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;
- }
- }
}