172 lines
7.5 KiB
HTML
172 lines
7.5 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
|
||
|
|
<html lang="en">
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<!-- Page information -->
|
||
|
|
<meta charset="UTF-8" />
|
||
|
|
<meta name="node_id" content="{node_id}">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
|
|
<link rel="shortcut icon" href="{html_url_prefix}/favicon.ico" />
|
||
|
|
|
||
|
|
<!-- Set title -->
|
||
|
|
<title>{title}</title>
|
||
|
|
|
||
|
|
<!-- Includes -->
|
||
|
|
{dynamic_includes}
|
||
|
|
|
||
|
|
<!-- Onload tweaks -->
|
||
|
|
<script>
|
||
|
|
const CURRENT_NODE = '{pinnedNode}';
|
||
|
|
const HTML_URL_PREFIX = '{html_url_prefix}';
|
||
|
|
const PAGE_DEPTH = {page_depth};
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body class="theme-obs-light">
|
||
|
|
<div id="antiflash" style="display: none;"></div>
|
||
|
|
<script>
|
||
|
|
document.getElementById('antiflash').style.display = 'block';
|
||
|
|
</script>
|
||
|
|
{search_html}
|
||
|
|
|
||
|
|
<div id="page_holder" class="flex_col">
|
||
|
|
{header}
|
||
|
|
<div class="flex_row">
|
||
|
|
{left_pane}
|
||
|
|
<div class="container">
|
||
|
|
{content}
|
||
|
|
<!-- end content -->
|
||
|
|
</div>
|
||
|
|
<div class="container_filler">
|
||
|
|
</div>
|
||
|
|
{right_pane}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
function handle_toggle_side_bar(e){
|
||
|
|
let header;
|
||
|
|
let pane;
|
||
|
|
let target = e.target
|
||
|
|
|
||
|
|
// switch out the navbar button click for a header click
|
||
|
|
if (target.id == 'left_pane_toggle_nav'){
|
||
|
|
target = document.getElementById('left_pane_fold_header')
|
||
|
|
}
|
||
|
|
else if (target.id == 'right_pane_toggle_nav'){
|
||
|
|
target = document.getElementById('right_pane_fold_header')
|
||
|
|
}
|
||
|
|
|
||
|
|
// get header and pane
|
||
|
|
if (target.classList.contains('fold_header')) {
|
||
|
|
header = target;
|
||
|
|
pane = target.parentElement;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
pane = target;
|
||
|
|
header = target.getElementsByClassName('fold_header')[0];
|
||
|
|
}
|
||
|
|
toggle_side_bar(pane, header, true)
|
||
|
|
e.stopPropagation();
|
||
|
|
}
|
||
|
|
function handle_toggle_side_bar_button(e){
|
||
|
|
document.getElementById('menu_toggle_button').click()
|
||
|
|
handle_toggle_side_bar(e);
|
||
|
|
}
|
||
|
|
|
||
|
|
function toggle_side_bar(pane, header, save) {
|
||
|
|
let active = (pane.classList.contains('active'))
|
||
|
|
if (active){
|
||
|
|
disable_side_bar(pane, header, save);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
enable_side_bar(pane, header, save);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
function enable_side_bar(pane, header, save){
|
||
|
|
pane.classList.add('active');
|
||
|
|
pane.removeEventListener('click', handle_toggle_side_bar);
|
||
|
|
header.addEventListener('click', handle_toggle_side_bar);
|
||
|
|
set_correct_header_symbol(header);
|
||
|
|
if (save){ save_panel_folding_state(header, true) }
|
||
|
|
}
|
||
|
|
function disable_side_bar(pane, header, save){
|
||
|
|
pane.classList.remove('active');
|
||
|
|
pane.addEventListener('click', handle_toggle_side_bar);
|
||
|
|
header.removeEventListener('click', handle_toggle_side_bar);
|
||
|
|
set_correct_header_symbol(header);
|
||
|
|
if (save){ save_panel_folding_state(header, false) }
|
||
|
|
}
|
||
|
|
function set_correct_header_symbol(header){
|
||
|
|
let pane = header.parentElement;
|
||
|
|
let symbol = [['>', '<'],['<', '>']]
|
||
|
|
symbol = symbol[Number(header.classList.contains('right_pane_fold_header'))][Number(pane.classList.contains('active'))];
|
||
|
|
console.log(symbol);
|
||
|
|
header.innerHTML = symbol
|
||
|
|
return header;
|
||
|
|
}
|
||
|
|
function panel_folding_get_panel_name(header){
|
||
|
|
return ['left', 'right'][Number(header.classList.contains('right_pane_fold_header'))]
|
||
|
|
}
|
||
|
|
function save_panel_folding_state(header, active){
|
||
|
|
ls_set('pane_folding_state_'+panel_folding_get_panel_name(header), Number(active));
|
||
|
|
}
|
||
|
|
function load_panel_folding_state(panel_name){
|
||
|
|
val = ls_get('pane_folding_state_'+panel_name)
|
||
|
|
if (!val){ return {'exists': false, 'value': null}}
|
||
|
|
return {'exists': true, 'value': Boolean(Number(val))}
|
||
|
|
}
|
||
|
|
function set_pane_folding_start(left_header, right_header){
|
||
|
|
// small screen = closed
|
||
|
|
let right_pane_enabled = true;
|
||
|
|
let left_pane_enabled = true;
|
||
|
|
let w = window.visualViewport.width
|
||
|
|
if (w < 1000){
|
||
|
|
left_pane_enabled = false
|
||
|
|
}
|
||
|
|
if (w < 800){
|
||
|
|
right_pane_enabled = false
|
||
|
|
}
|
||
|
|
|
||
|
|
// get saved values if present
|
||
|
|
let rval = load_panel_folding_state('right')
|
||
|
|
if (rval['exists']){
|
||
|
|
right_pane_enabled = rval['value']
|
||
|
|
}
|
||
|
|
let lval = load_panel_folding_state('left')
|
||
|
|
if (lval['exists']){
|
||
|
|
left_pane_enabled = lval['value']
|
||
|
|
}
|
||
|
|
|
||
|
|
// default = enabled, so we only need to disable
|
||
|
|
if (!left_pane_enabled){
|
||
|
|
disable_side_bar(document.getElementById('left_pane'), document.getElementById('left_pane_fold_header'))
|
||
|
|
}
|
||
|
|
if (!right_pane_enabled){
|
||
|
|
disable_side_bar(document.getElementById('right_pane'), document.getElementById('right_pane_fold_header'))
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function init_pane_folding(header){
|
||
|
|
set_correct_header_symbol(header);
|
||
|
|
header.addEventListener('click', handle_toggle_side_bar);
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
set_pane_folding_start()
|
||
|
|
init_pane_folding(document.getElementById('left_pane_fold_header'));
|
||
|
|
init_pane_folding(document.getElementById('right_pane_fold_header'));
|
||
|
|
|
||
|
|
document.getElementById('left_pane_toggle_nav').addEventListener('click', handle_toggle_side_bar_button);
|
||
|
|
document.getElementById('right_pane_toggle_nav').addEventListener('click', handle_toggle_side_bar_button);
|
||
|
|
</script>
|
||
|
|
|
||
|
|
{footer_js_inclusions}
|
||
|
|
{dynamic_footer_includes}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|