From d7d0bbe44ac41a82d86cd44e6a8c2b5e7bf5ab0b Mon Sep 17 00:00:00 2001
From: Justin Stayton <hello@piratepx.com>
Date: Tue, 15 Dec 2020 07:09:38 -0500
Subject: [PATCH] Fix scrolling on mobile Safari and improve perf

---
 .../project/dashboard/ProjectDashboard.vue    |  6 ++++
 .../dashboard/ProjectDashboardHeader.vue      |  5 +++
 .../dashboard/ProjectDashboardRecord.vue      |  5 +++
 .../dashboard/ProjectDashboardScrollable.vue  | 31 +++++++++++++++++--
 .../views/project/ProjectDashboardView.vue    |  8 ++++-
 5 files changed, 52 insertions(+), 3 deletions(-)

diff --git a/web/src/components/project/dashboard/ProjectDashboard.vue b/web/src/components/project/dashboard/ProjectDashboard.vue
index 4bff321..4ed1a03 100644
--- a/web/src/components/project/dashboard/ProjectDashboard.vue
+++ b/web/src/components/project/dashboard/ProjectDashboard.vue
@@ -16,6 +16,7 @@
       <project-dashboard-header
         :current-project="currentProject"
         :dates="dates"
+        :scroll-id="scrollId"
         :scroll-left="scrollLeft"
         @scroll="$emit('scroll', $event)"
       />
@@ -28,6 +29,7 @@
           :identifier="identifier"
           :max-count="maxCount"
           :records="identifierRecords"
+          :scroll-id="scrollId"
           :scroll-left="scrollLeft"
           @scroll="$emit('scroll', $event)"
         />
@@ -69,6 +71,10 @@ export default {
       type: Map,
       default: null,
     },
+    scrollId: {
+      type: Number,
+      default: null,
+    },
     scrollLeft: {
       type: Number,
       default: 0,
diff --git a/web/src/components/project/dashboard/ProjectDashboardHeader.vue b/web/src/components/project/dashboard/ProjectDashboardHeader.vue
index 80f5059..a9fe251 100644
--- a/web/src/components/project/dashboard/ProjectDashboardHeader.vue
+++ b/web/src/components/project/dashboard/ProjectDashboardHeader.vue
@@ -1,6 +1,7 @@
 <template>
   <project-dashboard-scrollable
     class="sticky top-0 bg-gray-100 mb-5 border-b border-gray-900 py-3 text-center text-xs"
+    :scroll-id="scrollId"
     :scroll-left="scrollLeft"
     @scroll="$emit('scroll', $event)"
   >
@@ -31,6 +32,10 @@ export default {
       type: Array,
       required: true,
     },
+    scrollId: {
+      type: Number,
+      default: null,
+    },
     scrollLeft: {
       type: Number,
       default: 0,
diff --git a/web/src/components/project/dashboard/ProjectDashboardRecord.vue b/web/src/components/project/dashboard/ProjectDashboardRecord.vue
index 5533f36..e3e2f80 100644
--- a/web/src/components/project/dashboard/ProjectDashboardRecord.vue
+++ b/web/src/components/project/dashboard/ProjectDashboardRecord.vue
@@ -3,6 +3,7 @@
     <h2 class="font-semibold break-words mb-1">{{ identifier }}</h2>
     <project-dashboard-scrollable
       class="pb-3"
+      :scroll-id="scrollId"
       :scroll-left="scrollLeft"
       @scroll="$emit('scroll', $event)"
     >
@@ -48,6 +49,10 @@ export default {
       type: Map,
       required: true,
     },
+    scrollId: {
+      type: Number,
+      default: null,
+    },
     scrollLeft: {
       type: Number,
       default: 0,
diff --git a/web/src/components/project/dashboard/ProjectDashboardScrollable.vue b/web/src/components/project/dashboard/ProjectDashboardScrollable.vue
index f75bfd5..8f3b86b 100644
--- a/web/src/components/project/dashboard/ProjectDashboardScrollable.vue
+++ b/web/src/components/project/dashboard/ProjectDashboardScrollable.vue
@@ -3,7 +3,7 @@
     ref="scrollable"
     class="overflow-x-auto"
     :style="{ direction: 'rtl' }"
-    @scroll="$emit('scroll', $event)"
+    @scroll="scroll"
   >
     <ol class="flex" :style="{ minWidth: '1100px' }">
       <slot />
@@ -12,17 +12,30 @@
 </template>
 
 <script>
+let id = 0
+
 export default {
   props: {
+    scrollId: {
+      type: Number,
+      default: null,
+    },
     scrollLeft: {
       type: Number,
       default: 0,
     },
   },
   emits: ['scroll'],
+  data() {
+    return {
+      id: id++,
+    }
+  },
   watch: {
     scrollLeft(value) {
-      this.$refs.scrollable.scrollLeft = value
+      if (this.scrollId !== this.id) {
+        this.$refs.scrollable.scrollLeft = value
+      }
     },
   },
   mounted() {
@@ -30,5 +43,19 @@ export default {
       this.$refs.scrollable.scrollLeft = this.scrollLeft
     })
   },
+  methods: {
+    scroll($event) {
+      let scrollLeft = $event.target.scrollLeft
+
+      if (this.scrollLeft === scrollLeft) {
+        return
+      }
+
+      this.$emit('scroll', {
+        scrollId: this.id,
+        scrollLeft,
+      })
+    },
+  },
 }
 </script>
diff --git a/web/src/views/project/ProjectDashboardView.vue b/web/src/views/project/ProjectDashboardView.vue
index 4113b09..92221ea 100644
--- a/web/src/views/project/ProjectDashboardView.vue
+++ b/web/src/views/project/ProjectDashboardView.vue
@@ -4,9 +4,10 @@
     :dates="dates"
     :max-count="maxCount"
     :records="recordsGroupedAndSorted"
+    :scroll-id="scrollId"
     :scroll-left="scrollLeft"
     :status="status"
-    @scroll="scrollLeft = $event.target.scrollLeft"
+    @scroll="scroll"
   />
 </template>
 
@@ -21,6 +22,7 @@ export default {
   },
   data() {
     return {
+      scrollId: null,
       scrollLeft: 0,
     }
   },
@@ -47,6 +49,10 @@ export default {
   },
   methods: {
     ...mapActions('counts', ['fetch']),
+    scroll({ scrollId, scrollLeft }) {
+      this.scrollId = scrollId
+      this.scrollLeft = scrollLeft
+    },
   },
   pageTitle() {
     return this.currentProject.name