chore: moving the modals to a separate directory

web/html/common/prompt_modal.html

@@ -1,71 +0,0 @@
-{{define "promptModal"}}
-<a-modal id="prompt-modal" v-model="promptModal.visible" :title="promptModal.title"
-         :closable="true" @ok="promptModal.ok" :mask-closable="false"
-         :confirm-loading="promptModal.confirmLoading"
-         :ok-text="promptModal.okText" cancel-text='{{ i18n "cancel" }}' :class="themeSwitcher.currentTheme">
-    <a-input id="prompt-modal-input" :type="promptModal.type"
-             v-model="promptModal.value"
-             :autosize="{minRows: 10, maxRows: 20}"
-             @keydown.enter.native="promptModal.keyEnter"
-             @keydown.ctrl.83="promptModal.ctrlS"></a-input>
-</a-modal>
-
-<script>
-
-    const promptModal = {
-        title: '',
-        type: '',
-        value: '',
-        okText: '{{ i18n "sure"}}',
-        visible: false,
-        confirmLoading: false,
-        keyEnter(e) {
-            if (this.type !== 'textarea') {
-                e.preventDefault();
-                this.ok();
-            }
-        },
-        ctrlS(e) {
-            if (this.type === 'textarea') {
-                e.preventDefault();
-                promptModal.confirm(promptModal.value);
-            }
-        },
-        ok() {
-            promptModal.confirm(promptModal.value);
-        },
-        confirm() {},
-        open({
-            title = '',
-            type = 'text',
-            value = '',
-            okText = '{{ i18n "sure"}}',
-            confirm = () => {},
-        }) {
-            this.title = title;
-            this.type = type;
-            this.value = value;
-            this.okText = okText;
-            this.confirm = confirm;
-            this.visible = true;
-            promptModalApp.$nextTick(() => {
-                document.querySelector('#prompt-modal-input').focus();
-            });
-        },
-        close() {
-            this.visible = false;
-        },
-        loading(loading=true) {
-            this.confirmLoading = loading;
-        },
-    };
-
-    const promptModalApp = new Vue({
-        el: '#prompt-modal',
-        data: {
-            promptModal: promptModal,
-        },
-    });
-
-</script>
-{{end}}

web/html/common/qrcode_modal.html

