Continue #29, playpens are now runnable

This commit is contained in:
Mathieu David 2016-01-01 00:32:12 +01:00
parent 0ac0301d72
commit db7424e947
3 changed files with 91 additions and 17 deletions

View File

@ -299,16 +299,22 @@ h5 {
.light pre { .light pre {
position: relative; position: relative;
} }
.light pre > i { .light pre > .buttons {
position: absolute; position: absolute;
right: 5px; right: 5px;
top: 5px; top: 5px;
color: #364149; color: #364149;
cursor: pointer; cursor: pointer;
} }
.light pre > i :hover { .light pre > .buttons :hover {
color: #008cff; color: #008cff;
} }
.light pre > .buttons i {
margin-left: 8px;
}
.light pre > .result {
margin-top: 10px;
}
.light .sidebar { .light .sidebar {
background-color: #fafafa; background-color: #fafafa;
color: #364149; color: #364149;
@ -372,16 +378,22 @@ h5 {
.coal pre { .coal pre {
position: relative; position: relative;
} }
.coal pre > i { .coal pre > .buttons {
position: absolute; position: absolute;
right: 5px; right: 5px;
top: 5px; top: 5px;
color: #a1adb8; color: #a1adb8;
cursor: pointer; cursor: pointer;
} }
.coal pre > i :hover { .coal pre > .buttons :hover {
color: #3473ad; color: #3473ad;
} }
.coal pre > .buttons i {
margin-left: 8px;
}
.coal pre > .result {
margin-top: 10px;
}
.coal .sidebar { .coal .sidebar {
background-color: #292c2f; background-color: #292c2f;
color: #a1adb8; color: #a1adb8;
@ -445,16 +457,22 @@ h5 {
.navy pre { .navy pre {
position: relative; position: relative;
} }
.navy pre > i { .navy pre > .buttons {
position: absolute; position: absolute;
right: 5px; right: 5px;
top: 5px; top: 5px;
color: #c8c9db; color: #c8c9db;
cursor: pointer; cursor: pointer;
} }
.navy pre > i :hover { .navy pre > .buttons :hover {
color: #2b79a2; color: #2b79a2;
} }
.navy pre > .buttons i {
margin-left: 8px;
}
.navy pre > .result {
margin-top: 10px;
}
.navy .sidebar { .navy .sidebar {
background-color: #282d3f; background-color: #282d3f;
color: #c8c9db; color: #c8c9db;
@ -518,16 +536,22 @@ h5 {
.rust pre { .rust pre {
position: relative; position: relative;
} }
.rust pre > i { .rust pre > .buttons {
position: absolute; position: absolute;
right: 5px; right: 5px;
top: 5px; top: 5px;
color: #c8c9db; color: #c8c9db;
cursor: pointer; cursor: pointer;
} }
.rust pre > i :hover { .rust pre > .buttons :hover {
color: #e69f67; color: #e69f67;
} }
.rust pre > .buttons i {
margin-left: 8px;
}
.rust pre > .result {
margin-top: 10px;
}
.rust .sidebar { .rust .sidebar {
background-color: #3b2e2a; background-color: #3b2e2a;
color: #c8c9db; color: #c8c9db;

View File

@ -140,18 +140,20 @@ $( document ).ready(function() {
$("code.language-rust").each(function(i, block){ $("code.language-rust").each(function(i, block){
var code_block = $(this);
var pre_block = $(this).parent();
// hide lines // hide lines
var lines = $(this).html().split("\n"); var lines = code_block.html().split("\n");
var first_non_hidden_line = false; var first_non_hidden_line = false;
var lines_hidden = false; var lines_hidden = false;
for(var n = 0; n < lines.length; n++){ for(var n = 0; n < lines.length; n++){
if($.trim(lines[n])[0] == hiding_character){ if($.trim(lines[n])[0] == hiding_character){
if(first_non_hidden_line){ if(first_non_hidden_line){
lines[n] = "<span class=\"hidden\">" + "\n" + lines[n].substr(1) + "</span>"; lines[n] = "<span class=\"hidden\">" + "\n" + lines[n].replace(/(\s*)#/, "$1") + "</span>";
} }
else { else {
lines[n] = "<span class=\"hidden\">" + lines[n].substr(1) + "\n" + "</span>"; lines[n] = "<span class=\"hidden\">" + lines[n].replace(/(\s*)#/, "$1") + "\n" + "</span>";
} }
lines_hidden = true; lines_hidden = true;
} }
@ -162,25 +164,65 @@ $( document ).ready(function() {
first_non_hidden_line = true; first_non_hidden_line = true;
} }
} }
$(this).html(lines.join("")); code_block.html(lines.join(""));
// If no lines were hidden, return // If no lines were hidden, return
if(!lines_hidden) { return; } if(!lines_hidden) { return; }
// add expand button // add expand button
$(this).parent().prepend("<i class=\"fa fa-expand\"></i>"); pre_block.prepend("<div class=\"buttons\"><i class=\"fa fa-expand\"></i></div>");
$(this).parent().find("i").click(function(e){ pre_block.find("i").click(function(e){
if( $(this).hasClass("fa-expand") ) { if( $(this).hasClass("fa-expand") ) {
$(this).removeClass("fa-expand").addClass("fa-compress"); $(this).removeClass("fa-expand").addClass("fa-compress");
$(this).parent().find("span.hidden").removeClass("hidden").addClass("unhidden"); pre_block.find("span.hidden").removeClass("hidden").addClass("unhidden");
} }
else { else {
$(this).removeClass("fa-compress").addClass("fa-expand"); $(this).removeClass("fa-compress").addClass("fa-expand");
$(this).parent().find("span.unhidden").removeClass("unhidden").addClass("hidden"); pre_block.find("span.unhidden").removeClass("unhidden").addClass("hidden");
} }
}); });
}); });
// Process playpen code blocks
$(".playpen").each(function(block){
var pre_block = $(this);
// Add play button
var buttons = pre_block.find(".buttons");
if( buttons.length === 0 ) {
pre_block.prepend("<div class=\"buttons\"></div>");
buttons = pre_block.find(".buttons");
}
buttons.prepend("<i class=\"fa fa-play play-button\"></i>");
buttons.find(".play-button").click(function(e){
run_rust_code(pre_block);
}); });
});
});
function run_rust_code(code_block) {
var result_block = code_block.find(".result");
if(result_block.length === 0) {
code_block.append("<code class=\"result hljs language-bash\"></code>");
result_block = code_block.find(".result");
}
result_block.text("Running...");
$.ajax({
url: "https://play.rust-lang.org/evaluate.json",
method: "POST",
crossDomain: true,
dataType: "json",
contentType: "application/json",
data: JSON.stringify({version: "stable", optimize: "0", code: code_block.find(".language-rust").text() }),
success: function(response){
result_block.text(response.result);
}
});
}

View File

@ -10,7 +10,7 @@
pre { pre {
position: relative; position: relative;
} }
pre > i { pre > .buttons {
position: absolute; position: absolute;
right: 5px; right: 5px;
top: 5px; top: 5px;
@ -21,6 +21,14 @@
:hover { :hover {
color: $sidebar-active; color: $sidebar-active;
} }
i {
margin-left: 8px;
}
}
pre > .result {
margin-top: 10px;
} }
color: $fg color: $fg