szurubooru/client/js/controls/pool_input_control.js

'use strict';

const api = require('../api.js');
const pools = require('../pools.js');
const misc = require('../util/misc.js');
const uri = require('../util/uri.js');
const Pool = require('../models/pool.js');
const settings = require('../models/settings.js');
const events = require('../events.js');
const views = require('../util/views.js');
const PoolAutoCompleteControl = require('./pool_auto_complete_control.js');

const KEY_SPACE = 32;
const KEY_RETURN = 13;

const SOURCE_INIT = 'init';
const SOURCE_IMPLICATION = 'implication';
const SOURCE_USER_INPUT = 'user-input';
const SOURCE_CLIPBOARD = 'clipboard';

const template = views.getTemplate('pool-input');

function _fadeOutListItemNodeStatus(listItemNode) {
    if (listItemNode.classList.length) {
        if (listItemNode.fadeTimeout) {
            window.clearTimeout(listItemNode.fadeTimeout);
        }
        listItemNode.fadeTimeout = window.setTimeout(() => {
            while (listItemNode.classList.length) {
                listItemNode.classList.remove(
                    listItemNode.classList.item(0));
            }
            listItemNode.fadeTimeout = null;
        }, 2500);
    }
}

class PoolInputControl extends events.EventTarget {
    constructor(hostNode, poolList) {
        super();
        this.pools = poolList;
        this._hostNode = hostNode;
        this._poolToListItemNode = new Map();

        // dom
        const editAreaNode = template();
        this._editAreaNode = editAreaNode;
        this._poolInputNode = editAreaNode.querySelector('input');
        this._poolListNode = editAreaNode.querySelector('ul.compact-pools');

        this._autoCompleteControl = new PoolAutoCompleteControl(
            this._poolInputNode, {
                getTextToFind: () => {
                    return this._poolInputNode.value;
                },
                confirm: pool => {
                    this._poolInputNode.value = '';
                    this.addPool(pool, SOURCE_USER_INPUT);
                },
                delete: pool => {
                    this._poolInputNode.value = '';
                    this.deletePool(pool);
                },
                verticalShift: -2
            });

        // show
        this._hostNode.style.display = 'none';
        this._hostNode.parentNode.insertBefore(
            this._editAreaNode, hostNode.nextSibling);

        // add existing pools
        for (let pool of [...this.pools]) {
            const listItemNode = this._createListItemNode(pool);
            this._poolListNode.appendChild(listItemNode);
        }
    }

    addPool(pool, source) {
        if (source != SOURCE_INIT && this.pools.hasPoolId(pool.id)) {
            return Promise.resolve();
        }

        this.pools.add(pool, false)

        const listItemNode = this._createListItemNode(pool);
        if (!pool.category) {
            listItemNode.classList.add('new');
        }
        this._poolListNode.prependChild(listItemNode);
        _fadeOutListItemNodeStatus(listItemNode);

        this.dispatchEvent(new CustomEvent('add', {
            detail: {pool: pool, source: source},
        }));
        this.dispatchEvent(new CustomEvent('change'));

        return Promise.resolve();
    }

    deletePool(pool) {
        if (!this.pools.hasPoolId(pool.id)) {
            return;
        }
        this.pools.removeById(pool.id);
        this._hideAutoComplete();

        this._deleteListItemNode(pool);

        this.dispatchEvent(new CustomEvent('remove', {
            detail: {pool: pool},
        }));
        this.dispatchEvent(new CustomEvent('change'));
    }

    _createListItemNode(pool) {
        const className = pool.category ?
              misc.makeCssName(pool.category, 'pool') :
              null;

        const poolLinkNode = document.createElement('a');
        if (className) {
            poolLinkNode.classList.add(className);
        }
        poolLinkNode.setAttribute(
            'href', uri.formatClientLink('pool', pool.names[0]));

        const poolIconNode = document.createElement('i');
        poolIconNode.classList.add('fa');
        poolIconNode.classList.add('fa-pool');
        poolLinkNode.appendChild(poolIconNode);

        const searchLinkNode = document.createElement('a');
        if (className) {
            searchLinkNode.classList.add(className);
        }
        searchLinkNode.setAttribute(
            'href', uri.formatClientLink(
                'posts', {query: "pool:" + pool.id}));
        searchLinkNode.textContent = pool.names[0] + ' ';

        const usagesNode = document.createElement('span');
        usagesNode.classList.add('pool-usages');
        usagesNode.setAttribute('data-pseudo-content', pool.postCount);

        const removalLinkNode = document.createElement('a');
        removalLinkNode.classList.add('remove-pool');
        removalLinkNode.setAttribute('href', '');
        removalLinkNode.setAttribute('data-pseudo-content', '×');
        removalLinkNode.addEventListener('click', e => {
            e.preventDefault();
            this.deletePool(pool);
        });

        const listItemNode = document.createElement('li');
        listItemNode.appendChild(removalLinkNode);
        listItemNode.appendChild(poolLinkNode);
        listItemNode.appendChild(searchLinkNode);
        listItemNode.appendChild(usagesNode);
        for (let name of pool.names) {
            this._poolToListItemNode.set(name, listItemNode);
        }
        return listItemNode;
    }

    _deleteListItemNode(pool) {
        const listItemNode = this._getListItemNode(pool);
        if (listItemNode) {
            listItemNode.parentNode.removeChild(listItemNode);
        }
        for (let name of pool.names) {
            this._poolToListItemNode.delete(name);
        }
    }

    _getListItemNode(pool) {
        return this._poolToListItemNode.get(pool.names[0]);
    }

    _hideAutoComplete() {
        this._autoCompleteControl.hide();
    }
}

module.exports = PoolInputControl;