refactor: DeviceUtils -> MediaQueryMixin

The transition to mixins has been made, as they can update themselves.

web/assets/js/util/index.js

@@ -782,8 +782,21 @@ class LanguageManager {
     }
 }
 
-class DeviceUtils {
+const MediaQueryMixin = {
-    static isMobile() {
+    data() {
-        return window.innerWidth <= 768;
+        return {
-    }
+            isMobile: window.innerWidth <= 768,
+        };
+    },
+    methods: {
+        updateDeviceType() {
+            this.isMobile = window.innerWidth <= 768;
+        },
+    },
+    mounted() {
+        window.addEventListener('resize', this.updateDeviceType);
+    },
+    beforeDestroy() {
+        window.removeEventListener('resize', this.updateDeviceType);
+    },
 }

web/html/inbounds.html

@@ -678,6 +678,7 @@
     const app = new Vue({
         delimiters: ['[[', ']]'],
         el: '#app',
+        mixins: [MediaQueryMixin],
         data: {
             themeSwitcher,
             persianDatepicker,
@@ -709,7 +710,6 @@
             showAlert: false,
             ipLimitEnable: false,
             pageSize: 50,
-            isMobile: DeviceUtils.isMobile(),
         },
         methods: {
             loading(spinning = true) {
@@ -1471,9 +1471,6 @@
                     return p;
                 }
                 return false
-            },
-            onResize() {
-              this.isMobile = DeviceUtils.isMobile();
             }
         },
         watch: {
@@ -1485,8 +1482,6 @@
             if (window.location.protocol !== "https:") {
                 this.showAlert = true;
             }
-            window.addEventListener('resize', this.onResize);
-            this.onResize();
             this.loading();
             this.getDefaultSettings();
             if (this.isRefreshEnabled) {

web/html/index.html

@@ -596,6 +596,7 @@
     const app = new Vue({
         delimiters: ['[[', ']]'],
         el: '#app',
+        mixins: [MediaQueryMixin],
         data: {
             themeSwitcher,
             status: new Status(),
@@ -605,8 +606,7 @@
             spinning: false,
             loadingTip: '{{ i18n "loading"}}',
             showAlert: false,
-            showIp: false,
+            showIp: false
-            isMobile: DeviceUtils.isMobile()
         },
         methods: {
             loading(spinning, tip = '{{ i18n "loading"}}') {

web/html/modals/qrcode_modal.html

@@ -1,6 +1,6 @@
 {{define "modals/qrcodeModal"}}
 <a-modal id="qrcode-modal" v-model="qrModal.visible" :title="qrModal.title"
-    :dialog-style="DeviceUtils.isMobile() ? { top: '18px' } : {}"
+    :dialog-style="isMobile ? { top: '18px' } : {}"
     :closable="true"
     :class="themeSwitcher.currentTheme"
     :footer="null" width="fit-content">
@@ -73,6 +73,7 @@
   const qrModalApp = new Vue({
     delimiters: ['[[', ']]'],
     el: '#qrcode-modal',
+    mixins: [MediaQueryMixin],
     data: {
       qrModal: qrModal,
     },

web/html/xray.html

@@ -192,6 +192,7 @@
 
     const app = new Vue({
         delimiters: ['[[', ']]'],
+        mixins: [MediaQueryMixin],
         el: '#app',
         data: {
             themeSwitcher,
@@ -205,7 +206,6 @@
             refreshing: false,
             restartResult: '',
             showAlert: false,
-            isMobile: DeviceUtils.isMobile(),
             advSettings: 'xraySetting',
             obsSettings: '',
             cm: null,