Browse Source

Pull request #2: Release/11.0

Merge in ~IMP/dec-fineui from release/11.0 to final/11.0

* commit '053c65912403348c3ad521edc3ba72f26d0185cd':
  BI-118659 fix: belowMouse的实现
  无JIRA "bi.number_editor" 支持水印
  BI-118917 fix: bi.switcher这种利用Masker遮罩的场景处理
  auto upgrade version to 2.0.20221214115751
  BI-118849 fix: 适配 offsetStyle center和middle问题
  auto upgrade version to 2.0.20221214104244
  KERNEL-11877 fix: supportCSSTransform 默认改为true
  KERNEL-11877 fix: 关掉BI.BubblesController的
  BI-118754 fix(getMinimumFontSize): 获取最小字号无效
  KERNEL-11877 feat: 升级popperjs 解决scale问题
  auto upgrade version to 2.0.20221213152248
research/test
imp-张健 2 years ago
parent
commit
64cf3d7e92
  1. 3
      demo/js/widget/numbereditor/demo.number_editor.js
  2. 2
      package.json
  3. 34
      src/base/combination/combo.js
  4. 15
      src/core/controller/controller.bubbles.js
  5. 37
      src/core/controller/controller.layer.js
  6. 310
      src/core/controller/popper.js
  7. 96
      src/core/platform/web/dom.js
  8. 3
      src/core/platform/web/function.js
  9. 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) {

2
package.json

@ -1,6 +1,6 @@
{ {
"name": "fineui", "name": "fineui",
"version": "2.0.20221210193709", "version": "2.0.20221214115751",
"description": "fineui", "description": "fineui",
"main": "dist/fineui_without_conflict.min.js", "main": "dist/fineui_without_conflict.min.js",
"types": "dist/lib/index.d.ts", "types": "dist/lib/index.d.ts",

34
src/base/combination/combo.js

@ -38,9 +38,9 @@
adjustLength: 0, // 调整的距离 adjustLength: 0, // 调整的距离
adjustXOffset: 0, adjustXOffset: 0,
adjustYOffset: 0, adjustYOffset: 0,
supportCSSTransform: false, supportCSSTransform: true,
hideChecker: BI.emptyFn, hideChecker: BI.emptyFn,
offsetStyle: "left", // left,right,center offsetStyle: "", // "",center,middle
el: {}, el: {},
popup: {}, popup: {},
comboClass: "bi-combo-popup", comboClass: "bi-combo-popup",
@ -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]);
@ -308,10 +302,10 @@
var scaleX = positonedRect.width / positionRelativeElement.offsetWidth; var scaleX = positonedRect.width / positionRelativeElement.offsetWidth;
var scaleY = positonedRect.height / positionRelativeElement.offsetHeight; var scaleY = positonedRect.height / positionRelativeElement.offsetHeight;
p.top && (p.top = p.top / scaleY); p.top && (p.top = Math.round(p.top / scaleY));
p.left && (p.left = p.left / scaleX); p.left && (p.left = Math.round(p.left / scaleX));
p.adaptHeight && (p.adaptHeight = p.adaptHeight / scaleY); p.adaptHeight && (p.adaptHeight = Math.round(p.adaptHeight / scaleY));
} }
if ("adaptHeight" in p) { if ("adaptHeight" in p) {

15
src/core/controller/controller.bubbles.js

@ -45,9 +45,11 @@ BI.BubblesController = BI.inherit(BI.Controller, {
BI.createWidget({ BI.createWidget({
type: "bi.default", type: "bi.default",
element: container, element: container,
items: [{ items: [
{
el: bubble el: bubble
}] }
]
}); });
if (this.storePoppers[name]) { if (this.storePoppers[name]) {
this.storePoppers[name].destroy(); this.storePoppers[name].destroy();
@ -65,7 +67,14 @@ BI.BubblesController = BI.inherit(BI.Controller, {
options: { options: {
offset: [adjustXOffset, adjustYOffset] offset: [adjustXOffset, adjustYOffset]
} }
} },
{
name: "preventOverflow",
enabled: false
}, {
name: "flip",
enabled: false
},
] ]
}); });
return this; return this;

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);

310
src/core/controller/popper.js

