cryptpad/www/examples/hack/main.js

define([
    '/api/config?cb=' + Math.random().toString(16).substring(2),
    '/bower_components/chainpad-netflux/chainpad-netflux.js',
    '/bower_components/chainpad-crypto/crypto.js',
    '/bower_components/textpatcher/TextPatcher.amd.js',
    '/common/cryptpad-common.js',
    '/bower_components/jquery/dist/jquery.min.js'
], function (Config, Realtime, Crypto, TextPatcher, Cryptpad) {
    var $ = window.jQuery;

    var secret = Cryptpad.getSecrets();

    var $textarea = $('textarea'),
        $run = $('#run');

    var module = {};

    var config = {
        initialState: '',
        websocketURL: Config.websocketURL,
        channel: secret.channel,
        crypto: Crypto.createEncryptor(secret.key),
    };
    var initializing = true;

    var setEditable = function (bool) { $textarea.attr('disabled', !bool); };
    var canonicalize = function (text) { return text.replace(/\r\n/g, '\n'); };

    setEditable(false);

    var onInit = config.onInit = function (info) {
        window.location.hash = info.channel + secret.key;
        $(window).on('hashchange', function() { window.location.reload(); });
    };

    var onRemote = config.onRemote = function (info) {
        if (initializing) { return; }

        var userDoc = info.realtime.getUserDoc();
        var current = canonicalize($textarea.val());

        var op = TextPatcher.diff(current, userDoc);

        var elem = $textarea[0];

        var selects = ['selectionStart', 'selectionEnd'].map(function (attr) {
            return TextPatcher.transformCursor(elem[attr], op);
        });

        $textarea.val(userDoc);
        elem.selectionStart = selects[0];
        elem.selectionEnd = selects[1];

        // TODO do something on external messages
        // http://webdesign.tutsplus.com/tutorials/how-to-display-update-notifications-in-the-browser-tab--cms-23458
    };

    var onReady = config.onReady = function (info) {
        module.patchText = TextPatcher.create({
            realtime: info.realtime
        //    logging: true
        });
        initializing = false;
        setEditable(true);
        $textarea.val(info.realtime.getUserDoc());
    };

    var onAbort = config.onAbort = function (info) {
        setEditable(false);
        window.alert("Server Connection Lost");
    };

    var onLocal = config.onLocal = function () {
        if (initializing) { return; }
        module.patchText(canonicalize($textarea.val()));
    };

    var rt = window.rt = Realtime.start(config);

    var splice = function (str, index, chars) {
        var count = chars.length;
        return str.slice(0, index) + chars + str.slice((index -1) + count);
    };

    var setSelectionRange = function (input, start, end) {
        if (input.setSelectionRange) {
            input.focus();
            input.setSelectionRange(start, end);
        } else if (input.createTextRange) {
            var range = input.createTextRange();
            range.collapse(true);
            range.moveEnd('character', end);
            range.moveStart('character', start);
            range.select();
        }
    };

    var setCursor = function (el, pos) {
        setSelectionRange(el, pos, pos);
    };

    var state = {};

    // TODO
    $textarea.on('keydown', function (e) {
        // track when control keys are pushed down
        //switch (e.key) { }
    });

    // TODO
    $textarea.on('keyup', function (e) {
        // track when control keys are released
    });

    //$textarea.on('change', onLocal);
    $textarea.on('keypress', function (e) {
        onLocal();
        switch (e.key) {
            case 'Tab':
                // insert a tab wherever the cursor is...
                var start = $textarea.prop('selectionStart');
                var end = $textarea.prop('selectionEnd');
                if (typeof start !== 'undefined') {
                    if (start === end) {
                        $textarea.val(function (i, val) {
                            return splice(val, start, "\t");
                        });
                        setCursor($textarea[0], start +1);
                    } else {
                        // indentation?? this ought to be fun.

                    }
                }
                // simulate a keypress so the event goes through..
                // prevent default behaviour for tab
                e.preventDefault();

                onLocal();
                break;
            default:
                break;
        }
    });

    ['cut', 'paste', 'change', 'keyup', 'keydown', 'select', 'textInput']
        .forEach(function (evt) {
            $textarea.on(evt, onLocal);
        });

    $run.click(function (e) {
        e.preventDefault();
        var content = $textarea.val();

        try {
            eval(content); // jshint ignore:line
        } catch (err) {
            // FIXME don't use alert, make an errorbox
            window.alert(err.message);
            console.error(err);
        }
    });
});