Repo-Mirror/cloudflare-error-page
9
0
Fork 0
mirror of https://github.com/donlon/cloudflare-error-page.git synced 2025-12-23 16:59:17 +00:00
Code Issues Releases Activity

editor/web: support responsive save as dialog

Browse Source
This commit is contained in:
Anthony Donlon
2025-12-22 21:27:47 +08:00
parent 38eb8d8c11
commit 71f4e9507c
5 changed files with 106 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
editor/web/index.html
View File

@@ -148,6 +148,75 @@
--bs-popover-body-padding-x: 0.7rem !important;
--bs-popover-body-padding-y: 0.5rem !important;
}
.save-as-dialog__container {
display: grid;
grid-template-areas:
"selector"
"code"
"buttons";
height: fit-content;
grid-template-columns: auto;
gap: 1em;
}
.save-as-dialog__selector {
grid-area: selector;
min-width: 10em;
}
.save-as-dialog__code {
grid-area: code;
width: 100%;
height: 100%;
min-height: 700px !important;
font-family: monospace;
font-size: 0.8em !important;
}
.save-as-dialog__buttons {
grid-area: buttons;
flex-direction: row;
}
.save-as-dialog__buttons>* {
flex: 1 1 auto;
}
@media (min-width: 576px) {
.save-as-dialog__container {
grid-template-areas:
"selector code"
"buttons code";
grid-template-columns: auto 2fr;
height: 100%;
}
.save-as-dialog__selector {
text-align: right;
}
.save-as-dialog__code {
min-height: 0 !important;
}
.save-as-dialog__buttons {
grid-area: buttons;
flex-direction: column;
justify-content: flex-end !important;
}
.save-as-dialog__buttons>* {
flex: none;
}
}
@media (min-width: 992px) {
.save-as-dialog__selector {
grid-area: selector;
min-width: 13em;
}
}
</style>
</head>
@@ -408,7 +477,7 @@
</button>
</div>
<button type="button" id="btnShare" class="btn btn-sm btn-primary">Create shareable link</button>
<button type="button" id="btnShare" class="btn btn-sm btn-secondary">Create shareable link</button>
<div class="mt-2">
<div class="input-group input-group-sm">
<input id="shareLink" class="form-control" readonly />
@@ -443,22 +512,17 @@
</div>
<!-- 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-content">
<div class="modal fade" id="saveAsDialog" tabindex="-1" aria-labelledby="saveAsDialogLabel">
<div class="modal-dialog modal-xl modal-fullscreen-lg-down modal-dialog-scrollable">
<div class="modal-content h-100">
<div class="modal-header">
<h5 class="modal-title" id="saveAsDialogLabel">Save As ...</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="container-fluid">
<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 class="mx-2 save-as-dialog__container">
<div id="saveAsDialogTypes" class="list-group save-as-dialog__selector">
<button type="button" data-type="json" class="list-group-item list-group-item-action active">
JSON
</button>
@@ -469,8 +533,7 @@
NodeJS Example
</button>
</div>
<!-- Bottom Buttons -->
<div class="d-flex flex-column justify-content-end gap-1">
<div class="d-flex gap-1 save-as-dialog__buttons">
<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
@@ -479,20 +542,13 @@
Save
</button>
</div>
</div>
<!-- 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;"
<textarea id="saveAsDialogCode" class="form-control save-as-dialog__code" spellcheck="false"
readonly></textarea>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>

2
editor/web/src/codegen/js.ejs
View File

@@ -7,7 +7,7 @@ const port = 3000;
// Define a route for GET requests to the root URL
<%# TODO: format to JS-style object (key w/o parens) _%>
app.get('/', (req, res) => {
res.status(500).send(render_cf_error_page(<%=JSON.stringify(params, null, 2).replaceAll('\n', '\n ')%>));
res.status(500).send(render_cf_error_page(<%-JSON.stringify(params, null, 2).replaceAll('\n', '\n ')%>));
});
// Start the server and listen on the specified port

2
editor/web/src/codegen/json.ejs
View File

@@ -1 +1 @@
<%=JSON.stringify(params, null, 4)%>
<%-JSON.stringify(params, null, 4)%>

2
editor/web/src/codegen/python.ejs
View File

@@ -26,4 +26,4 @@ def index():
return render_cf_error_page(<%=paramsArg.replaceAll('\n', '\n ')%>), 500
if __name__ == '__main__':
app.run(debug=True, port=8080)
app.run(debug=True, port=5000)

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

@@ -387,7 +387,7 @@ $('btnCopyLink').addEventListener('click', () => {
navigator.clipboard.writeText(field.value).then(() => {
shareLinkPopover.show();
setTimeout(() => {
shareLinkPopover.hide()
shareLinkPopover.hide();
}, 2000);
});
});
@@ -422,7 +422,9 @@ function saveFile(content, saveName) {
document.body.removeChild(link);
window.URL.revokeObjectURL(url);
}
let saveAsType;
let saveAsContent;
function updateSaveAsDialog(e) {
if (e) {
@@ -445,7 +447,8 @@ function updateSaveAsDialog(e) {
}
const params = { ...lastCfg };
delete params.time;
document.getElementById('saveAsDialogCode').innerHTML = codegen.generate(params);
$('saveAsDialogCode').innerHTML = saveAsContent = codegen.generate(params);
$('saveAsDialogCode').scrollTop = 0;
document.querySelectorAll('#saveAsDialogTypes button').forEach((element) => {
const isCurrent = element.dataset.type == saveAsType;
@@ -470,9 +473,9 @@ $('saveAsDialogCopyBtn').addEventListener('click', (e) => {
field.select();
// field.setSelectionRange(0, field.value.length);
navigator.clipboard.writeText(field.value).then(() => {
saveAsDialogCopyPopover.show()
saveAsDialogCopyPopover.show();
setTimeout(() => {
saveAsDialogCopyPopover.hide()
saveAsDialogCopyPopover.hide();
}, 2000);
});
});
@@ -489,5 +492,5 @@ $('saveAsDialogSaveBtn').addEventListener('click', (e) => {
saveName = 'cf_error_page_example.py';
break;
}
saveFile($('saveAsDialogCode').innerHTML, saveName);
saveFile(saveAsContent, saveName);
});