From c6d38bb3d792c246bca2f95d94ac0e17d5780255 Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Sun, 6 Aug 2023 23:43:55 +0800
Subject: [PATCH] code refactor

---
 src/components/mobile/ColorSelectionSheet.vue | 25 +++---------------
 src/components/mobile/IconSelectionSheet.vue  | 25 +++---------------
 .../mobile/ListItemSelectionSheet.vue         | 25 +++---------------
 .../mobile/TreeViewSelectionSheet.vue         | 24 ++---------------
 .../TwoColumnListItemSelectionSheet.vue       | 26 +++----------------
 src/lib/ui.mobile.js                          | 22 ++++++++++++++++
 .../mobile/statistics/TransactionPage.vue     | 21 ++-------------
 src/views/mobile/transactions/ListPage.vue    | 22 ++--------------
 8 files changed, 40 insertions(+), 150 deletions(-)

diff --git a/src/components/mobile/ColorSelectionSheet.vue b/src/components/mobile/ColorSelectionSheet.vue
index e92d9cb0..763222a7 100644
--- a/src/components/mobile/ColorSelectionSheet.vue
+++ b/src/components/mobile/ColorSelectionSheet.vue
@@ -28,6 +28,8 @@
 </template>
 
 <script>
+import { scrollToSelectedItem } from '@/lib/ui.mobile.js';
+
 export default {
     props: [
         'modelValue',
@@ -72,7 +74,7 @@ export default {
         },
         onSheetOpen(event) {
             this.currentValue = this.modelValue;
-            this.scrollToSelectedItem(event.$el);
+            scrollToSelectedItem(event.$el, '.page-content', '.row-has-selected-item');
         },
         onSheetClosed() {
             this.$emit('update:show', false);
@@ -89,27 +91,6 @@ export default {
             }
 
             return false;
-        },
-        scrollToSelectedItem(parent) {
-            if (!parent || !parent.length) {
-                return;
-            }
-
-            const container = parent.find('.page-content');
-            const selectedItem = parent.find('.row-has-selected-item');
-
-            if (!container.length || !selectedItem.length) {
-                return;
-            }
-
-            let targetPos = selectedItem.offset().top - container.offset().top - parseInt(container.css('padding-top'), 10)
-                - (container.outerHeight() - selectedItem.outerHeight()) / 2;
-
-            if (targetPos <= 0) {
-                return;
-            }
-
-            container.scrollTop(targetPos);
         }
     }
 }
diff --git a/src/components/mobile/IconSelectionSheet.vue b/src/components/mobile/IconSelectionSheet.vue
index b618d3f6..078dee5e 100644
--- a/src/components/mobile/IconSelectionSheet.vue
+++ b/src/components/mobile/IconSelectionSheet.vue
@@ -28,6 +28,8 @@
 </template>
 
 <script>
+import { scrollToSelectedItem } from '@/lib/ui.mobile.js';
+
 export default {
     props: [
         'modelValue',
@@ -92,7 +94,7 @@ export default {
         },
         onSheetOpen(event) {
             this.currentValue = this.modelValue;
-            this.scrollToSelectedItem(event.$el);
+            scrollToSelectedItem(event.$el, '.page-content', '.row-has-selected-item');
         },
         onSheetClosed() {
             this.$emit('update:show', false);
@@ -109,27 +111,6 @@ export default {
             }
 
             return false;
-        },
-        scrollToSelectedItem(parent) {
-            if (!parent || !parent.length) {
-                return;
-            }
-
-            const container = parent.find('.page-content');
-            const selectedItem = parent.find('.row-has-selected-item');
-
-            if (!container.length || !selectedItem.length) {
-                return;
-            }
-
-            let targetPos = selectedItem.offset().top - container.offset().top - parseInt(container.css('padding-top'), 10)
-                - (container.outerHeight() - selectedItem.outerHeight()) / 2;
-
-            if (targetPos <= 0) {
-                return;
-            }
-
-            container.scrollTop(targetPos);
         }
     }
 }
diff --git a/src/components/mobile/ListItemSelectionSheet.vue b/src/components/mobile/ListItemSelectionSheet.vue
index 8e10c45e..361543e4 100644
--- a/src/components/mobile/ListItemSelectionSheet.vue
+++ b/src/components/mobile/ListItemSelectionSheet.vue
@@ -31,6 +31,8 @@
 </template>
 
 <script>
