@progress/kendo-charts/dist/es/map/zoom.js

Kendo UI platform-independent Charts library

import {
    deepExtend,
    addClass,
    Observable,
    keys,
    hasClasses,
    setDefaultOptions,
    renderIcon,
    on,
    off,
} from '../common';

import {
    setDefaultEvents,
    convertToHtml
} from './utils';

function createButton(direction, icon, iconOptions) {
    var html =
        '<button class="k-button k-button-md k-rounded-md k-button-solid k-button-solid-base k-icon-button k-zoom-' + direction +
            '" title="zoom-' + direction +
            '" aria-label="zoom-' + direction + '">' +
            renderIcon({ icon: icon, iconClass: "k-button-icon", svgIcons: iconOptions.svgIcons, type: iconOptions.type }) +
        '</button>';

    return convertToHtml(html);
}

var PLUS = 187;
var MINUS = 189;
var FF_PLUS = 61;
var FF_MINUS = 173;
var CHANGE = "change";

export var ZoomControl = (function (Observable) {
    function ZoomControl(element, options, iconOptions) {
        Observable.call(this);
        this.element = element;
        this._initOptions(options);

        var zoomInButton = createButton('in', 'plus', iconOptions);
        var zoomOutButton = createButton('out', 'minus', iconOptions);

        this.element.appendChild(zoomInButton);
        this.element.appendChild(zoomOutButton);
        this.element.setAttribute("role", "group");

        addClass(this.element, 'k-widget k-zoom-control k-button-group k-group-horizontal');

        this._clickHandler = this._click.bind(this);
        on(this.element, "click", ".k-button", this._clickHandler);

        var parentElement = this.element.parentNode.closest("[data-role]");

        this._keyroot = parentElement ? parentElement : this.element;

        this._tabindex(this._keyroot);

        this._keydownHandler = this._keydown.bind(this);
        on(this._keyroot, "keydown", this._keydownHandler);
    }

    if ( Observable ) ZoomControl.__proto__ = Observable;
    ZoomControl.prototype = Object.create( Observable && Observable.prototype );
    ZoomControl.prototype.constructor = ZoomControl;

    ZoomControl.prototype.destroy = function destroy () {
        if (this.element) {
            off(this.element, "click", this._clickHandler);
        }

        if (this._keyroot) {
            off(this._keyroot, 'keydown', this._keydownHandler);
        }
    };

    ZoomControl.prototype._tabindex = function _tabindex (target) {
        var targetElement = target || this.wrapper || this.element;

        var element = this.element,
            TABINDEX = "tabindex",
            tabindex = targetElement.getAttribute(TABINDEX) || element.getAttribute(TABINDEX);

        element.removeAttribute(TABINDEX);

        targetElement.setAttribute(TABINDEX, !isNaN(tabindex) ? tabindex : 0);
    };

    ZoomControl.prototype._initOptions = function _initOptions (options) {
        this.options = deepExtend({}, this.options, options);
    };

    ZoomControl.prototype._change = function _change (direction) {
        var zoomStep = this.options.zoomStep;
        this.trigger(CHANGE, { delta: direction * zoomStep });
    };

    ZoomControl.prototype._click = function _click (e) {
        var button = e.currentTarget;
        var direction = 1;

        if (hasClasses(button, 'k-zoom-out')) {
            direction = -1;
        }

        this._change(direction);
        e.preventDefault();
    };

    ZoomControl.prototype._keydown = function _keydown (e) {
        switch (e.which) {
            case keys.NUMPAD_PLUS:
            case PLUS:
            case FF_PLUS:
                this._change(1);
                break;
            case keys.NUMPAD_MINUS:
            case MINUS:
            case FF_MINUS:
                this._change(-1);
                break;
            default:
                break;
        }
    };

    return ZoomControl;
}(Observable));

setDefaultOptions(ZoomControl, {
    name: 'ZoomControl',
    zoomStep: 1
});

setDefaultEvents(ZoomControl, [
    CHANGE
]);