Frank
/
fineui
forked from fanruan/fineui
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Pull request #3268: BI-118917 fix: bi.switcher这种利用Masker遮罩的场景处理 

Merge in VISUAL/fineui from ~DAILER/fineui:master to master

* commit 'b8f272885f9e949b950cb2370cc435b5a7a34c82':
  BI-118659 fix: belowMouse的实现
  无JIRA "bi.number_editor" 支持水印
  BI-118917 fix: bi.switcher这种利用Masker遮罩的场景处理
research/test
Dailer-刘荣歆 2 years ago
parent
c397ee108d b8f272885f
commit
604d1fc901
5 changed files with 110 additions and 81 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  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. 22
      src/widget/numbereditor/number.editor.js

3
demo/js/widget/numbereditor/demo.number_editor.js
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
};
},
}); });
})(); })();

22
src/widget/numbereditor/number.editor.js
Unescape View File

@ -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
}] }
]
}); });
}, },
@ -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);
} }

Write Preview
Loading…
Cancel
Save