diff --git a/www/code/main.js b/www/code/main.js index 9f5d1fa1c..26cd0b1e9 100644 --- a/www/code/main.js +++ b/www/code/main.js @@ -3,23 +3,40 @@ define([ '/code/rt_codemirror.js', '/common/messages.js', '/common/crypto.js', + '/common/realtime-input.js', + '/common/TextPatcher.js', '/bower_components/jquery/dist/jquery.min.js' -], function (Config, RTCode, Messages, Crypto) { +], function (Config, RTCode, Messages, Crypto, Realtime, TextPatcher) { var $ = window.jQuery; var ifrw = $('#pad-iframe')[0].contentWindow; + var module = {}; $(function () { - $(window).on('hashchange', function() { - window.location.reload(); - }); - if (window.location.href.indexOf('#') === -1) { - window.location.href = window.location.href + '#' + Crypto.genKey(); - return; + var userName = Crypto.rand64(8); + + var key; + var channel = ''; + if (!/#/.test(window.location.href)) { + key = Crypto.genKey(); + } else { + var hash = window.location.hash.slice(1); + channel = hash.slice(0, 32); + key = hash.slice(32); } + var config = { + userName: userName, + websocketURL: Config.websocketURL, + channel: channel, + cryptKey: key, + crypto: Crypto, + }; + var andThen = function (CMeditor) { - var key = Crypto.parseKey(window.location.hash.substring(1)); - var editor = CMeditor.fromTextArea($('#pad-iframe').contents().find('#editor1')[0], { + var $pad = $('#pad-iframe'); + var $textarea = $pad.contents().find('#editor1'); + + var editor = CMeditor.fromTextArea($textarea[0], { lineNumbers: true, lineWrapping: true, autoCloseBrackets: true, @@ -35,16 +52,50 @@ define([ }); editor.setValue(Messages.codeInitialState); - var rtw = - RTCode.start(ifrw, - Config.websocketURL, - Crypto.rand64(8), - key.channel, - key.cryptKey); - editor.on('change', function() { + // TODO lock editor until chain is synced + // then unlock + var setEditable = function () { }; + + var initializing = true; + + var onInit = config.onInit = function (info) { + window.location.hash = info.channel + key; + var realtime = info.realtime; + module.patchText = TextPatcher.create({ + realtime: realtime, + logging: true, + }); + $(window).on('hashchange', function() { + window.location.reload(); + }); + }; + + var onReady = config.onReady = function (info) { + console.log("READY!"); + + initializing = false; + }; + + var onRemote = config.onRemote = function (info) { + if (initializing) { return; } + // check cursor + // apply changes to textarea + // replace cursor + }; + + var onLocal = config.onLocal = function () { editor.save(); - rtw.onEvent(); - }); + //rtw.onEvent(); + }; + + var onAbort = config.onAbort = function (info) { + // TODO alert the user + // inform of network disconnect + }; + + var realtime = module.realtime = Realtime.start(config); + + editor.on('change', onLocal); }; var interval = 100; diff --git a/www/migrate b/www/migrate new file mode 100644 index 000000000..936251961 --- /dev/null +++ b/www/migrate @@ -0,0 +1,50 @@ +* hack + - good +* code + - this is actually a fair bit of work (maybe) +* canvas + - seems to work + - should have json-ot +* form + - doesn't work yet + - don't bother developing for websocket, move to netflux asap +* p + - using sockets, pad is the fixed version + - move things over and deprecate +* pad + - using netflux already, but might require some updates from /p/ +* padrtc + - using netflux, but it's not really useful +* render + - idek man +* style + - works, using netflux +* text + - works + + +## Remaining + +* code + - use netflux +* form + - use netflux + - get it working + - audit json-ot +* pad + - update /pad/ from /p/ + - then delete p +* p + - see above +* padrtc + - idk +* render + - get it working + - use diffdom + - continue to use rainbow? +* style + - push initial styles into new documents +* text + - support tabs? + + diff --git a/www/render/main.js b/www/render/main.js index a3eaaa45c..105514dc7 100644 --- a/www/render/main.js +++ b/www/render/main.js @@ -8,7 +8,7 @@ define([ '/common/rainbow.js', '/bower_components/jquery/dist/jquery.min.js', '/customize/pad.js' -], function (Config, Realtime, Messages, Crypto, Marked, Convert, Rainbow) { +], function (Config, Realtime, Crypto, Marked, Convert, Rainbow) { var $ = window.jQuery; var Vdom = Convert.core.vdom,