Welcome to mirror list, hosted at ThFree Co, Russian Federation.

github.com/MHSanaei/3x-ui.git - Unnamed repository; edit this file 'description' to name the repository.
summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorShishkevich D. <135337715+shishkevichd@users.noreply.github.com>2025-03-24 12:57:37 +0300
committerShishkevich D. <135337715+shishkevichd@users.noreply.github.com>2025-03-24 12:57:37 +0300
commit14253c35864828458ef3eeecb05591a7ae6e641e (patch)
tree0689a64cc3c2224baf5e26bdc91faad6813b34bb /web/html/common
parent7b15274c842b31e8caded3e7f272237f31824852 (diff)
chore: moving the modals to a separate directory
Diffstat (limited to 'web/html/common')
-rw-r--r--web/html/common/prompt_modal.html71
-rw-r--r--web/html/common/qrcode_modal.html161
-rw-r--r--web/html/common/text_modal.html52
3 files changed, 0 insertions, 284 deletions
diff --git a/web/html/common/prompt_modal.html b/web/html/common/prompt_modal.html
deleted file mode 100644
index b91ede03..00000000
--- a/web/html/common/prompt_modal.html
+++ /dev/null
@@ -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}} \ No newline at end of file
diff --git a/web/html/common/qrcode_modal.html b/web/html/common/qrcode_modal.html
deleted file mode 100644
index 93d66fc2..00000000
--- a/web/html/common/qrcode_modal.html
+++ /dev/null
@@ -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}}
diff --git a/web/html/common/text_modal.html b/web/html/common/text_modal.html
deleted file mode 100644
index c15282b9..00000000
--- a/web/html/common/text_modal.html
+++ /dev/null
@@ -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}}