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

add zoom indicator in lower left corner (#39)

Browse source 
it looks like this:

  - 3200% +

I'm giving up on the 100% zoom button from the original idea, because rkgk's scaling curve makes it easy to go back to 100% if you need to.
This commit is contained in:
りき萌 2025-05-26 20:19:41 +02:00
parent 9f62582ef5
commit 6b82593414
7 changed files with 127 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

25
static/zoom-indicator.js Normal file
View file

@ -0,0 +1,25 @@
class ZoomIndicator extends HTMLElement {
connectedCallback() {
this.zoomOutButton = this.appendChild(document.createElement("button"));
this.zoomOutButton.classList.add("icon", "icon-minus");
this.zoomLevelText = this.appendChild(document.createElement("p"));
this.zoomLevelText.innerText = "100%";
this.zoomInButton = this.appendChild(document.createElement("button"));
this.zoomInButton.classList.add("icon", "icon-plus");
this.zoomInButton.addEventListener("click", () => {
this.dispatchEvent(Object.assign(new Event(".zoomUpdate"), { delta: +1 }));
});
this.zoomOutButton.addEventListener("click", () => {
this.dispatchEvent(Object.assign(new Event(".zoomUpdate"), { delta: -1 }));
});
}
setZoom(value) {
this.zoomLevelText.innerText = `${Math.round(value * 100)}%`;
}
}
customElements.define("rkgk-zoom-indicator", ZoomIndicator);