fix(plugin-redirect): fix direct modal, close #105

plugins/plugin-redirect/src/client/components/RedirectModal.ts

@@ -0,0 +1,158 @@
+import {
+  usePreferredLanguages,
+  useScrollLock,
+  useSessionStorage,
+} from '@vueuse/core'
+import type { VNode } from 'vue'
+import {
+  computed,
+  defineComponent,
+  h,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  TransitionGroup,
+} from 'vue'
+import { useRoute, useRouteLocale, useRouter } from 'vuepress/client'
+import type { RedirectPluginLocaleConfig } from '../../shared/locales.js'
+import { redirectLocaleConfig, redirectLocaleEntries } from '../define.js'
+
+import '../styles/redirect-modal.css'
+
+declare const __REDIRECT_LOCALES__: RedirectPluginLocaleConfig
+
+const redirectLocales = __REDIRECT_LOCALES__
+const { switchLocale } = redirectLocaleConfig
+
+interface LocaleInfo {
+  lang: string
+  localePath: string
+}
+
+const redirectStatusStorage = useSessionStorage<Record<string, boolean>>(
+  'VUEPRESS_REDIRECT_LOCALES',
+  {},
+)
+
+export default defineComponent({
+  name: 'RedirectModal',
+
+  setup() {
+    const languages = usePreferredLanguages()
+    const route = useRoute()
+    const router = useRouter()
+    const routeLocale = useRouteLocale()
+
+    const body = ref<HTMLElement>()
+    // lock body scroll when modal is displayed
+    const showModal = useScrollLock(body)
+
+    const info = computed<LocaleInfo | null>(() => {
+      if (redirectLocaleEntries.some(([key]) => routeLocale.value === key))
+        for (const language of languages.value)
+          for (const [localePath, langs] of redirectLocaleEntries)
+            if (langs.includes(language)) {
+              if (localePath === routeLocale.value) return null
+
+              return {
+                lang: language,
+                localePath,
+              }
+            }
+
+      return null
+    })
+
+    const locale = computed(() => {
+      if (info.value) {
+        const { lang, localePath } = info.value
+        const locales = [
+          redirectLocales[routeLocale.value],
+          redirectLocales[localePath],
+        ]
+
+        return {
+          hint: locales.map(({ hint }) => hint.replace('$1', lang)),
+          switch: locales
+            .map(({ switch: switchText }) => switchText.replace('$1', lang))
+            .join(' / '),
+          cancel: locales.map(({ cancel }) => cancel).join(' / '),
+        }
+      }
+
+      return null
+    })
+
+    const redirect = (): void => {
+      if (info.value)
+        router.replace(
+          route.path.replace(routeLocale.value, info.value.localePath),
+        )
+    }
+
+    onMounted(async () => {
+      body.value = document.body
+
+      await nextTick()
+
+      if (!redirectStatusStorage.value[routeLocale.value]) {
+        if (switchLocale === 'direct') redirect()
+        else if (switchLocale === 'modal') showModal.value = true
+      }
+    })
+
+    onBeforeUnmount(() => {
+      showModal.value = false
+    })
+
+    return (): VNode | null =>
+      h(TransitionGroup, { name: 'redirect-modal-fade' }, () =>
+        showModal.value
+          ? h(
+              'div',
+              { key: 'mask', class: 'redirect-modal-mask' },
+              h(
+                'div',
+                {
+                  key: 'popup',
+                  class: 'redirect-modal-wrapper',
+                },
+                [
+                  h(
+                    'div',
+                    { class: 'redirect-modal-content' },
+                    locale.value?.hint.map((text) => h('p', text)),
+                  ),
+                  h(
+                    'button',
+                    {
+                      type: 'button',
+                      class: 'redirect-modal-action primary',
+                      onClick: () => {
+                        redirectStatusStorage.value[routeLocale.value] = true
+                        showModal.value = false
+                        redirect()
+                      },
+                    },
+                    locale.value?.switch,
+                  ),
+                  h(
+                    'button',
+                    {
+                      type: 'button',
+                      class: 'redirect-modal-action',
+                      onClick: () => {
+                        redirectStatusStorage.value[routeLocale.value] = true
+                        showModal.value = false
+                      },
+                    },
+                    locale.value?.cancel,
+                  ),
+                ],
+              ),
+            )
+          : null,
+      )
+  },
+})

plugins/plugin-redirect/src/client/config.ts

@@ -1,7 +1,7 @@
 import type { ClientConfig } from 'vuepress/client'
 import { defineClientConfig } from 'vuepress/client'
-import LanguageSwitch from './components/LanguageSwitch.js'
-import { setupDevServerRedirect } from './composables/setupDevServerRedirect.js'
+import RedirectModal from './components/RedirectModal.js'
+import { setupDevServerRedirect } from './composables/index.js'
 
 import './styles/vars.css'
 
@@ -11,5 +11,5 @@ export default defineClientConfig({
   setup() {
     if (__VUEPRESS_DEV__) setupDevServerRedirect()
   },
-  rootComponents: __REDIRECT_LOCALE_SWITCH__ ? [LanguageSwitch] : [],
+  rootComponents: __REDIRECT_LOCALE_SWITCH__ ? [RedirectModal] : [],
 }) as ClientConfig