riki/rkgk
riki/rkgk
1
Fork 0
Code Issues 57 Pull requests Projects 1 Activity

sidebar layout

Browse source 
switch the app from floating panels to a static sidebar on the right with resizable tools
expect more layout bugs from now on
This commit is contained in:
りき萌 2025-06-27 23:24:09 +02:00
parent f78f3136d9
commit 0ddc42c00f
10 changed files with 272 additions and 178 deletions
Download patch file Download diff file Expand all files Collapse all files

34
static/resize-handle.js
View file

@ -3,13 +3,31 @@ import { listen, SaveData } from "rkgk/framework.js";
export class ResizeHandle extends HTMLElement {
saveData = new SaveData("resizeHandle");
constructor(props) {
super();
this.props = props;
}
connectedCallback() {
this.direction = this.getAttribute("data-direction");
this.targetId = this.getAttribute("data-target");
this.target = document.getElementById(this.targetId);
this.targetProperty = this.getAttribute("data-target-property");
this.initSize = parseInt(this.getAttribute("data-init-size"));
this.minSize = parseInt(this.getAttribute("data-min-size"));
let props = this.props ?? this.dataset;
this.direction = this.dataset.direction = props.direction;
this.targetProperty = props.targetProperty;
this.initSize = parseInt(props.initSize);
this.minSize = parseInt(props.minSize);
this.inverse = props.inverse != null;
if (props.targetElement != null) {
// In case you want to construct the resize handle programatically:
// pass in the target element via targetElement.
// Don't forget to set its id.
this.target = props.targetElement;
this.targetId = this.target.id;
} else {
// Else use data-target.
this.targetId = props.target;
this.target = document.getElementById(this.targetId);
}
this.saveData.elementId = this.targetId;
@ -58,8 +76,10 @@ export class ResizeHandle extends HTMLElement {
if (event.type == "mousemove") {
let delta =
this.direction == "vertical"
? mouseDown.clientX - event.clientX
? event.clientX - mouseDown.clientX
: event.clientY - mouseDown.clientY;
if (this.inverse) delta = -delta;
this.#setSize(startingSize + delta);
this.#updateTargetProperty();
} else if (event.type == "mouseup") {