mimouchat/cli/roomInfo.js

var roomInfo = (function() {
    var /** @const @type {Element} */
        dom = document.createElement("div"),
        /** @const @type {Element} */
        domHeader = document.createElement("header"), // Contain chan name + backgroundImg if any
        /** @const @type {Element} */
        headerContent = document.createElement("h3"), // Contain chan name + backgroundImg if any
        /** @const @type {Element} */
        section = document.createElement("div"),
        /** @const @type {Element} */
        topicDom = document.createElement("div"),
        /** @const @type {Element} */
        topicContent = document.createElement("span"),
        /** @const @type {Element} */
        topicDetails = document.createElement("span"),
        /** @const @type {Element} */
        phone = document.createElement("div"),
        /** @const @type {Element} */
        purposeDom = document.createElement("div"),
        /** @const @type {Element} */
        purposeContent = document.createElement("span"),
        /** @const @type {Element} */
        purposeDetails = document.createElement("span"),
        /** @const @type {Element} */
        pinCount = document.createElement("div"),
        /** @const @type {Element} */
        pinList = document.createElement("ul"),
        /** @const @type {Element} */
        userCount = document.createElement("div"),
        /** @const @type {Element} */
        userList = document.createElement("ul"),
        /** @type {ChatSystem} */
        currentChatCtx,
        /** @type {Room} */
        currentChan;

    dom.className = R.klass.chatList.roomInfo.container;
    domHeader.className = R.klass.chatList.roomInfo.title;
    topicDom.className = R.klass.chatList.roomInfo.topic;
    purposeDom.className = R.klass.chatList.roomInfo.purpose;
    phone.className = R.klass.chatList.roomInfo.phone;
    pinCount.className = R.klass.chatList.roomInfo.pinCount;
    pinList.className = R.klass.chatList.roomInfo.pinList;
    userCount.className = R.klass.chatList.roomInfo.userCount;
    userList.className = R.klass.chatList.roomInfo.userList;
    purposeDetails.className = topicDetails.className = R.klass.chatList.roomInfo.author;

    domHeader.appendChild(headerContent);
    dom.appendChild(domHeader);
    dom.appendChild(section);
    topicDom.appendChild(topicContent);
    topicDom.appendChild(topicDetails);
    purposeDom.appendChild(purposeContent);
    purposeDom.appendChild(purposeDetails);
    section.appendChild(topicDom);
    section.appendChild(phone);
    section.appendChild(purposeDom);
    section.appendChild(pinCount);
    section.appendChild(pinList);
    section.appendChild(userCount);
    section.appendChild(userList);

    var updateCommon = function() {
        headerContent.textContent = currentChan.name;
        if (currentChan.pins) {
            pinCount.textContent = locale.pinCount(currentChan.pins.length);
            pinCount.classList.remove(R.klass.hidden);
            pinList.classList.remove(R.klass.hidden);
            var pinFrag = document.createDocumentFragment();
            currentChan.pins.forEach(function(uiMsg) {
                var li = document.createElement("li");
                li.className = R.klass.chatList.roomInfo.pinItem;
                li.appendChild(uiMsg.getDom());
                pinFrag.appendChild(li);
            });
            pinList.textContent = '';
            pinList.appendChild(pinFrag);
        } else {
            pinCount.classList.add(R.klass.hidden);
            pinList.classList.add(R.klass.hidden);
        }

    }, updateForChannel = function() {
        var ctx = currentChatCtx.getChatContext();

        if (ctx.capacities["topic"]) {
            topicDom.classList.remove(R.klass.hidden);
            topicContent.textContent = currentChan.topic || "";
            topicDetails.textContent = currentChan.topicCreator ? locale.topicDetail(currentChan.topicCreator, currentChan.topicTs) : "";
        } else {
            topicDom.classList.add(R.klass.hidden);
        }
        if (ctx.capacities["purpose"]) {
            purposeDom.classList.remove(R.klass.hidden);
            purposeContent.textContent = currentChan.purpose || "";
            purposeDetails.textContent = currentChan.purposeCreator ? locale.topicDetail(currentChan.purposeCreator, currentChan.purposeTs) : "";
        } else {
            purposeDom.classList.add(R.klass.hidden);
        }
        domHeader.style.backgroundImage = "";
        headerContent.classList.remove(R.klass.presenceIndicator);

        dom.classList.add(R.klass.chatList.roomInfo.type.channel);
        dom.classList.remove(R.klass.chatList.roomInfo.type.user);

    }, updateForDm = function() {
        domHeader.style.backgroundImage = "url(" +currentChan.user.getLargeIcon() +")";
        topicContent.textContent = (currentChan.user.realName || ((currentChan.user.firstName || "") +' ' +(currentChan.user.lastName))).trim();
        headerContent.classList.add(R.klass.presenceIndicator);
        if (currentChan.user.presence)
            headerContent.classList.remove(R.klass.presenceAway);
        else
            headerContent.classList.add(R.klass.presenceAway);
        topicDom.classList.remove(R.klass.hidden);
        phone.classList.remove(R.klass.hidden);
        phone.textContent = currentChan.user.phone || "";
        purposeContent.textContent = currentChan.user.goal || "";
        purposeDom.classList.remove(R.klass.hidden);

        dom.classList.remove(R.klass.chatList.roomInfo.type.channel);
        dom.classList.add(R.klass.chatList.roomInfo.type.user);

    }, _update = function() {
        updateCommon();
        if (currentChan instanceof PrivateMessageRoom)
            updateForDm();
        else
            updateForChannel();
    };

    return {
        /** @type {function(ChatSystem, Room)} */
        populate: function(channelContext, channel) {
            currentChatCtx = channelContext;
            currentChan = channel;
            _update();
            return this;
        },
        update: function() {
            _update();
            return this;
        },
        /** @type {function(Element)} */
        show: function(domParent) {
            domParent.appendChild(dom);
            dom.classList.remove(R.klass.hidden);
            return this;
        },
        hide: function() {
            dom.classList.add(R.klass.hidden);
            return this;
        },
        isParentOf: function(_dom) {
            while (_dom) {
                if (_dom === dom)
                    return true;
                _dom = _dom.parentNode;
            }
            return false;
        }
    }
})();