move environment styles into js

KingSora · Apr 5, 2024 · 59061bc · 59061bc
1 parent 8b2ebdf
commit 59061bc
Show file tree

Hide file tree

Showing 6 changed files with 9 additions and 73 deletions.
diff --git a/README.md b/README.md
@@ -107,8 +107,6 @@ The examples in this documentation will use the `import` syntax instead of the `
 
 ## Initialization
 
-> __Note__: During initialization its expected that the <b>CSS file is loaded and parsed</b> by the browser.
-
 You can initialize either directly with an `Element` or with an `Object` where you have more control over the initialization process. 
 
 ```js

diff --git a/packages/overlayscrollbars/CHANGELOG.md b/packages/overlayscrollbars/CHANGELOG.md
@@ -5,8 +5,7 @@
 ### Improvements
 
 - When interacting with a scrollbar the `viewport` element gets focused under certain conditions. (Like e.g. the previously focused element is not and interactive element.)
-- General accessibility focus improvements.
-
+- Move the environment styles from the stylesheet into javascript to remove the requirement of loaded styles for correct functionality.
 
 ## 2.7.0
 

diff --git a/packages/overlayscrollbars/README.md b/packages/overlayscrollbars/README.md
@@ -107,8 +107,6 @@ The examples in this documentation will use the `import` syntax instead of the `
 
 ## Initialization
 
-> __Note__: During initialization its expected that the <b>CSS file is loaded and parsed</b> by the browser.
-
 You can initialize either directly with an `Element` or with an `Object` where you have more control over the initialization process. 
 
 ```js

diff --git a/packages/overlayscrollbars/src/environment.ts b/packages/overlayscrollbars/src/environment.ts
@@ -121,7 +121,11 @@ const createEnvironment = (): Env => {
   };
 
   const { body } = document;
-  const envDOM = createDOM(`<div class="${classNameEnvironment}"><div></div></div>`);
+  // changes to this styles need to be reflected in the "hide native scrollbars" section of the structure styles
+  const envStyle = `.${classNameEnvironment}{scroll-behavior:auto!important;position:fixed;opacity:0;visibility:hidden;overflow:scroll;height:200px;width:200px;z-index:-1}.${classNameEnvironment} div{width:200%;height:200%;margin:10px 0}.${classNameEnvironmentScrollbarHidden}{scrollbar-width:none!important}.${classNameEnvironmentScrollbarHidden}::-webkit-scrollbar,.${classNameEnvironmentScrollbarHidden}::-webkit-scrollbar-corner{appearance:none!important;display:none!important;width:0!important;height:0!important}`;
+  const envDOM = createDOM(
+    `<div class="${classNameEnvironment}"><div></div><style>${envStyle}</style></div>`
+  );
   const envElm = envDOM[0] as HTMLElement;
   const envChildElm = envElm.firstChild as HTMLElement;
   const [addEvent, , triggerEvent] = createEventListenerHub<EnvironmentEventArgs>();

diff --git a/packages/overlayscrollbars/src/styles/structure.scss b/packages/overlayscrollbars/src/styles/structure.scss
@@ -1,80 +1,19 @@
-/**
- * environment setup 
- */
-
-.os-environment {
-  scroll-behavior: auto !important;
-  position: fixed;
-  opacity: 0;
-  visibility: hidden;
-  overflow: scroll;
-  height: 200px;
-  width: 200px;
-  z-index: -1;
-
-  div {
-    width: 200%;
-    height: 200%;
-    margin: 10px 0;
-  }
-
-  &.os-environment-flexbox-glue {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    height: auto;
-    width: auto;
-    min-height: 200px;
-    min-width: 200px;
-
-    div {
-      flex: auto;
-      width: auto;
-      height: auto;
-      max-height: 100%;
-      max-width: 100%;
-      margin: 0;
-    }
-  }
-
-  &.os-environment-flexbox-glue-max {
-    max-height: 200px;
-
-    div {
-      overflow: visible;
-
-      &::before {
-        content: '';
-        display: block;
-        height: 999px;
-        width: 999px;
-      }
-    }
-  }
-}
-
 /**
  * hide native scrollbars
+ * changes to this styles need to be reflected in the environment styles to correctly detect scrollbar hiding
  */
 
-.os-environment,
-[data-overlayscrollbars-viewport] {
-  -ms-overflow-style: scrollbar !important;
-}
 [data-overlayscrollbars-initialize],
 [data-overlayscrollbars~='scrollbarHidden'],
-[data-overlayscrollbars-viewport~='scrollbarHidden'],
-.os-environment-scrollbar-hidden {
+[data-overlayscrollbars-viewport~='scrollbarHidden'] {
   scrollbar-width: none !important;
 }
 [data-overlayscrollbars-initialize]::-webkit-scrollbar,
 [data-overlayscrollbars-initialize]::-webkit-scrollbar-corner,
 [data-overlayscrollbars~='scrollbarHidden']::-webkit-scrollbar,
 [data-overlayscrollbars~='scrollbarHidden']::-webkit-scrollbar-corner,
 [data-overlayscrollbars-viewport~='scrollbarHidden']::-webkit-scrollbar,
-[data-overlayscrollbars-viewport~='scrollbarHidden']::-webkit-scrollbar-corner,
-.os-environment-scrollbar-hidden::-webkit-scrollbar,
-.os-environment-scrollbar-hidden::-webkit-scrollbar-corner {
+[data-overlayscrollbars-viewport~='scrollbarHidden']::-webkit-scrollbar-corner {
   appearance: none !important;
   display: none !important;
   width: 0 !important;

diff --git a/website/mdx/README.mdx b/website/mdx/README.mdx
@@ -84,8 +84,6 @@ The examples in this documentation will use the `import` syntax instead of the `
 
 ## Initialization
 
-> __Note__: During initialization its expected that the <b>CSS file is loaded and parsed</b> by the browser.
-
 You can initialize either directly with an `Element` or with an `Object` where you have more control over the initialization process. 
 
 ```js