@ -1,24 +1,11 @@
/** /**
* @popperjs/core v2.9.2 - MIT License * @popperjs/core v2.11.6 - MIT License
*/ */
(function (global, factory) { (function (global, factory) {
factory(BI.Popper = {}); factory(global.Popper = {});
}(this, (function (exports) { 'use strict'; }(BI, (function (exports) {
'use strict';
function getBoundingClientRect(element) {
var rect = element.getBoundingClientRect();
return {
width: rect.width,
height: rect.height,
top: rect.top,
right: rect.right,
bottom: rect.bottom,
left: rect.left,
x: rect.left,
y: rect.top
};
}
function getWindow(node) { function getWindow(node) {
if (node == null) { if (node == null) {
@ -33,16 +20,6 @@
return node; return node;
} }
function getWindowScroll(node) {
var win = getWindow(node);
var scrollLeft = win.pageXOffset;
var scrollTop = win.pageYOffset;
return {
scrollLeft: scrollLeft,
scrollTop: scrollTop
};
}
function isElement(node) { function isElement(node) {
var OwnElement = getWindow(node).Element; var OwnElement = getWindow(node).Element;
return node instanceof OwnElement || node instanceof Element; return node instanceof OwnElement || node instanceof Element;
@ -63,6 +40,74 @@
return node instanceof OwnElement || node instanceof ShadowRoot; return node instanceof OwnElement || node instanceof ShadowRoot;
} }
var max = Math.max;
var min = Math.min;
var round = Math.round;
function getUAString() {
var uaData = navigator.userAgentData;
if (uaData != null && uaData.brands && Array.isArray(uaData.brands)) {
return uaData.brands.map(function (item) {
return item.brand + "/" + item.version;
}).join(' ');
}
return navigator.userAgent;
}
function isLayoutViewport() {
return !/^((?!chrome|android).)*safari/i.test(getUAString());
}
function getBoundingClientRect(element, includeScale, isFixedStrategy) {
if (includeScale === void 0) {
includeScale = false;
}
if (isFixedStrategy === void 0) {
isFixedStrategy = false;
}
var clientRect = element.getBoundingClientRect();
var scaleX = 1;
var scaleY = 1;
if (includeScale && isHTMLElement(element)) {
scaleX = element.offsetWidth > 0 ? round(clientRect.width) / element.offsetWidth || 1 : 1;
scaleY = element.offsetHeight > 0 ? round(clientRect.height) / element.offsetHeight || 1 : 1;
}
var _ref = isElement(element) ? getWindow(element) : window,
visualViewport = _ref.visualViewport;
var addVisualOffsets = !isLayoutViewport() && isFixedStrategy;
var x = (clientRect.left + (addVisualOffsets && visualViewport ? visualViewport.offsetLeft : 0)) / scaleX;
var y = (clientRect.top + (addVisualOffsets && visualViewport ? visualViewport.offsetTop : 0)) / scaleY;
var width = clientRect.width / scaleX;
var height = clientRect.height / scaleY;
return {
width: width,
height: height,
top: y,
right: x + width,
bottom: y + height,
left: x,
x: x,
y: y
};
}
function getWindowScroll(node) {
var win = getWindow(node);
var scrollLeft = win.pageXOffset;
var scrollTop = win.pageYOffset;
return {
scrollLeft: scrollLeft,
scrollTop: scrollTop
};
}
function getHTMLElementScroll(element) { function getHTMLElementScroll(element) {
return { return {
scrollLeft: element.scrollLeft, scrollLeft: element.scrollLeft,
@ -113,16 +158,24 @@
return /auto|scroll|overlay|hidden/.test(overflow + overflowY + overflowX); return /auto|scroll|overlay|hidden/.test(overflow + overflowY + overflowX);
} }
function isElementScaled(element) {
var rect = element.getBoundingClientRect();
var scaleX = round(rect.width) / element.offsetWidth || 1;
var scaleY = round(rect.height) / element.offsetHeight || 1;
return scaleX !== 1 || scaleY !== 1;
} // Returns the composite rect of an element relative to its offsetParent.
// Composite means it takes into account transforms as well as layout. // Composite means it takes into account transforms as well as layout.
function getCompositeRect(elementOrVirtualElement, offsetParent, isFixed) { function getCompositeRect(elementOrVirtualElement, offsetParent, isFixed) {
if (isFixed === void 0) { if (isFixed === void 0) {
isFixed = false; isFixed = false;
} }
var documentElement = getDocumentElement(offsetParent);
var rect = getBoundingClientRect(elementOrVirtualElement);
var isOffsetParentAnElement = isHTMLElement(offsetParent); var isOffsetParentAnElement = isHTMLElement(offsetParent);
var offsetParentIsScaled = isHTMLElement(offsetParent) && isElementScaled(offsetParent);
var documentElement = getDocumentElement(offsetParent);
var rect = getBoundingClientRect(elementOrVirtualElement, offsetParentIsScaled, isFixed);
var scroll = { var scroll = {
scrollLeft: 0, scrollLeft: 0,
scrollTop: 0 scrollTop: 0
@ -139,7 +192,7 @@
} }
if (isHTMLElement(offsetParent)) { if (isHTMLElement(offsetParent)) {
offsets = getBoundingClientRect(offsetParent); offsets = getBoundingClientRect(offsetParent, true);
offsets.x += offsetParent.clientLeft; offsets.x += offsetParent.clientLeft;
offsets.y += offsetParent.clientTop; offsets.y += offsetParent.clientTop;
} else if (documentElement) { } else if (documentElement) {
@ -249,8 +302,8 @@
function getContainingBlock(element) { function getContainingBlock(element) {
var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') !== -1; var isFirefox = /firefox/i.test(getUAString());
var isIE = navigator.userAgent.indexOf('Trident') !== -1; var isIE = /Trident/i.test(getUAString());
if (isIE && isHTMLElement(element)) { if (isIE && isHTMLElement(element)) {
// In IE 9, 10 and 11 fixed elements containing block is always established by the viewport // In IE 9, 10 and 11 fixed elements containing block is always established by the viewport
@ -263,6 +316,10 @@
var currentNode = getParentNode(element); var currentNode = getParentNode(element);
if (isShadowRoot(currentNode)) {
currentNode = currentNode.host;
}
while (isHTMLElement(currentNode) && ['html', 'body'].indexOf(getNodeName(currentNode)) < 0) { while (isHTMLElement(currentNode) && ['html', 'body'].indexOf(getNodeName(currentNode)) < 0) {
var css = getComputedStyle(currentNode); // This is non-exhaustive but covers the most common CSS properties that var css = getComputedStyle(currentNode); // This is non-exhaustive but covers the most common CSS properties that
// create a containing block. // create a containing block.
@ -399,9 +456,13 @@
var INVALID_MODIFIER_ERROR = 'Popper: modifier "%s" provided an invalid %s property, expected %s but got %s'; var INVALID_MODIFIER_ERROR = 'Popper: modifier "%s" provided an invalid %s property, expected %s but got %s';
var MISSING_DEPENDENCY_ERROR = 'Popper: modifier "%s" requires "%s", but "%s" modifier is not available'; var MISSING_DEPENDENCY_ERROR = 'Popper: modifier "%s" requires "%s", but "%s" modifier is not available';
var VALID_PROPERTIES = ['name', 'enabled', 'phase', 'fn', 'effect', 'requires', 'options']; var VALID_PROPERTIES = ['name', 'enabled', 'phase', 'fn', 'effect', 'requires', 'options'];
function validateModifiers(modifiers) { function validateModifiers(modifiers) {
modifiers.forEach(function (modifier) { modifiers.forEach(function (modifier) {
Object.keys(modifier).forEach(function (key) { [].concat(Object.keys(modifier), VALID_PROPERTIES) // IE11-compatible replacement for `new Set(iterable)`
.filter(function (value, index, self) {
return self.indexOf(value) === index;
}).forEach(function (key) {
switch (key) { switch (key) {
case 'name': case 'name':
if (typeof modifier.name !== 'string') { if (typeof modifier.name !== 'string') {
@ -415,6 +476,8 @@
console.error(format(INVALID_MODIFIER_ERROR, modifier.name, '"enabled"', '"boolean"', "\"" + String(modifier.enabled) + "\"")); console.error(format(INVALID_MODIFIER_ERROR, modifier.name, '"enabled"', '"boolean"', "\"" + String(modifier.enabled) + "\""));
} }
break;
case 'phase': case 'phase':
if (modifierPhases.indexOf(modifier.phase) < 0) { if (modifierPhases.indexOf(modifier.phase) < 0) {
console.error(format(INVALID_MODIFIER_ERROR, modifier.name, '"phase"', "either " + modifierPhases.join(', '), "\"" + String(modifier.phase) + "\"")); console.error(format(INVALID_MODIFIER_ERROR, modifier.name, '"phase"', "either " + modifierPhases.join(', '), "\"" + String(modifier.phase) + "\""));
@ -430,14 +493,14 @@
break; break;
case 'effect': case 'effect':
if (typeof modifier.effect !== 'function') { if (modifier.effect != null && typeof modifier.effect !== 'function') {
console.error(format(INVALID_MODIFIER_ERROR, modifier.name, '"effect"', '"function"', "\"" + String(modifier.fn) + "\"")); console.error(format(INVALID_MODIFIER_ERROR, modifier.name, '"effect"', '"function"', "\"" + String(modifier.fn) + "\""));
} }
break; break;
case 'requires': case 'requires':
if (!Array.isArray(modifier.requires)) { if (modifier.requires != null && !Array.isArray(modifier.requires)) {
console.error(format(INVALID_MODIFIER_ERROR, modifier.name, '"requires"', '"array"', "\"" + String(modifier.requires) + "\"")); console.error(format(INVALID_MODIFIER_ERROR, modifier.name, '"requires"', '"array"', "\"" + String(modifier.requires) + "\""));
} }
@ -502,31 +565,21 @@
}); });
} }
function getViewportRect(element) { function getViewportRect(element, strategy) {
var win = getWindow(element); var win = getWindow(element);
var html = getDocumentElement(element); var html = getDocumentElement(element);
var visualViewport = win.visualViewport; var visualViewport = win.visualViewport;
var width = html.clientWidth; var width = html.clientWidth;
var height = html.clientHeight; var height = html.clientHeight;
var x = 0; var x = 0;
var y = 0; // NB: This isn't supported on iOS <= 12. If the keyboard is open, the popper var y = 0;
// can be obscured underneath it.
// Also, `html.clientHeight` adds the bottom bar height in Safari iOS, even
// if it isn't open, so if this isn't available, the popper will be detected
// to overflow the bottom of the screen too early.
if (visualViewport) { if (visualViewport) {
width = visualViewport.width; width = visualViewport.width;
height = visualViewport.height; // Uses Layout Viewport (like Chrome; Safari does not currently) height = visualViewport.height;
// In Chrome, it returns a value very close to 0 (+/-) but contains rounding var layoutViewport = isLayoutViewport();
// errors due to floating point numbers, so we need to check precision.
// Safari returns a number <= 0, usually < -1 when pinch-zoomed if (layoutViewport || !layoutViewport && strategy === 'fixed') {
// Feature detection fails in mobile emulation mode in Chrome.
// Math.abs(win.innerWidth / visualViewport.scale - visualViewport.width) <
// 0.001
// Fallback here: "Not Safari" userAgent
if (!/^((?!chrome|android).)*safari/i.test(navigator.userAgent)) {
x = visualViewport.offsetLeft; x = visualViewport.offsetLeft;
y = visualViewport.offsetTop; y = visualViewport.offsetTop;
} }
@ -540,10 +593,6 @@
}; };
} }
var max = Math.max;
var min = Math.min;
var round = Math.round;
// of the `<html>` and `<body>` rect bounds if horizontally scrollable // of the `<html>` and `<body>` rect bounds if horizontally scrollable
function getDocumentRect(element) { function getDocumentRect(element) {
@ -601,8 +650,8 @@
}); });
} }
function getInnerBoundingClientRect(element) { function getInnerBoundingClientRect(element, strategy) {
var rect = getBoundingClientRect(element); var rect = getBoundingClientRect(element, false, strategy === 'fixed');
rect.top = rect.top + element.clientTop; rect.top = rect.top + element.clientTop;
rect.left = rect.left + element.clientLeft; rect.left = rect.left + element.clientLeft;
rect.bottom = rect.top + element.clientHeight; rect.bottom = rect.top + element.clientHeight;
@ -614,8 +663,8 @@
return rect; return rect;
} }
function getClientRectFromMixedType(element, clippingParent) { function getClientRectFromMixedType(element, clippingParent, strategy) {
return clippingParent === viewport ? rectToClientRect(getViewportRect(element)) : isHTMLElement(clippingParent) ? getInnerBoundingClientRect(clippingParent) : rectToClientRect(getDocumentRect(getDocumentElement(element))); return clippingParent === viewport ? rectToClientRect(getViewportRect(element, strategy)) : isElement(clippingParent) ? getInnerBoundingClientRect(clippingParent, strategy) : rectToClientRect(getDocumentRect(getDocumentElement(element)));
} // A "clipping parent" is an overflowable container with the characteristic of } // A "clipping parent" is an overflowable container with the characteristic of
// clipping (or hiding) overflowing elements with a position different from // clipping (or hiding) overflowing elements with a position different from
// `initial` // `initial`
@ -638,18 +687,18 @@
// clipping parents // clipping parents
function getClippingRect(element, boundary, rootBoundary) { function getClippingRect(element, boundary, rootBoundary, strategy) {
var mainClippingParents = boundary === 'clippingParents' ? getClippingParents(element) : [].concat(boundary); var mainClippingParents = boundary === 'clippingParents' ? getClippingParents(element) : [].concat(boundary);
var clippingParents = [].concat(mainClippingParents, [rootBoundary]); var clippingParents = [].concat(mainClippingParents, [rootBoundary]);
var firstClippingParent = clippingParents[0]; var firstClippingParent = clippingParents[0];
var clippingRect = clippingParents.reduce(function (accRect, clippingParent) { var clippingRect = clippingParents.reduce(function (accRect, clippingParent) {
var rect = getClientRectFromMixedType(element, clippingParent); var rect = getClientRectFromMixedType(element, clippingParent, strategy);
accRect.top = max(rect.top, accRect.top); accRect.top = max(rect.top, accRect.top);
accRect.right = min(rect.right, accRect.right); accRect.right = min(rect.right, accRect.right);
accRect.bottom = min(rect.bottom, accRect.bottom); accRect.bottom = min(rect.bottom, accRect.bottom);
accRect.left = max(rect.left, accRect.left); accRect.left = max(rect.left, accRect.left);
return accRect; return accRect;
}, getClientRectFromMixedType(element, firstClippingParent)); }, getClientRectFromMixedType(element, firstClippingParent, strategy));
clippingRect.width = clippingRect.right - clippingRect.left; clippingRect.width = clippingRect.right - clippingRect.left;
clippingRect.height = clippingRect.bottom - clippingRect.top; clippingRect.height = clippingRect.bottom - clippingRect.top;
clippingRect.x = clippingRect.left; clippingRect.x = clippingRect.left;
@ -758,6 +807,8 @@
var _options = options, var _options = options,
_options$placement = _options.placement, _options$placement = _options.placement,
placement = _options$placement === void 0 ? state.placement : _options$placement, placement = _options$placement === void 0 ? state.placement : _options$placement,
_options$strategy = _options.strategy,
strategy = _options$strategy === void 0 ? state.strategy : _options$strategy,
_options$boundary = _options.boundary, _options$boundary = _options.boundary,
boundary = _options$boundary === void 0 ? clippingParents : _options$boundary, boundary = _options$boundary === void 0 ? clippingParents : _options$boundary,
_options$rootBoundary = _options.rootBoundary, _options$rootBoundary = _options.rootBoundary,
@ -770,11 +821,10 @@
padding = _options$padding === void 0 ? 0 : _options$padding; padding = _options$padding === void 0 ? 0 : _options$padding;
var paddingObject = mergePaddingObject(typeof padding !== 'number' ? padding : expandToHashMap(padding, basePlacements)); var paddingObject = mergePaddingObject(typeof padding !== 'number' ? padding : expandToHashMap(padding, basePlacements));
var altContext = elementContext === popper ? reference : popper; var altContext = elementContext === popper ? reference : popper;
var referenceElement = state.elements.reference;
var popperRect = state.rects.popper; var popperRect = state.rects.popper;
var element = state.elements[altBoundary ? altContext : elementContext]; var element = state.elements[altBoundary ? altContext : elementContext];
var clippingClientRect = getClippingRect(isElement(element) ? element : element.contextElement || getDocumentElement(state.elements.popper), boundary, rootBoundary); var clippingClientRect = getClippingRect(isElement(element) ? element : element.contextElement || getDocumentElement(state.elements.popper), boundary, rootBoundary, strategy);
var referenceClientRect = getBoundingClientRect(referenceElement); var referenceClientRect = getBoundingClientRect(state.elements.reference);
var popperOffsets = computeOffsets({ var popperOffsets = computeOffsets({
reference: referenceClientRect, reference: referenceClientRect,
element: popperRect, element: popperRect,
@ -854,7 +904,8 @@
var isDestroyed = false; var isDestroyed = false;
var instance = { var instance = {
state: state, state: state,
setOptions: function setOptions(options) { setOptions: function setOptions(setOptionsAction) {
var options = typeof setOptionsAction === 'function' ? setOptionsAction(state.options) : setOptionsAction;
cleanupModifierEffects(); cleanupModifierEffects();
state.options = Object.assign({}, defaultOptions, state.options, options); state.options = Object.assign({}, defaultOptions, state.options, options);
state.scrollParents = { state.scrollParents = {
@ -1029,7 +1080,8 @@
options: options options: options
}); });
var noopFn = function noopFn() {}; var noopFn = function noopFn() {
};
effectCleanupFns.push(cleanupFn || noopFn); effectCleanupFns.push(cleanupFn || noopFn);
} }
@ -1090,7 +1142,8 @@
name: 'eventListeners', name: 'eventListeners',
enabled: true, enabled: true,
phase: 'write', phase: 'write',
fn: function fn() {}, fn: function fn() {
},
effect: effect$2, effect: effect$2,
data: {} data: {}
}; };
@ -1134,8 +1187,8 @@
var win = window; var win = window;
var dpr = win.devicePixelRatio || 1; var dpr = win.devicePixelRatio || 1;
return { return {
x: round(round(x * dpr) / dpr) || 0, x: round(x * dpr) / dpr || 0,
y: round(round(y * dpr) / dpr) || 0 y: round(y * dpr) / dpr || 0
}; };
} }
@ -1145,18 +1198,28 @@
var popper = _ref2.popper, var popper = _ref2.popper,
popperRect = _ref2.popperRect, popperRect = _ref2.popperRect,
placement = _ref2.placement, placement = _ref2.placement,
variation = _ref2.variation,
offsets = _ref2.offsets, offsets = _ref2.offsets,
position = _ref2.position, position = _ref2.position,
gpuAcceleration = _ref2.gpuAcceleration, gpuAcceleration = _ref2.gpuAcceleration,
adaptive = _ref2.adaptive, adaptive = _ref2.adaptive,
roundOffsets = _ref2.roundOffsets; roundOffsets = _ref2.roundOffsets,
isFixed = _ref2.isFixed;
var _ref3 = roundOffsets === true ? roundOffsetsByDPR(offsets) : typeof roundOffsets === 'function' ? roundOffsets(offsets) : offsets, var _offsets$x = offsets.x,
_ref3$x = _ref3.x, x = _offsets$x === void 0 ? 0 : _offsets$x,
x = _ref3$x === void 0 ? 0 : _ref3$x, _offsets$y = offsets.y,
_ref3$y = _ref3.y, y = _offsets$y === void 0 ? 0 : _offsets$y;
y = _ref3$y === void 0 ? 0 : _ref3$y;
var _ref3 = typeof roundOffsets === 'function' ? roundOffsets({
x: x,
y: y
}) : {
x: x,
y: y
};
x = _ref3.x;
y = _ref3.y;
var hasX = offsets.hasOwnProperty('x'); var hasX = offsets.hasOwnProperty('x');
var hasY = offsets.hasOwnProperty('y'); var hasY = offsets.hasOwnProperty('y');
var sideX = left; var sideX = left;
@ -1171,7 +1234,7 @@
if (offsetParent === getWindow(popper)) { if (offsetParent === getWindow(popper)) {
offsetParent = getDocumentElement(popper); offsetParent = getDocumentElement(popper);
if (getComputedStyle(offsetParent).position !== 'static') { if (getComputedStyle(offsetParent).position !== 'static' && position === 'absolute') {
heightProp = 'scrollHeight'; heightProp = 'scrollHeight';
widthProp = 'scrollWidth'; widthProp = 'scrollWidth';
} }
@ -1180,17 +1243,19 @@
offsetParent = offsetParent; offsetParent = offsetParent;
if (placement === top) { if (placement === top || (placement === left || placement === right) && variation === end) {
sideY = bottom; // $FlowFixMe[prop-missing] sideY = bottom;
var offsetY = isFixed && offsetParent === win && win.visualViewport ? win.visualViewport.height : // $FlowFixMe[prop-missing]
y -= offsetParent[heightProp] - popperRect.height; offsetParent[heightProp];
y -= offsetY - popperRect.height;
y *= gpuAcceleration ? 1 : -1; y *= gpuAcceleration ? 1 : -1;
} }
if (placement === left) { if (placement === left || (placement === top || placement === bottom) && variation === end) {
sideX = right; // $FlowFixMe[prop-missing] sideX = right;
var offsetX = isFixed && offsetParent === win && win.visualViewport ? win.visualViewport.width : // $FlowFixMe[prop-missing]
x -= offsetParent[widthProp] - popperRect.width; offsetParent[widthProp];
x -= offsetX - popperRect.width;
x *= gpuAcceleration ? 1 : -1; x *= gpuAcceleration ? 1 : -1;
} }
} }
@ -1199,18 +1264,29 @@
position: position position: position
}, adaptive && unsetSides); }, adaptive && unsetSides);
var _ref4 = roundOffsets === true ? roundOffsetsByDPR({
x: x,
y: y
}) : {
x: x,
y: y
};
x = _ref4.x;
y = _ref4.y;
if (gpuAcceleration) { if (gpuAcceleration) {
var _Object$assign; var _Object$assign;
return Object.assign({}, commonStyles, (_Object$assign = {}, _Object$assign[sideY] = hasY ? '0' : '', _Object$assign[sideX] = hasX ? '0' : '', _Object$assign.transform = (win.devicePixelRatio || 1) < 2 ? "translate(" + x + "px, " + y + "px)" : "translate3d(" + x + "px, " + y + "px, 0)", _Object$assign)); return Object.assign({}, commonStyles, (_Object$assign = {}, _Object$assign[sideY] = hasY ? '0' : '', _Object$assign[sideX] = hasX ? '0' : '', _Object$assign.transform = (win.devicePixelRatio || 1) <= 1 ? "translate(" + x + "px, " + y + "px)" : "translate3d(" + x + "px, " + y + "px, 0)", _Object$assign));
} }
return Object.assign({}, commonStyles, (_Object$assign2 = {}, _Object$assign2[sideY] = hasY ? y + "px" : '', _Object$assign2[sideX] = hasX ? x + "px" : '', _Object$assign2.transform = '', _Object$assign2)); return Object.assign({}, commonStyles, (_Object$assign2 = {}, _Object$assign2[sideY] = hasY ? y + "px" : '', _Object$assign2[sideX] = hasX ? x + "px" : '', _Object$assign2.transform = '', _Object$assign2));
} }
function computeStyles(_ref4) { function computeStyles(_ref5) {
var state = _ref4.state, var state = _ref5.state,
options = _ref4.options; options = _ref5.options;
var _options$gpuAccelerat = options.gpuAcceleration, var _options$gpuAccelerat = options.gpuAcceleration,
gpuAcceleration = _options$gpuAccelerat === void 0 ? true : _options$gpuAccelerat, gpuAcceleration = _options$gpuAccelerat === void 0 ? true : _options$gpuAccelerat,
_options$adaptive = options.adaptive, _options$adaptive = options.adaptive,
@ -1230,9 +1306,11 @@
var commonStyles = { var commonStyles = {
placement: getBasePlacement(state.placement), placement: getBasePlacement(state.placement),
variation: getVariation(state.placement),
popper: state.elements.popper, popper: state.elements.popper,
popperRect: state.rects.popper, popperRect: state.rects.popper,
gpuAcceleration: gpuAcceleration gpuAcceleration: gpuAcceleration,
isFixed: state.options.strategy === 'fixed'
}; };
if (state.modifiersData.popperOffsets != null) { if (state.modifiersData.popperOffsets != null) {
@ -1408,6 +1486,7 @@
bottom: 'top', bottom: 'top',
top: 'bottom' top: 'bottom'
}; };
function getOppositePlacement(placement) { function getOppositePlacement(placement) {
return placement.replace(/left|right|bottom|top/g, function (matched) { return placement.replace(/left|right|bottom|top/g, function (matched) {
return hash$1[matched]; return hash$1[matched];
@ -1418,6 +1497,7 @@
start: 'end', start: 'end',
end: 'start' end: 'start'
}; };
function getOppositeVariationPlacement(placement) { function getOppositeVariationPlacement(placement) {
return placement.replace(/start|end/g, function (matched) { return placement.replace(/start|end/g, function (matched) {
return hash[matched]; return hash[matched];
@ -1616,6 +1696,11 @@
return max(min$1, min(value, max$1)); return max(min$1, min(value, max$1));
} }
function withinMaxClamp(min, value, max) {
var v = within(min, value, max);
return v > max ? max : v;
}
function preventOverflow(_ref) { function preventOverflow(_ref) {
var state = _ref.state, var state = _ref.state,
options = _ref.options, options = _ref.options,
@ -1649,6 +1734,14 @@
var tetherOffsetValue = typeof tetherOffset === 'function' ? tetherOffset(Object.assign({}, state.rects, { var tetherOffsetValue = typeof tetherOffset === 'function' ? tetherOffset(Object.assign({}, state.rects, {
placement: state.placement placement: state.placement
})) : tetherOffset; })) : tetherOffset;
var normalizedTetherOffsetValue = typeof tetherOffsetValue === 'number' ? {
mainAxis: tetherOffsetValue,
altAxis: tetherOffsetValue
} : Object.assign({
mainAxis: 0,
altAxis: 0
}, tetherOffsetValue);
var offsetModifierState = state.modifiersData.offset ? state.modifiersData.offset[state.placement] : null;
var data = { var data = {
x: 0, x: 0,
y: 0 y: 0
@ -1658,13 +1751,15 @@
return; return;
} }
if (checkMainAxis || checkAltAxis) { if (checkMainAxis) {
var _offsetModifierState$;
var mainSide = mainAxis === 'y' ? top : left; var mainSide = mainAxis === 'y' ? top : left;
var altSide = mainAxis === 'y' ? bottom : right; var altSide = mainAxis === 'y' ? bottom : right;
var len = mainAxis === 'y' ? 'height' : 'width'; var len = mainAxis === 'y' ? 'height' : 'width';
var offset = popperOffsets[mainAxis]; var offset = popperOffsets[mainAxis];
var min$1 = popperOffsets[mainAxis] + overflow[mainSide]; var min$1 = offset + overflow[mainSide];
var max$1 = popperOffsets[mainAxis] - overflow[altSide]; var max$1 = offset - overflow[altSide];
var additive = tether ? -popperRect[len] / 2 : 0; var additive = tether ? -popperRect[len] / 2 : 0;
var minLen = variation === start ? referenceRect[len] : popperRect[len]; var minLen = variation === start ? referenceRect[len] : popperRect[len];
var maxLen = variation === start ? -popperRect[len] : -referenceRect[len]; // We need to include the arrow in the calculation so the arrow doesn't go var maxLen = variation === start ? -popperRect[len] : -referenceRect[len]; // We need to include the arrow in the calculation so the arrow doesn't go
@ -1684,37 +1779,46 @@
// width or height) // width or height)
var arrowLen = within(0, referenceRect[len], arrowRect[len]); var arrowLen = within(0, referenceRect[len], arrowRect[len]);
var minOffset = isBasePlacement ? referenceRect[len] / 2 - additive - arrowLen - arrowPaddingMin - tetherOffsetValue : minLen - arrowLen - arrowPaddingMin - tetherOffsetValue; var minOffset = isBasePlacement ? referenceRect[len] / 2 - additive - arrowLen - arrowPaddingMin - normalizedTetherOffsetValue.mainAxis : minLen - arrowLen - arrowPaddingMin - normalizedTetherOffsetValue.mainAxis;
var maxOffset = isBasePlacement ? -referenceRect[len] / 2 + additive + arrowLen + arrowPaddingMax + tetherOffsetValue : maxLen + arrowLen + arrowPaddingMax + tetherOffsetValue; var maxOffset = isBasePlacement ? -referenceRect[len] / 2 + additive + arrowLen + arrowPaddingMax + normalizedTetherOffsetValue.mainAxis : maxLen + arrowLen + arrowPaddingMax + normalizedTetherOffsetValue.mainAxis;
var arrowOffsetParent = state.elements.arrow && getOffsetParent(state.elements.arrow); var arrowOffsetParent = state.elements.arrow && getOffsetParent(state.elements.arrow);
var clientOffset = arrowOffsetParent ? mainAxis === 'y' ? arrowOffsetParent.clientTop || 0 : arrowOffsetParent.clientLeft || 0 : 0; var clientOffset = arrowOffsetParent ? mainAxis === 'y' ? arrowOffsetParent.clientTop || 0 : arrowOffsetParent.clientLeft || 0 : 0;
var offsetModifierValue = state.modifiersData.offset ? state.modifiersData.offset[state.placement][mainAxis] : 0; var offsetModifierValue = (_offsetModifierState$ = offsetModifierState == null ? void 0 : offsetModifierState[mainAxis]) != null ? _offsetModifierState$ : 0;
var tetherMin = popperOffsets[mainAxis] + minOffset - offsetModifierValue - clientOffset; var tetherMin = offset + minOffset - offsetModifierValue - clientOffset;
var tetherMax = popperOffsets[mainAxis] + maxOffset - offsetModifierValue; var tetherMax = offset + maxOffset - offsetModifierValue;
if (checkMainAxis) {
var preventedOffset = within(tether ? min(min$1, tetherMin) : min$1, offset, tether ? max(max$1, tetherMax) : max$1); var preventedOffset = within(tether ? min(min$1, tetherMin) : min$1, offset, tether ? max(max$1, tetherMax) : max$1);
popperOffsets[mainAxis] = preventedOffset; popperOffsets[mainAxis] = preventedOffset;
data[mainAxis] = preventedOffset - offset; data[mainAxis] = preventedOffset - offset;
} }
if (checkAltAxis) { if (checkAltAxis) {
var _offsetModifierState$2;
var _mainSide = mainAxis === 'x' ? top : left; var _mainSide = mainAxis === 'x' ? top : left;
var _altSide = mainAxis === 'x' ? bottom : right; var _altSide = mainAxis === 'x' ? bottom : right;
var _offset = popperOffsets[altAxis]; var _offset = popperOffsets[altAxis];
var _len = altAxis === 'y' ? 'height' : 'width';
var _min = _offset + overflow[_mainSide]; var _min = _offset + overflow[_mainSide];
var _max = _offset - overflow[_altSide]; var _max = _offset - overflow[_altSide];
var _preventedOffset = within(tether ? min(_min, tetherMin) : _min, _offset, tether ? max(_max, tetherMax) : _max); var isOriginSide = [top, left].indexOf(basePlacement) !== -1;
var _offsetModifierValue = (_offsetModifierState$2 = offsetModifierState == null ? void 0 : offsetModifierState[altAxis]) != null ? _offsetModifierState$2 : 0;
var _tetherMin = isOriginSide ? _min : _offset - referenceRect[_len] - popperRect[_len] - _offsetModifierValue + normalizedTetherOffsetValue.altAxis;
var _tetherMax = isOriginSide ? _offset + referenceRect[_len] + popperRect[_len] - _offsetModifierValue - normalizedTetherOffsetValue.altAxis : _max;
var _preventedOffset = tether && isOriginSide ? withinMaxClamp(_tetherMin, _offset, _tetherMax) : within(tether ? _tetherMin : _min, _offset, tether ? _tetherMax : _max);
popperOffsets[altAxis] = _preventedOffset; popperOffsets[altAxis] = _preventedOffset;
data[altAxis] = _preventedOffset - _offset; data[altAxis] = _preventedOffset - _offset;
} }
}
state.modifiersData[name] = data; state.modifiersData[name] = data;
} // eslint-disable-next-line import/no-unused-modules } // eslint-disable-next-line import/no-unused-modules

96
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) {
@ -433,17 +434,18 @@
}; };
}, },
getCenterAdaptPosition: function (combo, popup) { getCenterAdaptPosition: function (combo, popup, positionRelativeElement) {
var comboOffset = combo.element.offset(); var comboRect = combo.element[0].getBoundingClientRect(),
var comboBounds = combo.element.bounds(), popupBounds = popup.element.bounds(), popupRect = popup.element[0].getBoundingClientRect(),
windowBounds = BI.Widget._renderEngine.createElement("body").bounds(); positionRelativeElementRect = positionRelativeElement.getBoundingClientRect(),
viewportBounds = document.documentElement.getBoundingClientRect();
var left; var left;
if (comboOffset.left + comboBounds.width / 2 + popupBounds.width / 2 > windowBounds.width) { if (comboRect.left + comboRect.width / 2 + popupRect.width / 2 > viewportBounds.width) {
left = windowBounds.width - popupBounds.width; left = viewportBounds.width - comboRect.width - positionRelativeElementRect.left;
} else { } else {
left = comboOffset.left + comboBounds.width / 2 - popupBounds.width / 2; left = comboRect.left + (comboRect.width - popupRect.width) / 2 - positionRelativeElementRect.left;
} }
if (left < 0) { if (left + positionRelativeElementRect.left < 0) {
left = 0; left = 0;
} }
return { return {
@ -451,17 +453,19 @@
}; };
}, },
getMiddleAdaptPosition: function (combo, popup) { getMiddleAdaptPosition: function (combo, popup, positionRelativeElement) {
var comboOffset = combo.element.offset(); var comboRect = combo.element[0].getBoundingClientRect(),
var comboBounds = combo.element.bounds(), popupBounds = popup.element.bounds(), popupRect = popup.element[0].getBoundingClientRect(),
windowBounds = BI.Widget._renderEngine.createElement("body").bounds(); positionRelativeElementRect = positionRelativeElement.getBoundingClientRect(),
viewportBounds = document.documentElement.getBoundingClientRect();
var top; var top;
if (comboOffset.top + comboBounds.height / 2 + popupBounds.height / 2 > windowBounds.height) { if (comboRect.top + comboRect.height / 2 + popupRect.height / 2 > viewportBounds.height) {
top = windowBounds.height - popupBounds.height; top = viewportBounds.height - popupRect.height - positionRelativeElementRect.top;
} else { } else {
top = comboOffset.top + comboBounds.height / 2 - popupBounds.height / 2; top = comboRect.top + (comboRect.height - popupRect.height) / 2 - positionRelativeElementRect.top;
} }
if (top < 0) { if (top + positionRelativeElementRect.top < 0) {
top = 0; top = 0;
} }
return { return {
@ -681,19 +685,19 @@
switch (offsetStyle) { switch (offsetStyle) {
case "center": case "center":
if (position.change) { if (position.change) {
var p = BI.DOM.getMiddleAdaptPosition(combo, popup); var p = BI.DOM.getMiddleAdaptPosition(combo, popup, positionRelativeElement);
position.top = p.top; position.top = p.top;
} else { } else {
var p = BI.DOM.getCenterAdaptPosition(combo, popup); var p = BI.DOM.getCenterAdaptPosition(combo, popup, positionRelativeElement);
position.left = p.left; position.left = p.left;
} }
break; break;
case "middle": case "middle":
if (position.change) { if (position.change) {
var p = BI.DOM.getCenterAdaptPosition(combo, popup); var p = BI.DOM.getCenterAdaptPosition(combo, popup, positionRelativeElement);
position.left = p.left; position.left = p.left;
} else { } else {
var p = BI.DOM.getMiddleAdaptPosition(combo, popup); var p = BI.DOM.getMiddleAdaptPosition(combo, popup, positionRelativeElement);
position.top = p.top; position.top = p.top;
} }
break; break;
@ -729,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
};
},
}); });
})(); })();

3
src/core/platform/web/function.js

@ -140,8 +140,9 @@ BI._.extend(BI, {
}, },
getMinimumFontSize: function () { getMinimumFontSize: function () {
// not work for firefox
const el = document.createElement('div'); const el = document.createElement('div');
el.style.fontSize = "0px"; el.style.fontSize = "1px";
document.body.appendChild(el); document.body.appendChild(el);
const size = getComputedStyle(el).fontSize; const size = getComputedStyle(el).fontSize;
el.remove(); el.remove();

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