@@ -1,161 +0,0 @@
-{{define "qrcodeModal"}}
-<a-modal id="qrcode-modal" v-model="qrModal.visible" :title="qrModal.title"
-    :dialog-style="DeviceUtils.isMobile() ? { top: '18px' } : {}"
-    :closable="true"
-    :class="themeSwitcher.currentTheme"
-    :footer="null" width="fit-content">
-  <tr-qr-modal class="qr-modal">
-    <template v-if="app.subSettings.enable && qrModal.subId">
-      <tr-qr-box class="qr-box">
-        <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="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="copy(genSubJsonLink(qrModal.client.subId))" id="qrCode-subJson" class="qr-cv"></canvas>
-          </tr-qr-bg-inner>
-        </tr-qr-bg>
-      </tr-qr-box>
-    </template>
-    <template v-for="(row, index) in qrModal.qrcodes">
-      <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="copy(row.link)" :id="'qrCode-'+index" class="qr-cv"></canvas>
-        </tr-qr-bg>
-      </tr-qr-box>
-    </template>
-  </tr-qr-modal>
-</a-modal>
-
-<script>
-  const qrModal = {
-    title: '',
-    dbInbound: new DBInbound(),
-    client: null,
-    qrcodes: [],
-    visible: false,
-    subId: '',
-    show: function(title = '', dbInbound, client) {
-      this.title = title;
-      this.dbInbound = dbInbound;
-      this.inbound = dbInbound.toInbound();
-      this.client = client;
-      this.subId = '';
-      this.qrcodes = [];
-      if (this.inbound.protocol == Protocols.WIREGUARD) {
-        this.inbound.genInboundLinks(dbInbound.remark).split('\r\n').forEach((l, index) => {
-          this.qrcodes.push({
-            remark: "Peer " + (index + 1),
-            link: l
-          });
-        });
-      } else {
-        this.inbound.genAllLinks(this.dbInbound.remark, app.remarkModel, client).forEach(l => {
-          this.qrcodes.push({
-            remark: l.remark,
-            link: l.link
-          });
-        });
-      }
-      this.visible = true;
-    },
-    close: function() {
-      this.visible = false;
-    },
-  };
-  const qrModalApp = new Vue({
-    delimiters: ['[[', ']]'],
-    el: '#qrcode-modal',
-    data: {
-      qrModal: qrModal,
-    },
-    methods: {
-      copy(content) {
-        ClipboardManager
-          .copyText(content)
-          .then(() => {
-            app.$message.success('{{ i18n "copied" }}')
-          })
-      },
-      setQrCode(elementId, content) {
-        new QRious({
-          element: document.querySelector('#' + elementId),
-          size: 400,
-          value: content,
-          background: 'white',
-          backgroundAlpha: 0,
-          foreground: 'black',
-          padding: 2,
-          level: 'L'
-        });
-      },
-      genSubLink(subID) {
-        return app.subSettings.subURI + subID;
-      },
-      genSubJsonLink(subID) {
-        return app.subSettings.subJsonURI + subID;
-      },
-      revertOverflow() {
-        const elements = document.querySelectorAll(".qr-tag");
-        elements.forEach((element) => {
-          element.classList.remove("tr-marquee");
-          element.children[0].style.animation = '';
-          while (element.children.length > 1) {
-            element.removeChild(element.lastChild);
-          }
-        });
-      }
-    },
-    updated() {
-      if (this.qrModal.visible) {
-        fixOverflow();
-      } else {
-        this.revertOverflow();
-      }
-      if (qrModal.client && qrModal.client.subId) {
-        qrModal.subId = qrModal.client.subId;
-        this.setQrCode("qrCode-sub", this.genSubLink(qrModal.subId));
-        this.setQrCode("qrCode-subJson", this.genSubJsonLink(qrModal.subId));
-      }
-      qrModal.qrcodes.forEach((element, index) => {
-        this.setQrCode("qrCode-" + index, element.link);
-      });
-    }
-  });
-
-  function fixOverflow() {
-    const elements = document.querySelectorAll(".qr-tag");
-    elements.forEach((element) => {
-      function isElementOverflowing(element) {
-        const overflowX = element.offsetWidth < element.scrollWidth,
-          overflowY = element.offsetHeight < element.scrollHeight;
-        return overflowX || overflowY;
-      }
-
-      function wrapContentsInMarquee(element) {
-        element.classList.add("tr-marquee");
-        element.children[0].style.animation = `move-ltr ${
-            (element.children[0].clientWidth / element.clientWidth) * 5
-          }s ease-in-out infinite`;
-        const marqueeText = element.children[0];
-        if (element.children.length < 2) {
-          for (let i = 0; i < 1; i++) {
-            const marqueeText = element.children[0].cloneNode(true);
-            element.children[0].after(marqueeText);
-          }
-        }
-      }
-      if (isElementOverflowing(element)) {
-        wrapContentsInMarquee(element);
-      }
-    });
-  }
-</script>
-{{end}}

web/html/common/text_modal.html

@@ -1,52 +0,0 @@
-{{define "textModal"}}
-<a-modal id="text-modal" v-model="txtModal.visible" :title="txtModal.title"
-         :closable="true"
-         :class="themeSwitcher.currentTheme">
-    <template slot="footer">
-        <a-button v-if="!ObjectUtil.isEmpty(txtModal.fileName)" icon="download"
-            :href="'data:application/text;charset=utf-8,' + encodeURIComponent(txtModal.content)"
-            :download="txtModal.fileName">[[ txtModal.fileName ]]
-        </a-button>
-        <a-button type="primary" @click="txtModal.copy(txtModal.content)">{{ i18n "copy" }}</a-button>
-    </template>
-    <a-input style="overflow-y: auto;" type="textarea" v-model="txtModal.content"
-        :autosize="{ minRows: 10, maxRows: 20}"></a-input>
-</a-modal>
-
-<script>
-
-    const txtModal = {
-        title: '',
-        content: '',
-        fileName: '',
-        qrcode: null,
-        visible: false,
-        show: function (title = '', content = '', fileName = '') {
-            this.title = title;
-            this.content = content;
-            this.fileName = fileName;
-            this.visible = true;
-        },
-        copy: function (content = '') {
-            ClipboardManager
-                .copyText(content)
-                .then(() => {
-                    app.$message.success('{{ i18n "copied" }}')
-                    this.close();
-                })
-        },
-        close: function () {
-            this.visible = false;
-        },
-    };
-
-    const textModalApp = new Vue({
-        delimiters: ['[[', ']]'],
-        el: '#text-modal',
-        data: {
-            txtModal: txtModal,
-        },
-    });
-
-</script>
-{{end}}