Repo-Mirror/cloudflare-error-page
9
0
Fork 0
mirror of https://github.com/donlon/cloudflare-error-page.git synced 2025-12-26 02:09:25 +00:00
Code Issues Releases Activity

editor/web: add popovers for "Copy" buttons

Browse Source
This commit is contained in:
Anthony Donlon
2025-12-22 02:13:29 +08:00
parent 76a4696a40
commit 38eb8d8c11
2 changed files with 26 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
editor/web/index.html
View File

@@ -143,6 +143,11 @@
min-height: 80px;
resize: vertical;
}
.popover {
--bs-popover-body-padding-x: 0.7rem !important;
--bs-popover-body-padding-y: 0.5rem !important;
}
</style>
</head>
@@ -407,7 +412,8 @@
<div class="mt-2">
<div class="input-group input-group-sm">
<input id="shareLink" class="form-control" readonly />
<button type="button" id="btnCopyLink" class="btn btn-outline-secondary">Copy</button>
<button type="button" id="btnCopyLink" class="btn btn-outline-secondary" data-bs-toggle="popover"
data-bs-placement="top" data-bs-trigger="manual" data-bs-content="Copied">Copy</button>
</div>
</div>
@@ -439,7 +445,7 @@
<!-- Modal -->
<div class="modal fade" id="saveAsDialog" tabindex="-1" aria-labelledby="saveAsDialogLabel" aria-hidden="true">
<div class="modal-dialog modal-xl modal-fullscreen-lg-down">
<!-- <div class="modal-dialog modal-lg modal-dialog-centered"> -->
<!-- <div class="modal-dialog modal-lg modal-dialog-centered"> -->
<div class="modal-content">
<div class="modal-header">
@@ -452,7 +458,7 @@
<div class="row g-3">
<!-- Left: List Group -->
<div class="col-3 d-flex flex-column" style="justify-content: space-between;">
<div id ="saveAsDialogTypes" class="list-group" style="text-align: right;">
<div id="saveAsDialogTypes" class="list-group" style="text-align: right;">
<button type="button" data-type="json" class="list-group-item list-group-item-action active">
JSON
</button>
@@ -465,7 +471,8 @@
</div>
<!-- Bottom Buttons -->
<div class="d-flex flex-column justify-content-end gap-1">
<button type="button" class="btn btn-success" id="saveAsDialogCopyBtn">
<button type="button" class="btn btn-success" id="saveAsDialogCopyBtn" data-bs-toggle="popover"
data-bs-placement="right" data-bs-trigger="manual" data-bs-content="Copied">
Copy
</button>
<button type="button" class="btn btn-primary" id="saveAsDialogSaveBtn">
@@ -476,7 +483,9 @@
<!-- Right: Main Content -->
<div class="col-9">
<textarea id="saveAsDialogCode" class="form-control" spellcheck="false" style="font-family: monospace; min-height: 500px; height: 100%; font-size: 0.8em;" readonly></textarea>
<textarea id="saveAsDialogCode" class="form-control" spellcheck="false"
style="font-family: monospace; min-height: 500px; height: 100%; font-size: 0.8em;"
readonly></textarea>
</div>
</div>
</div>

15
editor/web/src/index.js
View File

@@ -8,7 +8,8 @@
import ejs from 'ejs';
import templateContent from './template.ejs?raw';
import Modal from 'bootstrap/js/src/modal.js';
import 'bootstrap/js/src/modal.js';
import Popover from 'bootstrap/js/src/popover.js';
import 'bootstrap/dist/css/bootstrap.min.css';
import { jsCodeGen, jsonCodeGen, pythonCodeGen } from './codegen';
@@ -379,11 +380,15 @@ $('btnOpen').addEventListener('click', (e) => {
$('btnShare').addEventListener('click', (e) => {
createShareableLink();
});
const shareLinkPopover = new Popover($('btnCopyLink'));
$('btnCopyLink').addEventListener('click', () => {
const field = $('shareLink');
field.select();
navigator.clipboard.writeText(field.value).then(() => {
// No notification required unless you want one
shareLinkPopover.show();
setTimeout(() => {
shareLinkPopover.hide()
}, 2000);
});
});
@@ -459,12 +464,16 @@ document.querySelectorAll('#saveAsDialogTypes button').forEach((element) => {
element.addEventListener('click', updateSaveAsDialog);
});
const saveAsDialogCopyPopover = new Popover($('saveAsDialogCopyBtn'));
$('saveAsDialogCopyBtn').addEventListener('click', (e) => {
const field = $('saveAsDialogCode');
field.select();
// field.setSelectionRange(0, field.value.length);
navigator.clipboard.writeText(field.value).then(() => {
// No notification required unless you want one
saveAsDialogCopyPopover.show()
setTimeout(() => {
saveAsDialogCopyPopover.hide()
}, 2000);
});
});
$('saveAsDialogSaveBtn').addEventListener('click', (e) => {