feat: add RegExp for readingDir

Author: tolking

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 [README](README.md) | [CHANGELOG](CHANGELOG.md)
 
+## 1.0.8
+
+- add RegExp for readingDir
+
 ## 1.0.7
 
 - fix bug

README.md

@@ -4,8 +4,6 @@
 
 [README](README.md) | [CHANGELOG](CHANGELOG.md)
 
-**This plugin is for Vuepress 1.x which is currently in alpha**
-
 add reading progress bar for vuepress
 
 ![vuepress-plugin-reading-progress](https://ououe.com/img/vuepress_plugin_reading_progress.gif)
@@ -16,7 +14,7 @@ add reading progress bar for vuepress
 
 ``` sh
 yarn add vuepress-plugin-reading-progress
-// or
+# or
 npm i vuepress-plugin-reading-progress
 ```
 
@@ -36,7 +34,7 @@ module.exports = {
 ## Options
 
 ### readingDir
-- Type: `null`, `string`, `array`, `Object`
+- Type: `null`, `string`, `array`, `object`, `RegExp`
 - Default: `null`
 
 Specify folders that display reading progress bar
@@ -53,6 +51,9 @@ example
     posts2: 'bottom',
     posts3: 'left'
   }
+  // or RegExp
+  readingDir: /[^\/]+$/ // exclude regularPath ending with /
+  readingDir: new RegExp('[^\/]+$')
 }
 ```
 

ReadingProgress.vue

@@ -23,18 +23,14 @@ export default {
     this.base()
   },
   beforeDestroy () {
-    window.removeEventListener('scroll', () => {
-      this.getReadingBase()
-    })
+    this.$readingShow && window.removeEventListener('scroll', this.getReadingBase)
   },
   methods: {
     base () {
       if (this.$readingShow) {
         this.transform = this.getTransform()
         this.progressStyle = this.getProgressStyle()
-        window.addEventListener('scroll', () => {
-          this.getReadingBase()
-        }, 200)
+        window.addEventListener('scroll', this.getReadingBase, 200)
       }
     },
     getReadingBase () {
@@ -68,15 +64,15 @@ export default {
         case 'top':
         case 'bottom':
           if (this.transform[0]) {
-            return `${this.transform[0]}: translate(${progress * 100 / 2 - 50}%, 0) scale(${progress}, 1)`
+            return `${this.transform[0]}: scaleX(${progress})`
           } else {
             return `width: ${progress * 100}%`
           }
           break
         case 'left':
         case 'right':
           if (this.transform[0]) {
-            return `${this.transform[0]}: translate(0, ${progress * 100 / 2 - 50}%) scale(1, ${progress})`
+            return `${this.transform[0]}: scaleY(${progress})`
           } else {
             return `height: ${progress * 100}%`
           }
@@ -110,6 +106,7 @@ $readingProgressImage ?= none
     height 100%
     background $readingProgressColor
     background-image $readingProgressImage
+    transform-origin 0% 0%
     transition: transform .2s ease-out
 .top
   top 0

enhanceAppFile.js

@@ -1,46 +1,11 @@
 import ReadingProgress from './ReadingProgress.vue'
-import config from '@dynamic/readingProgress.js'
-
-const setConfig = (regularPath, dir, fixed) => {
-  return regularPath.includes(dir) ? fixed : false
-}
 
 export default ({ Vue }) => {
   Vue.component('ReadingProgress', ReadingProgress)
   Vue.mixin({
     computed: {
-      $readingShow () {
-        const { readingDir, fixed } = config
-        const regularPath = this.$page.regularPath
-
-        if (this.$frontmatter.readingShow !== undefined) {
-          const readingShow = this.$frontmatter.readingShow
-          return typeof readingShow === 'boolean' && readingShow
-            ? 'top'
-            : readingShow
-        } else if (regularPath) {
-          if (readingDir === null) {
-            return fixed
-          } else if (typeof readingDir === 'string') {
-            return setConfig(regularPath, readingDir, fixed)
-          } else if (Array.isArray(readingDir)) {
-            for (let i = 0; i < readingDir.length; i++) {
-              const item = readingDir[i]
-              const isShow = setConfig(regularPath, item, fixed)
-              if (isShow) return fixed
-            }
-            return false
-          } else {
-            for (const key in readingDir) {
-              const item = readingDir[key]
-              const isShow = setConfig(regularPath, key, item)
-              if (isShow) return item
-            }
-            return false
-          }
-        } else {
-          return false
-        }
+      $readingShow() {
+        return this.$page.frontmatter.readingShow
       }
     }
   })

index.js

@@ -1,19 +1,55 @@
 const { path } = require('@vuepress/shared-utils')
 
-module.exports = (options, ctx) => {
+function checkRegularPath(regularPath, readingDir, fixed) {
+  if (readingDir === null) {
+    return fixed
+  } else if (typeof readingDir === 'string') {
+    return setConfig(regularPath, readingDir, fixed)
+  } else if (Array.isArray(readingDir)) {
+    for (let i = 0; i < readingDir.length; i++) {
+      const item = readingDir[i]
+      const isShow = setConfig(regularPath, item, fixed)
+      if (isShow) return fixed
+    }
+    return false
+  } else if (readingDir.constructor === RegExp) {
+    return readingDir.test(regularPath) ? fixed : false
+  } else {
+    for (const key in readingDir) {
+      const item = readingDir[key]
+      const isShow = setConfig(regularPath, key, item)
+      if (isShow) return item
+    }
+    return false
+  }
+}
+
+function setConfig(regularPath, dir, fixed) {
+  return regularPath.includes(dir) ? fixed : false
+}
+
+module.exports = options => {
   const {
     readingDir = null,
     fixed = 'top'
   } = options
 
   return {
-    async clientDynamicModules () {
-      return [
-        {
-          name: 'readingProgress.js',
-          content: `export default ${JSON.stringify({ readingDir, fixed })}`
-        }
-      ]
+    extendPageData($page) {
+      const { regularPath, frontmatter: { readingShow }} = $page
+      let type = fixed
+
+      if (readingShow !== undefined) {
+        type =  typeof readingShow === 'boolean' && readingShow
+          ? fixed
+          : readingShow
+      } else if (regularPath) {
+        type = checkRegularPath(regularPath, readingDir, fixed)
+      } else {
+        type = false
+      }
+
+      $page.frontmatter.readingShow = type
     },
     enhanceAppFiles: [
       path.resolve(__dirname, 'enhanceAppFile.js')

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vuepress-plugin-reading-progress",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "main": "index.js",
   "description": "A reading progress bar plugin for VuePress",
   "author": "tolking <qw13131wang@gmail.com>",
@@ -20,7 +20,7 @@
     "progress"
   ],
   "devDependencies": {
-    "@vuepress/shared-utils": "^1.0.0-alpha.39",
-    "vuepress": "^1.0.0-alpha.39"
+    "@vuepress/shared-utils": "^1.0.0",
+    "vuepress": "^1.0.0"
   }
 }