ARCHIVE/xrpl-dev-portal
1
0
Fork 0
mirror of https://github.com/XRPLF/xrpl-dev-portal.git synced 2025-11-21 04:05:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Code toggler: use icons, fix scroll

Browse Source
This commit is contained in:
mDuo13
2021-07-07 16:50:58 -07:00
parent 92ddeb1316
commit 943d50967a
1 changed files with 9 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
assets/js/expandcode.js
View File

@@ -1,10 +1,15 @@
const tExpand='<i class="fa fa-expand"></i><span class="sr-only">Expand</span>'
const tCollapse='<i class="fa fa-compress"></i><span class="sr-only">Shrink</span>'
function toggle_cs(eo) {
const wrapper = $(eo.target).parent();
const wrapper = $(eo.target).closest(".code_sample");
const code_el = wrapper.find("code");
code_el.toggleClass('expanded');
const placeholders = wrapper.find(".code-placeholder");
if (placeholders.length) {
// collapsing
placeholders.remove();
$(window).scrollTop(code_el.offset().top - 124)
} else {
code_el.after("<div class='code-placeholder' style='width:"
+ code_el.outerWidth()
@@ -12,8 +17,8 @@ function toggle_cs(eo) {
+ code_el.outerHeight()
+ "px;'>&nbsp;</div>");
}
current_button_text = wrapper.find(".code_toggler").val();
$(eo.target).val(current_button_text == 'Expand' ? "Collapse" : "Expand");
current_button_expanded = code_el.hasClass('expanded');
$(wrapper.find(".code_toggler")).html(current_button_expanded ? tCollapse : tExpand);
}
function has_scrollbars(e) {
@@ -39,7 +44,7 @@ function make_code_expandable() {
if (has_scrollbars(this)) {
jqThis.dblclick(toggle_cs);
jqThis.attr('title', 'Double-click to expand/collapse');
var newbtn = $("<input type='button' class='code_toggler btn btn-outline-secondary' value='Expand' />");
var newbtn = $(`<button class='code_toggler btn btn-outline-secondary'>${tExpand}</button>`);
newbtn.appendTo(jqThis.parents(".code_sample"));
}
});