im trying to create a textarea resize grippie more or less like the SO for a trix textarea with rais stimulus so i set this controller below
the issue is when i pull down the textarea the textarea blow all the page, and i have any idea why, someone that know hotwire better can point my mistake please?
<div class="trix-container" data-controller="textarea-resizer"><%= form.rich_text_area :body, required: true, data: { target: 'textarea-resizer.textarea' } %> <div class="resizable-textarea" data-textarea-resizer-target="container">
<span></span>
<div class="grippie" data-textarea-resizer-target="grippie"></div>
</div>
</div>
// app/javascript/controllers/textarea_resizer_controller.js
import { Controller } from "@hotwired/stimulus";
export default class extends Controller {
static targets = ["textarea", "grippie"];
connect() {
this.textareaTarget.classList.add("processed");
this.setupGrippie();
}
setupGrippie() {
this.grippieTarget.addEventListener("mousedown", this.startDrag.bind(this));
}
startDrag(event) {
event.preventDefault();
this.lastMousePos = this.mousePosition(event).y;
this.staticOffset = this.textareaTarget.offsetHeight - this.lastMousePos;
this.textareaTarget.style.opacity = 0.25;
document.addEventListener("mousemove", this.performDrag.bind(this));
document.addEventListener("mouseup", this.endDrag.bind(this));
}
performDrag(event) {
const currentMousePos = this.mousePosition(event).y;
let newHeight = this.staticOffset + currentMousePos;
if (this.lastMousePos >= currentMousePos) {
newHeight -= 5;
}
this.lastMousePos = currentMousePos;
newHeight = Math.max(32, newHeight);
this.textareaTarget.style.height = `${newHeight}px`;
if (newHeight < 32) {
this.endDrag(event);
}
}
endDrag() {
document.removeEventListener("mousemove", this.performDrag.bind(this));
document.removeEventListener("mouseup", this.endDrag.bind(this));
this.textareaTarget.style.opacity = 1;
this.lastMousePos = 0;
this.staticOffset = null;
}
mousePosition(event) {
return {
x: event.clientX + document.documentElement.scrollLeft,
y: event.clientY + document.documentElement.scrollTop,
};
}
}