klammertext/sks/document/js/resize_toc.js

/*
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");
});