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遮罩的场景处理
master
superman 2 years ago
parent
commit
f4a7d17a3f
  1. 3
      demo/js/widget/numbereditor/demo.number_editor.js
  2. 24
      src/base/combination/combo.js
  3. 37
      src/core/controller/controller.layer.js
  4. 53
      src/core/platform/web/dom.js
  5. 16
      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) {

24
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, {
offset: function () { getBoundingClientRect: function () {
return { return {
left: e.pageX, left: e.pageX,
top: e.pageY, top: e.pageY,
width: 0,
height: 0,
}; };
}, }
bounds: function () { }),
// offset为其相对于父定位元素的偏移 offset: function () {
return { return {
x: e.offsetX, left: e.pageX,
y: e.offsetY, top: e.pageY,
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]);

37
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, el: widget,
left: 0, left: 0,
right: 0, right: 0,
top: 0, top: 0,
bottom: 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, el: layout,
left: offset.left || 0, left: offset.left || 0,
right: offset.right || 0, right: offset.right || 0,
top: offset.top || 0, top: offset.top || 0,
bottom: offset.bottom || 0 bottom: offset.bottom || 0
}] }
]
}); });
if (w) { if (w) {
layout.element.addClass("bi-popup-view"); layout.element.addClass("bi-popup-view");
layout.element.css({
function getComputedPosition() {
var 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 () { layout.element.on("__resize__", function () {
w.is(":visible") && w.is(":visible") &&
layout.element.css({ layout.element.css(getComputedPosition());
left: w.offset().left + (offset.left || 0),
top: w.offset().top + (offset.top || 0),
width: offset.width || (w.outerWidth() - (offset.left || 0) - (offset.right || 0)) || "",
height: offset.height || (w.outerHeight() - (offset.top || 0) - (offset.bottom || 0)) || ""
});
}); });
} }
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
};
},
}); });
})(); })();

16
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,12 +91,14 @@ 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: [
this.editor, {
el: { el: {
type: "bi.grid", type: "bi.grid",
columns: 1, columns: 1,
rows: 2, rows: 2,
items: [{ items: [
{
column: 0, column: 0,
row: 0, row: 0,
el: this.topBtn el: this.topBtn
@ -102,10 +106,12 @@ BI.NumberEditor = BI.inherit(BI.Widget, {
column: 0, column: 0,
row: 1, row: 1,
el: this.bottomBtn el: this.bottomBtn
}] }
]
}, },
width: 23 width: 23
}] }
]
}); });
}, },

Loading…
Cancel
Save