Add expand/collapse button to show and hide the hidden code lines

This commit is contained in:
Mathieu David 2015-12-29 13:08:25 +01:00
parent 0620ef1f47
commit 71213f40da
3 changed files with 95 additions and 1 deletions

View File

@ -284,6 +284,19 @@ h3 {
-webkit-border-radius: 3px; -webkit-border-radius: 3px;
border-radius: 3px; border-radius: 3px;
} }
.light pre {
position: relative;
}
.light pre > i {
position: absolute;
right: 5px;
top: 5px;
color: #364149;
cursor: pointer;
}
.light pre > i :hover {
color: #008cff;
}
.light .sidebar { .light .sidebar {
background-color: #fafafa; background-color: #fafafa;
color: #364149; color: #364149;
@ -340,6 +353,19 @@ h3 {
-webkit-border-radius: 3px; -webkit-border-radius: 3px;
border-radius: 3px; border-radius: 3px;
} }
.coal pre {
position: relative;
}
.coal pre > i {
position: absolute;
right: 5px;
top: 5px;
color: #a1adb8;
cursor: pointer;
}
.coal pre > i :hover {
color: #3473ad;
}
.coal .sidebar { .coal .sidebar {
background-color: #292c2f; background-color: #292c2f;
color: #a1adb8; color: #a1adb8;
@ -396,6 +422,19 @@ h3 {
-webkit-border-radius: 3px; -webkit-border-radius: 3px;
border-radius: 3px; border-radius: 3px;
} }
.navy pre {
position: relative;
}
.navy pre > i {
position: absolute;
right: 5px;
top: 5px;
color: #c8c9db;
cursor: pointer;
}
.navy pre > i :hover {
color: #2b79a2;
}
.navy .sidebar { .navy .sidebar {
background-color: #282d3f; background-color: #282d3f;
color: #c8c9db; color: #c8c9db;
@ -452,6 +491,19 @@ h3 {
-webkit-border-radius: 3px; -webkit-border-radius: 3px;
border-radius: 3px; border-radius: 3px;
} }
.rust pre {
position: relative;
}
.rust pre > i {
position: absolute;
right: 5px;
top: 5px;
color: #c8c9db;
cursor: pointer;
}
.rust pre > i :hover {
color: #e69f67;
}
.rust .sidebar { .rust .sidebar {
background-color: #3b2e2a; background-color: #3b2e2a;
color: #c8c9db; color: #c8c9db;

View File

@ -118,12 +118,21 @@ $( document ).ready(function() {
var hiding_character = "#"; var hiding_character = "#";
$("code.language-rust").each(function(i, block){ $("code.language-rust").each(function(i, block){
// hide lines
var lines = $(this).html().split("\n"); var lines = $(this).html().split("\n");
var first_non_hidden_line = false; var first_non_hidden_line = 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){
lines[n] = "<span class=\"hidden\">" + lines[n] + "</span>"; if(first_non_hidden_line){
lines[n] = "<span class=\"hidden\">" + "\n" + lines[n].substr(1) + "</span>";
}
else {
lines[n] = "<span class=\"hidden\">" + lines[n].substr(1) + "\n" + "</span>";
}
lines_hidden = true;
} }
else if(first_non_hidden_line) { else if(first_non_hidden_line) {
lines[n] = "\n" + lines[n]; lines[n] = "\n" + lines[n];
@ -133,6 +142,23 @@ $( document ).ready(function() {
} }
} }
$(this).html(lines.join("")); $(this).html(lines.join(""));
// If no lines were hidden, return
if(!lines_hidden) { return; }
// add expand button
$(this).parent().prepend("<i class=\"fa fa-expand\"></i>");
$(this).parent().find("i").click(function(e){
if( $(this).hasClass("fa-expand") ) {
$(this).removeClass("fa-expand").addClass("fa-compress");
$(this).parent().find("span.hidden").removeClass("hidden").addClass("unhidden");
}
else {
$(this).removeClass("fa-compress").addClass("fa-expand");
$(this).parent().find("span.unhidden").removeClass("unhidden").addClass("hidden");
}
});
}); });

View File

@ -7,6 +7,22 @@
border-radius: 3px; border-radius: 3px;
} }
pre {
position: relative;
}
pre > i {
position: absolute;
right: 5px;
top: 5px;
color: $sidebar-fg;
cursor: pointer;
:hover {
color: $sidebar-active;
}
}
color: $fg color: $fg
background-color: $bg background-color: $bg