Support css variables #2

README.md

@@ -68,6 +68,22 @@ let currZIndex2 = 2000
 currZIndex2 = domZIndex.getCurrent(currZIndex2) // 1500
 ```
 
+## Css var
+
+Using css variables.  
+
+* ```--dom-main-z-index``` be equivalent to ```getCurrent()```
+* ```--dom-sub-z-index``` be equivalent to ```getSubCurrent()```
+
+```css
+.my-popup {
+  z-index: var(--dom-main-z-index);
+}
+.my-msg {
+  z-index: var(--dom-sub-z-index);
+}
+```
+
 ## Contributors
 
 Thank you to everyone who contributed to this project.

index.ts

@@ -1,5 +1,9 @@
 let storeEl: HTMLElement | null = null
 let storeId = 'z-index-manage'
+
+let styleEl: HTMLStyleElement | null = null
+let styleId = 'z-index-style'
+
 let storeMainKey: 'm' = 'm'
 let storeSubKey: 's' = 's'
 
@@ -29,6 +33,29 @@ function getDomMaxZIndex () {
   return max
 }
 
+function getStyle () {
+  if (!styleEl) {
+    if (isDocument()) {
+      styleEl = document.getElementById(styleId) as HTMLStyleElement
+      if (!styleEl) {
+        styleEl = document.createElement('style')
+        styleEl.id = styleId
+        document.getElementsByTagName('head')[0].appendChild(styleEl)
+      }
+    }
+  }
+  return styleEl
+}
+
+function updateVar () {
+  let styEl = getStyle()
+  if (styEl) {
+    let prefixes = '--dom-'
+    let propKey = '-z-index'
+    styEl.innerHTML = ':root{' + prefixes + 'main' + propKey + ':' + getCurrent() + ';' + prefixes + 'sub' + propKey + ':' + getSubCurrent() + '}'
+  }
+}
+
 function getDom () {
   if (!storeEl) {
     if (isDocument()) {
@@ -60,6 +87,7 @@ function createSetHandle (key: keyof (typeof storeData)) {
         }
       }
     }
+    updateVar()
     return storeData[key]
   }
 }
@@ -121,4 +149,6 @@ const DomZIndex = {
   getMax: getDomMaxZIndex
 }
 
+updateVar()
+
 export default DomZIndex

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dom-zindex",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "Web common z-index style management",
   "files": [
     "dist",