111 lines
3.5 KiB
JavaScript
111 lines
3.5 KiB
JavaScript
|
/*
|
||
|
|
Resizing the pane of the table of contents to fit the titles, with
|
||
|
|
a draggable right edge to change the with of the table of contents pane.
|
||
|
|
*/
|
||
|
|
|
||
|
|
var resizer_width = 4;
|
||
|
|
var resizer_with_borders = 6;
|
||
|
|
|
||
|
|
function current_full_toc_width() {
|
||
|
|
var width = 0;
|
||
|
|
K.map(".section-title-text",
|
||
|
|
function (elt) {
|
||
|
|
width = Math.max(width, K.right(elt));
|
||
|
|
});
|
||
|
|
// Add room for scrollbar:
|
||
|
|
//width += K.hpad("#toc_items") * 3.0 + resizer_width;
|
||
|
|
let caret = K.get(".caret");
|
||
|
|
let caret_width = caret ? K.hpad(caret) : 16; // Need to adjust for now nested sections
|
||
|
|
width += K.hpad("#toc") + caret_width + K.hpad("#toc ul")
|
||
|
|
// + K.hpad("#toc_items") //* 1.5 // room for scroll bar
|
||
|
|
+ resizer_width + 8; // Room for scroll bar
|
||
|
|
return width;
|
||
|
|
}
|
||
|
|
|
||
|
|
function resize_toc(force_fit) {
|
||
|
|
if (K.visible("#toc") && (force_fit || K.attr("#fit_check", "active") === "true")) {
|
||
|
|
const toc_width = current_full_toc_width();
|
||
|
|
const text_width = K.width("#middle")
|
||
|
|
- toc_width - resizer_with_borders;
|
||
|
|
//K.width("#text", text_width);
|
||
|
|
K.width(displayed_text(), text_width);
|
||
|
|
K.width("#toc", toc_width);
|
||
|
|
//resize_captions();
|
||
|
|
|
||
|
|
resize_images();
|
||
|
|
|
||
|
|
//K.height(".resizer", Math.max(K.height("#toc"),
|
||
|
|
// K.height("#toc_items")));
|
||
|
|
//console.log("resize_toc: " + text_width, toc_width);
|
||
|
|
|
||
|
|
/*
|
||
|
|
resize_images();
|
||
|
|
adjust_widths();
|
||
|
|
center_elements();
|
||
|
|
set_annotate_max_width();
|
||
|
|
set_code_comment_width();
|
||
|
|
set_imagecode_width();
|
||
|
|
*/
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function initResize(e) {
|
||
|
|
e.preventDefault();
|
||
|
|
window.addEventListener("mousemove", Resize, false);
|
||
|
|
window.addEventListener("mouseup", stopResize, false);
|
||
|
|
}
|
||
|
|
|
||
|
|
function Resize(e) {
|
||
|
|
e.preventDefault();
|
||
|
|
// If fit is on, turn it off if the divider is moved manually.
|
||
|
|
if (K.attr("#fit_check", "active") == "true") {
|
||
|
|
K.get("#fit_check").click();
|
||
|
|
}
|
||
|
|
|
||
|
|
maintain_text_position(
|
||
|
|
function () {
|
||
|
|
//const toc_width = Math.max(0, e.clientX) + K.hpad("#text") + resizer_width;
|
||
|
|
const toc_width = Math.max(0, e.clientX) + K.hpad(displayed_text()) + resizer_width;
|
||
|
|
K.width("#toc", toc_width);
|
||
|
|
//K.width("#text", K.width("#middle") - toc_width);
|
||
|
|
K.width(displayed_text(), K.width("#middle") - toc_width);
|
||
|
|
resize_images();
|
||
|
|
highlight_headers_in_toc();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function stopResize(event) {
|
||
|
|
if (event) {
|
||
|
|
event.preventDefault();
|
||
|
|
}
|
||
|
|
window.removeEventListener("mousemove", Resize, false);
|
||
|
|
window.removeEventListener("mouseup", stopResize, false);
|
||
|
|
}
|
||
|
|
|
||
|
|
window.addEventListener("load", function (event) {
|
||
|
|
|
||
|
|
K.get("#fit_check").addEventListener(
|
||
|
|
"click",
|
||
|
|
function (e) {
|
||
|
|
//console.log("fit_check click");
|
||
|
|
maintain_text_position(resize_toc);
|
||
|
|
if (K.attr(e.srcElement, "active") === "false") {
|
||
|
|
K.attr(e.srcElement, "active", "true");
|
||
|
|
} else {
|
||
|
|
K.attr(e.srcElement, "active", "false");
|
||
|
|
}
|
||
|
|
resize_toc();
|
||
|
|
localStorage.setItem("klammertext_fit", K.attr("#fit_check", "active"));
|
||
|
|
});
|
||
|
|
|
||
|
|
// The native <label for="fit_check"> behavior already forwards
|
||
|
|
// clicks to the checkbox. No additional handler needed.
|
||
|
|
|
||
|
|
K.get("#resizer").addEventListener("mousedown", initResize, false);
|
||
|
|
|
||
|
|
initResize(event);
|
||
|
|
stopResize();
|
||
|
|
resize_toc();
|
||
|
|
define_keypress("F", "#fit_check");
|
||
|
|
});
|