Source: map/filters/ui/TextFilter.js

import { FilterUi } from "./FilterUi.js"
import "./TextFilter.css";

export { TextFilter };

/**
 * A class that defines the Ui for a simple text based filter that
 * filters while typing. not useful for server-based layers
 * 
 * @author rhess <robin.hess@awi.de>
 * @memberof vef.map.filters.ui
 */
class TextFilter extends FilterUi {

    classname = "text-filter";
    html = `<input type="text" class="text-input" spellcheck="false"/>`;

    /**
     * @param {HTMLElement | string} target
     * @param {object} options filter specific options
     * @param {LayerManager} layers Used for included/excluded layers
     */
    constructor(target, options, layers) {
        // apply default options
        options = Object.assign({
            title: "Filter By Attribute",
            placeholder: "Filter By Attribute",
            column: ""
        }, options || {});

        super(target, options, layers);

        this.filterSettings_ = null;

        this.setClass(this.classname);
        this.setContent(this.html);

        this.applyOptions_();

        // events for main input
        this.query(".text-input").addEventListener("input", () => this.fire("change", this))
    }

    applyOptions_() {
        this.setTitle(this.options_.title);
        this.query(".text-input").placeholder = this.options_.placeholder;
        this.query(".text-input").value = this.options_.value || "";
        this.toggleToolVisibility("btn-power", this.options_.deactivatable);
    }

    reloadOptions_() {
        this.applyOptions_();
        this.fire("change", this);
    }

    /**
     * Get the filter object to pass it
     * on to the Layers. Override this method in child implementations.
     * 
     * @returns {object} filter object
     */
    getActiveFilter() {
        const excluded = this.getExcludedLayers();

        const value = this.query(".text-input").value.trim();

        if (value.length > 0) {
            return [{
                type: "attribute",
                column: this.options_.column,
                values: [["eq", value]],
                excludedLayers: excluded
            }];
        }

        return [];
    }

    /**
     * @returns {object} options
     */
    getOptions() {
        const options = super.getOptions();
        options.value = this.query(".text-input").value.trim();
        return options;
    }

}