Websites/perf.webkit.org/public/v3/pages/analysis-category-toolbar.js

class AnalysisCategoryToolbar extends ComponentBase {
    constructor(categoryPage)
    {
        super('analysis-category-toolbar');
        this._categoryPage = null;
        this._categories = AnalysisTask.categories();
        this._currentCategory = null;
        this._filter = null;
        this.setCategoryIfValid(null);

        this._filterInput = this.content().querySelector('input');
        this._filterInput.oninput = this._filterMayHaveChanged.bind(this, false);
        this._filterInput.onchange = this._filterMayHaveChanged.bind(this, true);
    }

    setCategoryPage(categoryPage) { this._categoryPage = categoryPage; }
    currentCategory() { return this._currentCategory; }
    filter() { return this._filter; }
    setFilter(filter) { this._filter = filter; }

    render()
    {
        if (!this._categoryPage)
            return;

        var router = this._categoryPage.router();
        console.assert(router);

        super.render();

        var element = ComponentBase.createElement;
        var link = ComponentBase.createLink;

        if (this._filterInput.value != this._filter)
            this._filterInput.value = this._filter;

        var currentCategory = this._currentCategory;
        var categoryPage = this._categoryPage;
        this.renderReplace(this.content().querySelector('.analysis-task-category-toolbar'),
            this._categories.map(function (category) {
                return element('li',
                    {class: category == currentCategory ? 'selected' : null},
                    link(category, router.url(categoryPage.routeName(), categoryPage.stateForCategory(category))));
            }));
    }

    _filterMayHaveChanged(shouldUpdateState, event)
    {
        var input = event.target;
        var oldFilter = this._filter;
        this._filter = input.value;
        if (this._filter != oldFilter && this._categoryPage || shouldUpdateState)
            this._categoryPage.filterDidChange(shouldUpdateState);
    }

    setCategoryIfValid(category)
    {
        if (!category)
            category = this._categories[0];
        if (this._categories.indexOf(category) < 0)
            return false;
        this._currentCategory = category;
        return true;
    }

    static cssTemplate()
    {
        return Toolbar.cssTemplate() + `
            .queue-toolbar {
                position: absolute;
                right: 1rem;
            }
            .trybot-button {
                position: absolute;
                left: 1rem;
            }
        `
    }

    static htmlTemplate()
    {
        return `
            <ul class="buttoned-toolbar trybot-button">
                <li><a href="#/analysis/task/create">Create</a></li>
            </ul>
            <ul class="analysis-task-category-toolbar buttoned-toolbar"></ul>
            <input type="text">
            <ul class="buttoned-toolbar queue-toolbar">
                <li><a href="#/analysis/queue">Queue</a></li>
            </ul>`;
    }
}

ComponentBase.defineElement('analysis-category-toolbar', AnalysisCategoryToolbar);