feat(scroll in sync): made user tutorial for in sync scroll

Author: technikhil314

helpers/isSkipScrollInSyncTutorial.ts

@@ -0,0 +1,16 @@
+export default function () {
+  const cookies = document.cookie.split(';')
+  const cookieMap: {
+    isSkipScrollInSyncTutorial?: string
+  } = {
+    isSkipScrollInSyncTutorial: 'false',
+  }
+  cookies.forEach((element) => {
+    const [name, val] = element.split('=')
+    const trimmedName = name.trim()
+    if (trimmedName === 'isSkipScrollInSyncTutorial') {
+      cookieMap[trimmedName] = val
+    }
+  })
+  return cookieMap.isSkipScrollInSyncTutorial === 'true'
+}

pages/index.vue

@@ -89,7 +89,9 @@ export default Vue.extend({
     const driver = new Driver({
       closeBtnText: 'Skip',
       className: 'dark:filter dark:invert',
-      stageBackground: this.isDarkMode ? 'hsl(221deg 30% 70%)' : '#ffffff',
+      stageBackground: this.isDarkMode
+        ? 'hsl(221deg 50% 90% / 0.5)'
+        : '#ffffff',
       onReset: () => {
         document.cookie = 'isSkipTutorial=true; max-age=31536000; path=/;'
       },

pages/v1/diff.vue

@@ -2,18 +2,6 @@
   <div class="page-contents">
     <Navbar :show-back-button="true">
       <template #right>
-        <div class="inline-flex items-center gap-1">
-          <label for="toggleScrollInSync" class="select-none"
-            >Scroll in sync</label
-          >
-          <input
-            id="toggleScrollInSync"
-            type="checkbox"
-            :checked="scrollInSync"
-            class="form-checkbox filter mix-blend-luminosity"
-            @click="toggleInSyncScroll"
-          />
-        </div>
         <button
           type="button"
           class="inline-flex justify-center px-4 py-2 transition-transform transform rounded-md shadow outline-none  copy-uri-button align-center focus:ring-4 active:scale-y-75"
@@ -62,6 +50,26 @@
       </template>
     </Navbar>
     <main>
+      <section class="flex items-center gap-4 py-4">
+        <div
+          class="inline-flex items-center gap-1"
+          id="toggleScrollInSyncSection"
+        >
+          <label
+            for="toggleScrollInSync"
+            class="text-gray-800 select-none dark:text-gray-50"
+          >
+            Scroll in sync
+          </label>
+          <input
+            id="toggleScrollInSync"
+            type="checkbox"
+            :checked="isSrollInSyncEnabled"
+            class="form-checkbox"
+            @click="toggleInSyncScroll"
+          />
+        </div>
+      </section>
       <section
         class="flex items-stretch w-full gap-4 font-mono text-gray-800  dark:text-gray-50"
       >
@@ -72,7 +80,7 @@
           <div
             class="relative flex-1 px-4 py-2 border-2 rounded-md  dark:border-gray-500 line-number-gutter min-h-80"
             :class="{
-              'overflow-y-auto max-h-screen--nav': !scrollInSync,
+              'overflow-y-auto max-h-screen--nav': !isSrollInSyncEnabled,
             }"
           >
             <RTStickyCopyButton
@@ -97,7 +105,7 @@
           <div
             class="relative flex-1 px-4 py-2 border-2 rounded-md  dark:border-gray-500 line-number-gutter min-h-80"
             :class="{
-              'overflow-y-auto max-h-screen--nav': !scrollInSync,
+              'overflow-y-auto max-h-screen--nav': !isSrollInSyncEnabled,
             }"
           >
             <RTStickyCopyButton
@@ -133,17 +141,19 @@ export default {
       rhsLabel: this.rhsLabel,
       lhsLabel: this.lhsLabel,
       copied: false,
-      scrollInSync: this.scrollInSync,
+      isSrollInSyncEnabled: this.isSrollInSyncEnabled,
+      isDarkMode: this.$isDarkMode,
+      isSkipScrollInSyncTutorial: this.$isSkipScrollInSyncTutorial,
     }
   },
-  mounted() {
+  async mounted() {
     const _diff = this.$route.hash
     const gunzip = pako.ungzip(Buffer.from(undoUrlSafeBase64(_diff), 'base64'))
     const diffData = JSON.parse(Buffer.from(gunzip).toString('utf8'))
     const { diff, lhsLabel, rhsLabel } = diffData
     this.lhsLabel = lhsLabel
     this.rhsLabel = rhsLabel
-    this.scrollInSync = true
+    this.isSrollInSyncEnabled = true
     this.lhsDiff = diff
       .map((item) => {
         const hunkState = item[0]
@@ -182,6 +192,32 @@ export default {
       '--max-line-number-characher',
       `${`${maxLineCount}`.split('').length}ch`
     )
+    const { default: Driver } = await import('driver.js')
+    const driver = new Driver({
+      // ...driverJSConfig(this.$isDarkMode),
+      closeBtnText: 'Skip',
+      className: 'dark:filter dark:invert',
+      stageBackground: this.isDarkMode
+        ? 'hsl(221deg 50% 90% / 0.5)'
+        : '#ffffff',
+      onReset: () => {
+        document.cookie =
+          'isSkipScrollInSyncTutorial=true; max-age=31536000; path=/;'
+      },
+    })
+    // Define the steps for introduction
+    if (!this.isSkipScrollInSyncTutorial) {
+      driver.defineSteps([
+        {
+          element: '#toggleScrollInSyncSection',
+          popover: {
+            title: 'Scroll In Sync',
+            description: 'Now you can choose to scroll both sides in sync.',
+          },
+        },
+      ])
+      driver.start()
+    }
   },
   methods: {
     putToClipboard(textToPut, toastContent) {
@@ -224,7 +260,7 @@ export default {
       )
     },
     toggleInSyncScroll() {
-      this.scrollInSync = !this.scrollInSync
+      this.isSrollInSyncEnabled = !this.isSrollInSyncEnabled
     },
   },
 }

plugins/cookie-injector.client.ts

@@ -1,11 +1,13 @@
 import { Plugin } from '@nuxt/types'
 import isDarkModeCookie from '~/helpers/isDarkModeCookie'
 import isSkipTutorialCookie from '~/helpers/isSkipTutorialCookie'
+import isSkipScrollInSyncTutorial from '~/helpers/isSkipScrollInSyncTutorial'
 declare module 'vue/types/vue' {
   // this.$isDarkModeinside Vue components
   interface Vue {
     $isDarkMode: boolean
     $isSkipTutorial: boolean
+    $isSkipScrollInSyncTutorial: boolean
   }
 }
 
@@ -14,11 +16,13 @@ declare module '@nuxt/types' {
   interface NuxtAppOptions {
     $isDarkMode: boolean
     $isSkipTutorial: boolean
+    $isSkipScrollInSyncTutorial: boolean
   }
   // nuxtContext.isDarkMode$
   interface Context {
     $isDarkMode: boolean
     $isSkipTutorial: boolean
+    $isSkipScrollInSyncTutorial: boolean
   }
 }
 
@@ -27,12 +31,14 @@ declare module 'vuex/types/index' {
   interface Store<S> {
     $isDarkMode: boolean | S
     $isSkipTutorial: boolean | S
+    $isSkipScrollInSyncTutorial: boolean | S
   }
 }
 
 const cookieInjectorPlugin: Plugin = (_context, inject) => {
   inject('isDarkMode', isDarkModeCookie())
   inject('isSkipTutorial', isSkipTutorialCookie())
+  inject('isSkipScrollInSyncTutorial', isSkipScrollInSyncTutorial())
 }
 
 export default cookieInjectorPlugin