cryptpad/www/common/toolbar.js

var Toolbar = function ($, container, Messages, myUserName, realtime) {

    /** Id of the element for getting debug info. */
    var DEBUG_LINK_CLS = 'rtwysiwyg-debug-link';

    /** Id of the div containing the user list. */
    var USER_LIST_CLS = 'rtwysiwyg-user-list';

    /** Id of the div containing the lag info. */
    var LAG_ELEM_CLS = 'rtwysiwyg-lag';

    /** The toolbar class which contains the user list, debug link and lag. */
    var TOOLBAR_CLS = 'rtwysiwyg-toolbar';

    /** Key in the localStore which indicates realtime activity should be disallowed. */
    var LOCALSTORAGE_DISALLOW = 'rtwysiwyg-disallow';

    var SPINNER_DISAPPEAR_TIME = 3000;
    var SPINNER = [ '-', '\\', '|', '/' ];

    var uid = function () {
        return 'rtwysiwyg-uid-' + String(Math.random()).substring(2);
    };

    var createRealtimeToolbar = function (container) {
        var id = uid();
        $(container).prepend(
            '<div class="' + TOOLBAR_CLS + '" id="' + id + '">' +
                '<div class="rtwysiwyg-toolbar-leftside"></div>' +
                '<div class="rtwysiwyg-toolbar-rightside"></div>' +
            '</div>'
        );
        var toolbar = $('#'+id);
        toolbar.append([
            '<style>',
            '.' + TOOLBAR_CLS + ' {',
            '    color: #666;',
            '    font-weight: bold;',
//            '    background-color: #f0f0ee;',
//            '    border-bottom: 1px solid #DDD;',
//            '    border-top: 3px solid #CCC;',
//            '    border-right: 2px solid #CCC;',
//            '    border-left: 2px solid #CCC;',
            '    height: 26px;',
            '    margin-bottom: -3px;',
            '    display: inline-block;',
            '    width: 100%;',
            '}',
            '.' + TOOLBAR_CLS + ' div {',
            '    padding: 0 10px;',
            '    height: 1.5em;',
//            '    background: #f0f0ee;',
            '    line-height: 25px;',
            '    height: 22px;',
            '}',
            '.rtwysiwyg-toolbar-leftside {',
            '    float: left;',
            '}',
            '.rtwysiwyg-toolbar-rightside {',
            '    float: right;',
            '}',
            '.rtwysiwyg-lag {',
            '    float: right;',
            '}',
            '.rtwysiwyg-spinner {',
            '    float: left;',
            '}',
            '.gwt-TabBar {',
            '    display:none;',
            '}',
            '.' + DEBUG_LINK_CLS + ':link { color:transparent; }',
            '.' + DEBUG_LINK_CLS + ':link:hover { color:blue; }',
            '.gwt-TabPanelBottom { border-top: 0 none; }',

            '</style>'
         ].join('\n'));
        return toolbar;
    };

    var createSpinner = function (container) {
        var id = uid();
        $(container).append('<div class="rtwysiwyg-spinner" id="'+id+'"></div>');
        return $('#'+id)[0];
    };

    var kickSpinner = function (spinnerElement, reversed) {
        var txt = spinnerElement.textContent || '-';
        var inc = (reversed) ? -1 : 1;
        spinnerElement.textContent = SPINNER[(SPINNER.indexOf(txt) + inc) % SPINNER.length];
        spinnerElement.timeout && clearTimeout(spinnerElement.timeout);
        spinnerElement.timeout = setTimeout(function () {
            spinnerElement.textContent = '';
        }, SPINNER_DISAPPEAR_TIME);
    };

    var createUserList = function (container) {
        var id = uid();
        $(container).prepend('<div class="' + USER_LIST_CLS + '" id="'+id+'"></div>');
        return $('#'+id)[0];
    };

    var updateUserList = function (myUserName, listElement, userList) {
        var meIdx = userList.indexOf(myUserName);
        if (meIdx === -1) {
            listElement.textContent = Messages.synchronizing;
            return;
        }
        if (userList.length === 1) {
            listElement.textContent = Messages.editingAlone;
        } else if (userList.length === 2) {
            listElement.textContent = Messages.editingWithOneOtherPerson;
        } else {
            listElement.textContent = Messages.editingWith + ' ' + (userList.length - 1) + ' '
                Messages.otherPeople;
        }
    };

    var createLagElement = function (container) {
        var id = uid();
        $(container).append('<div class="' + LAG_ELEM_CLS + '" id="'+id+'"></div>');
        return $('#'+id)[0];
    };

    var checkLag = function (realtime, lagElement) {
        var lag = realtime.getLag();
        var lagSec = lag.lag/1000;
        var lagMsg = Messages.lag + ' ';
        if (lag.waiting && lagSec > 1) {
            lagMsg += "?? " + Math.floor(lagSec);
        } else {
            lagMsg += lagSec;
        }
        lagElement.textContent = lagMsg;
    };


    var toolbar = createRealtimeToolbar(container);
    var userListElement = createUserList(toolbar.find('.rtwysiwyg-toolbar-leftside'));
    var spinner = createSpinner(toolbar.find('.rtwysiwyg-toolbar-rightside'));
    var lagElement = createLagElement(toolbar.find('.rtwysiwyg-toolbar-rightside'));

    var connected = false;

    realtime.onUserListChange(function (userList) {
        if (userList.indexOf(myUserName) !== -1) { connected = true; }
        if (!connected) { return; }
        updateUserList(myUserName, userListElement, userList);
    });

    var ks = function () {
        if (connected) { kickSpinner(spinner, false); }
    };

    realtime.onPatch(ks);
    realtime.onMessage(ks);

    setInterval(function () {
        if (!connected) { return; }
        checkLag(realtime, lagElement);
    }, 3000);

    return {
        reconnecting: function () {
            connected = false;
            userListElement.textContent = Messages.reconnecting;
            lagElement.textContent = '';
        },
        connected: function () {
            connected = true;
        }
    };
};