Created
April 10, 2015 00:16
-
-
Save shenningsgard/4c9c21cfd24214b8763c to your computer and use it in GitHub Desktop.
My first attempt to record/playback text entry within an Ace editor.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$(document).ready(function(){ | |
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 keystrokes = []; | |
var playbackEvents = []; | |
function recordKeystroke(e) { | |
var keyEvent = { | |
'data': e.data, | |
'timestamp': Date.now() | |
}; | |
keystrokes.push(keyEvent); | |
console.log(e, keyEvent); | |
} | |
function captureState() { | |
var keyEvent = { | |
'data': { | |
'action': 'insertText', | |
'text': editor.getValue() | |
}, | |
'timestamp': Date.now() | |
}; | |
keystrokes.push(keyEvent); | |
} | |
function record() { | |
captureState(); | |
editor.on("change", recordKeystroke); | |
} | |
window.record = record; | |
function stop() { | |
editor.off("change", recordKeystroke); | |
editor.setReadOnly(false); | |
if (playbackEvents[0]) { | |
for (i = 0; i < playbackEvents.length; i++) { | |
clearTimeout(playbackEvents[i]); | |
} | |
} | |
} | |
window.stop = stop; | |
function play() { | |
var startTime = keystrokes[0].timestamp, | |
i = 0; | |
console.log(playbackEvents); | |
editor.setValue(""); | |
editor.setReadOnly(true); | |
editor.clearSelection(); | |
for (i = 0; i < keystrokes.length; i++) { | |
createEvent(startTime, i); | |
} | |
} | |
window.play = play; | |
function createEvent(starttime, i) { | |
var k = keystrokes[i], | |
dT = 1; | |
var evt = setTimeout(function(){ | |
editor.clearSelection(); | |
switch (k.data.action) { | |
case 'insertText': | |
if (k.data.range) { | |
editor.moveCursorTo(k.data.range.start.row, k.data.range.start.column); | |
} else { | |
editor.moveCursorTo(0, 0); | |
} | |
editor.insert(k.data.text); | |
break; | |
case 'removeText': | |
editor.getSession().remove(k.data.range); | |
break; | |
case 'removeLines': | |
editor.getSession().remove(k.data.range); | |
break; | |
default: | |
console.log('unknown action: ' + k.data.action); | |
} | |
if (i == keystrokes.length - 1) { | |
editor.setReadOnly(false); | |
} | |
}, dT * (keystrokes[i].timestamp - starttime)); | |
playbackEvents.push(evt); | |
} | |
function reset(){ | |
stop(); | |
keystrokes = []; | |
playbackEvents = []; | |
} | |
window.reset = reset; | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<html> | |
<head> | |
<title>Recordodecode recorder coderecorder.. you get it; it records code.</title> | |
<?php include("../include.php") ?> | |
<script type="text/javascript" src="../js/lib/ace/ace.js"></script> | |
<script type="text/javascript" src="../js/lib/ace/ext-language_tools.js"></script> | |
<script type="text/javascript" src="../js/lib/ace/ext-settings_menu.js"></script> | |
<script type="text/javascript" src="../js/lib/ace/ext-statusbar.js"></script> | |
<script type="text/javascript" src="../js/lib/ace/ext-keybinding_menu.js"></script> | |
</head> | |
<body> | |
<div class="container-fluid"> | |
<div class="row"> | |
<div id="editor" style="width:100%; height:600px;"></div> | |
</div> | |
<div class="row"> | |
<button class="btn btn-warning" onclick="record()">Record</button> | |
<button class="btn btn-danger" onclick="stop()">Stop</button> | |
<button class="btn btn-primary" onclick="play()">Play</button> | |
<button class="btn" onclick="reset()">Reset</button> | |
</div> | |
</div> | |
<script type="text/javascript" src="app.js"></script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment