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

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

@ -136,9 +136,41 @@ export default new (class ComponentsPage extends StatefulPage<
<code>{JSON.stringify(state)}</code>
</div>
<div class="resize-gutter"></div>
<div class="component-preview">
<fieldset>
<legend>
Preview <span id="component_width_span"></span>
</legend>
{render(
registry,
[
{
component_name: state.component,
args: state.component_args,
},
],
jdd_context
)}
</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;
@ -155,11 +187,13 @@ export default new (class ComponentsPage extends StatefulPage<
"--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;
origin_width =
resizable.getBoundingClientRect().width;
document.addEventListener("mousemove", move_listener);
document.addEventListener("mouseup", () => {
document.removeEventListener(
@ -172,20 +206,6 @@ export default new (class ComponentsPage extends StatefulPage<
})();
</script>`
}
<div class="component-preview">
<fieldset>
<legend>Preview</legend>
{render(
registry,
[
{
component_name: state.component,
args: state.component_args,
},
],
jdd_context
)}
</fieldset>
</div>
{
/* HTML */ `<script>