リキ萌
6b82593414
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.
25 lines
970 B
JavaScript
25 lines
970 B
JavaScript
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);
|