improve code

packages/overlayscrollbars/src/observers/sizeObserver.ts

@@ -20,8 +20,10 @@ import {
   rAF,
   ResizeObserverConstructor,
   isArray,
+  indexOf,
+  each,
+  isBoolean,
 } from 'support';
-import { CSSDirection } from 'typings';
 import { getEnvironment } from 'environment';
 import {
   classNameSizeObserver,
@@ -35,8 +37,19 @@ import {
 const animationStartEventName = 'animationstart';
 const scrollEventName = 'scroll';
 const scrollAmount = 3333333;
-const getDirection = (elm: HTMLElement): CSSDirection => style(elm, 'direction') as CSSDirection;
-const domRectHasDimensions = (rect?: DOMRectReadOnly) => rect && (rect.height > 0 || rect.width > 0);
+const directionIsRTLMap = {
+  direction: ['rtl'],
+  // 'writing-mode': ['sideways-rl', 'tb', 'tb-rl', 'vertical-rl'],
+};
+const directionIsRTL = (elm: HTMLElement): boolean => {
+  let isRTL = false;
+  const styles = style(elm, ['direction' /* , 'writing-mode' */]);
+  each(styles, (value, key) => {
+    isRTL = isRTL || indexOf(directionIsRTLMap[key], value) > -1;
+  });
+  return isRTL;
+};
+const domRectHasDimensions = (rect?: DOMRectReadOnly) => rect && (rect.height || rect.width);
 
 interface SizeObserverEntry {
   contentRect: DOMRectReadOnly;
@@ -44,7 +57,7 @@ interface SizeObserverEntry {
 export type SizeObserverOptions = { _direction?: boolean; _appear?: boolean };
 export const createSizeObserver = (
   target: HTMLElement,
-  onSizeChangedCallback: (directionCache?: Cache<CSSDirection>) => any,
+  onSizeChangedCallback: (directionIsRTLCache?: Cache<boolean>) => any,
   options?: SizeObserverOptions
 ): (() => void) => {
   const { _direction: observeDirectionChange = false, _appear: observeAppearChange = false } = options || {};
@@ -61,8 +74,8 @@ export const createSizeObserver = (
         (!domRectHasDimensions(currVal) && domRectHasDimensions(newVal))
       ),
   });
-  const onSizeChangedCallbackProxy = (sizeChangedContext?: Cache<CSSDirection> | SizeObserverEntry[] | Event) => {
-    const directionCacheValue = sizeChangedContext && (sizeChangedContext as Cache<CSSDirection>)._value;
+  const onSizeChangedCallbackProxy = (sizeChangedContext?: Cache<boolean> | SizeObserverEntry[] | Event) => {
+    const hasDirectionCache = sizeChangedContext && isBoolean((sizeChangedContext as Cache<boolean>)._value);
 
     let skip = false;
     let doDirectionScroll = true; // always true if sizeChangedContext is Event (appear callback or RO. Polyfill)
@@ -74,18 +87,18 @@ export const createSizeObserver = (
       doDirectionScroll = !skip && _changed; // direction scroll when not skipping and changing from display: none to block, false otherwise
     }
     // else if its triggered with DirectionCache
-    else if (directionCacheValue) {
-      doDirectionScroll = (sizeChangedContext as Cache<CSSDirection>)._changed; // direction scroll when DirectionCache changed, false toherwise
+    else if (hasDirectionCache) {
+      doDirectionScroll = (sizeChangedContext as Cache<boolean>)._changed; // direction scroll when DirectionCache changed, false toherwise
     }
 
-    if (observeDirectionChange && doDirectionScroll) {
-      const rtl = (directionCacheValue || getDirection(sizeObserver)) === 'rtl';
+    if (observeDirectionChange) {
+      const rtl = hasDirectionCache ? (sizeChangedContext as Cache<boolean>)._value : directionIsRTL(sizeObserver);
       scrollLeft(sizeObserver, rtl ? (rtlScrollBehavior.n ? -scrollAmount : rtlScrollBehavior.i ? 0 : scrollAmount) : scrollAmount);
       scrollTop(sizeObserver, scrollAmount);
     }
 
     if (!skip) {
-      onSizeChangedCallback(directionCacheValue ? (sizeChangedContext as Cache<CSSDirection>) : undefined);
+      onSizeChangedCallback(hasDirectionCache ? (sizeChangedContext as Cache<boolean>) : undefined);
     }
   };
   const offListeners: (() => void)[] = [];
@@ -156,19 +169,19 @@ export const createSizeObserver = (
   }
 
   if (observeDirectionChange) {
-    const updateDirectionCache = createCache(() => getDirection(sizeObserver));
+    const updateDirectionIsRTLCache = createCache(() => directionIsRTL(sizeObserver));
     push(
       offListeners,
       on(sizeObserver, scrollEventName, (event: Event) => {
-        const directionCache = updateDirectionCache();
-        const { _value, _changed } = directionCache;
+        const directionIsRTLCache = updateDirectionIsRTLCache();
+        const { _value, _changed } = directionIsRTLCache;
         if (_changed) {
-          if (_value === 'rtl') {
+          if (_value) {
             style(listenerElement, { left: 'auto', right: 0 });
           } else {
             style(listenerElement, { left: 0, right: 'auto' });
           }
-          onSizeChangedCallbackProxy(directionCache);
+          onSizeChangedCallbackProxy(directionIsRTLCache);
         }
 
         preventDefault(event);

packages/overlayscrollbars/src/sizeobserver.scss

@@ -16,6 +16,7 @@ $scrollbar-cushion: 100px;
 .os-size-observer-listener,
 .os-size-observer-listener-item,
 .os-size-observer-listener-item-final {
+  writing-mode: horizontal-tb;
   position: absolute;
   left: 0;
   top: 0;

packages/overlayscrollbars/tests/browser/observers/sizeObserver/index.browser.ts

@@ -1,6 +1,7 @@
 import 'overlayscrollbars.scss';
 import './index.scss';
 import should from 'should';
+// import { generateClassChangeSelectCallback, iterateSelect, setTestResult, waitForOrFailTest, timeout } from '@/testing-browser';
 import { generateClassChangeSelectCallback, iterateSelect } from '@/testing-browser/Select';
 import { setTestResult, waitForOrFailTest } from '@/testing-browser/TestResult';
 import { timeout } from '@/testing-browser/timeout';
@@ -162,8 +163,8 @@ startBtn?.addEventListener('click', start);
 
 createSizeObserver(
   targetElm as HTMLElement,
-  (directionCache?: any) => {
-    if (directionCache) {
+  (directionIsRTLCache?: any) => {
+    if (directionIsRTLCache) {
       directionIterations += 1;
     } else {
       sizeIterations += 1;

packages/overlayscrollbars/tests/browser/observers/sizeObserver/index.html

@@ -44,6 +44,6 @@
 </div>
 <div id="stage">
   <div>
-    <div id="target"></div>
+    <div id="target">test</div>
   </div>
 </div>

packages/overlayscrollbars/tsconfig.json

@@ -3,7 +3,7 @@
   "compilerOptions": {
     "baseUrl": "./src/",
     "paths": {
-      "@/testing-browser*": ["../../testing-browser/src/*"]
+      "@/testing-browser*": ["../../testing-browser/src*"]
     }
   }
 }

packages/testing-browser/src/index.ts

@@ -0,0 +1,3 @@
+export * from 'Select';
+export * from 'TestResult';
+export * from 'Timeout';

rollup.config.base.js

@@ -202,7 +202,7 @@ const rollupConfig = (config = {}, { project = process.cwd(), overwrite = {}, si
         mainFields: ['browser', 'umd:main', 'module', 'main'],
         extensions: resolve.extensions,
         rootDir: srcPath,
-        moduleDirectories: [...resolve.directories.map((dir) => path.resolve(projectPath, dir)), path.resolve(__dirname, 'node_modules')],
+        moduleDirectories: resolve.directories,
       }),
       inject: rollupInject({
         ...(typeof inject === 'object' ? inject : {}),