feat(scroll in sync): added ability to toggle in sync scroll

Author: technikhil314

components/RTStickyCopyButton.vue

@@ -6,6 +6,7 @@
         'bg-gray-100 dark:bg-gray-600': !copied,
         'bg-green-500': copied,
       }"
+      :aria-label="ariaLabel"
       @click="handleClick"
     >
       <svg
@@ -49,6 +50,10 @@ export default {
       type: Function,
       default: () => {},
     },
+    ariaLabel: {
+      type: String,
+      default: 'Copy to clipboard',
+    },
   },
   data() {
     return {

components/navbar.vue

@@ -46,7 +46,7 @@
       </div>
 
       <div class="flex items-center justify-between flex-1">
-        <div class="items-center">
+        <div class="items-center w-1/2">
           <a
             href="https://github.com/technikhil314/offline-diff-viewer/stargazers"
             title="github stars on this open source project"
@@ -58,15 +58,16 @@
           </a>
           <slot name="left" />
         </div>
-        <div class="items-center">
+        <div class="flex items-center justify-end w-1/2 gap-4">
           <slot name="right" />
           <button
             type="button"
             class="inline-flex items-center justify-center ml-4 bg-transparent border-2 border-gray-700 rounded-full shadow-lg  w-9 h-9 active:scale-y-75"
+            aria-label="Toggle Dark Mode"
             @click="toggleDarkMode"
           >
             <svg
-              v-if="!darkMode"
+              v-if="darkMode"
               fill="none"
               stroke="currentColor"
               class="w-6 h-6"
@@ -81,7 +82,7 @@
               ></path>
             </svg>
             <svg
-              v-if="darkMode"
+              v-if="!darkMode"
               fill="none"
               class="w-6 h-6"
               stroke="currentColor"

pages/index.vue

@@ -24,6 +24,9 @@
                 placeholder="Add label to this text block"
                 value="Original Text"
               />
+              <span class="sr-only"
+                >Add label to this original text bloack</span
+              >
             </label>
             <textarea
               id="lhs"
@@ -33,14 +36,19 @@
             ></textarea>
           </div>
           <div class="flex flex-col w-1/2 gap-4">
-            <input
-              id="rhsLabel"
-              name="rhsLabel"
-              type="text"
-              class="flex-1 flex-grow-0 w-full bg-transparent rounded-md"
-              placeholder="Add label to this text block"
-              value="Changed text"
-            />
+            <label for="lhsLabel" class="relative">
+              <input
+                id="rhsLabel"
+                name="rhsLabel"
+                type="text"
+                class="flex-1 flex-grow-0 w-full bg-transparent rounded-md"
+                placeholder="Add label to this text block"
+                value="Changed text"
+              />
+              <span class="sr-only"
+                >Add label to this original text bloack</span
+              >
+            </label>
             <textarea
               id="rhs"
               rows="28"
@@ -52,6 +60,7 @@
         <div class="self-end flex-grow-0 w-full text-center">
           <button
             class="inline-flex items-center justify-center w-48 px-4 py-2 transition-transform transform bg-blue-600 rounded-md shadow-lg outline-none  text-gray-50 focus:ring-4 active:scale-y-75"
+            aria-label="Click here to compare the inputted text blocks"
           >
             Compare
           </button>

pages/v1/diff.vue

@@ -2,9 +2,22 @@
   <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"
+          aria-label="Copy url to clipboard"
           :class="{
             'bg-blue-500 text-white': !copied,
             'bg-green-500 text-gray-800': copied,
@@ -57,9 +70,15 @@
             {{ lhsLabel }}
           </p>
           <div
-            class="relative flex-1 px-4 py-2 overflow-y-auto border-2 rounded-md  dark:border-gray-500 max-h-screen--nav line-number-gutter min-h-80"
+            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,
+            }"
           >
-            <RTStickyCopyButton :click-handler="copyTextToClipboard" />
+            <RTStickyCopyButton
+              :aria-label="'Copy the content to clipboard'"
+              :click-handler="copyTextToClipboard"
+            />
             <div
               v-for="(lineDiff, index) in lhsDiff"
               :key="index"
@@ -71,15 +90,20 @@
             </div>
           </div>
         </div>
-
         <div class="flex flex-col w-1/2 gap-2">
           <p class="flex-grow-0 text-lg font-bold text-center capitalize">
             {{ rhsLabel }}
           </p>
           <div
-            class="relative flex-1 px-4 py-2 overflow-y-auto border-2 rounded-md  dark:border-gray-500 min-h-80 line-number-gutter max-h-screen--nav"
+            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,
+            }"
           >
-            <RTStickyCopyButton :click-handler="copyTextToClipboard" />
+            <RTStickyCopyButton
+              :click-handler="copyTextToClipboard"
+              :aria-label="'Copy the content to clipboard'"
+            />
             <div
               v-for="(lineDiff, index) in rhsDiff"
               :key="index"
@@ -109,6 +133,7 @@ export default {
       rhsLabel: this.rhsLabel,
       lhsLabel: this.lhsLabel,
       copied: false,
+      scrollInSync: this.scrollInSync,
     }
   },
   mounted() {
@@ -118,6 +143,7 @@ export default {
     const { diff, lhsLabel, rhsLabel } = diffData
     this.lhsLabel = lhsLabel
     this.rhsLabel = rhsLabel
+    this.scrollInSync = true
     this.lhsDiff = diff
       .map((item) => {
         const hunkState = item[0]
@@ -197,6 +223,9 @@ export default {
         'Text copied to your clipboard'
       )
     },
+    toggleInSyncScroll() {
+      this.scrollInSync = !this.scrollInSync
+    },
   },
 }
 </script>