start rewriting codepad to use realtime-input
This commit is contained in:
@@ -1,30 +1,32 @@
|
|||||||
define([
|
define([
|
||||||
'/api/config?cb=' + Math.random().toString(16).substring(2),
|
'/api/config?cb=' + Math.random().toString(16).substring(2),
|
||||||
'/code/rt_codemirror.js',
|
// '/code/rt_codemirror.js',
|
||||||
'/common/messages.js',
|
'/common/messages.js',
|
||||||
'/common/crypto.js',
|
'/common/crypto.js',
|
||||||
'/common/realtime-input.js',
|
'/common/realtime-input.js',
|
||||||
'/common/TextPatcher.js',
|
'/common/TextPatcher.js',
|
||||||
'/bower_components/jquery/dist/jquery.min.js'
|
'/bower_components/jquery/dist/jquery.min.js'
|
||||||
], function (Config, RTCode, Messages, Crypto, Realtime, TextPatcher) {
|
], function (Config, /*RTCode,*/ Messages, Crypto, Realtime, TextPatcher) {
|
||||||
var $ = window.jQuery;
|
var $ = window.jQuery;
|
||||||
var ifrw = $('#pad-iframe')[0].contentWindow;
|
var module = window.APP = {};
|
||||||
var module = {};
|
var ifrw = module.ifrw = $('#pad-iframe')[0].contentWindow;
|
||||||
|
|
||||||
$(function () {
|
$(function () {
|
||||||
var userName = Crypto.rand64(8);
|
var userName = Crypto.rand64(8);
|
||||||
|
|
||||||
var key;
|
var key;
|
||||||
var channel = '';
|
var channel = '';
|
||||||
|
var hash = false;
|
||||||
if (!/#/.test(window.location.href)) {
|
if (!/#/.test(window.location.href)) {
|
||||||
key = Crypto.genKey();
|
key = Crypto.genKey();
|
||||||
} else {
|
} else {
|
||||||
var hash = window.location.hash.slice(1);
|
hash = window.location.hash.slice(1);
|
||||||
channel = hash.slice(0, 32);
|
channel = hash.slice(0, 32);
|
||||||
key = hash.slice(32);
|
key = hash.slice(32);
|
||||||
}
|
}
|
||||||
|
|
||||||
var config = {
|
var config = {
|
||||||
|
//initialState: Messages.codeInitialState,
|
||||||
userName: userName,
|
userName: userName,
|
||||||
websocketURL: Config.websocketURL,
|
websocketURL: Config.websocketURL,
|
||||||
channel: channel,
|
channel: channel,
|
||||||
@@ -36,7 +38,7 @@ define([
|
|||||||
var $pad = $('#pad-iframe');
|
var $pad = $('#pad-iframe');
|
||||||
var $textarea = $pad.contents().find('#editor1');
|
var $textarea = $pad.contents().find('#editor1');
|
||||||
|
|
||||||
var editor = CMeditor.fromTextArea($textarea[0], {
|
var editor = module.editor = CMeditor.fromTextArea($textarea[0], {
|
||||||
lineNumbers: true,
|
lineNumbers: true,
|
||||||
lineWrapping: true,
|
lineWrapping: true,
|
||||||
autoCloseBrackets: true,
|
autoCloseBrackets: true,
|
||||||
@@ -50,52 +52,86 @@ define([
|
|||||||
gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
|
gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
|
||||||
mode: "javascript"
|
mode: "javascript"
|
||||||
});
|
});
|
||||||
editor.setValue(Messages.codeInitialState);
|
|
||||||
|
|
||||||
// TODO lock editor until chain is synced
|
// TODO lock editor until chain is synced
|
||||||
// then unlock
|
// then unlock
|
||||||
var setEditable = function () { };
|
var setEditable = function () { };
|
||||||
|
var canonicalize = function (t) { return t.replace(/\r\n/g, '\n'); };
|
||||||
|
|
||||||
var initializing = true;
|
var initializing = true;
|
||||||
|
|
||||||
var onInit = config.onInit = function (info) {
|
var onInit = config.onInit = function (info) {
|
||||||
window.location.hash = info.channel + key;
|
window.location.hash = info.channel + key;
|
||||||
var realtime = info.realtime;
|
var realtime = module.realtime = info.realtime;
|
||||||
module.patchText = TextPatcher.create({
|
module.patchText = TextPatcher.create({
|
||||||
realtime: realtime,
|
realtime: realtime,
|
||||||
logging: true,
|
logging: true,
|
||||||
|
//initialState: Messages.codeInitialState
|
||||||
});
|
});
|
||||||
$(window).on('hashchange', function() {
|
|
||||||
window.location.reload();
|
|
||||||
});
|
if (!hash) {
|
||||||
|
editor.setValue(Messages.codeInitialState);
|
||||||
|
module.patchText(Messages.codeInitialState);
|
||||||
|
module.patchText(Messages.codeInitialState);
|
||||||
|
editor.setValue(Messages.codeInitialState);
|
||||||
|
}
|
||||||
|
|
||||||
|
//$(window).on('hashchange', function() { window.location.reload(); });
|
||||||
};
|
};
|
||||||
|
|
||||||
var onReady = config.onReady = function (info) {
|
var onReady = config.onReady = function (info) {
|
||||||
console.log("READY!");
|
console.log("READY!");
|
||||||
|
|
||||||
|
var userDoc = module.realtime.getUserDoc();
|
||||||
|
|
||||||
|
editor.setValue(userDoc);
|
||||||
|
|
||||||
initializing = false;
|
initializing = false;
|
||||||
};
|
};
|
||||||
|
|
||||||
var onRemote = config.onRemote = function (info) {
|
var onRemote = config.onRemote = function (info) {
|
||||||
if (initializing) { return; }
|
if (initializing) { return; }
|
||||||
|
console.log("REMOTE");
|
||||||
|
|
||||||
|
var oldDoc = $textarea.val();
|
||||||
|
var userDoc = module.realtime.getUserDoc();
|
||||||
|
|
||||||
|
$textarea.val(userDoc);
|
||||||
|
editor.setValue(userDoc);
|
||||||
|
|
||||||
|
editor.save();
|
||||||
|
|
||||||
// check cursor
|
// check cursor
|
||||||
// apply changes to textarea
|
// apply changes to textarea
|
||||||
// replace cursor
|
// replace cursor
|
||||||
};
|
};
|
||||||
|
|
||||||
var onLocal = config.onLocal = function () {
|
var onLocal = config.onLocal = function () {
|
||||||
|
if (initializing) { return; }
|
||||||
|
console.log("LOCAL");
|
||||||
|
module.patchText(canonicalize($textarea.val()));
|
||||||
editor.save();
|
editor.save();
|
||||||
//rtw.onEvent();
|
|
||||||
};
|
};
|
||||||
|
|
||||||
var onAbort = config.onAbort = function (info) {
|
var onAbort = config.onAbort = function (info) {
|
||||||
// TODO alert the user
|
// TODO alert the user
|
||||||
// inform of network disconnect
|
// inform of network disconnect
|
||||||
|
window.alert("Network Connection Lost!");
|
||||||
};
|
};
|
||||||
|
|
||||||
var realtime = module.realtime = Realtime.start(config);
|
var realtime = module.realtime = Realtime.start(config);
|
||||||
|
|
||||||
editor.on('change', onLocal);
|
editor.on('change', onLocal);
|
||||||
|
|
||||||
|
['keydown', /*'keyup',*/ 'select', 'mousedown', 'mouseup', 'click'].forEach(function (evt) {
|
||||||
|
$textarea.on(evt, function () {
|
||||||
|
onRemote();
|
||||||
|
onLocal();
|
||||||
|
});
|
||||||
|
// onLocal?
|
||||||
|
});
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
var interval = 100;
|
var interval = 100;
|
||||||
|
|||||||
Reference in New Issue
Block a user