136 lines
4.7 KiB
JavaScript
136 lines
4.7 KiB
JavaScript
function updateResults(includeJavascript) {
|
|
// var includeJavascript = includeJavascript;
|
|
//
|
|
// if (!(typeof(includeJavascript) != 'undefined' && includeJavascript == true)){
|
|
// includeJavascript = false;
|
|
// }
|
|
|
|
var resultsContainer = document.querySelectorAll('[data-id="results"]')[0];
|
|
var codeHtml = document.querySelectorAll('[data-id="code-html"]')[0].value.trim();
|
|
var codeCss = document.querySelectorAll('[data-id="code-css"]')[0].value.trim();
|
|
|
|
// if(includeJavascript == true){
|
|
var codeJs = document.querySelectorAll('[data-id="code-js"]')[0].value.trim();
|
|
// }
|
|
|
|
resultsContainer.innerHTML = "";
|
|
var iDoc = document.createElement('html');
|
|
var iHead = document.createElement('head');
|
|
var iBody = document.createElement('body');
|
|
|
|
var codeFrame = document.createElement('iframe');
|
|
codeFrame.setAttribute("width", "100%");
|
|
codeFrame.setAttribute("height", "100%");
|
|
resultsContainer.appendChild(codeFrame);
|
|
|
|
var codeStyle = document.createElement("style");
|
|
codeStyle.setAttribute("type", "text/css");
|
|
var rulesNode = document.createTextNode(codeCss);
|
|
codeStyle.appendChild(rulesNode);
|
|
iHead.appendChild(codeStyle);
|
|
iDoc.appendChild(iHead);
|
|
|
|
iBody.innerHTML = codeHtml;
|
|
iDoc.appendChild(iBody);
|
|
|
|
// if(includeJavascript == true){
|
|
var codeScript = document.createElement("script");
|
|
codeScript.setAttribute("type", "text/javascript");
|
|
var scriptNode = document.createTextNode(codeJs);
|
|
codeScript.appendChild(scriptNode);
|
|
iDoc.appendChild(codeScript);
|
|
// }
|
|
|
|
codeFrame.contentWindow.document.open();
|
|
codeFrame.contentWindow.document.appendChild(iDoc);
|
|
codeFrame.contentWindow.document.close();
|
|
}
|
|
|
|
function indentSelection(e){
|
|
if(e.keyCode === 9){
|
|
e.preventDefault();
|
|
|
|
var indent = " ";
|
|
var cursor = e.target.selectionStart;
|
|
var val = e.target.value;
|
|
var valStart = val.substring(0, e.target.selectionStart);
|
|
var valEnd = val.substring(e.target.selectionEnd, val.length);
|
|
var selected = val.substring(e.target.selectionStart, e.target.selectionEnd);
|
|
|
|
var resetCursor = function(start, end){
|
|
e.target.selectionStart = start;
|
|
e.target.selectionEnd = end;
|
|
};
|
|
|
|
var indented;
|
|
if(e.shiftKey){ //de-indent
|
|
if(selected.length > 0 && (/\n/.test(selected))){ //multi line
|
|
indented = selected.split(/\n/).map(function(line){
|
|
if(line.length > 0 && line.substring(0, indent.length) === indent){
|
|
line = line.substring(indent.length, line.length);
|
|
}
|
|
return line;
|
|
}).join("\n");
|
|
e.target.value = valStart + indented + val.substring(e.target.selectionEnd, val.length);
|
|
resetCursor(cursor, cursor + indented.length);
|
|
} else {
|
|
if(valStart.substring(valStart.length - indent.length) === indent){
|
|
e.target.value = valStart.substring(0, valStart.length - indent.length) + valEnd;
|
|
resetCursor(cursor, cursor - indent.length);
|
|
} else if(valEnd.substring(0, indent.length) === indent) {
|
|
e.target.value = valStart + valEnd.substring(indent.length, valEnd.length);
|
|
resetCursor(cursor, cursor);
|
|
}
|
|
}
|
|
} else { //indent
|
|
if(selected.length > 0 && (/\n/.test(selected))){ //multi line
|
|
indented = selected.split(/\n/).map(function(line){
|
|
if(line.length > 0){ line = indent + line; }
|
|
return line;
|
|
}).join("\n");
|
|
e.target.value = valStart + indented + val.substring(e.target.selectionEnd, val.length);
|
|
resetCursor(cursor, cursor + indented.length);
|
|
} else {
|
|
e.target.value = valStart + indent + selected + valEnd;
|
|
resetCursor(cursor + indent.length, cursor + indent.length);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
timer = 0;
|
|
|
|
$(function(){
|
|
// wait a half second before updating results
|
|
// restart the timer if they resume typing
|
|
$('html').on('keyup', '.code-input textarea', function(){
|
|
if (timer) { clearTimeout(timer); }
|
|
timer = setTimeout(updateResults, 500);
|
|
});
|
|
|
|
$("html").on('keydown', "textarea[data-id^=code-]", function(e){
|
|
indentSelection(e);
|
|
});
|
|
|
|
// If JavaScript is enabled, display the livecoder section dynamically
|
|
$("[data-id='live-coder-answer']").load("live-coder-chunk.php .layout", function(){
|
|
// if it loads in, and hide "finish later" checkbox
|
|
$("[data-id='live-coder-finish-later']").addClass("hidden");
|
|
$('.js-error').addClass('hidden');
|
|
updateResults();
|
|
$(".code-input textarea").linedtextarea();
|
|
});
|
|
|
|
$("[data-id=live-coder]").each(function(){
|
|
updateResults();
|
|
});
|
|
|
|
|
|
//simple live coder for summary page
|
|
$("[data-id=live-coder-no-js]").addClass('hidden');
|
|
$("[data-id=live-coder]").removeClass('hidden');
|
|
|
|
$(".code-input textarea").linedtextarea();
|
|
|
|
});
|