maplair/dist/esm/control/ZoomControl.js

JavaScript library for mobile-friendly interactive maps

import { disableClickPropagation, on, stop } from "../dom/DomEvent.js";
import { create } from "../dom/DomUtil.js";
import { Control } from "./Control.js";
import { I18n } from "../core/I18n.js";
//#region src/control/ZoomControl.js
var ZoomControl = class ZoomControl extends Control {
	static {
		this.setDefaultOptions({
			position: "topleft",
			zoomInText: "<span aria-hidden=\"true\">+</span>",
			zoomOutText: "<span aria-hidden=\"true\">&#x2212;</span>"
		});
	}
	constructor(...args) {
		super(...args);
		this.callInitHooks(ZoomControl);
	}
	onAdd(map) {
		const zoomName = "maplair-control-zoom", container = create("div", `${zoomName} maplair-bar`), options = this.options;
		this._zoomInButton = this._createButton(options.zoomInText, I18n.translate("Zoom in"), `${zoomName}-in`, container, this._zoomIn);
		this._zoomOutButton = this._createButton(options.zoomOutText, I18n.translate("Zoom out"), `${zoomName}-out`, container, this._zoomOut);
		this._updateDisabled();
		map.on("zoomend zoomlevelschange", this._updateDisabled, this);
		return container;
	}
	onRemove(map) {
		map.off("zoomend zoomlevelschange", this._updateDisabled, this);
	}
	disable() {
		this._disabled = true;
		this._updateDisabled();
		return this;
	}
	enable() {
		this._disabled = false;
		this._updateDisabled();
		return this;
	}
	_zoomIn(e) {
		if (!this._disabled && this._map._zoom < this._map.getMaxZoom()) this._map.zoomIn(this._map.options.zoomDelta * (e.shiftKey ? 3 : 1));
	}
	_zoomOut(e) {
		if (!this._disabled && this._map._zoom > this._map.getMinZoom()) this._map.zoomOut(this._map.options.zoomDelta * (e.shiftKey ? 3 : 1));
	}
	_createButton(html, title, className, container, fn) {
		const link = create("a", className, container);
		link.innerHTML = html;
		link.href = "#";
		link.title = title;
		link.setAttribute("role", "button");
		link.setAttribute("aria-label", title);
		disableClickPropagation(link);
		on(link, "click", stop);
		on(link, "click", fn, this);
		on(link, "click", this._refocusOnMap, this);
		return link;
	}
	_updateDisabled() {
		const map = this._map, className = "maplair-disabled";
		this._zoomInButton.classList.remove(className);
		this._zoomOutButton.classList.remove(className);
		this._zoomInButton.setAttribute("aria-disabled", "false");
		this._zoomOutButton.setAttribute("aria-disabled", "false");
		if (this._disabled || map._zoom === map.getMinZoom()) {
			this._zoomOutButton.classList.add(className);
			this._zoomOutButton.setAttribute("aria-disabled", "true");
		}
		if (this._disabled || map._zoom === map.getMaxZoom()) {
			this._zoomInButton.classList.add(className);
			this._zoomInButton.setAttribute("aria-disabled", "true");
		}
	}
	static register(MaplairMap) {
		MaplairMap.mergeOptions({ zoomControl: true });
		MaplairMap.addInitHook(function() {
			if (this.options.zoomControl) {
				this.zoomControl = new ZoomControl();
				this.addControl(this.zoomControl);
			}
		});
	}
};
//#endregion
export { ZoomControl };

//# sourceMappingURL=ZoomControl.js.map