optimize for ie11 and improve code

This commit is contained in:
Rene
2022-08-11 01:22:51 +02:00
parent 00f53367d4
commit e7c33ab5cd
3 changed files with 27 additions and 12 deletions
@@ -61,11 +61,17 @@ module.exports = (testDir, mode = 'dev', onListening = null) => {
dist, dist,
}, },
versions: [ versions: [
{ mode === 'dev'
format: 'esm', ? {
generatedCode: 'es2015', format: 'esm',
minifiedVersion: false, generatedCode: 'es2015',
}, minifiedVersion: false,
}
: {
format: 'iife',
generatedCode: 'es5',
minifiedVersion: false,
},
], ],
extractStyle: false, extractStyle: false,
rollup: { rollup: {
@@ -103,11 +103,13 @@ const createInteractiveScrollEvents = (
const { _rtlScrollBehavior } = getEnvironment(); const { _rtlScrollBehavior } = getEnvironment();
const { _handle, _track, _scrollbar } = scrollbarStructure; const { _handle, _track, _scrollbar } = scrollbarStructure;
const scrollLeftTopKey = `scroll${isHorizontal ? 'Left' : 'Top'}`; const scrollLeftTopKey = `scroll${isHorizontal ? 'Left' : 'Top'}`;
const clientXYKey = `client${isHorizontal ? 'X' : 'Y'}`; // for pointer event (can't use xy because of IE11)
const widthHeightKey = isHorizontal ? 'width' : 'height'; const widthHeightKey = isHorizontal ? 'width' : 'height';
const leftTopKey = isHorizontal ? 'left' : 'top'; // for BCR (can't use xy because of IE11)
const whKey = isHorizontal ? 'w' : 'h'; const whKey = isHorizontal ? 'w' : 'h';
const xyKey = isHorizontal ? 'x' : 'y'; const xyKey = isHorizontal ? 'x' : 'y';
const getHandleOffset = (handleRect: DOMRect, trackRect: DOMRect) => const getHandleOffset = (handleRect: DOMRect, trackRect: DOMRect) =>
handleRect[xyKey] - trackRect[xyKey]; handleRect[leftTopKey] - trackRect[leftTopKey];
const createRelativeHandleMove = const createRelativeHandleMove =
(mouseDownScroll: number, invertedScale: number) => (deltaMovement: number) => { (mouseDownScroll: number, invertedScale: number) => (deltaMovement: number) => {
const { _overflowAmount } = structureSetupState(); const { _overflowAmount } = structureSetupState();
@@ -131,12 +133,12 @@ const createInteractiveScrollEvents = (
scrollOffsetElement[scrollLeftTopKey] || 0, scrollOffsetElement[scrollLeftTopKey] || 0,
1 / getScale(scrollOffsetElement)[xyKey] 1 / getScale(scrollOffsetElement)[xyKey]
); );
const pointerDownOffset = pointerDownEvent[xyKey]; const pointerDownOffset = pointerDownEvent[clientXYKey];
const handleRect = getBoundingClientRect(_handle); const handleRect = getBoundingClientRect(_handle);
const trackRect = getBoundingClientRect(_track); const trackRect = getBoundingClientRect(_track);
const handleLength = handleRect[widthHeightKey]; const handleLength = handleRect[widthHeightKey];
const handleCenter = getHandleOffset(handleRect, trackRect) + handleLength / 2; const handleCenter = getHandleOffset(handleRect, trackRect) + handleLength / 2;
const relativeTrackPointerOffset = pointerDownOffset - trackRect[xyKey]; const relativeTrackPointerOffset = pointerDownOffset - trackRect[leftTopKey];
const startOffset = isDragScroll ? 0 : relativeTrackPointerOffset - handleCenter; const startOffset = isDragScroll ? 0 : relativeTrackPointerOffset - handleCenter;
const offFns = [ const offFns = [
@@ -144,7 +146,7 @@ const createInteractiveScrollEvents = (
_passive: false, _passive: false,
}), }),
on(_track, 'pointermove', (pointerMoveEvent: PointerEvent) => { on(_track, 'pointermove', (pointerMoveEvent: PointerEvent) => {
const relativeMovement = pointerMoveEvent[xyKey] - pointerDownOffset; const relativeMovement = pointerMoveEvent[clientXYKey] - pointerDownOffset;
if (isDragScroll || instantClickScroll) { if (isDragScroll || instantClickScroll) {
moveHandleRelative(startOffset + relativeMovement); moveHandleRelative(startOffset + relativeMovement);
@@ -135,10 +135,17 @@ if (!useContentElement) {
const initObj = hasClass(document.body, 'tvp') const initObj = hasClass(document.body, 'tvp')
? { ? {
target: target!, target: target!,
viewport: target!, elements: {
content: useContentElement, viewport: target!,
content: useContentElement,
},
} }
: { target: target!, content: useContentElement }; : {
target: target!,
elements: {
content: useContentElement,
},
};
let updateCount = 0; let updateCount = 0;
// @ts-ignore // @ts-ignore