kuba/strona-czynna
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add component width display

Browse Source 
Summary: Ref T2887

Reviewers: #testers, kuba-orlik

Reviewed By: #testers, kuba-orlik

Subscribers: kuba-orlik, jenkins-user

Maniphest Tasks: T2887

Differential Revision: https://hub.sealcode.org/D1403
This commit is contained in:
Mateusz Jarczyński 2024-03-26 21:40:55 +01:00
parent 844ec1a21f
commit ec457ebd76
1 changed files with 57 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

94
src/back/routes/components.sreact.tsx
View File

@ -136,45 +136,11 @@ export default new (class ComponentsPage extends StatefulPage<
<code>{JSON.stringify(state)}</code> <code>{JSON.stringify(state)}</code>
</div> </div>
<div class="resize-gutter"></div> <div class="resize-gutter"></div>
{
/* HTML */ `<script>
(function () {
let is_resizing = false;
let origin_x;
let origin_width;
const gutter = document.querySelector(".resize-gutter");
const resizable = document.querySelector(".resizable");
const move_listener = (e) => {
const new_width = Math.max(
origin_width + (e.clientX - origin_x),
1
);
document
.getElementById("component-debugger")
.style.setProperty(
"--resizable-column-width",
new_width + "px"
);
};
gutter.addEventListener("mousedown", (e) => {
is_resizing = true;
origin_x = e.clientX;
origin_width = resizable.getBoundingClientRect().width;
document.addEventListener("mousemove", move_listener);
document.addEventListener("mouseup", () => {
document.removeEventListener(
"mousemove",
move_listener
);
});
e.preventDefault();
});
})();
</script>`
}
<div class="component-preview"> <div class="component-preview">
<fieldset> <fieldset>
<legend>Preview</legend> <legend>
Preview <span id="component_width_span"></span>
</legend>
{render( {render(
registry, registry,
[ [
@ -186,6 +152,60 @@ export default new (class ComponentsPage extends StatefulPage<
jdd_context jdd_context
)} )}
</fieldset> </fieldset>
{
/* HTML */ `<script>
(function () {
function update_width_display() {
const component_width =
document.getElementsByClassName(
"component-preview"
)[0].offsetWidth;
document.getElementById(
"component_width_span"
).innerHTML = \`(width: \${component_width}px)\`;
}
window.addEventListener("load", (event) => {
update_width_display();
});
document.addEventListener(
"turbo:render",
update_width_display
);
let is_resizing = false;
let origin_x;
let origin_width;
const gutter = document.querySelector(".resize-gutter");
const resizable = document.querySelector(".resizable");
const move_listener = (e) => {
const new_width = Math.max(
origin_width + (e.clientX - origin_x),
1
);
document
.getElementById("component-debugger")
.style.setProperty(
"--resizable-column-width",
new_width + "px"
);
update_width_display();
};
gutter.addEventListener("mousedown", (e) => {
is_resizing = true;
origin_x = e.clientX;
origin_width =
resizable.getBoundingClientRect().width;
document.addEventListener("mousemove", move_listener);
document.addEventListener("mouseup", () => {
document.removeEventListener(
"mousemove",
move_listener
);
});
e.preventDefault();
});
})();
</script>`
}
</div> </div>
{ {
/* HTML */ `<script> /* HTML */ `<script>