code refactor

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);
         }
     }
 }

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);
         }
     }
 }

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);
         }

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);
         }
     }
 }

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');
+            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, '.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);
         }

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);
+}

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) {
+            scrollToSelectedItem(event.$el, '.popover-inner', 'li.list-item-selected');
-                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);
         },
         getDisplayAmount(amount, currency, textLimit) {
             amount = this.getDisplayCurrency(amount, currency);

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) {
+            scrollToSelectedItem(event.$el, '.popover-inner', 'li.list-item-selected');
-                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);
         },
         getDisplayYearMonth(transactionMonthList) {
             return this.$locale.formatTimeToLongYearMonth(this.userStore, transactionMonthList.yearMonth);