Browse Source

Merge pull request #212063 in DEC/fineui from master to feature/x

* commit '604d1fc901b9270a0f8daac0ca5de6119845d49e':
  BI-118659 fix: belowMouse的实现
  无JIRA "bi.number_editor" 支持水印
  BI-118917 fix: bi.switcher这种利用Masker遮罩的场景处理
research/test
superman 2 years ago
parent
commit
f4a7d17a3f
  1. 3
      demo/js/widget/numbereditor/demo.number_editor.js
  2. 26
      src/base/combination/combo.js
  3. 61
      src/core/controller/controller.layer.js
  4. 53
      src/core/platform/web/dom.js
  5. 48
      src/widget/numbereditor/number.editor.js

3
demo/js/widget/numbereditor/demo.number_editor.js

@ -14,7 +14,8 @@ Demo.FileManager = BI.inherit(BI.Widget, {
}, },
height: 24, height: 24,
width: 150, width: 150,
errorText: "hahah" errorText: "hahah",
watermark: "每个人都是自己健康的第一责任人",
}); });
editor1.on(BI.NumberEditor.EVENT_CHANGE, function () { editor1.on(BI.NumberEditor.EVENT_CHANGE, function () {
if (BI.parseFloat(this.getValue()) < 1) { if (BI.parseFloat(this.getValue()) < 1) {

26
src/base/combination/combo.js

@ -196,28 +196,22 @@
this.popupView.visible(); this.popupView.visible();
var combo = (o.belowMouse && BI.isNotNull(e)) ? { var combo = (o.belowMouse && BI.isNotNull(e)) ? {
element: { element: {
0: e.target, 0: BI.extend({}, e.target, {
getBoundingClientRect: function () {
return {
left: e.pageX,
top: e.pageY,
width: 0,
height: 0,
};
}
}),
offset: function () { offset: function () {
return { return {
left: e.pageX, left: e.pageX,
top: e.pageY, top: e.pageY,
}; };
}, },
bounds: function () {
// offset为其相对于父定位元素的偏移
return {
x: e.offsetX,
y: e.offsetY,
width: 0,
height: 24,
};
},
outerWidth: function () {
return 0;
},
outerHeight: function () {
return 24;
},
}, },
} : this.combo; } : this.combo;
var positionRelativeElement = BI.DOM.getPositionRelativeContainingBlock(BI.isNull(o.container) ? this.element[0] : BI.Widget._renderEngine.createElement(BI.isFunction(o.container) ? o.container() : o.container)[0]); var positionRelativeElement = BI.DOM.getPositionRelativeContainingBlock(BI.isNull(o.container) ? this.element[0] : BI.Widget._renderEngine.createElement(BI.isFunction(o.container) ? o.container() : o.container)[0]);

61
src/core/controller/controller.layer.js

@ -63,41 +63,54 @@ BI.LayerController = BI.inherit(BI.Controller, {
var layout = BI.createWidget({ var layout = BI.createWidget({
type: "bi.absolute", type: "bi.absolute",
invisible: true, invisible: true,
items: [{ items: [
el: widget, {
left: 0, el: widget,
right: 0, left: 0,
top: 0, right: 0,
bottom: 0 top: 0,
}] bottom: 0
}
]
}, context); }, context);
BI.createWidget({ BI.createWidget({
type: "bi.absolute", type: "bi.absolute",
element: op.container || this.options.render, element: op.container || this.options.render,
items: [{ items: [
el: layout, {
left: offset.left || 0, el: layout,
right: offset.right || 0, left: offset.left || 0,
top: offset.top || 0, right: offset.right || 0,
bottom: offset.bottom || 0 top: offset.top || 0,
}] bottom: offset.bottom || 0
}
]
}); });
if (w) { if (w) {
layout.element.addClass("bi-popup-view"); layout.element.addClass("bi-popup-view");
layout.element.css({
left: w.offset().left + (offset.left || 0), function getComputedPosition() {
top: w.offset().top + (offset.top || 0),
width: offset.width || (w.outerWidth() - (offset.left || 0) - (offset.right || 0)) || "", var css = {
height: offset.height || (w.outerHeight() - (offset.top || 0) - (offset.bottom || 0)) || ""
});
layout.element.on("__resize__", function () {
w.is(":visible") &&
layout.element.css({
left: w.offset().left + (offset.left || 0), left: w.offset().left + (offset.left || 0),
top: w.offset().top + (offset.top || 0), top: w.offset().top + (offset.top || 0),
width: offset.width || (w.outerWidth() - (offset.left || 0) - (offset.right || 0)) || "", width: offset.width || (w.outerWidth() - (offset.left || 0) - (offset.right || 0)) || "",
height: offset.height || (w.outerHeight() - (offset.top || 0) - (offset.bottom || 0)) || "" height: offset.height || (w.outerHeight() - (offset.top || 0) - (offset.bottom || 0)) || ""
}); };
const { top, left, scaleY, scaleX } = BI.DOM.getPositionRelativeContainingBlockRect(layout.element[0]);
css.top = (css.top - top) / scaleY;
css.left = (css.left - left) / scaleX;
return css;
}
layout.element.css(getComputedPosition());
layout.element.on("__resize__", function () {
w.is(":visible") &&
layout.element.css(getComputedPosition());
}); });
} }
this.add(name, widget, layout); this.add(name, widget, layout);

53
src/core/platform/web/dom.js

@ -249,12 +249,14 @@
}, },
_getLeftAlignPosition: function (combo, popup, extraWidth, container) { _getLeftAlignPosition: function (combo, popup, extraWidth, container) {
var viewBounds = popup.element.bounds(), var comboRect = combo.element[0].getBoundingClientRect(),
windowBounds = BI.Widget._renderEngine.createElement("body").bounds(); popupRect = popup.element.bounds(),
var left = combo.element.offset().left - (container ? container.getBoundingClientRect().left : 0) + extraWidth; viewportRect = document.documentElement.getBoundingClientRect(),
containerRect = container ? container.getBoundingClientRect() : { left: 0 };
var left = comboRect.left - containerRect.left + extraWidth;
if (left + viewBounds.width > windowBounds.width) { if (left + popupRect.width - containerRect.left > viewportRect.width) {
left = windowBounds.width - viewBounds.width; left = viewportRect.width - popupRect.width - containerRect.left;
} }
return left; return left;
}, },
@ -285,17 +287,19 @@
}; };
}, },
_getRightAlignPosition: function (combo, popup, extraWidth) { _getRightAlignPosition: function (combo, popup, extraWidth, container) {
var comboBounds = combo.element.bounds(), viewBounds = popup.element.bounds(); var comboBounds = combo.element[0].getBoundingClientRect(),
return combo.element.offset().left + comboBounds.width - viewBounds.width - extraWidth; viewBounds = popup.element[0].getBoundingClientRect(),
containerRect = container ? container.getBoundingClientRect() : { left: 0 };
return comboBounds.left + comboBounds.width - viewBounds.width - extraWidth - containerRect.left;
}, },
getRightAlignPosition: function (combo, popup, extraWidth) { getRightAlignPosition: function (combo, popup, extraWidth, container) {
var left = this._getRightAlignPosition(combo, popup, extraWidth); var left = this._getRightAlignPosition(combo, popup, extraWidth, container);
var dir = ""; var dir = "";
// 如果放不下,优先使用LeftAlign, 如果LeftAlign也放不下, 再使用left=0 // 如果放不下,优先使用LeftAlign, 如果LeftAlign也放不下, 再使用left=0
if (left < 0) { if (left < 0) {
left = this._getLeftAlignPosition(combo, popup, extraWidth); left = this._getLeftAlignPosition(combo, popup, extraWidth, container);
dir = "right"; dir = "right";
} }
if (left < 0) { if (left < 0) {
@ -317,14 +321,13 @@
}, },
getTopAlignPosition: function (combo, popup, extraHeight, needAdaptHeight, container) { getTopAlignPosition: function (combo, popup, extraHeight, needAdaptHeight, container) {
var comboOffset = combo.element.offset();
var comboBounds = combo.element[0].getBoundingClientRect(), var comboBounds = combo.element[0].getBoundingClientRect(),
popupBounds = popup.element[0].getBoundingClientRect(), popupBounds = popup.element[0].getBoundingClientRect(),
viewportBounds = document.documentElement.getBoundingClientRect(), viewportBounds = document.documentElement.getBoundingClientRect(),
containerBounds = container ? container.getBoundingClientRect() : { top: 0 }; containerBounds = container ? container.getBoundingClientRect() : { top: 0 };
var top, adaptHeight, dir; var top, adaptHeight, dir;
if (BI.DOM.isBottomSpaceEnough(combo, popup, -1 * comboBounds.height + extraHeight)) { if (BI.DOM.isBottomSpaceEnough(combo, popup, -1 * comboBounds.height + extraHeight)) {
top = comboOffset.top - containerBounds.top + extraHeight; top = comboBounds.top - containerBounds.top + extraHeight;
} else if (needAdaptHeight) { } else if (needAdaptHeight) {
top = comboBounds.top - containerBounds.top + extraHeight; top = comboBounds.top - containerBounds.top + extraHeight;
adaptHeight = viewportBounds.height - comboBounds.top; adaptHeight = viewportBounds.height - comboBounds.top;
@ -375,20 +378,19 @@
}, },
getBottomAlignPosition: function (combo, popup, extraHeight, needAdaptHeight, container) { getBottomAlignPosition: function (combo, popup, extraHeight, needAdaptHeight, container) {
var comboOffset = combo.element.offset();
var comboBounds = combo.element[0].getBoundingClientRect(), var comboBounds = combo.element[0].getBoundingClientRect(),
popupBounds = popup.element[0].getBoundingClientRect(), popupBounds = popup.element[0].getBoundingClientRect(),
windowBounds = BI.Widget._renderEngine.createElement("body").bounds(), windowBounds = BI.Widget._renderEngine.createElement("body").bounds(),
containerBounds = container ? container.getBoundingClientRect() : { top: 0 }; containerBounds = container ? container.getBoundingClientRect() : { top: 0 };
var top, adaptHeight, dir; var top, adaptHeight, dir;
if (BI.DOM.isTopSpaceEnough(combo, popup, -1 * comboBounds.height + extraHeight)) { if (BI.DOM.isTopSpaceEnough(combo, popup, -1 * comboBounds.height + extraHeight)) {
top = comboOffset.top + comboBounds.height - containerBounds.top - popupBounds.height; top = comboBounds.top + comboBounds.height - containerBounds.top - popupBounds.height;
} else if (needAdaptHeight) { } else if (needAdaptHeight) {
top = 0 - containerBounds.top; top = 0 - containerBounds.top;
adaptHeight = comboBounds.top + comboBounds.height - extraHeight; adaptHeight = comboBounds.top + comboBounds.height - extraHeight;
} else if (BI.DOM.isBottomSpaceEnough(combo, popup, -1 * comboBounds.height + extraHeight)) { } else if (BI.DOM.isBottomSpaceEnough(combo, popup, -1 * comboBounds.height + extraHeight)) {
// 上方空间不足且不允许调整高度的情况下,优先使用下对齐 // 上方空间不足且不允许调整高度的情况下,优先使用下对齐
top = comboOffset.top - containerBounds.top + extraHeight; top = comboBounds.top - containerBounds.top + extraHeight;
dir = "bottom"; dir = "bottom";
} else { } else {
top = 0; top = 0;
@ -410,7 +412,6 @@
}, },
getBottomAdaptPosition: function (combo, popup, extraHeight, needAdaptHeight) { getBottomAdaptPosition: function (combo, popup, extraHeight, needAdaptHeight) {
var comboOffset = combo.element.offset();
var comboBounds = combo.element.bounds(), popupBounds = popup.element.bounds(), var comboBounds = combo.element.bounds(), popupBounds = popup.element.bounds(),
windowBounds = BI.Widget._renderEngine.createElement("body").bounds(); windowBounds = BI.Widget._renderEngine.createElement("body").bounds();
if (BI.DOM.isBottomSpaceEnough(combo, popup, extraHeight)) { if (BI.DOM.isBottomSpaceEnough(combo, popup, extraHeight)) {
@ -418,8 +419,8 @@
} }
if (needAdaptHeight) { if (needAdaptHeight) {
return { return {
top: comboOffset.top + comboBounds.height + extraHeight, top: comboBounds.top + comboBounds.height + extraHeight,
adaptHeight: windowBounds.height - comboOffset.top - comboBounds.height - extraHeight adaptHeight: windowBounds.height - comboBounds.top - comboBounds.height - extraHeight
}; };
} }
if (popupBounds.height + extraHeight > windowBounds.height) { if (popupBounds.height + extraHeight > windowBounds.height) {
@ -732,5 +733,19 @@
return BI.DOM.getPositionRelativeContainingBlock(element.parentNode); return BI.DOM.getPositionRelativeContainingBlock(element.parentNode);
}, },
/**
* 获取position:fixed相对定位的元素的clientRect
*/
getPositionRelativeContainingBlockRect: function (element) {
var positionRelativeElement = BI.DOM.getPositionRelativeContainingBlock(element);
var rect = positionRelativeElement.getBoundingClientRect();
return {
...rect.toJSON(),
scaleX: rect.width / positionRelativeElement.offsetWidth,
scaleY: rect.height / positionRelativeElement.offsetHeight
};
},
}); });
})(); })();

48
src/widget/numbereditor/number.editor.js

@ -18,7 +18,8 @@ BI.NumberEditor = BI.inherit(BI.Widget, {
errorText: "", errorText: "",
step: 1, step: 1,
min: BI.MIN, min: BI.MIN,
max: BI.MAX max: BI.MAX,
watermark: "",
}); });
}, },
@ -30,6 +31,7 @@ BI.NumberEditor = BI.inherit(BI.Widget, {
height: BI.toPix(o.height, 2), height: BI.toPix(o.height, 2),
simple: o.simple, simple: o.simple,
allowBlank: o.allowBlank, allowBlank: o.allowBlank,
watermark: o.watermark,
value: o.valueFormatter(o.value), value: o.valueFormatter(o.value),
validationChecker: function (v) { validationChecker: function (v) {
// 不设置validationChecker就自动检测 // 不设置validationChecker就自动检测
@ -89,23 +91,27 @@ BI.NumberEditor = BI.inherit(BI.Widget, {
type: "bi.htape", type: "bi.htape",
height: BI.toPix(o.height, 2), height: BI.toPix(o.height, 2),
element: this, element: this,
items: [this.editor, { items: [
el: { this.editor, {
type: "bi.grid", el: {
columns: 1, type: "bi.grid",
rows: 2, columns: 1,
items: [{ rows: 2,
column: 0, items: [
row: 0, {
el: this.topBtn column: 0,
}, { row: 0,
column: 0, el: this.topBtn
row: 1, }, {
el: this.bottomBtn column: 0,
}] row: 1,
}, el: this.bottomBtn
width: 23 }
}] ]
},
width: 23
}
]
}); });
}, },
@ -117,13 +123,13 @@ BI.NumberEditor = BI.inherit(BI.Widget, {
return this.editor.isEditing(); return this.editor.isEditing();
}, },
_checkValueInRange: function(v) { _checkValueInRange: function (v) {
var o = this.options; var o = this.options;
return !!(BI.isNumeric(v) && BI.parseFloat(v) >= o.min && BI.parseFloat(v) <= o.max); return !!(BI.isNumeric(v) && BI.parseFloat(v) >= o.min && BI.parseFloat(v) <= o.max);
}, },
_checkAdjustDisabled: function(v) { _checkAdjustDisabled: function (v) {
if(this.options.validationChecker === BI.emptyFn) { if (this.options.validationChecker === BI.emptyFn) {
this.bottomBtn.setEnable(BI.parseFloat(v) > this.options.min); this.bottomBtn.setEnable(BI.parseFloat(v) > this.options.min);
this.topBtn.setEnable(BI.parseFloat(v) < this.options.max); this.topBtn.setEnable(BI.parseFloat(v) < this.options.max);
} }

Loading…
Cancel
Save