CSS and Javascripts embedded into the body of index pages.

§1. This is a questionable decision: The HTML pages of the index, which have to live inside a project bundle and may be accessed through non-standard URL schemes, do not use external script files. That avoids possible problems with failing to link to said files correctly.

But it means every HTML page in the index has to embed its own CSS and Javascript, and this is done with a callback function which allows us to insert material into the head of an HTML page when it is opened for output. Note that the function acts only when the page was created with state, which will only happen when it was created by index.

define ADDITIONAL_SCRIPTING_HTML_CALLBACK IndexStyles::incorporate

void IndexStyles::incorporate(OUTPUT_STREAM, void *state) {
    if (state) {
        index_page *current_page = (index_page *) state;
        if (current_page == NULL) return;
        index_session *session = current_page->for_session;
        Incorporate some CSS1.1;
        Incorporate some Javascript1.2;
    }
}

§1.1. The CSS is mostly the same every time and is therefore mostly loaded from an external file in the Inform installation; but the colour scheme depends on the structure file loaded by the Index Interpreter, so that's not fixed on every run of Inform.

Incorporate some CSS1.1 =

    HTML_OPEN_WITH("style", "type=\"text/css\" media=\"screen, print\"");
    index_page *ip;
    linked_list *L = Indexing::get_list_of_pages(session);
    LOOP_OVER_LINKED_LIST(ip, index_page, L) {
        index_element *ie;
        LOOP_OVER_LINKED_LIST(ie, index_element, ip->elements) {
            WRITE("#box%d_%d {\n", ip->allocation_id+1, ie->atomic_number);
            WRITE("    background: #%S;\n", ip->key_colour);
            WRITE("}\n");
            WRITE("#minibox%d_%d {\n", ip->allocation_id+1, ie->atomic_number);
            WRITE("    background: #%S;\n", ip->key_colour);
            WRITE("}\n");
        }
    }
    HTML_CLOSE("style");

• This code is used in §1.

§1.2. Now we come to the Javascript. This varies much more from page to page, and is generated procedurally below.

Incorporate some Javascript1.2 =

    HTML_OPEN_WITH("script", "type=\"text/javascript\"");
    WRITE("var qq; window.onload = function() {\n");
    WRITE("    if (location.search.length > 0) {\n");
    WRITE("        qq = location.search.substring(1, location.search.length);\n");
    WRITE("        show_only_one_element(qq);\n");
    WRITE("    }\n");
    WRITE("}\n");
    Write Javascript code for clicking on an element box1.2.2;
    Write Javascript code for clicking on the sidebar1.2.3;

    Write Javascript code for showing every element on the page1.2.4;
    Write Javascript code for showing only one element on the page1.2.5;
    Write Javascript code for entering the periodic table display1.2.6;

    Write Javascript code for showing and hiding a single element1.2.7;
    Write Javascript code for lighting up or greying down an element box1.2.8;
    HTML_CLOSE("script");

• This code is used in §1.

§1.2.1. When loaded in a browser, a page can be in one of three states:

• (1) With the periodic table closed, and all the boxes in the one visible row lit up, and all of the elements on the page visible;
• (2) With the periodic table closed, and all the boxes grey except one which is lit up, and just the one element it corresponds to visible;
• (3) With the periodic table open, and all boxes lit up, and no elements visible on the page below.

The page loads in state (1). Note that on a page with just one element, states (1) and (2) are indistinguishable.

We'll structure the Javascript functions on three levels. At the top level, we have functions called when buttons on the page are clicked:

