MediaWiki:IsTyping/code.js

/* IsTyping * * Displays which users are typing on chat. * Affects private messages. * * @scope site-wide * @author Dorumin */

(function reloadUntilMainRoom {   if (!window.mainRoom) {        setTimeout(reloadUntilMainRoom, 500);        return;    }    if (window.IsTyping_init || wgCanonicalSpecialPageName != 'Chat') return;    window.IsTyping_init = true;    var lastRequestTimestamp = 0,    currentState = false,    i18n = {        en: {            1: '$1 is typing...',            2: '$1 and $2 are typing...',            3: '$1, $2, and $3 are typing...',            more: 'Several people are typing...'        },        es: {            1: '$1 esta escribiendo..',            2: '$1 y $2 estan escribiendo...',            3: '$1, $2 y $3 estan escribiendo...',            more: 'Varias personas estan escribiendo...'        }    };    i18n.msg = function(msg, arr) {        var lang = i18n[mw.config.get('wgUserLanguage')] || i18n[mw.config.get('wgContentLanguage')] || i18n.en;        if (!lang[msg]) return 'N/A';        return lang[msg].replace(/\$(\d)/g, function(x, n) { return ' ' + arr[n - 1] + ' '; });   };    function getCurrentRoom {        if (mainRoom.activeRoom == 'main' || mainRoom.activeRoom === null) {            return mainRoom;        }        return mainRoom.chats.privates[mainRoom.activeRoom];    }    function sendTypingState(state) {        currentState = state;        getCurrentRoom.socket.send(new models.SetStatusCommand({            statusMessage: "typingState",            statusState: state        }).xport);    }    function showUsersTyping(id, user, status) {        if (!IsTyping.data[id]) {            IsTyping.data[id] = [];        }        var pointer = IsTyping.data[id];        if (user) {            if (status === true) {                if (IsTyping.timeouts[user]) {                    clearTimeout(IsTyping.timeouts[user]);                }                IsTyping.timeouts[user] = setTimeout(function { var i = pointer.indexOf(user); pointer.splice(i, 1); }, 10000);               if (pointer.indexOf(user) == -1) {                    pointer.push(user);                }            } else {                var i = pointer.indexOf(user);                pointer.splice(i, 1);            }        }        if (!pointer.length) {            $(document.body).removeClass('is-typing');            IsTyping.$indicator.html('');        } else {            $(document.body).addClass('is-typing');            IsTyping.$indicator.html(i18n.msg(pointer.length > 3 ? 'more' : pointer.length, pointer));        }    }    $(document.getElementsByName('message')).keypress(function(e) { if (!this.value) { sendTypingState(false); return; }       if (Date.now - lastRequestTimestamp > 8000) { // if more than 8 seconds have passed lastRequestTimestamp = Date.now; sendTypingState(true); }   }).blur(function { sendTypingState(false); });   $(document).click('#PrivateChatList .User, #Rail .wordmark', function { showUsersTyping(mainRoom.activeRoom != 'main' || mainRoom.activeRoom === null ? mainRoom.roomId : mainRoom.activeRoom); });   mainRoom.socket.on("updateUser", function(msg) { var data = JSON.parse(msg.data).attrs, status = data.statusState, user = data.name, roomId = this.roomId; if (user != wgUserName && data.statusMessage == "typingState") { showUsersTyping(roomId, user, status); }   });    mainRoom.model.privateUsers.bind('add', function(u) { var privateRoomId = u.attributes.roomId, privateRoom = mainRoom.chats.privates[privateRoomId]; privateRoom.socket.on("updateUser", function(msg) {           var data = JSON.parse(msg.data).attrs,                status = data.statusState,                user = data.name,                roomId = this.roomId;            if (data.statusMessage == "typingState") {                showUsersTyping(roomId, user, status);            }        }); });   window.IsTyping = {        sendTypingState: sendTypingState,        showUsersTyping: showUsersTyping,        getCurrentRoom: getCurrentRoom,        $indicator: $(' ', { class: 'typing-indicator' }).prependTo('#Write'),       data: {},        timeouts: {},        init: true    };    mw.util.addCSS('body.is-typing .Chat {  \ margin-bottom: 20px;               \ }                                      \    body.is-typing .typing-indicator {      \ display: block;                    \ }                                      \    .typing-indicator {                     \ display: none;                     \ position: absolute;                \ left: 5px;                         \ top: -25px;                        \ right: 5px;                        \ line-height: 25px;                 \ }                                      \    .typing-indicator .username {           \ font-weight: bold;                 \ }                                      \    body.warn .typing-indicator {           \ top: -45px;                        \ }'); });