dan/oxc
1
0
Fork 0
mirror of https://github.com/danbulant/oxc synced 2026-05-23 06:08:47 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(playground): add resize in playground (#943)

Browse source 
https://github.com/web-infra-dev/oxc/assets/33973865/b0be1785-4e01-48e4-a572-b5b03f4e0ee9
This commit is contained in:
Wenzhe Wang 2023-09-30 05:38:11 +08:00 committed by GitHub
parent 2248cb094a
commit 7de60f0668
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 43 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
website/playground/index.html
View file

@ -18,7 +18,7 @@
#left { display: flex; flex: 1; flex-direction: column; border-right: 1px solid #444 }
#editor { flex: 1; overflow-y: auto; }
#panel { height: 20%; overflow-y: auto; padding: 1em; color: #d1d5da; background-color: #24292e; border-top: 1px solid #444!important; }
#right { flex: 1; display:flex; flex-direction: column; max-width: 50vw; }
#right { flex: 1; display:flex; flex-direction: column; min-width: 0; }
.controls { color: white; background: #24292e; padding: .8em 1em; border-bottom: 1px solid #444; display: flex; align-items: center; justify-content: space-between; }
.controls label { font-size: 14px; }
#viewer { flex: 1; overflow-y: auto; }
@ -26,6 +26,8 @@
.query-button-green { background-color: #32CD59; border-color: #15c541; }
.query-button-red { background-color: #e74c3c; border-color: #c0392b; }
#query-results-viewer { height: 50%; border-top: 1px solid #444; display: none; }
#divider { width: 4px; background: #444; }
#divider:hover { background: #666; cursor: col-resize; }
</style>
</head>
<body>
@ -45,6 +47,7 @@
<div id="editor"></div>
<div id="panel"></div>
</div>
<div id="divider"></div>
<div id="right">
<div class="controls">
<div>

42
website/playground/index.js
View file

@ -727,6 +727,8 @@ async function main() {
document.getElementById("loading").remove();
addHorizontalResize()
document.getElementById("ast").onclick = () => {
playground.updateView("ast");
};
@ -743,9 +745,9 @@ async function main() {
// playground.updateView("format");
// };
document.getElementById("minify").onclick = function () {
playground.updateView("minify");
};
// document.getElementById("minify").onclick = function () {
// playground.updateView("minify");
// };
document.getElementById("query").onclick = () => {
playground.updateView("query");
@ -795,4 +797,38 @@ async function main() {
};
}
// port from https://github.com/fkling/astexplorer/blob/541552fe45885c225fbb67d54dc4c6d6107b65b5/website/src/components/SplitPane.js#L26-L55
function addHorizontalResize() {
const container = document.getElementById("container");
const left = document.getElementById("left");
const divider = document.getElementById("divider");
divider.addEventListener("mousedown", function (event) {
// This is needed to prevent text selection in Safari
event.preventDefault();
const offset = container.offsetLeft;
const size = container.offsetWidth;
const setStyle = (position) => {
left.style.minWidth = left.style.maxWidth = position + '%'
}
globalThis.document.body.style.cursor = 'col-resize';
const moveHandler = event => {
event.preventDefault();
const newPosition = ( event.pageX - offset) / size * 100;
// Using 99% as the max value prevents the divider from disappearing
const position = Math.min(Math.max(0, newPosition), 99);
setStyle(position)
};
let upHandler = () => {
document.removeEventListener('mousemove', moveHandler);
document.removeEventListener('mouseup', upHandler);
globalThis.document.body.style.cursor = '';
};
document.addEventListener('mousemove', moveHandler);
document.addEventListener('mouseup', upHandler);
})
}
main();