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 removePin = function() {
        if (currentChan.pins)
            for (var i =0, nbPins = currentChan.pins.length; i < nbPins; i++)
                if (currentChan.pins[i].id === this.dataset["msgId"]) {
                    unpinMsg(currentChan, currentChan.pins[i]);
                    break;
                }
    }

    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"),
                    unpinButton = document.createElement("a");

                unpinButton.href = "javascript:void(0)";
                unpinButton.dataset["msgId"] = uiMsg.id;
                unpinButton.addEventListener("click", removePin);
                unpinButton.className = R.klass.button +' ' +R.klass.chatList.roomInfo.unpin;
                li.className = R.klass.chatList.roomInfo.pinItem;
                li.appendChild(uiMsg.duplicateDom());
                li.appendChild(unpinButton);
                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);

        userCount.textContent = locale.userCount(currentChan.users ? Object.keys(currentChan.users).length : 0);
        /** @type {Array<Chatter>} */
        var memberIds = [];
        if (currentChan.users)
            for (var id in currentChan.users)
                memberIds.push(currentChan.users[id]);
        memberIds.sort(function(a, b) {
            if (a.presence && !b.presence)
                return -1;
            if (b.presence && !a.presence)
                return 1;
            return a.getName().localeCompare(b.getName());
        });
        var userFrag = document.createDocumentFragment();
        memberIds.forEach(function(user) {
            var li = document.createElement("li"),
                link = document.createElement("a");
            link.href = '#' +user.id;
            link.textContent = user.getName();
            li.appendChild(link);
            li.classList.add(R.klass.presenceIndicator);
            if (!user.presence)
                li.classList.add(R.klass.presenceAway);
            userFrag.appendChild(li);
        });
        userList.textContent = "";
        userList.appendChild(userFrag);

        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();
    };

    var hideTimeo = null;

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