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;