+import { scrollToSelectedItem } from '@/lib/ui.mobile.js';
+
 export default {
     props: [
         'modelValue',
@@ -93,7 +95,7 @@ export default {
         },
         onSheetOpen(event) {
             this.currentValue = this.modelValue;
-            this.scrollToSelectedItem(event.$el);
+            scrollToSelectedItem(event.$el, '.page-content', 'li.list-item-selected');
         },
         onSheetClosed() {
             this.close();
@@ -109,27 +111,6 @@ export default {
                 }
             }
         },
-        scrollToSelectedItem(parent) {
-            if (!parent || !parent.length) {
-                return;
-            }
-
-            const container = parent.find('.page-content');
-            const selectedItem = parent.find('li.list-item-selected');
-
-            if (!container.length || !selectedItem.length) {
-                return;
-            }
-
-            let targetPos = selectedItem.offset().top - container.offset().top - parseInt(container.css('padding-top'), 10)
-                - (container.outerHeight() - selectedItem.outerHeight()) / 2;
-
-            if (targetPos <= 0) {
-                return;
-            }
-
-            container.scrollTop(targetPos);
-        },
         close() {
             this.$emit('update:show', false);
         }
diff --git a/src/components/mobile/TreeViewSelectionSheet.vue b/src/components/mobile/TreeViewSelectionSheet.vue
index 13cd7ae6..6b3cdead 100644
--- a/src/components/mobile/TreeViewSelectionSheet.vue
+++ b/src/components/mobile/TreeViewSelectionSheet.vue
@@ -40,6 +40,7 @@
 
 <script>
 import { isArray } from '@/lib/common.js';
+import { scrollToSelectedItem } from '@/lib/ui.mobile.js';
 
 export default {
     props: [
@@ -101,7 +102,7 @@ export default {
     methods: {
         onSheetOpen(event) {
             this.currentValue = this.modelValue;
-            this.scrollToSelectedItem(event.$el);
+            scrollToSelectedItem(event.$el, '.page-content', '.treeview-item .treeview-item-selected');
         },
         onSheetClosed() {
             this.$emit('update:show', false);
@@ -135,27 +136,6 @@ export default {
             } else {
                 return this.currentValue === subItem;
             }
-        },
-        scrollToSelectedItem(parent) {
-            if (!parent || !parent.length) {
-                return;
-            }
-
-            const container = parent.find('.page-content');
-            const selectedItem = parent.find('.treeview-item .treeview-item-selected');
-
-            if (!container.length || !selectedItem.length) {
-                return;
-            }
-
-            let targetPos = selectedItem.offset().top - container.offset().top - parseInt(container.css('padding-top'), 10)
-                - (container.outerHeight() - selectedItem.outerHeight()) / 2;
-
-            if (targetPos <= 0) {
-                return;
-            }
-
-            container.scrollTop(targetPos);
         }
     }
 }
diff --git a/src/components/mobile/TwoColumnListItemSelectionSheet.vue b/src/components/mobile/TwoColumnListItemSelectionSheet.vue
index ade8a279..01518aa6 100644
--- a/src/components/mobile/TwoColumnListItemSelectionSheet.vue
+++ b/src/components/mobile/TwoColumnListItemSelectionSheet.vue
@@ -61,6 +61,7 @@
 
 <script>
 import { isArray } from '@/lib/common.js';
+import { scrollToSelectedItem } from '@/lib/ui.mobile.js';
 
 export default {
     props: [
@@ -138,8 +139,8 @@ export default {
         onSheetOpen(event) {
             this.currentPrimaryValue = this.getPrimaryValueBySecondaryValue(this.modelValue);
             this.currentSecondaryValue = this.modelValue;
-            this.scrollToSelectedItem(event.$el, '.primary-list-container', 'li.primary-list-item-selected');
-            this.scrollToSelectedItem(event.$el, '.secondary-list-container', 'li.secondary-list-item-selected');
+            scrollToSelectedItem(event.$el, '.primary-list-container', 'li.primary-list-item-selected');
+            scrollToSelectedItem(event.$el, '.secondary-list-container', 'li.secondary-list-item-selected');
         },
         onSheetClosed() {
             this.close();
@@ -216,27 +217,6 @@ export default {
 
             return null;
         },
-        scrollToSelectedItem(parent, containerSelector, selectedItemSelector) {
-            if (!parent || !parent.length) {
-                return;
-            }
-
-            const container = parent.find(containerSelector);
-            const selectedItem = parent.find(selectedItemSelector);
-
-            if (!container.length || !selectedItem.length) {
-                return;
-            }
-
-            let targetPos = selectedItem.offset().top - container.offset().top - parseInt(container.css('padding-top'), 10)
-                - (container.outerHeight() - selectedItem.outerHeight()) / 2;
-
-            if (targetPos <= 0) {
-                return;
-            }
-
-            container.scrollTop(targetPos);
-        },
         close() {
             this.$emit('update:show', false);
         }
diff --git a/src/lib/ui.mobile.js b/src/lib/ui.mobile.js
index 6fe60900..f31eab4c 100644
--- a/src/lib/ui.mobile.js
+++ b/src/lib/ui.mobile.js
@@ -139,3 +139,25 @@ export function getFontSizePreviewClassName(type) {
 
     return fontConstants.fontSizePreviewClassNamePrefix + fontConstants.defaultFontSize.className;
 }
+
+export function scrollToSelectedItem(parentEl, containerSelector, selectedItemSelector) {
+    if (!parentEl || !parentEl.length) {
+        return;
+    }
+
+    const container = parentEl.find(containerSelector);
+    const selectedItem = parentEl.find(selectedItemSelector);
+
+    if (!container.length || !selectedItem.length) {
+        return;
+    }
+
+    let targetPos = selectedItem.offset().top - container.offset().top - parseInt(container.css('padding-top'), 10)
+        - (container.outerHeight() - selectedItem.outerHeight()) / 2;
+
+    if (targetPos <= 0) {
+        return;
+    }
+
+    container.scrollTop(targetPos);
+}
diff --git a/src/views/mobile/statistics/TransactionPage.vue b/src/views/mobile/statistics/TransactionPage.vue
index f047c0ab..2edc1596 100644
--- a/src/views/mobile/statistics/TransactionPage.vue
+++ b/src/views/mobile/statistics/TransactionPage.vue
@@ -264,6 +264,7 @@ import {
     getShiftedDateRangeAndDateType,
     getDateRangeByDateType
 } from '@/lib/datetime.js';
+import { scrollToSelectedItem } from '@/lib/ui.mobile.js';
 
 export default {
     props: [
@@ -523,25 +524,7 @@ export default {
             this.f7router.navigate('/statistic/settings');
         },
         scrollPopoverToSelectedItem(event) {
-            if (!event || !event.$el || !event.$el.length) {
-                return;
-            }
-
-            const container = event.$el.find('.popover-inner');
-            const selectedItem = event.$el.find('li.list-item-selected');
-
-            if (!container.length || !selectedItem.length) {
-                return;
-            }
-
-            let targetPos = selectedItem.offset().top - container.offset().top - parseInt(container.css('padding-top'), 10)
-                - (container.outerHeight() - selectedItem.outerHeight()) / 2;
-
-            if (targetPos <= 0) {
-                return;
-            }
-
-            container.scrollTop(targetPos);
+            scrollToSelectedItem(event.$el, '.popover-inner', 'li.list-item-selected');
         },
         getDisplayAmount(amount, currency, textLimit) {
             amount = this.getDisplayCurrency(amount, currency);
diff --git a/src/views/mobile/transactions/ListPage.vue b/src/views/mobile/transactions/ListPage.vue
index e2390fb8..68c615fe 100644
--- a/src/views/mobile/transactions/ListPage.vue
+++ b/src/views/mobile/transactions/ListPage.vue
@@ -435,7 +435,7 @@ import {
     getDateRangeByDateType
 } from '@/lib/datetime.js';
 import { categoryTypeToTransactionType, transactionTypeToCategoryType } from '@/lib/category.js';
-import { onSwipeoutDeleted } from '@/lib/ui.mobile.js';
+import { onSwipeoutDeleted, scrollToSelectedItem } from '@/lib/ui.mobile.js';
 
 export default {
     props: [
@@ -826,25 +826,7 @@ export default {
             });
         },
         scrollPopoverToSelectedItem(event) {
-            if (!event || !event.$el || !event.$el.length) {
-                return;
-            }
-
-            const container = event.$el.find('.popover-inner');
-            const selectedItem = event.$el.find('li.list-item-selected');
-
-            if (!container.length || !selectedItem.length) {
-                return;
-            }
-
-            let targetPos = selectedItem.offset().top - container.offset().top - parseInt(container.css('padding-top'), 10)
-                - (container.outerHeight() - selectedItem.outerHeight()) / 2;
-
-            if (targetPos <= 0) {
-                return;
-            }
-
-            container.scrollTop(targetPos);
+            scrollToSelectedItem(event.$el, '.popover-inner', 'li.list-item-selected');
         },
         getDisplayYearMonth(transactionMonthList) {
             return this.$locale.formatTimeToLongYearMonth(this.userStore, transactionMonthList.yearMonth);