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) { function toggle_cs(eo) {
const wrapper = $(eo.target).parent(); const wrapper = $(eo.target).closest(".code_sample");
const code_el = wrapper.find("code"); const code_el = wrapper.find("code");
code_el.toggleClass('expanded'); code_el.toggleClass('expanded');
const placeholders = wrapper.find(".code-placeholder"); const placeholders = wrapper.find(".code-placeholder");
if (placeholders.length) { if (placeholders.length) {
// collapsing
placeholders.remove(); placeholders.remove();
$(window).scrollTop(code_el.offset().top - 124)
} else { } else {
code_el.after("<div class='code-placeholder' style='width:" code_el.after("<div class='code-placeholder' style='width:"
+ code_el.outerWidth() + code_el.outerWidth()
@@ -12,8 +17,8 @@ function toggle_cs(eo) {
+ code_el.outerHeight() + code_el.outerHeight()
+ "px;'>&nbsp;</div>"); + "px;'>&nbsp;</div>");
} }
current_button_text = wrapper.find(".code_toggler").val(); current_button_expanded = code_el.hasClass('expanded');
$(eo.target).val(current_button_text == 'Expand' ? "Collapse" : "Expand"); $(wrapper.find(".code_toggler")).html(current_button_expanded ? tCollapse : tExpand);
} }
function has_scrollbars(e) { function has_scrollbars(e) {
@@ -39,7 +44,7 @@ function make_code_expandable() {
if (has_scrollbars(this)) { if (has_scrollbars(this)) {
jqThis.dblclick(toggle_cs); jqThis.dblclick(toggle_cs);
jqThis.attr('title', 'Double-click to expand/collapse'); 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")); newbtn.appendTo(jqThis.parents(".code_sample"));
} }
}); });