diff --git a/js/render/remote.js b/js/render/remote.js new file mode 100644 index 00000000..97a95295 --- /dev/null +++ b/js/render/remote.js @@ -0,0 +1,140 @@ +(function () { + +var debug = false, + iframe = null, + key = window.location.search.replace(/\?stream=/, ''), + console = typeof window.console !== 'undefined' ? window.console : { log: function () {} }, + $ = { trim: function (s) { return s.trim(); } }, + documentTitle = 'JS Bin: real-time remote', + editorTemplate = function () { + return function () { + var code = ''; + return { + getCode: function () { + return code; + }, + setCode: function (src) { + code = src; + } + }; + }; + }, + editors = { javascript: editorTemplate()(), html: editorTemplate()() }; + +//= require "render" +//= require "../vendor/diff_match_patch_uncompressed" + +if (window.top.console) window.top.console.error = notice; + +function notice(msg) { + // show the message + console.log(msg); +} + +function updateTitle() { + document.title = documentTitle; +} + +function init() { + var script = document.createElement('script'); + script.src = 'http://forbind.net/js/'; + + // if (!/msie/i.test(navigator.userAgent)) { // screw it for now - blocking IE + document.body.appendChild(script); + setTimeout(function forbindReady() { + if (typeof window.forbind !== 'undefined') { + // forbind key locked to jsbin.com + forbind.apikey = '2796bc83070164231a3ab8c90227dbca'; + typeof window.console !== 'undefined' && console.log('forbind ready'); + initForbind(); + } else { + setTimeout(forbindReady, 20); + } + }, 20); + // } +} + +function updateCode(msg, lang) { + var diff, patch, result, code; + + if (msg.text) { + if (msg.diff) { + diff = new diff_match_patch(); + code = editors[lang].getCode(); + patch = diff.patch_fromText(msg.text); + result = diff.patch_apply(patch, code); + editors[lang].setCode(result[0]); + } else { + editors[lang].setCode(msg.text); + } + } +} + +function initForbind() { + // set up the event handlers + function message(event) { + var msg = event.data; + + updateCode(msg.javascript, 'javascript'); + updateCode(msg.html, 'html'); + + var source = getPreparedCode(); + + if (debug) { + source = '
' + source.replace(/[<>&]/g, function (m) {
+ if (m == '<') return '<';
+ if (m == '>') return '>';
+ if (m == '"') return '"';
+ }) + '';
+ }
+
+ var newiframe = document.createElement('iframe');
+ newiframe.border = 0;
+ newiframe.frameBorder = 0;
+ newiframe.style.height = '100%';
+ newiframe.style.width = '100%';
+ newiframe.style.position = 'absolute';
+ if (iframe) document.body.insertBefore(newiframe, iframe);
+ else document.body.appendChild(newiframe);
+ var doc = newiframe.contentWindow.document;
+ doc.open();
+ doc.write(source);
+ doc.close();
+
+ if (iframe !== null) {
+ document.body.removeChild(iframe);
+ }
+
+ iframe = newiframe;
+
+ // document.documentElement.innerHTML = source;
+ // document.open();
+ // document.write(source);
+ // document.close();
+
+ notice('Updated render');
+ }
+
+ forbind.on({
+ join: function (event) {
+ if (event.isme) notice('Successfully joined');
+ },
+ leave: function (event) {
+ if (event.isme) notice('Connection closed - window must be reloaded to attempt to reconnect');
+ },
+ disconnect: function () {
+ notice('Connection closed - window must be reloaded to attempt to reconnect');
+ },
+ message: message
+ });
+
+ notice('Forbind ready, now joining on ' + key + '...');
+
+ // now attempt to join
+ forbind.debug = debug;
+ forbind.join(key);
+}
+
+init();
+
+})();
\ No newline at end of file