refactor: move copy function to utils.js

Author: shishkevichd

web/assets/js/util/common.js

@@ -53,24 +53,6 @@ function formatSecond(second) {
     }
 }
 
-function copyToClipboard(text) {
-    // !! here old way of copying is used because not everyone can afford https connection
-    return new Promise((resolve) => {
-        const textarea = document.createElement("textarea");
-
-        textarea.value = text;
-
-        document.body.appendChild(textarea);
-
-        textarea.select();
-        document.execCommand("copy");
-
-        document.body.removeChild(textarea);
-
-        resolve(text)
-    })
-}  
-
 function addZero(num) {
     if (num < 10) {
         return "0" + num;

web/assets/js/util/utils.js

@@ -480,6 +480,38 @@ class Wireguard {
     }
 }
 
+class ClipboardManager {
+    static copyText(content = "") {
+        // !! here old way of copying is used because not everyone can afford https connection
+        return new Promise((resolve) => {
+            try {
+                const textarea = window.document.createElement('textarea');
+    
+                textarea.style.fontSize = '12pt';
+                textarea.style.border = '0';
+                textarea.style.padding = '0';
+                textarea.style.margin = '0';
+                textarea.style.position = 'absolute';
+                textarea.style.left = '-9999px';
+                textarea.style.top = `${window.pageYOffset || document.documentElement.scrollTop}px`;
+                textarea.setAttribute('readonly', '');
+                textarea.value = content;
+    
+                window.document.body.appendChild(textarea);
+    
+                textarea.select();
+                window.document.execCommand("copy");
+    
+                window.document.body.removeChild(textarea);
+    
+                resolve(true)
+            } catch {
+                resolve(false)
+            }
+        })
+    }
+}
+
 class Base64 {
     static encode(content = "", safe = false) {
         if (safe) {

web/html/common/qrcode_modal.html

@@ -10,15 +10,15 @@
         <a-tag color="purple" class="qr-tag"><span>{{ i18n "pages.settings.subSettings"}}</span></a-tag>
         <tr-qr-bg class="qr-bg-sub">
           <tr-qr-bg-inner class="qr-bg-sub-inner">
-            <canvas @click="copyToClipboard(genSubLink(qrModal.client.subId))" id="qrCode-sub" class="qr-cv"></canvas>
+            <canvas @click="qrModal.copy(genSubLink(qrModal.client.subId))" id="qrCode-sub" class="qr-cv"></canvas>
           </tr-qr-bg-inner>
         </tr-qr-bg>
       </tr-qr-box>
       <tr-qr-box class="qr-box">
         <a-tag color="purple" class="qr-tag"><span>{{ i18n "pages.settings.subSettings"}} Json</span></a-tag>
         <tr-qr-bg class="qr-bg-sub">
           <tr-qr-bg-inner class="qr-bg-sub-inner">
-            <canvas @click="copyToClipboard(genSubJsonLink(qrModal.client.subId))" id="qrCode-subJson" class="qr-cv"></canvas>
+            <canvas @click="qrModal.copy(genSubJsonLink(qrModal.client.subId))" id="qrCode-subJson" class="qr-cv"></canvas>
           </tr-qr-bg-inner>
         </tr-qr-bg>
       </tr-qr-box>
@@ -27,7 +27,7 @@
       <tr-qr-box class="qr-box">
         <a-tag color="green" class="qr-tag"><span>[[ row.remark ]]</span></a-tag>
         <tr-qr-bg class="qr-bg">
-          <canvas @click="copyToClipboard(row.link)" :id="'qrCode-'+index" class="qr-cv"></canvas>
+          <canvas @click="qrModal.copy(row.link)" :id="'qrCode-'+index" class="qr-cv"></canvas>
         </tr-qr-bg>
       </tr-qr-box>
     </template>
@@ -78,10 +78,12 @@
       qrModal: qrModal,
     },
     methods: {
-      copyToClipboard(content) {
-        return copyToClipboard(content).then(() => {
-          app.$message.success('{{ i18n "copied" }}')
-        })
+      copy(content) {
+        ClipboardManager
+          .copyText(content)
+          .then(() => {
+            app.$message.success('{{ i18n "copied" }}')
+          })
       },
       setQrCode(elementId, content) {
         new QRious({

web/html/common/text_modal.html

@@ -28,10 +28,12 @@
             this.visible = true;
         },
         copy: function (content = '') {
-            copyToClipboard(content).then(() => {
-                app.$message.success('{{ i18n "copied" }}')
-                this.close();
-            })
+            ClipboardManager
+                .copyText(content)
+                .then(() => {
+                    app.$message.success('{{ i18n "copied" }}')
+                    this.close();
+                })
         },
         close: function () {
             this.visible = false;

web/html/xui/inbound_info_modal.html

@@ -258,7 +258,7 @@
           <tr-info-title class="tr-info-title">
             <a-tag color="purple">Subscription Link</a-tag>
             <a-tooltip title='{{ i18n "copy" }}'>
-              <a-button size="small" icon="snippets" @click="copyToClipboard(infoModal.subLink)"></a-button>
+              <a-button size="small" icon="snippets" @click="copy(infoModal.subLink)"></a-button>
             </a-tooltip>
           </tr-info-title>
           <a :href="[[ infoModal.subLink ]]" target="_blank">[[ infoModal.subLink ]]</a>
@@ -267,7 +267,7 @@
           <tr-info-title class="tr-info-title">
             <a-tag color="purple">Json Link</a-tag>
             <a-tooltip title='{{ i18n "copy" }}'>
-              <a-button size="small" icon="snippets" @click="copyToClipboard(infoModal.subJsonLink)"></a-button>
+              <a-button size="small" icon="snippets" @click="copy(infoModal.subJsonLink)"></a-button>
             </a-tooltip>
           </tr-info-title>
           <a :href="[[ infoModal.subJsonLink ]]" target="_blank">[[ infoModal.subJsonLink ]]</a>
@@ -279,7 +279,7 @@
           <tr-info-title class="tr-info-title">
             <a-tag color="blue">[[ infoModal.clientSettings.tgId ]]</a-tag>
             <a-tooltip title='{{ i18n "copy" }}'>
-              <a-button size="small" icon="snippets" @click="copyToClipboard(infoModal.clientSettings.tgId)"></a-button>
+              <a-button size="small" icon="snippets" @click="copy(infoModal.clientSettings.tgId)"></a-button>
             </a-tooltip>
           </tr-info-title>
         </tr-info-row>
@@ -290,7 +290,7 @@
           <tr-info-title class="tr-info-title">
             <a-tag class="tr-info-tag" color="green">[[ link.remark ]]</a-tag>
             <a-tooltip title='{{ i18n "copy" }}'>
-              <a-button style="min-width: 24px;" size="small" icon="snippets" @click="copyToClipboard(link.link)"></a-button>
+              <a-button style="min-width: 24px;" size="small" icon="snippets" @click="copy(link.link)"></a-button>
             </a-tooltip>
           </tr-info-title>
           <code>[[ link.link ]]</code>
@@ -304,7 +304,7 @@
           <tr-info-title class="tr-info-title">
             <a-tag class="tr-info-tag" color="green">[[ link.remark ]]</a-tag>
             <a-tooltip title='{{ i18n "copy" }}'>
-              <a-button style="min-width: 24px;" size="small" icon="snippets" @click="copyToClipboard(link.link)"></a-button>
+              <a-button style="min-width: 24px;" size="small" icon="snippets" @click="copy(link.link)"></a-button>
             </a-tooltip>
           </tr-info-title>
           <code>[[ link.link ]]</code>
@@ -431,7 +431,7 @@
                 <tr-info-title class="tr-info-title">
                   <a-tag color="blue">Config</a-tag>
                   <a-tooltip title='{{ i18n "copy" }}'>
-                    <a-button style="min-width: 24px;" size="small" icon="snippets" @click="copyToClipboard(infoModal.links[index])"></a-button>
+                    <a-button style="min-width: 24px;" size="small" icon="snippets" @click="copy(infoModal.links[index])"></a-button>
                   </a-tooltip>
                 </tr-info-title>
                 <div v-html="infoModal.links[index].replaceAll(`\n`,`<br />`)" style="border-radius: 1rem; padding: 0.5rem;" class="client-table-odd-row">
@@ -532,10 +532,12 @@
       },
     },
     methods: {
-      copyToClipboard(content) {
-        return copyToClipboard(content).then(() => {
-          app.$message.success('{{ i18n "copied" }}')
-        })
+      copy(content) {
+        ClipboardManager
+          .copyText(content)
+          .then(() => {
+            app.$message.success('{{ i18n "copied" }}')
+          })
       },
       statsColor(stats) {
         return usageColor(stats.up + stats.down, app.trafficDiff, stats.total);

web/html/xui/inbounds.html

@@ -883,7 +883,7 @@
                         this.exportSubs(dbInbound.id);
                         break;
                     case "clipboard":
-                        this.copyToClipboard(dbInbound.id);
+                        this.copy(dbInbound.id);
                         break;
                     case "resetTraffic":
                         this.resetTraffic(dbInbound.id);
@@ -1382,9 +1382,9 @@
                 }
                 txtModal.show('{{ i18n "pages.inbounds.export"}}', copyText.join('\r\n'), 'All-Inbounds');
             },
-            copyToClipboard(dbInboundId) {
-                dbInbound = this.dbInbounds.find(row => row.id === dbInboundId);
-                txtModal.show('{{ i18n "pages.inbounds.inboundData" }}', JSON.stringify(dbInbound, null, 2));
+            copy(dbInboundId) {
+              dbInbound = this.dbInbounds.find(row => row.id === dbInboundId);
+              txtModal.show('{{ i18n "pages.inbounds.inboundData" }}', JSON.stringify(dbInbound, null, 2));
             },
             async startDataRefreshLoop() {
                 while (this.isRefreshEnabled) {