feat(*): add positionType parameter

cycjimmy · cycjimmy · commit 4a47c3e77dab · 2020-11-05T17:01:41.000+08:00
diff --git a/.github/workflows/nodeTestCI.yml b/.github/workflows/nodeTestCI.yml
@@ -14,7 +14,7 @@ jobs:
     runs-on: ${{ matrix.os }}
     strategy:
       matrix:
-        node-version: [10.x, 12.x]
+        node-version: [12.x, 14.x]
         os: [ubuntu-latest, windows-latest, macOS-latest]
 
     steps:
diff --git a/README.md b/README.md
@@ -59,6 +59,13 @@ Put `<h5-audio-controls />` into vue node which is preferably the root node
       * `'top-right'`(Default)
       * `'right-bottom'`
       * `'left-bottom'`
+  * `positionType`: [Option][string] Set position type of audio controller.
+    * Choose one of the five options:
+      * `'fixed'`(Default)
+      * `'absolute'`
+      * `'relative'`
+      * `'sticky'`
+      * `'static'`
   * `buttonSize`: [Option][string|number] Set button wrapper size.
   * `iconSize`: [Option][string|number] Set button icon size.
   * `playIcon`: [Option][string] Set play icon.
diff --git a/README_zhCN.md b/README_zhCN.md
@@ -59,6 +59,13 @@ Vue.use(H5AudioControls);
       * `'top-right'`(默认)
       * `'right-bottom'`
       * `'left-bottom'`
+  * `positionType`: [可选][string] 设定控制器的定位类型.
+    * 选择以下五个选项之一:
+      * `'fixed'`(默认)
+      * `'absolute'`
+      * `'relative'`
+      * `'sticky'`
+      * `'static'`
   * `buttonSize`: [可选][string|number] 设置按钮包裹层的尺寸.
   * `iconSize`: [可选][string|number] 设置按钮图标的尺寸.
   * `playIcon`: [可选][string] 设置播放图标.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -7,8 +7,8 @@
   "browser": "dist/h5-audio-controls.umd.min.js",
   "scripts": {
     "start": "npm run dev",
-    "test": "jest --color",
-    "coveralls": "jest --color --coverage",
+    "test": "jest --color --forceExit --detectOpenHandles",
+    "coveralls": "jest --color --forceExit --detectOpenHandles --coverage",
     "lint": "eslint -c .eslintrc 'src/**/*.js'",
     "lint:fix": "eslint --fix -c .eslintrc 'src/**/*.js' --fix",
     "dev": "cross-env NODE_ENV=development rollup -c rollup/rollup.config.dev.js --watch",
@@ -40,30 +40,30 @@
     "access": "public"
   },
   "dependencies": {
-    "@cycjimmy/h5-audio-controls": "3.3.3"
+    "@cycjimmy/h5-audio-controls": "3.4.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.7.4",
-    "@babel/preset-env": "^7.7.4",
-    "@cycjimmy/awesome-js-funcs": "^2.1.0",
-    "@cycjimmy/config-lib": "^1.5.0",
-    "@vue/test-utils": "^1.0.0-beta.29",
-    "babel-jest": "^24.9.0",
-    "coveralls": "^3.0.9",
-    "cross-env": "^6.0.3",
-    "eslint": "^6.7.2",
+    "@babel/core": "^7.12.3",
+    "@babel/preset-env": "^7.12.1",
+    "@cycjimmy/awesome-js-funcs": "^2.4.0",
+    "@cycjimmy/config-lib": "^1.6.1",
+    "@rollup/plugin-babel": "^5.2.1",
+    "@rollup/plugin-commonjs": "^16.0.0",
+    "@rollup/plugin-json": "^4.1.0",
+    "@rollup/plugin-node-resolve": "^10.0.0",
+    "@vue/test-utils": "^1.1.1",
+    "babel-jest": "^26.6.3",
+    "coveralls": "^3.1.0",
+    "cross-env": "^7.0.2",
+    "eslint": "^7.12.1",
     "eslint-config-rollup": "^0.1.0",
-    "jest": "^24.9.0",
-    "rollup": "^1.27.8",
-    "rollup-plugin-babel": "^4.3.3",
-    "rollup-plugin-browsersync": "^1.1.0",
-    "rollup-plugin-commonjs": "^10.1.0",
-    "rollup-plugin-copy": "^3.1.0",
+    "jest": "^26.6.3",
+    "rollup": "^2.33.1",
+    "rollup-plugin-browsersync": "^1.3.1",
+    "rollup-plugin-copy": "^3.3.0",
     "rollup-plugin-eslint": "^7.0.0",
-    "rollup-plugin-json": "^4.0.0",
-    "rollup-plugin-node-resolve": "^5.2.0",
-    "rollup-plugin-terser": "^5.1.2",
-    "vue": "^2.6.10",
-    "vue-template-compiler": "^2.6.10"
+    "rollup-plugin-terser": "^7.0.2",
+    "vue": "^2.6.12",
+    "vue-template-compiler": "^2.6.12"
   }
 }
diff --git a/rollup/rollup.common.js b/rollup/rollup.common.js
@@ -1,9 +1,9 @@
 import { eslint } from 'rollup-plugin-eslint';
-import json from 'rollup-plugin-json';
-import resolve from 'rollup-plugin-node-resolve';
-import commonjs from 'rollup-plugin-commonjs';
-import babel from 'rollup-plugin-babel';
-import { terser } from 'rollup-plugin-terser/index';
+import json from '@rollup/plugin-json';
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import babel from '@rollup/plugin-babel';
+import { terser } from 'rollup-plugin-terser';
 import myBanner from '@cycjimmy/config-lib/chore/myBanner';
 import midlineToCamel from '@cycjimmy/awesome-js-funcs/string/midlineToCamel';
 // config
@@ -29,7 +29,7 @@ export const plugins = [
     exclude: ['**/*.(css|scss)']
   }),
   resolve(),
-  babel(),
+  babel({ babelHelpers: 'bundled' }),
   commonjs()
 ];
 
diff --git a/src/h5-audio-controls.js b/src/h5-audio-controls.js
@@ -6,8 +6,6 @@ export default {
   data() {
     return {
       containerStyle: {
-        position: 'absolute',
-        zIndex: 999,
         width: 0,
         height: 0
       }
@@ -16,6 +14,7 @@ export default {
   props: {
     src: String,
     position: String,
+    positionType: String,
     buttonSize: [String, Number],
     iconSize: [String, Number],
     playIcon: String,
@@ -69,6 +68,7 @@ export default {
     this.h5AudioControls = h5AudioControls(this.src, {
       context: this.$el,
       position: this.position,
+      positionType: this.positionType,
       buttonSize: this.buttonSize,
       iconSize: this.iconSize,
       playIcon: this.playIcon,
diff --git a/static/index.html b/static/index.html
@@ -145,6 +145,7 @@
         ref="h5AudioControls"
         :src="audioControlsConfig.src"
         :position="audioControlsConfig.position"
+        :positionType="audioControlsConfig.positionType"
         :buttonSize="audioControlsConfig.buttonSize"
         :iconSize="audioControlsConfig.iconSize"
         :playIcon="audioControlsConfig.playIcon"
@@ -156,6 +157,7 @@
         audioControlsConfig: {
           src: aAudioSrc[0],
           position: aPosition[0],
+          positionType: 'fixed',
           buttonSize: aButtonSize[0],
           iconSize: aIconSize[0],
           playIcon: aPlayIconSrc[0],
