Skip to content

Instantly share code, notes, and snippets.

@elzr
Last active June 16, 2020 11:54
Show Gist options
  • Save elzr/3501c12dc5efc7744610ec50d8538f3a to your computer and use it in GitHub Desktop.
Save elzr/3501c12dc5efc7744610ec50d8538f3a to your computer and use it in GitHub Desktop.
Hacky, brittle code just for a quick demo of multi-folding in Roam. See https://twitter.com/elzr/status/1272400990373924866
//// Inject jQuery by uncommenting this and pasting this in your console
//var jq = document.createElement('script');
//jq.src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js";
//document.getElementsByTagName('head')[0].appendChild(jq);
//// ... give time for script to load, then type (or see below for non wait option)
//jQuery.noConflict();
// JS to paste in your console
//
//first toggles the first level of indenting, which was so annoying to detect structurally I'm just recognizing as those blocks that have Roam's H3 (Cmd-Alt-3)
//mode can be 'show' or 'hide' or nothing, in which case it defaults to toggle
function first(mode) {
let firsts = $(".rm-level3").parent().parent();
firsts[mode || 'toggle']();
//toggle Roam's closed bullets;
let seconds = $("div.flex-v-box.block-border-left div.flex-v-box.block-border-left");
let zeros = $('.roam-article > div:first-child > div:first-child + div.flex-v-box > div.flex-v-box');
let addRemoveClassZeros = (( firsts.first().css('display') == 'none' ) ? 'add' : 'remove')+'Class';
zeros.has(".rm-level3").find('.simple-bullet-outer')[ addRemoveClassZeros ]('roam-bullet-closed');
let addRemoveClassFirsts = (( seconds.first().css('display') == 'none' ) ? 'add' : 'remove')+'Class';
firsts.parent().has("div.flex-v-box.block-border-left").find('.simple-bullet-outer')[ addRemoveClassFirsts ]('roam-bullet-closed');
//toggle triangles
let navi = $('.tocNavi .first');
if(mode == 'hide') {
navi.find('b').hide().end().find('strong').show();
} else if(mode == 'show') {
navi.find('b').show().end().find('strong').hide();
} else {
navi.find('b,strong').toggle();
}
}
//second is the second level of indenting. The way I'm detecting them will not disambiguate further levels!
function second(mode) {
let seconds = $("div.flex-v-box.block-border-left div.flex-v-box.block-border-left");
seconds[mode || 'toggle']();
let navi = $('.tocNavi .second');
if(mode == 'hide') {
navi.find('b').hide().end().find('strong').show();
} else if(mode == 'show') {
navi.find('b').show().end().find('strong').hide();
} else {
navi.find('b,strong').toggle();
}
}
//this inserts the triangle toggles that will show hovering on the page's title
$('div.roam-article h1.rm-title-display').parent().hover(
function() {
if( $(this).find('.tocNavi').length == 0 ) {
$(this).append(
'<div class="tocNavi" style="margin-top:-21px; color:#6d7378">'+
'<span class="first" onclick="first(); second(\'hide\');" style="cursor:pointer; display:inline-block; margin-right:20px"><b>▾</b><strong style="display:none">▸</strong></span>'+
'<span class="second" onclick="second(); first(\'show\'); " style="cursor:pointer"><b>▾</b><strong style="display:none">▸</strong></span>'+
'</div>')
}
$(this).find('.tocNavi').show();
}, function() {
$(this).find('.tocNavi').hide();
}
)
//Oh btw, you will have to run the Roam "Expand all" command (accesible by right clicking on the page's title) before these toggles work correctly.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment