improve code

This commit is contained in:
Rene
2022-07-06 13:13:37 +02:00
parent 26d87dd538
commit 4b59cb16b8
3 changed files with 19 additions and 13 deletions
@@ -1,5 +1,5 @@
import 'styles/overlayscrollbars.scss';
import './index.scss'; import './index.scss';
import 'styles/overlayscrollbars.scss';
import should from 'should'; import should from 'should';
import { OverlayScrollbars } from 'overlayscrollbars'; import { OverlayScrollbars } from 'overlayscrollbars';
@@ -28,11 +28,12 @@ const resizeBetweenB: HTMLElement | null = document.createElement('div');
let rootUpdateCount = 0; let rootUpdateCount = 0;
let aUpdateCount = 0; let aUpdateCount = 0;
let bUpdateCount = 0; let bUpdateCount = 0;
const osInstanceRoot = OverlayScrollbars( OverlayScrollbars(
targetRoot!, targetRoot!,
{}, {},
{ {
initialized() { initialized() {
addClass(targetRoot!.querySelector('.os-viewport'), 'flex');
addClass(resizeBetweenRoot, 'resize resizeBetween'); addClass(resizeBetweenRoot, 'resize resizeBetween');
targetRoot!.append(resizeBetweenRoot); targetRoot!.append(resizeBetweenRoot);
}, },
@@ -46,11 +47,12 @@ const osInstanceRoot = OverlayScrollbars(
}, },
} }
); );
const osInstanceA = OverlayScrollbars( OverlayScrollbars(
targetA!, targetA!,
{}, {},
{ {
initialized() { initialized() {
addClass(targetA!.querySelector('.os-viewport'), 'flex');
addClass(resizeBetweenA, 'resize resizeBetween'); addClass(resizeBetweenA, 'resize resizeBetween');
targetA!.append(resizeBetweenA); targetA!.append(resizeBetweenA);
}, },
@@ -65,7 +67,7 @@ const osInstanceA = OverlayScrollbars(
}, },
} }
); );
const osInstanceB = OverlayScrollbars( OverlayScrollbars(
targetB!, targetB!,
{}, {},
{ {
@@ -94,8 +96,6 @@ resize(resizeBetweenB!);
const start = async () => { const start = async () => {
setTestResult(null); setTestResult(null);
// target?.removeAttribute('style');
setTestResult(true); setTestResult(true);
}; };
@@ -1,19 +1,16 @@
<div id="controls"> <div id="controls">
<button id="start">start</button> <button id="start">start</button>
<div>UpdatesRoot: <span id="updatesRoot"></span></div>
<div>UpdatesA: <span id="updatesA"></span></div>
<div>UpdatesB:</div>
</div> </div>
<div id="stage"> <div id="stage">
<div> <div>
<div id="targetRoot" class="container"> <div id="targetRoot" class="container">
<div id="targetA" class="container"> <div id="targetA" class="container">
<div id="targetB" class="container"> <div id="targetB" class="container">
<div id="resizeB" class="resize">B <span id="updatesB"></span></div> <div id="resizeB" class="resize">UpdatesB: <span id="updatesB"></span></div>
</div> </div>
<div id="resizeA" class="resize">A</div> <div id="resizeA" class="resize">UpdatesA: <span id="updatesA"></span></div>
</div> </div>
<div id="resizeRoot" class="resize">Root</div> <div id="resizeRoot" class="resize">UpdatesRoot: <span id="updatesRoot"></span></div>
</div> </div>
</div> </div>
</div> </div>
@@ -25,6 +25,7 @@ body {
width: 60%; width: 60%;
height: 60%; height: 60%;
padding: 10px; padding: 10px;
margin: 10px;
} }
.resize { .resize {
@@ -42,7 +43,7 @@ body {
background: tomato; background: tomato;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
right: 0; left: 0;
} }
.resizeBtn { .resizeBtn {
@@ -58,3 +59,11 @@ body {
#targetRoot { #targetRoot {
height: 80%; height: 80%;
} }
#targetA {
box-sizing: border-box;
}
.flex {
display: flex;
}