From 4c054a37fda9c4b925a390d6e52c9d26d3037882 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joaqu=C3=ADn=20S=C3=A1nchez?= <userquin@gmail.com>
Date: Wed, 1 Feb 2023 15:43:27 +0100
Subject: [PATCH] feat: add opt-in pinch to zoom setting (#1557)

---
 composables/settings/definition.ts   | 2 ++
 composables/setups.ts                | 2 ++
 locales/en.json                      | 1 +
 locales/es.json                      | 1 +
 pages/settings/preferences/index.vue | 6 ++++++
 styles/global.css                    | 5 +++++
 6 files changed, 17 insertions(+)

diff --git a/composables/settings/definition.ts b/composables/settings/definition.ts
index c3940ee1..9fdc74da 100644
--- a/composables/settings/definition.ts
+++ b/composables/settings/definition.ts
@@ -16,6 +16,7 @@ export interface PreferencesSettings {
   hideAccountHoverCard: boolean
   grayscaleMode: boolean
   enableAutoplay: boolean
+  enablePinchToZoom: boolean
   experimentalVirtualScroller: boolean
   experimentalGitHubCards: boolean
   experimentalUserPicker: boolean
@@ -72,6 +73,7 @@ export const DEFAULT__PREFERENCES_SETTINGS: PreferencesSettings = {
   hideAccountHoverCard: false,
   grayscaleMode: false,
   enableAutoplay: true,
+  enablePinchToZoom: false,
   experimentalVirtualScroller: true,
   experimentalGitHubCards: true,
   experimentalUserPicker: true,
diff --git a/composables/setups.ts b/composables/setups.ts
index 732be5a8..072fb423 100644
--- a/composables/setups.ts
+++ b/composables/setups.ts
@@ -5,6 +5,7 @@ export function setupPageHeader() {
   const { locale, locales, t } = useI18n()
   const colorMode = useColorMode()
   const buildInfo = useBuildInfo()
+  const enablePinchToZoom = usePreferences('enablePinchToZoom')
 
   const localeMap = (locales.value as LocaleObject[]).reduce((acc, l) => {
     acc[l.code!] = l.dir ?? 'auto'
@@ -15,6 +16,7 @@ export function setupPageHeader() {
     htmlAttrs: {
       lang: () => locale.value,
       dir: () => localeMap[locale.value] ?? 'auto',
+      class: () => enablePinchToZoom.value ? ['enable-pinch-to-zoom'] : [],
     },
     titleTemplate: (title) => {
       let titleTemplate = title ?? ''
diff --git a/locales/en.json b/locales/en.json
index 2072472b..91f64bdc 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -377,6 +377,7 @@
     "notifications_settings": "Notifications",
     "preferences": {
       "enable_autoplay": "Enable Autoplay",
+      "enable_pinch_to_zoom": "Enable pinch to zoom",
       "github_cards": "GitHub Cards",
       "grayscale_mode": "Grayscale mode",
       "hide_account_hover_card": "Hide account hover card",
diff --git a/locales/es.json b/locales/es.json
index c9ecb26e..9f32a86b 100644
--- a/locales/es.json
+++ b/locales/es.json
@@ -370,6 +370,7 @@
     "notifications_settings": "Notificaciones",
     "preferences": {
       "enable_autoplay": "Habilitar auto-reproducción",
+      "enable_pinch_to_zoom": "Habilitar pellizcar para hacer zoom",
       "github_cards": "Tarjetas GitHub",
       "grayscale_mode": "Modo escala de grises",
       "hide_account_hover_card": "Ocultar tarjeta flotante de cuenta",
diff --git a/pages/settings/preferences/index.vue b/pages/settings/preferences/index.vue
index dde8f452..db633c26 100644
--- a/pages/settings/preferences/index.vue
+++ b/pages/settings/preferences/index.vue
@@ -57,6 +57,12 @@ const userSettings = useUserSettings()
     >
       {{ $t('settings.preferences.enable_autoplay') }}
     </SettingsToggleItem>
+    <SettingsToggleItem
+      :checked="getPreferences(userSettings, 'enablePinchToZoom')"
+      @click="togglePreferences('enablePinchToZoom')"
+    >
+      {{ $t('settings.preferences.enable_pinch_to_zoom') }}
+    </SettingsToggleItem>
     <h2 px6 py4 mt2 font-bold text-xl flex="~ gap-1" items-center>
       <div i-ri-flask-line />
       {{ $t('settings.preferences.title') }}
diff --git a/styles/global.css b/styles/global.css
index 593f4fdb..e8fea4c9 100644
--- a/styles/global.css
+++ b/styles/global.css
@@ -186,6 +186,11 @@ html {
   --at-apply: bg-base text-base;
 }
 
+html:not(.enable-pinch-to-zoom) body {
+  /* Prevent arbitrary zooming on mobile devices */
+  touch-action: pan-x pan-y;
+}
+
 .sparkline--fill {
   fill: var(--c-primary-active);
   opacity: 0.2;