§1.2.2. This is called when the user clicks on an element box corresponding to something on the current page. If that's hidden, we go to state (2) for the element clicked on. If it's showing, we see which state we're in: if we're in state (2) we go to state (1), and otherwise go to state (2). (The trick is deciding what state we're in: we do that by counting the number of visible elements.)

Write Javascript code for clicking on an element box1.2.2 =

    WRITE("function click_element_box(id) {\n");
    WRITE("    if (document.getElementById(id).style.display == 'none') {\n");
    WRITE("        show_only_one_element(id);\n");
    WRITE("    } else {\n");
    WRITE("        var x = 0;\n");
    int i;
    for (i=1; i<=current_page->no_elements; i++)
        WRITE("        if (document.getElementById('segment%d').style.display == '') { x++; }\n", i);
    WRITE("        if (x == 1) { show_all_elements(); }\n");
    WRITE("        else { show_only_one_element(id); }\n");
    WRITE("    }\n");
    WRITE("}\n");

• This code is used in §1.2.

§1.2.3. If we're in state (1) or (2), go to state (3); if we're in state (3), go to state (1).

Write Javascript code for clicking on the sidebar1.2.3 =

    WRITE("function click_sidebar() {\n");
    WRITE("    if (document.getElementById('surround0').style.display == 'none') {\n");
    WRITE("        enter_periodic_table();\n");
    WRITE("    } else {\n");
    WRITE("        show_all_elements();\n");
    WRITE("    }\n");
    WRITE("}\n");

• This code is used in §1.2.

§1.2.4. At the middle level of our Javascript, we have functions which move the page to a new state. This routine goes to state (1):

Write Javascript code for showing every element on the page1.2.4 =

    WRITE("function show_all_elements() {\n");
    for (int i=1; i<=current_page->no_elements; i++) {
        WRITE("    show_element('segment%d');\n", i);
        WRITE("    light_up('segment%d');\n", i);
    }
    WRITE(" }\n");

• This code is used in §1.2.

§1.2.5. This routine goes to state (2), where the id is the ID of the content element — segment1, segment2, ...

Write Javascript code for showing only one element on the page1.2.5 =

    WRITE("function show_only_one_element(id) {\n");
    for (int i=1; i<=current_page->no_elements; i++) {
        WRITE("    hide_element('segment%d');\n", i);
        WRITE("    light_down('segment%d');\n", i);
    }
    WRITE("    show_element(id);\n");
    WRITE("    light_up(id);\n");
    WRITE("}\n");

• This code is used in §1.2.

§1.2.6. This routine goes to state (3):

Write Javascript code for entering the periodic table display1.2.6 =

    WRITE("function enter_periodic_table() {\n");
    for (int i=1; i<=current_page->no_elements; i++) {
        WRITE("    hide_element('segment%d');\n", i);
        WRITE("    light_up('segment%d');\n", i);
    }
    WRITE("}\n");

• This code is used in §1.2.

§1.2.7. And at the bottom level of the Javascript code we have service functions to show, hide and colour things:

Write Javascript code for showing and hiding a single element1.2.7 =

    WRITE("function show_element(id) {\n");
    WRITE("    document.getElementById(id).style.display = '';\n");
    WRITE("}\n");
    WRITE("function hide_element(id) {\n");
    WRITE("    document.getElementById(id).style.display = 'none';\n");
    WRITE("}\n");

• This code is used in §1.2.

§1.2.8. Write Javascript code for lighting up or greying down an element box1.2.8 =

    WRITE("function light_up(id) {\n");
    Write Javascript to produce the corresponding icon name1.2.8.1;
    WRITE("    document.getElementById(ic).style.background = '#%S';\n",
        current_page->key_colour);
    WRITE("}\n");
    WRITE("function light_down(id) {\n");
    Write Javascript to produce the corresponding icon name1.2.8.1;
    WRITE("    document.getElementById(ic).style.background = '#cccccc';\n");
    WRITE("}\n");

• This code is used in §1.2.

§1.2.8.1. Write Javascript to produce the corresponding icon name1.2.8.1 =

    WRITE("    var ic = 'box%d_1';\n", current_page->allocation_id+1);
    for (int i=2; i<=current_page->no_elements; i++)
        WRITE("    if (id == 'segment%d') { ic = 'box%d_%d';}\n",
            i, current_page->allocation_id+1, i);

• This code is used in §1.2.8 (twice).