From e7a4229248f310e5ce08d26ab84c3b2831dc87d6 Mon Sep 17 00:00:00 2001
From: "Shishkevich D." <135337715+shishkevichd@users.noreply.github.com>
Date: Mon, 7 Apr 2025 12:26:13 +0000
Subject: [PATCH] chore: create `FileManager` class for downloading files

---
 web/assets/js/util/index.js     | 20 ++++++++++++++++++++
 web/html/index.html             |  4 +---
 web/html/modals/text_modal.html | 13 +------------
 3 files changed, 22 insertions(+), 15 deletions(-)

diff --git a/web/assets/js/util/index.js b/web/assets/js/util/index.js
index 93416abe..dedf5c64 100644
--- a/web/assets/js/util/index.js
+++ b/web/assets/js/util/index.js
@@ -799,4 +799,24 @@ const MediaQueryMixin = {
     beforeDestroy() {
         window.removeEventListener('resize', this.updateDeviceType);
     },
+}
+
+class FileManager {
+    static downloadTextFile(content, filename='file.txt', options = { type: "text/plain" }) {
+        let link = window.document.createElement('a');
+
+        link.download = filename;
+        link.style.border = '0';
+        link.style.padding = '0';
+        link.style.margin = '0';
+        link.style.position = 'absolute';
+        link.style.left = '-9999px';
+        link.style.top = `${window.pageYOffset || window.document.documentElement.scrollTop}px`;
+        link.href = URL.createObjectURL(new Blob([content], options));
+        link.click();
+
+        URL.revokeObjectURL(link.href);
+
+        link.remove();
+    }
 }
\ No newline at end of file
diff --git a/web/html/index.html b/web/html/index.html
index 1be7df13..574fc539 100644
--- a/web/html/index.html
+++ b/web/html/index.html
@@ -400,9 +400,7 @@
           <a-checkbox v-model="logModal.syslog" @change="openLogs()">SysLog</a-checkbox>
         </a-form-item>
         <a-form-item :style="{ float: 'right' }">
-          <a-button type="primary" icon="download"
-            :href="'data:application/text;charset=utf-8,' + encodeURIComponent(logModal.logs?.join('\n'))" download="x-ui.log">
-          </a-button>
+          <a-button type="primary" icon="download" @click="FileManager.downloadTextFile(logModal.logs?.join('\n'), 'x-ui.log')"></a-button>
         </a-form-item>
       </a-form>
       <div class="ant-input" :style="{ height: 'auto', maxHeight: '500px', overflow: 'auto', marginTop: '0.5rem' }" v-html="logModal.formattedLogs"></div>
diff --git a/web/html/modals/text_modal.html b/web/html/modals/text_modal.html
index cd90821d..38844e92 100644
--- a/web/html/modals/text_modal.html
+++ b/web/html/modals/text_modal.html
@@ -5,7 +5,7 @@
         :autosize="{ minRows: 10, maxRows: 20}"></a-input>
     <template slot="footer">
         <a-button v-if="!ObjectUtil.isEmpty(txtModal.fileName)" icon="download"
-            @click="txtModal.download(txtModal.content, txtModal.fileName)">
+            @click="FileManager.downloadTextFile(txtModal.content, txtModal.fileName)">
             <span>[[ txtModal.fileName ]]</span>
         </a-button>
         <a-button type="primary" icon="copy" @click="txtModal.copy(txtModal.content)">
@@ -35,17 +35,6 @@
                     this.close();
                 })
         },
-        download: function (content = '', fileName = '') {
-            let link = document.createElement('a');
-
-            link.download = fileName;
-            link.href = URL.createObjectURL(new Blob([content], { type: 'text/plain' }));
-            link.click();
-
-            URL.revokeObjectURL(link.href);
-
-            link.remove();
-        },
         close: function () {
             this.visible = false;
         },