From 61f2cd70e0095c0188983472701c1cb07fdfd542 Mon Sep 17 00:00:00 2001
From: Bakhtovar Gulomov <gulomov@live.ru>
Date: Wed, 26 Apr 2023 15:04:54 +0700
Subject: [PATCH] =?UTF-8?q?feat:=20=D0=A4=D1=83=D0=BD=D0=BA=D1=86=D0=B8?=
 =?UTF-8?q?=D0=BE=D0=BD=D0=B0=D0=BB=20=D0=B3=D0=BB=D0=BE=D0=B1=D0=B0=D0=BB?=
 =?UTF-8?q?=D1=8C=D0=BD=D0=BE=D0=B3=D0=BE=20=D0=BF=D0=B5=D1=80=D0=B5=D0=BA?=
 =?UTF-8?q?=D0=BB=D1=8E=D1=87=D0=B5=D0=BD=D0=B8=D1=8F=20=D1=81=D0=B8=D0=BD?=
 =?UTF-8?q?=D1=82=D0=B0=D0=BA=D1=81=D0=B8=D1=81=D0=BE=D0=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../theme/components/DocsLayout.vue           |  2 +
 .../theme/composables/syntax-switcher.ts      | 54 +++++++++++++++++++
 2 files changed, 56 insertions(+)
 create mode 100644 docs/.vitepress/theme/composables/syntax-switcher.ts

diff --git a/docs/.vitepress/theme/components/DocsLayout.vue b/docs/.vitepress/theme/components/DocsLayout.vue
index b26b9e88..a179bff2 100644
--- a/docs/.vitepress/theme/components/DocsLayout.vue
+++ b/docs/.vitepress/theme/components/DocsLayout.vue
@@ -5,8 +5,10 @@ import DocsEcosystem from './DocsEcosystem.vue'
 import DocsComponentWidget from './DocsComponentWidget.vue'
 import DocsBreadcrumbs from './DocsBreadcrumbs.vue'
 import DocsNotFound from './DocsNotFound.vue'
+import { useSyntaxSwitcher } from '../composables/syntax-switcher'
 
 const { Layout } = DefaultTheme
+useSyntaxSwitcher('vitepress:default-syntax', ['modx', 'fenom'])
 </script>
 
 <template>
diff --git a/docs/.vitepress/theme/composables/syntax-switcher.ts b/docs/.vitepress/theme/composables/syntax-switcher.ts
new file mode 100644
index 00000000..59ba687d
--- /dev/null
+++ b/docs/.vitepress/theme/composables/syntax-switcher.ts
@@ -0,0 +1,54 @@
+import { onMounted, watch } from 'vue'
+import { inBrowser, useRouter } from 'vitepress'
+
+function setSyntax(
+  syntax: string,
+  target?: HTMLLabelElement,
+) {
+  const allGroups = document.querySelectorAll('.vp-code-group')
+  const group = target && target.closest('.vp-code-group')
+
+  for (let i = 0; i < allGroups.length; i++) {
+    if (group && allGroups[i] === group) continue
+    Array.from(allGroups[i].querySelectorAll('label')).find(el => el.innerText === syntax)?.click()
+  }
+}
+
+export function useSyntaxSwitcher(
+  key: string,
+  labels: Array<string>,
+): void {
+  if (inBrowser) {
+    onMounted(() => {
+      const { route } = useRouter()
+      watch(
+        () => route.data.relativePath,
+        () => {
+        const defaultSyntax = localStorage.getItem(key)
+        defaultSyntax && setSyntax(defaultSyntax)
+      }, {
+        immediate: true,
+        flush: 'post',
+      })
+    })
+
+    window.addEventListener('click', (e: Event) => {
+      const target = e.target as HTMLLabelElement
+
+      if (
+        !target.matches('.vp-code-group .tabs label') ||
+        !e.isTrusted
+      ) {
+        return
+      }
+
+      const syntax = target.innerText
+      if (!labels.some(label => label === syntax)) {
+        return
+      }
+
+      localStorage.setItem(key, syntax)
+      setSyntax(syntax, target)
+    })
+  }
+}