mj-context-menu/js/item_slider.js

A generic context menu

import { AbstractVariableItem } from './abstract_variable_item.js';
import * as MenuUtil from './menu_util.js';
import { HtmlClasses } from './html_classes.js';
import { KEY } from './key_navigatable.js';
export class Slider extends AbstractVariableItem {
    static fromJson(_factory, { content: content, variable: variable, id: id }, menu) {
        return new this(menu, content, variable, id);
    }
    constructor(menu, content, variable, id) {
        super(menu, 'slider', content, id);
        this.role = 'slider';
        this.labelId = 'ctx_slideLabel' + MenuUtil.counter();
        this.valueId = 'ctx_slideValue' + MenuUtil.counter();
        this.inputEvent = false;
        this.variable = menu.pool.lookup(variable);
        this.register();
    }
    executeAction() {
        this.variable.setValue(this.input.value, MenuUtil.getActiveElement(this));
        this.update();
    }
    space(event) {
        super.space(event);
        MenuUtil.close(this);
    }
    focus() {
        super.focus();
        this.input.focus();
    }
    unfocus() {
        super.unfocus();
        this.updateSpan();
    }
    generateHtml() {
        super.generateHtml();
        const html = this.html;
        html.classList.add(HtmlClasses['MENUSLIDER']);
        this.valueSpan = document.createElement('span');
        this.valueSpan.setAttribute('id', this.valueId);
        this.valueSpan.classList.add(HtmlClasses['SLIDERVALUE']);
        this.html.appendChild(this.valueSpan);
    }
    generateSpan() {
        this.span = document.createElement('span');
        this.labelSpan = document.createElement('span');
        this.labelSpan.setAttribute('id', this.labelId);
        this.labelSpan.appendChild(this.html.childNodes[0]);
        this.html.appendChild(this.labelSpan);
        this.input = document.createElement('input');
        this.input.setAttribute('type', 'range');
        this.input.setAttribute('min', '0');
        this.input.setAttribute('max', '100');
        this.input.setAttribute('aria-valuemin', '0');
        this.input.setAttribute('aria-valuemax', '100');
        this.input.setAttribute('aria-labelledby', this.labelId);
        this.input.addEventListener('keydown', this.inputKey.bind(this));
        this.input.addEventListener('input', this.executeAction.bind(this));
        this.input.classList.add(HtmlClasses['SLIDERBAR']);
        this.span.appendChild(this.input);
    }
    inputKey(_event) {
        this.inputEvent = true;
    }
    mousedown(event) {
        event.stopPropagation();
    }
    mouseup(event) {
        MenuUtil.close(this);
        event.stopPropagation();
    }
    keydown(event) {
        const code = event.keyCode;
        if (code === KEY.UP || code === KEY.DOWN) {
            event.preventDefault();
            super.keydown(event);
            return;
        }
        if (this.inputEvent && code !== KEY.ESCAPE && code !== KEY.RETURN) {
            this.inputEvent = false;
            event.stopPropagation();
            return;
        }
        super.keydown(event);
        event.stopPropagation();
    }
    updateAria() {
        const value = this.variable.getValue();
        if (value && this.input) {
            this.input.setAttribute('aria-valuenow', value);
            this.input.setAttribute('aria-valuetext', value + '%');
        }
    }
    updateSpan() {
        let initValue;
        try {
            initValue = this.variable.getValue(MenuUtil.getActiveElement(this));
            this.valueSpan.innerHTML = initValue + '%';
        }
        catch (e) {
            initValue = '';
        }
        this.input.value = initValue;
    }
    toJson() {
        return { type: '' };
    }
}
//# sourceMappingURL=item_slider.js.map