szurubooru/client/js/controls/comment_list_control.js

'use strict';

const events = require('../events.js');
const views = require('../util/views.js');
const CommentControl = require('../controls/comment_control.js');

const template = views.getTemplate('comment-list');

class CommentListControl extends events.EventTarget {
    constructor(hostNode, comments, reversed) {
        super();
        this._hostNode = hostNode;
        this._comments = comments;
        this._commentIdToNode = {};

        comments.addEventListener('add', e => this._evtAdd(e));
        comments.addEventListener('remove', e => this._evtRemove(e));

        views.replaceContent(this._hostNode, template());

        const commentList = Array.from(comments);
        if (reversed) {
            commentList.reverse();
        }
        for (let comment of commentList) {
            this._installCommentNode(comment);
        }
    }

    get _commentListNode() {
        return this._hostNode.querySelector('ul');
    }

    _installCommentNode(comment) {
        const commentListItemNode = document.createElement('li');
        const commentControl = new CommentControl(
            commentListItemNode, comment, false);
        events.proxyEvent(commentControl, this, 'submit');
        events.proxyEvent(commentControl, this, 'score');
        events.proxyEvent(commentControl, this, 'delete');
        this._commentIdToNode[comment.id] = commentListItemNode;
        this._commentListNode.appendChild(commentListItemNode);
    }

    _uninstallCommentNode(comment) {
        const commentListItemNode = this._commentIdToNode[comment.id];
        commentListItemNode.parentNode.removeChild(commentListItemNode);
    }

    _evtAdd(e) {
        this._installCommentNode(e.detail.comment);
    }

    _evtRemove(e) {
        this._uninstallCommentNode(e.detail.comment);
    }
};

module.exports = CommentListControl;