Web common z-index style management

.editorconfig

@@ -0,0 +1,5 @@
+[*.{js,jsx,ts,tsx,vue}]
+indent_style = space
+indent_size = 2
+trim_trailing_whitespace = true
+insert_final_newline = true

.gitignore

@@ -0,0 +1,26 @@
+.DS_Store
+.history
+node_modules
+/dist
+/es
+/lib
+package-lock.json
+yarn.lock
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

README.md

@@ -0,0 +1,39 @@
+# dom-zindex
+
+English | [简体中文](README.zh-CN.md)  
+
+[![npm version](https://img.shields.io/npm/v/dom-zindex.svg?style=flat-square)](https://www.npmjs.com/package/dom-zindex)
+[![npm build](https://travis-ci.com/x-extends/dom-zindex.svg?branch=master)](https://travis-ci.com/x-extends/dom-zindex)
+[![npm downloads](https://img.shields.io/npm/dt/dom-zindex.svg?style=flat-square)](https://npm-stat.com/charts.html?package=dom-zindex)
+[![issues](https://img.shields.io/github/issues/x-extends/dom-zindex.svg)](https://github.com/x-extends/dom-zindex/issues)
+[![issues closed](https://img.shields.io/github/issues-closed/x-extends/dom-zindex.svg)](https://github.com/x-extends/dom-zindex/issues?q=is%3Aissue+is%3Aclosed)
+[![pull requests](https://img.shields.io/github/issues-pr/x-extends/dom-zindex.svg)](https://github.com/x-extends/dom-zindex/pulls)
+[![pull requests closed](https://img.shields.io/github/issues-pr-closed/x-extends/dom-zindex.svg)](https://github.com/x-extends/dom-zindex/pulls?q=is%3Apr+is%3Aclosed)
+[![npm license](https://img.shields.io/github/license/mashape/apistatus.svg)](LICENSE)
+
+Web common z-index style management.
+
+## Browser Support
+
+![Edge](https://raw.github.com/alrra/browser-logos/master/src/edge/edge_48x48.png) | ![Chrome](https://raw.github.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png) | ![Firefox](https://raw.github.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png) | ![Opera](https://raw.github.com/alrra/browser-logos/master/src/opera/opera_48x48.png) | ![Safari](https://raw.github.com/alrra/browser-logos/master/src/safari/safari_48x48.png)
+--- | --- | --- | --- | --- |
+Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ |
+
+## Installing
+
+```shell
+npm install dom-zindex
+```
+
+### CDN
+
+It is not recommended to use the public CDN address for production, because the connection may fail at any time, causing the project to hang up;  
+Remember to lock the version number by using CDN to avoid being affected by incompatible updates.
+
+```HTML
+<script src="https://unpkg.com/dom-zindex"></script>
+```
+
+## License
+
+[MIT](LICENSE) © 2019-present, Xu Liangzhan

README.zh-CN.md

@@ -0,0 +1,39 @@
+# dom-zindex
+
+简体中文 | [繁體中文](README.zh-TW.md) | [English](README.en.md)  
+
+[![npm version](https://img.shields.io/npm/v/dom-zindex.svg?style=flat-square)](https://www.npmjs.com/package/dom-zindex)
+[![npm build](https://travis-ci.com/x-extends/dom-zindex.svg?branch=master)](https://travis-ci.com/x-extends/dom-zindex)
+[![npm downloads](https://img.shields.io/npm/dt/dom-zindex.svg?style=flat-square)](https://npm-stat.com/charts.html?package=dom-zindex)
+[![issues](https://img.shields.io/github/issues/x-extends/dom-zindex.svg)](https://github.com/x-extends/dom-zindex/issues)
+[![issues closed](https://img.shields.io/github/issues-closed/x-extends/dom-zindex.svg)](https://github.com/x-extends/dom-zindex/issues?q=is%3Aissue+is%3Aclosed)
+[![pull requests](https://img.shields.io/github/issues-pr/x-extends/dom-zindex.svg)](https://github.com/x-extends/dom-zindex/pulls)
+[![pull requests closed](https://img.shields.io/github/issues-pr-closed/x-extends/dom-zindex.svg)](https://github.com/x-extends/dom-zindex/pulls?q=is%3Apr+is%3Aclosed)
+[![npm license](https://img.shields.io/github/license/mashape/apistatus.svg)](LICENSE)
+
+Web 通用的 z-index style 管理器  
+
+## Browser Support
+
+![Edge](https://raw.github.com/alrra/browser-logos/master/src/edge/edge_48x48.png) | ![Chrome](https://raw.github.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png) | ![Firefox](https://raw.github.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png) | ![Opera](https://raw.github.com/alrra/browser-logos/master/src/opera/opera_48x48.png) | ![Safari](https://raw.github.com/alrra/browser-logos/master/src/safari/safari_48x48.png)
+--- | --- | --- | --- | --- |
+Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ |
+
+## 安装
+
+```shell
+npm install dom-zindex
+```
+
+### CDN
+
+不建议将第三方的 CDN 地址用于生产，因为该连接随时都可能会失效，导致项目挂掉;  
+使用 CDN 方式记得锁定版本号，避免受到非兼容性更新的影响
+
+```HTML
+<script src="https://unpkg.com/dom-zindex"></script>
+```
+
+## License
+
+[MIT](LICENSE) © 2019-present, Xu Liangzhan

gulpfile.js

@@ -0,0 +1,62 @@
+const gulp = require('gulp')
+const uglify = require('gulp-uglify')
+const babel = require('gulp-babel')
+const rename = require('gulp-rename')
+const ts = require('gulp-typescript')
+const pack = require('./package.json')
+const tsconfig = require('./tsconfig.json')
+
+gulp.task('build_common', function () {
+  return gulp.src(['index.ts'])
+    .pipe(ts(tsconfig.compilerOptions))
+    .pipe(babel({
+      presets: ['@babel/env']
+    }))
+    .pipe(rename({
+      basename: 'index',
+      extname: '.common.js'
+    }))
+    .pipe(gulp.dest('dist'))
+})
+
+gulp.task('build_esm', function () {
+  return gulp.src(['index.ts'])
+    .pipe(ts({
+      strict: true,
+      moduleResolution: 'node',
+      noImplicitAny: true,
+      target: 'es5',
+      module: 'esnext',
+      lib: ['dom', 'esnext']
+    }))
+    .pipe(rename({
+      basename: 'index',
+      extname: '.esm.js'
+    }))
+    .pipe(gulp.dest('es'))
+})
+
+gulp.task('build_umd', function () {
+  return gulp.src(['index.ts'])
+    .pipe(ts(tsconfig.compilerOptions))
+    .pipe(babel({
+      moduleId: pack.name,
+      presets: ['@babel/env'],
+      plugins: ['@babel/transform-modules-umd']
+    }))
+    .pipe(rename({
+      basename: 'index',
+      suffix: '.umd',
+      extname: '.js'
+    }))
+    .pipe(gulp.dest('dist'))
+    .pipe(uglify())
+    .pipe(rename({
+      basename: 'index',
+      suffix: '.umd.min',
+      extname: '.js'
+    }))
+    .pipe(gulp.dest('dist'))
+})
+
+gulp.task('build', gulp.parallel('build_common','build_esm',  'build_umd'))

index.ts

@@ -0,0 +1,92 @@
+let storeEl: HTMLElement | null = null
+let storeId = 'z-index-manage'
+let storeMainKey: 'm' = 'm'
+let storeSubKey: 's' = 's'
+
+const storeData = {
+  m: 1000,
+  s: 1000
+}
+
+function getDom () {
+  if (!storeEl) {
+    if (typeof document !== 'undefined') {
+      storeEl = document.getElementById(storeId)
+      if (!storeEl) {
+        storeEl = document.createElement('div')
+        storeEl.id = storeId
+        document.body.appendChild(storeEl)
+        setCurrent(storeData.m)
+        setSubCurrent(storeData.s)
+      }
+    }
+  }
+  return storeEl
+}
+
+function createSetHandle (key: keyof (typeof storeData)) {
+  return function (value: number) {
+    if (value) {
+      value = Number(value)
+      storeData[key] = value
+      let doc = getDom()
+      if (doc) {
+        if (doc.dataset) {
+          doc.dataset[key] = value + ''
+        } else {
+          doc.setAttribute('data-' + key, value + '')
+        }
+      }
+    }
+    return storeData[key]
+  }
+}
+
+export const setCurrent = createSetHandle(storeMainKey)
+
+function createGetHandle (key: keyof (typeof storeData)) {
+  return function getCurrent () {
+    let zIndex
+    let doc = getDom()
+    if (doc) {
+      zIndex = doc.dataset ? doc.dataset[key] : doc.getAttribute('data-' + key)
+    }
+    if (zIndex) {
+      return Number(zIndex)
+    }
+    return storeData[key]
+  }
+}
+
+export const getCurrent = createGetHandle(storeMainKey)
+
+export function getNext () {
+  return setCurrent(getCurrent() + 1)
+}
+
+export const setSubCurrent = createSetHandle(storeSubKey)
+
+const _getSubCurrent = createGetHandle(storeSubKey)
+
+export function getSubCurrent () {
+  return getCurrent() + _getSubCurrent()
+}
+
+export function getSubNext () {
+  setSubCurrent(_getSubCurrent() + 1)
+  return getSubCurrent()
+}
+
+/**
+ * Web common z-index style management
+ */
+const DomZIndex = {
+  setCurrent,
+  getCurrent,
+  getNext,
+  setSubCurrent,
+  getSubCurrent,
+  getSubNext
+}
+
+export default DomZIndex

package.json

@@ -0,0 +1,57 @@
+{
+  "name": "dom-zindex",
+  "version": "0.1.0",
+  "description": "Web common z-index style management",
+  "files": [
+    "dist",
+    "es",
+    "types"
+  ],
+  "scripts": {
+    "lib": "gulp build"
+  },
+  "main": "dist/index.common.js",
+  "module": "es/index.esm.js",
+  "unpkg": "dist/index.umd.js",
+  "jsdelivr": "dist/index.umd.js",
+  "typings": "types/index.d.ts",
+  "devDependencies": {
+    "@babel/core": "^7.4.4",
+    "@babel/plugin-transform-runtime": "^7.4.4",
+    "@babel/preset-env": "^7.4.4",
+    "@babel/runtime": "^7.4.4",
+    "eslint": "^5.16.0",
+    "eslint-config-standard": "^12.0.0",
+    "eslint-friendly-formatter": "^4.0.1",
+    "eslint-plugin-import": "^2.16.0",
+    "eslint-plugin-node": "^8.0.1",
+    "eslint-plugin-promise": "^4.0.1",
+    "eslint-plugin-standard": "^4.0.0",
+    "gulp": "^4.0.2",
+    "gulp-babel": "^8.0.0",
+    "gulp-concat": "^2.6.1",
+    "gulp-rename": "^2.0.0",
+    "gulp-replace": "^1.1.3",
+    "gulp-typescript": "^5.0.1",
+    "gulp-uglify": "^3.0.2",
+    "typescript": "^4.6.4",
+    "markdown-doctest": "^1.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/x-extends/dom-zindex.git"
+  },
+  "keywords": [
+    "z-index",
+    "zindex"
+  ],
+  "author": {
+    "name": "Xu Liangzhan",
+    "email": "[email protected]"
+  },
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/x-extends/dom-zindex/issues"
+  },
+  "homepage": "https://github.com/x-extends/dom-zindex/"
+}

tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "files": [
+    "index.ts"
+  ],
+  "compilerOptions": {
+    "strict": true,
+    "moduleResolution": "node",
+    "noImplicitAny": true,
+    "allowSyntheticDefaultImports": true,
+    "target": "esnext",
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable"
+    ]
+  }
+}

types/index.d.ts

@@ -0,0 +1,42 @@
+/**
+ * Set main z-index value
+ * @param value
+ */
+export function setCurrent(value: number): number
+
+/**
+ * Get main current z-index
+ */
+export function getCurrent(): number
+
+/**
+ * Get main next z-index
+ */
+export function getNext(): number
+
+/**
+ * Set subordinate z-index value
+ * @param value
+ */
+export function setSubCurrent(value: number): number
+
+/**
+ * Get subordinate current z-index
+ */
+export function getSubCurrent(): number
+
+/**
+ * Get subordinate next z-index
+ */
+export function getSubNext(): number
+
+const DomZIndex: {
+  setCurrent: typeof setCurrent
+  getCurrent: typeof getCurrent
+  getNext: typeof getNext
+  setSubCurrent: typeof setSubCurrent
+  getSubCurrent: typeof getSubCurrent
+  getSubNext: typeof getSubNext
+}
+
+export default DomZIndex