ARCHIVE/xrpl-dev-portal
1
0
Fork 0
mirror of https://github.com/XRPLF/xrpl-dev-portal.git synced 2025-11-26 06:35:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

[FEATURE] expand code buttons on mobile

Browse Source
This commit is contained in:
mDuo13
2015-05-14 00:10:25 -07:00
parent bdbd06846b
commit a1c113140a
3 changed files with 31 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
css/custom.css
View File

@@ -90,9 +90,17 @@ body .content-root {
}
/* code samples scrolling */
code { max-height: 14em; overflow: auto;}
.code_sample code { max-height: 14em; overflow: auto;}
.code_sample code.expanded,
.code_sample .hljs.expanded {
max-height: none;
width: 100%;
}
.code_sample { position: relative; }
.code_sample .code_toggler { position: absolute; bottom: 0; right: 0; }
.content code { color: #111; }
.expanded { max-height: none; overflow: none;}
/* code tabs css */
.multicode {

22
js/expandcode.js
View File

@@ -1,8 +1,26 @@
var toggle_cs = function(eo) {
//eo = $("#"+id);
var wrapper = $(eo.target).parent();
wrapper.find("code").toggleClass('expanded');
current_button_text = wrapper.find(".code_toggler").val();
$(eo.target).val(current_button_text == 'Expand' ? "Collapse" : "Expand");
}
function make_code_expandable() {
$('code').dblclick(function(eo) {
var newid = 0;
$(".content > pre > code").parent().wrap(function() {
newid = newid+1;
return "<div class='code_sample' id='code_autoid_"+newid+"'>";
});
var cs = $('.code_sample');
cs.find("code").dblclick(function(eo) {
$(eo.target).toggleClass('expanded');
});
$('code').attr('title', 'Double-click to expand/collapse');
cs.find("code").attr('title', 'Double-click to expand/collapse');
var newbtn = $("<input type='button' class='code_toggler' value='Expand' />");
newbtn.appendTo(cs);
$(".code_toggler").click(toggle_cs);
}
$(document).on('flatdoc:ready', make_code_expandable);

2
js/multicodetab.js
View File

@@ -16,7 +16,7 @@ jQuery.fn.multicode_tabs = function() {
// for each code, give it a unique ID and wrap it in a pre
cb_area.children('code').each(function(index2,el2) {
var linkid = 'code-'+index+'-'+index2;
$(el2).wrap("<div id='"+linkid+"'><pre>");
$(el2).wrap("<div id='"+linkid+"' class='code_sample'><pre>");
//also put in a link to this in the tab header ul
$('ul', cb_area).append("<li><a href='#"+linkid+"'></a></li>");
});