var mapping; var timeout; $(document).ready(function(){ // load default code loadCode($('#examples option:selected').val()); // bind events $('.popup h3').click(function() { $(this).next().toggle('slow'); }); $('form').change(function() { compile(); }); $('#examples select').change(function() { loadCode($(this).val()); }); $('.editor textarea') .scroll(function() { $(this).prev().scrollTop($(this).scrollTop()); }) .keypress(function() { updateEditor($(this)); }) .keyup(function () { if (timeout) { window.clearTimeout(timeout); } timeout = window.setTimeout(compile, 500); }) .keydown(function(e) { if (e.keyCode == 9) { insertAtCaret(this, "\t") return false; // prevent default action } }); $('#ansic textarea') .mousemove(function(e) { var hover = getHoverLine($(this), e); if (hover) { var line = hover.index()+1; if (mapping.ansic[line]) { var start = mapping.ansic[line][0]; var end = mapping.ansic[line][1]; selectLines($(this), false, line); selectLines($('#assembler textarea'), true, start, end); selectLines($('#byte textarea'), true, mapping.assembler[start], mapping.assembler[end]); } } }); $('#assembler textarea').mousemove(function(e) { var hover = getHoverLine($(this), e); if (hover) { var line = hover.index()+1; if (mapping.assembler[line]) { var mappedLine = mapping.assembler[line]; selectLines($(this), false, line); selectLines($('#byte textarea'), true, mappedLine); } } }); $('#byte textarea').mousemove(function(e) { var hover = getHoverLine($(this), e); if (hover) { var line = hover.index()+1; if (mapping.byte[line]) { var mappedLine = mapping.byte[line]; selectLines($(this), false, line); selectLines($('#assembler textarea'), true, mappedLine); } } }); }); function compile() { var code = $('#ansic textarea').val(); $.post('compile.php?' + $('form').serialize(), code, function(json) { mapping = json.mapping; timeout = null; // free timeout updateEditor($('#assembler .editor textarea'), json.code.assembler); updateEditor($('#byte .editor textarea'), json.code.byte); renderStats(json.stats); if (json.messages) { $('#messages pre').text(json.messages); $('#messages').show('slow'); } else { $('#messages').hide('slow'); } }, 'json'); } function range(start, end) { var arr = new Array; for (var i = start; i <= end; i++) { arr.push(i); } return arr; } function insertAtCaret(element, text) { if (document.selection) { element.focus(); var sel = document.selection.createRange(); sel.text = text; element.focus(); } else if (element.selectionStart || element.selectionStart === 0) { var startPos = element.selectionStart; var endPos = element.selectionEnd; var scrollTop = element.scrollTop; element.value = element.value.substring(0, startPos) + text + element.value.substring(endPos, element.value.length); element.focus(); element.selectionStart = startPos + text.length; element.selectionEnd = startPos + text.length; element.scrollTop = scrollTop; } else { element.value += text; element.focus(); } } function selectLines(editor, scroll, start, end) { var pres = editor.prev().children(); pres.removeClass('activeline'); // deselect all if (end == undefined) { end = start; } for (var i = start; i <= end; i++) { pres.eq(i-1).addClass('activeline'); } var offset = pres.get(start-1).offsetTop; if (scroll) { editor.scrollTop(offset-50); // scroll to top of selection } } function updateEditor(editor, value) { if (value) { editor.val(value); } var overlay = editor.prev(); var lines = editor.val().split("\n").length; overlay.empty(); for (var i = 0; i < lines+2; i++) { overlay.append($('
').text(i+1)); } } function loadCode(file) { $.get('examples/' + file, function(data) { updateEditor($('#ansic textarea'), data); compile(); }); } function getHoverLine(editor, e) { var pres = editor.prev().children(); var hover = undefined; pres.each(function(index, elm) { if (e.layerY > elm.offsetTop && e.layerY < elm.offsetTop+15) { hover = $(elm); return false; } }); return hover; } function renderStats(stats) { var cLines = $('#ansic textarea').val().split("\n").length; var asInstr = $('#byte textarea').val().split("\n").length; var max; var par = $('') .html('Dein Code besteht aus ' + cLines + ' Zeilen Code, die in ' + asInstr + ' Assembler Instruktionen übersetzt werden. Das sind ' + Math.round(asInstr/cLines) + ' mal mehr Instruktionen als C-Zeilen!'); var table = $('
').text(mnemonic)) .append( $(' | ').append(
$(' ').text(count).width(800*count/max).addClass('bar')
)
)
);
}
$('#stats div').empty().append(par).append(table);
}
|