diff options
Diffstat (limited to 'web/html/common')
| -rw-r--r-- | web/html/common/prompt_modal.html | 71 | ||||
| -rw-r--r-- | web/html/common/qrcode_modal.html | 161 | ||||
| -rw-r--r-- | web/html/common/text_modal.html | 52 |
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}} |
