shenningsgard/coderenderer_app.js

## coderenderer_app.js
/**
 * Created by shenningsgard on 4/1/15.
 */
ace.config.set('basePath', '../js/lib/ace');

var editor = ace.edit("editor");

editor.$blockScrolling = Infinity;
editor.setTheme("ace/theme/monokai");
editor.getSession().setMode("ace/mode/html");
editor.setOptions({
    enableBasicAutocompletion: true,
    enableSnippets: true,
    enableLiveAutocompletion: false
});

var editor2 = ace.edit("editor2");

editor2.$blockScrolling = Infinity;
editor2.setTheme("ace/theme/monokai");
editor2.getSession().setMode("ace/mode/html");
editor2.setOptions({
    enableBasicAutocompletion: true,
    enableSnippets: true,
    enableLiveAutocompletion: false
});


editor.on("change", sendKeystroke);

function sendKeystroke(e) {
    /*
    var k = {
        'data': e.data,
        'timestamp': Date.now()
    };
    receiveKeystroke(k);
    */
    editor2.setValue(editor.getValue());
    editor2.clearSelection();
    //channel.trigger('client-keydown', k);
}

function receiveKeystroke(k) {
    editor2.clearSelection();

    switch (k.data.action) {
        case 'insertText':
            if (k.data.range) {
                editor2.moveCursorTo(k.data.range.start.row, k.data.range.start.column);
            } else {
                editor2.moveCursorTo(0, 0);
            }
            editor2.insert(k.data.text);
            break;

        case 'removeText':

            editor2.getSession().remove(k.data.range);
            break;

        case 'removeLines':

            editor2.getSession().remove(k.data.range);
            break;

        default:
            console.log('unknown action: ' + k.data.action);
    }
}

//BLOB STUFF
var blob = new Blob(["<html><body>Hello, world!</body></html>"], {
    type: 'text/html',
    endings: 'native'
});
blobURL = window.URL.createObjectURL(blob);

var iframe = document.createElement('iframe');
iframe.src = blobURL;
document.querySelector('.browserWindow').appendChild(iframe);

var iframe2 = document.createElement('iframe');
document.querySelector('.browserWindow').appendChild(iframe2);

function renderCode() {
    var options = {
        type: 'text/html',
        endings: 'native'
    };
    window.URL.revokeObjectURL(blobURL);
    blobURL = window.URL.createObjectURL( new Blob([editor.getValue()], options ) );
    iframe.src = (blobURL);
}

## coderenderer_index.html
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="../js/lib/ace/ace.js"></script>
    <style type="text/css">
        iframe {
            float: left;
            width: 49%;
            border: 1px;
            border-style: solid;
        }
    </style>

</head>
<body>
    <div class="browserWindow"></div>
    <div style="width:100%; height:500px; float:left;">
        <div id="editor" style="float:left; width:50%; height:500px;"></div>
        <div id="editor2" style="float:left; width:50%; height:500px;"></div>
    </div>
    <div style="width:100%; float:left;">
        <button onclick="renderCode()">Render my Code!</button>
    </div>


    <script src="app.js" type="text/javascript"></script>
</body>
</html>
	/**
	* Created by shenningsgard on 4/1/15.
	*/
	ace.config.set('basePath', '../js/lib/ace');

	var editor = ace.edit("editor");

	editor.$blockScrolling = Infinity;
	editor.setTheme("ace/theme/monokai");
	editor.getSession().setMode("ace/mode/html");
	editor.setOptions({
	enableBasicAutocompletion: true,
	enableSnippets: true,
	enableLiveAutocompletion: false
	});

	var editor2 = ace.edit("editor2");

	editor2.$blockScrolling = Infinity;
	editor2.setTheme("ace/theme/monokai");
	editor2.getSession().setMode("ace/mode/html");
	editor2.setOptions({
	enableBasicAutocompletion: true,
	enableSnippets: true,
	enableLiveAutocompletion: false
	});


	editor.on("change", sendKeystroke);

	function sendKeystroke(e) {
	/*
	var k = {
	'data': e.data,
	'timestamp': Date.now()
	};
	receiveKeystroke(k);
	*/
	editor2.setValue(editor.getValue());
	editor2.clearSelection();
	//channel.trigger('client-keydown', k);
	}

	function receiveKeystroke(k) {
	editor2.clearSelection();

	switch (k.data.action) {
	case 'insertText':
	if (k.data.range) {
	editor2.moveCursorTo(k.data.range.start.row, k.data.range.start.column);
	} else {
	editor2.moveCursorTo(0, 0);
	}
	editor2.insert(k.data.text);
	break;

	case 'removeText':

	editor2.getSession().remove(k.data.range);
	break;

	case 'removeLines':

	editor2.getSession().remove(k.data.range);
	break;

	default:
	console.log('unknown action: ' + k.data.action);
	}
	}

	//BLOB STUFF
	var blob = new Blob(["<html><body>Hello, world!</body></html>"], {
	type: 'text/html',
	endings: 'native'
	});
	blobURL = window.URL.createObjectURL(blob);

	var iframe = document.createElement('iframe');
	iframe.src = blobURL;
	document.querySelector('.browserWindow').appendChild(iframe);

	var iframe2 = document.createElement('iframe');
	document.querySelector('.browserWindow').appendChild(iframe2);

	function renderCode() {
	var options = {
	type: 'text/html',
	endings: 'native'
	};
	window.URL.revokeObjectURL(blobURL);
	blobURL = window.URL.createObjectURL( new Blob([editor.getValue()], options ) );
	iframe.src = (blobURL);
	}
	<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title></title>
	<script src="../js/lib/ace/ace.js"></script>
	<style type="text/css">
	iframe {
	float: left;
	width: 49%;
	border: 1px;
	border-style: solid;
	}
	</style>

	</head>
	<body>
	<div class="browserWindow"></div>
	<div style="width:100%; height:500px; float:left;">
	<div id="editor" style="float:left; width:50%; height:500px;"></div>
	<div id="editor2" style="float:left; width:50%; height:500px;"></div>
	</div>
	<div style="width:100%; float:left;">
	<button onclick="renderCode()">Render my Code!</button>
	</div>


	<script src="app.js" type="text/javascript"></script>
	</body>
	</html>