26 lines
970 B
JavaScript
26 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);
|