mirror of
https://github.com/ganelson/inform.git
synced 2024-07-08 01:54:21 +03:00
294 lines
38 KiB
HTML
294 lines
38 KiB
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
|
<html>
|
|
<head>
|
|
<title>Styles and Scripts</title>
|
|
<link href="../docs-assets/Breadcrumbs.css" rel="stylesheet" rev="stylesheet" type="text/css">
|
|
<meta name="viewport" content="width=device-width initial-scale=1">
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
|
<meta http-equiv="Content-Language" content="en-gb">
|
|
|
|
<link href="../docs-assets/Contents.css" rel="stylesheet" rev="stylesheet" type="text/css">
|
|
<link href="../docs-assets/Progress.css" rel="stylesheet" rev="stylesheet" type="text/css">
|
|
<link href="../docs-assets/Navigation.css" rel="stylesheet" rev="stylesheet" type="text/css">
|
|
<link href="../docs-assets/Fonts.css" rel="stylesheet" rev="stylesheet" type="text/css">
|
|
<link href="../docs-assets/Base.css" rel="stylesheet" rev="stylesheet" type="text/css">
|
|
<link href="../docs-assets/Colours.css" rel="stylesheet" rev="stylesheet" type="text/css">
|
|
|
|
</head>
|
|
<body class="commentary-font">
|
|
<nav role="navigation">
|
|
<h1><a href="../overview.html">
|
|
<img src="../docs-assets/Inform.png" height=72">
|
|
</a></h1>
|
|
<ul><li><a href="../overview.html">home</a></li>
|
|
</ul><h2>Compiler</h2><ul>
|
|
<li><a href="../structure.html">structure</a></li>
|
|
<li><a href="../inbuildn.html">inbuild</a></li>
|
|
<li><a href="../inform7n.html">inform7</a></li>
|
|
<li><a href="../intern.html">inter</a></li>
|
|
<li><a href="../services.html">services</a></li>
|
|
<li><a href="../secrets.html">secrets</a></li>
|
|
</ul><h2>Other Tools</h2><ul>
|
|
<li><a href="../inblorbn.html">inblorb</a></li>
|
|
<li><a href="../indocn.html">indoc</a></li>
|
|
<li><a href="../inform6.html">inform6</a></li>
|
|
<li><a href="../inpolicyn.html">inpolicy</a></li>
|
|
<li><a href="../inrtpsn.html">inrtps</a></li>
|
|
</ul><h2>Resources</h2><ul>
|
|
<li><a href="../extensions.html">extensions</a></li>
|
|
<li><a href="../kits.html">kits</a></li>
|
|
</ul><h2>Repository</h2><ul>
|
|
<li><a href="https://github.com/ganelson/inform"><img src="../docs-assets/github.png" height=18> github</a></li>
|
|
</ul><h2>Related Projects</h2><ul>
|
|
<li><a href="../../../inweb/index.html">inweb</a></li>
|
|
<li><a href="../../../intest/index.html">intest</a></li>
|
|
|
|
</ul>
|
|
</nav>
|
|
<main role="main">
|
|
<!--Weave of 'Styles and Scripts' generated by Inweb-->
|
|
<div class="breadcrumbs">
|
|
<ul class="crumbs"><li><a href="../overview.html">Home</a></li><li><a href="../intern.html">Inter Modules</a></li><li><a href="index.html">index</a></li><li><a href="index.html#2">Chapter 2: Utilities</a></li><li><b>Styles and Scripts</b></li></ul></div>
|
|
<p class="purpose">CSS and Javascripts embedded into the body of index pages.</p>
|
|
|
|
<p class="commentary firstcommentary"><a id="SP1" class="paragraph-anchor"></a><b>§1. </b>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.
|
|
</p>
|
|
|
|
<p class="commentary">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 <span class="extract"><span class="extract-syntax">state</span></span>, which will only
|
|
happen when it was created by <a href="index.html" class="internal">index</a>.
|
|
</p>
|
|
|
|
<pre class="definitions code-font"><span class="definition-keyword">define</span> <span class="constant-syntax">ADDITIONAL_SCRIPTING_HTML_CALLBACK</span><span class="plain-syntax"> </span><a href="2-sas.html#SP1" class="function-link"><span class="function-syntax">IndexStyles::incorporate</span></a>
|
|
</pre>
|
|
<pre class="displayed-code all-displayed-code code-font">
|
|
<span class="reserved-syntax">void</span><span class="plain-syntax"> </span><span class="function-syntax">IndexStyles::incorporate</span><span class="plain-syntax">(</span><span class="identifier-syntax">OUTPUT_STREAM</span><span class="plain-syntax">, </span><span class="reserved-syntax">void</span><span class="plain-syntax"> *</span><span class="identifier-syntax">state</span><span class="plain-syntax">) {</span>
|
|
<span class="plain-syntax"> </span><span class="reserved-syntax">if</span><span class="plain-syntax"> (</span><span class="identifier-syntax">state</span><span class="plain-syntax">) {</span>
|
|
<span class="plain-syntax"> </span><span class="reserved-syntax">index_page</span><span class="plain-syntax"> *</span><span class="identifier-syntax">current_page</span><span class="plain-syntax"> = (</span><span class="reserved-syntax">index_page</span><span class="plain-syntax"> *) </span><span class="identifier-syntax">state</span><span class="plain-syntax">;</span>
|
|
<span class="plain-syntax"> </span><span class="reserved-syntax">if</span><span class="plain-syntax"> (</span><span class="identifier-syntax">current_page</span><span class="plain-syntax"> == </span><span class="identifier-syntax">NULL</span><span class="plain-syntax">) </span><span class="reserved-syntax">return</span><span class="plain-syntax">;</span>
|
|
<span class="plain-syntax"> </span><span class="reserved-syntax">index_session</span><span class="plain-syntax"> *</span><span class="identifier-syntax">session</span><span class="plain-syntax"> = </span><span class="identifier-syntax">current_page</span><span class="plain-syntax">-></span><span class="element-syntax">for_session</span><span class="plain-syntax">;</span>
|
|
<span class="plain-syntax"> </span><span class="named-paragraph-container code-font"><a href="2-sas.html#SP1_1" class="named-paragraph-link"><span class="named-paragraph">Incorporate some CSS</span><span class="named-paragraph-number">1.1</span></a></span><span class="plain-syntax">;</span>
|
|
<span class="plain-syntax"> </span><span class="named-paragraph-container code-font"><a href="2-sas.html#SP1_2" class="named-paragraph-link"><span class="named-paragraph">Incorporate some Javascript</span><span class="named-paragraph-number">1.2</span></a></span><span class="plain-syntax">;</span>
|
|
<span class="plain-syntax"> }</span>
|
|
<span class="plain-syntax">}</span>
|
|
</pre>
|
|
<p class="commentary firstcommentary"><a id="SP1_1" class="paragraph-anchor"></a><b>§1.1. </b>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 <a href="2-ii.html" class="internal">Index Interpreter</a>, so that's not fixed on every
|
|
run of Inform.
|
|
</p>
|
|
|
|
<p class="commentary"><span class="named-paragraph-container code-font"><span class="named-paragraph-defn">Incorporate some CSS</span><span class="named-paragraph-number">1.1</span></span><span class="comment-syntax"> =</span>
|
|
</p>
|
|
|
|
<pre class="displayed-code all-displayed-code code-font">
|
|
<span class="plain-syntax"> </span><span class="identifier-syntax">HTML::incorporate_CSS</span><span class="plain-syntax">(</span><span class="identifier-syntax">OUT</span><span class="plain-syntax">, </span><span class="identifier-syntax">InstalledFiles::filename</span><span class="plain-syntax">(</span><span class="identifier-syntax">CSS_FOR_INDEX_PAGES_IRES</span><span class="plain-syntax">));</span>
|
|
<span class="plain-syntax"> </span><span class="identifier-syntax">HTML_OPEN_WITH</span><span class="plain-syntax">(</span><span class="string-syntax">"style"</span><span class="plain-syntax">, </span><span class="string-syntax">"type=\"text/css\" media=\"screen, print\""</span><span class="plain-syntax">);</span>
|
|
<span class="plain-syntax"> </span><span class="reserved-syntax">index_page</span><span class="plain-syntax"> *</span><span class="identifier-syntax">ip</span><span class="plain-syntax">;</span>
|
|
<span class="plain-syntax"> </span><span class="identifier-syntax">linked_list</span><span class="plain-syntax"> *</span><span class="identifier-syntax">L</span><span class="plain-syntax"> = </span><a href="1-ia.html#SP7" class="function-link"><span class="function-syntax">Indexing::get_list_of_pages</span></a><span class="plain-syntax">(</span><span class="identifier-syntax">session</span><span class="plain-syntax">);</span>
|
|
<span class="plain-syntax"> </span><span class="identifier-syntax">LOOP_OVER_LINKED_LIST</span><span class="plain-syntax">(</span><span class="identifier-syntax">ip</span><span class="plain-syntax">, </span><span class="reserved-syntax">index_page</span><span class="plain-syntax">, </span><span class="identifier-syntax">L</span><span class="plain-syntax">) {</span>
|
|
<span class="plain-syntax"> </span><span class="reserved-syntax">index_element</span><span class="plain-syntax"> *</span><span class="identifier-syntax">ie</span><span class="plain-syntax">;</span>
|
|
<span class="plain-syntax"> </span><span class="identifier-syntax">LOOP_OVER_LINKED_LIST</span><span class="plain-syntax">(</span><span class="identifier-syntax">ie</span><span class="plain-syntax">, </span><span class="reserved-syntax">index_element</span><span class="plain-syntax">, </span><span class="identifier-syntax">ip</span><span class="plain-syntax">-></span><span class="element-syntax">elements</span><span class="plain-syntax">) {</span>
|
|
<span class="plain-syntax"> </span><span class="identifier-syntax">WRITE</span><span class="plain-syntax">(</span><span class="string-syntax">"#box%d_%d {\n"</span><span class="plain-syntax">, </span><span class="identifier-syntax">ip</span><span class="plain-syntax">-></span><span class="identifier-syntax">allocation_id</span><span class="plain-syntax">+1, </span><span class="identifier-syntax">ie</span><span class="plain-syntax">-></span><span class="element-syntax">atomic_number</span><span class="plain-syntax">);</span>
|
|
<span class="plain-syntax"> </span><span class="identifier-syntax">WRITE</span><span class="plain-syntax">(</span><span class="string-syntax">" background: #%S;\n"</span><span class="plain-syntax">, </span><span class="identifier-syntax">ip</span><span class="plain-syntax">-></span><span class="element-syntax">key_colour</span><span class="plain-syntax">);</span>
|
|
<span class="plain-syntax"> </span><span class="identifier-syntax">WRITE</span><span class="plain-syntax">(</span><span class="string-syntax">"}\n"</span><span class="plain-syntax">);</span>
|
|
<span class="plain-syntax"> </span><span class="identifier-syntax">WRITE</span><span class="plain-syntax">(</span><span class="string-syntax">"#minibox%d_%d {\n"</span><span class="plain-syntax">, </span><span class="identifier-syntax">ip</span><span class="plain-syntax">-></span><span class="identifier-syntax">allocation_id</span><span class="plain-syntax">+1, </span><span class="identifier-syntax">ie</span><span class="plain-syntax">-></span><span class="element-syntax">atomic_number</span><span class="plain-syntax">);</span>
|
|
<span class="plain-syntax"> </span><span class="identifier-syntax">WRITE</span><span class="plain-syntax">(</span><span class="string-syntax">" background: #%S;\n"</span><span class="plain-syntax">, </span><span class="identifier-syntax">ip</span><span class="plain-syntax">-></span><span class="element-syntax">key_colour</span><span class="plain-syntax">);</span>
|
|
<span class="plain-syntax"> </span><span class="identifier-syntax">WRITE</span><span class="plain-syntax">(</span><span class="string-syntax">"}\n"</span><span class="plain-syntax">);</span>
|
|
<span class="plain-syntax"> }</span>
|
|
<span class="plain-syntax"> }</span>
|
|
<span class="plain-syntax"> </span><span class="identifier-syntax">HTML_CLOSE</span><span class="plain-syntax">(</span><span class="string-syntax">"style"</span><span class="plain-syntax">);</span>
|
|
</pre>
|
|
<ul class="endnotetexts"><li>This code is used in <a href="2-sas.html#SP1">§1</a>.</li></ul>
|
|
<p class="commentary firstcommentary"><a id="SP1_2" class="paragraph-anchor"></a><b>§1.2. </b>Now we come to the Javascript. This varies much more from page to page, and
|
|
is generated procedurally below.
|
|
</p>
|
|
|
|
<p class="commentary"><span class="named-paragraph-container code-font"><span class="named-paragraph-defn">Incorporate some Javascript</span><span class="named-paragraph-number">1.2</span></span><span class="comment-syntax"> =</span>
|
|
</p>
|
|
|
|
<pre class="displayed-code all-displayed-code code-font">
|
|
<span class="plain-syntax"> </span><span class="identifier-syntax">HTML_OPEN_WITH</span><span class="plain-syntax">(</span><span class="string-syntax">"script"</span><span class="plain-syntax">, </span><span class="string-syntax">"type=\"text/javascript\""</span><span class="plain-syntax">);</span>
|
|
<span class="plain-syntax"> </span><span class="identifier-syntax">WRITE</span><span class="plain-syntax">(</span><span class="string-syntax">"var qq; window.onload = function() {\n"</span><span class="plain-syntax">);</span>
|
|
<span class="plain-syntax"> </span><span class="identifier-syntax">WRITE</span><span class="plain-syntax">(</span><span class="string-syntax">" if (location.search.length > 0) {\n"</span><span class="plain-syntax">);</span>
|
|
<span class="plain-syntax"> </span><span class="identifier-syntax">WRITE</span><span class="plain-syntax">(</span><span class="string-syntax">" qq = location.search.substring(1, location.search.length);\n"</span><span class="plain-syntax">);</span>
|
|
<span class="plain-syntax"> </span><span class="identifier-syntax">WRITE</span><span class="plain-syntax">(</span><span class="string-syntax">" show_only_one_element(qq);\n"</span><span class="plain-syntax">);</span>
|
|
<span class="plain-syntax"> </span><span class="identifier-syntax">WRITE</span><span class="plain-syntax">(</span><span class="string-syntax">" }\n"</span><span class="plain-syntax">);</span>
|
|
<span class="plain-syntax"> </span><span class="identifier-syntax">WRITE</span><span class="plain-syntax">(</span><span class="string-syntax">"}\n"</span><span class="plain-syntax">);</span>
|
|
<span class="plain-syntax"> </span><span class="named-paragraph-container code-font"><a href="2-sas.html#SP1_2_2" class="named-paragraph-link"><span class="named-paragraph">Write Javascript code for clicking on an element box</span><span class="named-paragraph-number">1.2.2</span></a></span><span class="plain-syntax">;</span>
|
|
<span class="plain-syntax"> </span><span class="named-paragraph-container code-font"><a href="2-sas.html#SP1_2_3" class="named-paragraph-link"><span class="named-paragraph">Write Javascript code for clicking on the sidebar</span><span class="named-paragraph-number">1.2.3</span></a></span><span class="plain-syntax">;</span>
|
|
|
|
<span class="plain-syntax"> </span><span class="named-paragraph-container code-font"><a href="2-sas.html#SP1_2_4" class="named-paragraph-link"><span class="named-paragraph">Write Javascript code for showing every element on the page</span><span class="named-paragraph-number">1.2.4</span></a></span><span class="plain-syntax">;</span>
|
|
<span class="plain-syntax"> </span><span class="named-paragraph-container code-font"><a href="2-sas.html#SP1_2_5" class="named-paragraph-link"><span class="named-paragraph">Write Javascript code for showing only one element on the page</span><span class="named-paragraph-number">1.2.5</span></a></span><span class="plain-syntax">;</span>
|
|
<span class="plain-syntax"> </span><span class="named-paragraph-container code-font"><a href="2-sas.html#SP1_2_6" class="named-paragraph-link"><span class="named-paragraph">Write Javascript code for entering the periodic table display</span><span class="named-paragraph-number">1.2.6</span></a></span><span class="plain-syntax">;</span>
|
|
|
|
<span class="plain-syntax"> </span><span class="named-paragraph-container code-font"><a href="2-sas.html#SP1_2_7" class="named-paragraph-link"><span class="named-paragraph">Write Javascript code for showing and hiding a single element</span><span class="named-paragraph-number">1.2.7</span></a></span><span class="plain-syntax">;</span>
|
|
<span class="plain-syntax"> </span><span class="named-paragraph-container code-font"><a href="2-sas.html#SP1_2_8" class="named-paragraph-link"><span class="named-paragraph">Write Javascript code for lighting up or greying down an element box</span><span class="named-paragraph-number">1.2.8</span></a></span><span class="plain-syntax">;</span>
|
|
<span class="plain-syntax"> </span><span class="identifier-syntax">HTML_CLOSE</span><span class="plain-syntax">(</span><span class="string-syntax">"script"</span><span class="plain-syntax">);</span>
|
|
</pre>
|
|
<ul class="endnotetexts"><li>This code is used in <a href="2-sas.html#SP1">§1</a>.</li></ul>
|
|
<p class="commentary firstcommentary"><a id="SP1_2_1" class="paragraph-anchor"></a><b>§1.2.1. </b>When loaded in a browser, a page can be in one of three states:
|
|
</p>
|
|
|
|
<ul class="items"><li>(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;
|
|
</li><li>(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;
|
|
</li><li>(3) With the periodic table open, and all boxes lit up, and no elements
|
|
visible on the page below.
|
|
</li></ul>
|
|
<p class="commentary">The page loads in state (1). Note that on a page with just one element,
|
|
states (1) and (2) are indistinguishable.
|
|
</p>
|
|
|
|
<p class="commentary">We'll structure the Javascript functions on three levels. At the top level,
|
|
we have functions called when buttons on the page are clicked:
|
|
</p>
|
|
|
|
<p class="commentary firstcommentary"><a id="SP1_2_2" class="paragraph-anchor"></a><b>§1.2.2. </b>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.)
|
|
</p>
|
|
|
|
<p class="commentary"><span class="named-paragraph-container code-font"><span class="named-paragraph-defn">Write Javascript code for clicking on an element box</span><span class="named-paragraph-number">1.2.2</span></span><span class="comment-syntax"> =</span>
|
|
</p>
|
|
|
|
<pre class="displayed-code all-displayed-code code-font">
|
|
<span class="plain-syntax"> </span><span class="identifier-syntax">WRITE</span><span class="plain-syntax">(</span><span class="string-syntax">"function click_element_box(id) {\n"</span><span class="plain-syntax">);</span>
|
|
<span class="plain-syntax"> </span><span class="identifier-syntax">WRITE</span><span class="plain-syntax">(</span><span class="string-syntax">" if (document.getElementById(id).style.display == 'none') {\n"</span><span class="plain-syntax">);</span>
|
|
<span class="plain-syntax"> </span><span class="identifier-syntax">WRITE</span><span class="plain-syntax">(</span><span class="string-syntax">" show_only_one_element(id);\n"</span><span class="plain-syntax">);</span>
|
|
<span class="plain-syntax"> </span><span class="identifier-syntax">WRITE</span><span class="plain-syntax">(</span><span class="string-syntax">" } else {\n"</span><span class="plain-syntax">);</span>
|
|
<span class="plain-syntax"> </span><span class="identifier-syntax">WRITE</span><span class="plain-syntax">(</span><span class="string-syntax">" var x = 0;\n"</span><span class="plain-syntax">);</span>
|
|
<span class="plain-syntax"> </span><span class="reserved-syntax">int</span><span class="plain-syntax"> </span><span class="identifier-syntax">i</span><span class="plain-syntax">;</span>
|
|
<span class="plain-syntax"> </span><span class="reserved-syntax">for</span><span class="plain-syntax"> (</span><span class="identifier-syntax">i</span><span class="plain-syntax">=1; </span><span class="identifier-syntax">i</span><span class="function-syntax"><=current_page-></span><span class="element-syntax">no_elements</span><span class="plain-syntax">; </span><span class="identifier-syntax">i</span><span class="plain-syntax">++)</span>
|
|
<span class="plain-syntax"> </span><span class="identifier-syntax">WRITE</span><span class="plain-syntax">(</span><span class="string-syntax">" if (document.getElementById('segment%d').style.display == '') { x++; }\n"</span><span class="plain-syntax">, </span><span class="identifier-syntax">i</span><span class="plain-syntax">);</span>
|
|
<span class="plain-syntax"> </span><span class="identifier-syntax">WRITE</span><span class="plain-syntax">(</span><span class="string-syntax">" if (x == 1) { show_all_elements(); }\n"</span><span class="plain-syntax">);</span>
|
|
<span class="plain-syntax"> </span><span class="identifier-syntax">WRITE</span><span class="plain-syntax">(</span><span class="string-syntax">" else { show_only_one_element(id); }\n"</span><span class="plain-syntax">);</span>
|
|
<span class="plain-syntax"> </span><span class="identifier-syntax">WRITE</span><span class="plain-syntax">(</span><span class="string-syntax">" }\n"</span><span class="plain-syntax">);</span>
|
|
<span class="plain-syntax"> </span><span class="identifier-syntax">WRITE</span><span class="plain-syntax">(</span><span class="string-syntax">"}\n"</span><span class="plain-syntax">);</span>
|
|
</pre>
|
|
<ul class="endnotetexts"><li>This code is used in <a href="2-sas.html#SP1_2">§1.2</a>.</li></ul>
|
|
<p class="commentary firstcommentary"><a id="SP1_2_3" class="paragraph-anchor"></a><b>§1.2.3. </b>If we're in state (1) or (2), go to state (3); if we're in state (3), go to
|
|
state (1).
|
|
</p>
|
|
|
|
<p class="commentary"><span class="named-paragraph-container code-font"><span class="named-paragraph-defn">Write Javascript code for clicking on the sidebar</span><span class="named-paragraph-number">1.2.3</span></span><span class="comment-syntax"> =</span>
|
|
</p>
|
|
|
|
<pre class="displayed-code all-displayed-code code-font">
|
|
<span class="plain-syntax"> </span><span class="identifier-syntax">WRITE</span><span class="plain-syntax">(</span><span class="string-syntax">"function click_sidebar() {\n"</span><span class="plain-syntax">);</span>
|
|
<span class="plain-syntax"> </span><span class="identifier-syntax">WRITE</span><span class="plain-syntax">(</span><span class="string-syntax">" if (document.getElementById('surround0').style.display == 'none') {\n"</span><span class="plain-syntax">);</span>
|
|
<span class="plain-syntax"> </span><span class="identifier-syntax">WRITE</span><span class="plain-syntax">(</span><span class="string-syntax">" enter_periodic_table();\n"</span><span class="plain-syntax">);</span>
|
|
<span class="plain-syntax"> </span><span class="identifier-syntax">WRITE</span><span class="plain-syntax">(</span><span class="string-syntax">" } else {\n"</span><span class="plain-syntax">);</span>
|
|
<span class="plain-syntax"> </span><span class="identifier-syntax">WRITE</span><span class="plain-syntax">(</span><span class="string-syntax">" show_all_elements();\n"</span><span class="plain-syntax">);</span>
|
|
<span class="plain-syntax"> </span><span class="identifier-syntax">WRITE</span><span class="plain-syntax">(</span><span class="string-syntax">" }\n"</span><span class="plain-syntax">);</span>
|
|
<span class="plain-syntax"> </span><span class="identifier-syntax">WRITE</span><span class="plain-syntax">(</span><span class="string-syntax">"}\n"</span><span class="plain-syntax">);</span>
|
|
</pre>
|
|
<ul class="endnotetexts"><li>This code is used in <a href="2-sas.html#SP1_2">§1.2</a>.</li></ul>
|
|
<p class="commentary firstcommentary"><a id="SP1_2_4" class="paragraph-anchor"></a><b>§1.2.4. </b>At the middle level of our Javascript, we have functions which move the
|
|
page to a new state. This routine goes to state (1):
|
|
</p>
|
|
|
|
<p class="commentary"><span class="named-paragraph-container code-font"><span class="named-paragraph-defn">Write Javascript code for showing every element on the page</span><span class="named-paragraph-number">1.2.4</span></span><span class="comment-syntax"> =</span>
|
|
</p>
|
|
|
|
<pre class="displayed-code all-displayed-code code-font">
|
|
<span class="plain-syntax"> </span><span class="identifier-syntax">WRITE</span><span class="plain-syntax">(</span><span class="string-syntax">"function show_all_elements() {\n"</span><span class="plain-syntax">);</span>
|
|
<span class="plain-syntax"> </span><span class="reserved-syntax">for</span><span class="plain-syntax"> (</span><span class="reserved-syntax">int</span><span class="plain-syntax"> </span><span class="identifier-syntax">i</span><span class="plain-syntax">=1; </span><span class="identifier-syntax">i</span><span class="function-syntax"><=current_page-></span><span class="element-syntax">no_elements</span><span class="plain-syntax">; </span><span class="identifier-syntax">i</span><span class="plain-syntax">++) {</span>
|
|
<span class="plain-syntax"> </span><span class="identifier-syntax">WRITE</span><span class="plain-syntax">(</span><span class="string-syntax">" show_element('segment%d');\n"</span><span class="plain-syntax">, </span><span class="identifier-syntax">i</span><span class="plain-syntax">);</span>
|
|
<span class="plain-syntax"> </span><span class="identifier-syntax">WRITE</span><span class="plain-syntax">(</span><span class="string-syntax">" light_up('segment%d');\n"</span><span class="plain-syntax">, </span><span class="identifier-syntax">i</span><span class="plain-syntax">);</span>
|
|
<span class="plain-syntax"> }</span>
|
|
<span class="plain-syntax"> </span><span class="identifier-syntax">WRITE</span><span class="plain-syntax">(</span><span class="string-syntax">" }\n"</span><span class="plain-syntax">);</span>
|
|
</pre>
|
|
<ul class="endnotetexts"><li>This code is used in <a href="2-sas.html#SP1_2">§1.2</a>.</li></ul>
|
|
<p class="commentary firstcommentary"><a id="SP1_2_5" class="paragraph-anchor"></a><b>§1.2.5. </b>This routine goes to state (2), where the <span class="extract"><span class="extract-syntax">id</span></span> is the ID of the content
|
|
element — <span class="extract"><span class="extract-syntax">segment1</span></span>, <span class="extract"><span class="extract-syntax">segment2</span></span>, ...
|
|
</p>
|
|
|
|
<p class="commentary"><span class="named-paragraph-container code-font"><span class="named-paragraph-defn">Write Javascript code for showing only one element on the page</span><span class="named-paragraph-number">1.2.5</span></span><span class="comment-syntax"> =</span>
|
|
</p>
|
|
|
|
<pre class="displayed-code all-displayed-code code-font">
|
|
<span class="plain-syntax"> </span><span class="identifier-syntax">WRITE</span><span class="plain-syntax">(</span><span class="string-syntax">"function show_only_one_element(id) {\n"</span><span class="plain-syntax">);</span>
|
|
<span class="plain-syntax"> </span><span class="reserved-syntax">for</span><span class="plain-syntax"> (</span><span class="reserved-syntax">int</span><span class="plain-syntax"> </span><span class="identifier-syntax">i</span><span class="plain-syntax">=1; </span><span class="identifier-syntax">i</span><span class="function-syntax"><=current_page-></span><span class="element-syntax">no_elements</span><span class="plain-syntax">; </span><span class="identifier-syntax">i</span><span class="plain-syntax">++) {</span>
|
|
<span class="plain-syntax"> </span><span class="identifier-syntax">WRITE</span><span class="plain-syntax">(</span><span class="string-syntax">" hide_element('segment%d');\n"</span><span class="plain-syntax">, </span><span class="identifier-syntax">i</span><span class="plain-syntax">);</span>
|
|
<span class="plain-syntax"> </span><span class="identifier-syntax">WRITE</span><span class="plain-syntax">(</span><span class="string-syntax">" light_down('segment%d');\n"</span><span class="plain-syntax">, </span><span class="identifier-syntax">i</span><span class="plain-syntax">);</span>
|
|
<span class="plain-syntax"> }</span>
|
|
<span class="plain-syntax"> </span><span class="identifier-syntax">WRITE</span><span class="plain-syntax">(</span><span class="string-syntax">" show_element(id);\n"</span><span class="plain-syntax">);</span>
|
|
<span class="plain-syntax"> </span><span class="identifier-syntax">WRITE</span><span class="plain-syntax">(</span><span class="string-syntax">" light_up(id);\n"</span><span class="plain-syntax">);</span>
|
|
<span class="plain-syntax"> </span><span class="identifier-syntax">WRITE</span><span class="plain-syntax">(</span><span class="string-syntax">"}\n"</span><span class="plain-syntax">);</span>
|
|
</pre>
|
|
<ul class="endnotetexts"><li>This code is used in <a href="2-sas.html#SP1_2">§1.2</a>.</li></ul>
|
|
<p class="commentary firstcommentary"><a id="SP1_2_6" class="paragraph-anchor"></a><b>§1.2.6. </b>This routine goes to state (3):
|
|
</p>
|
|
|
|
<p class="commentary"><span class="named-paragraph-container code-font"><span class="named-paragraph-defn">Write Javascript code for entering the periodic table display</span><span class="named-paragraph-number">1.2.6</span></span><span class="comment-syntax"> =</span>
|
|
</p>
|
|
|
|
<pre class="displayed-code all-displayed-code code-font">
|
|
<span class="plain-syntax"> </span><span class="identifier-syntax">WRITE</span><span class="plain-syntax">(</span><span class="string-syntax">"function enter_periodic_table() {\n"</span><span class="plain-syntax">);</span>
|
|
<span class="plain-syntax"> </span><span class="reserved-syntax">for</span><span class="plain-syntax"> (</span><span class="reserved-syntax">int</span><span class="plain-syntax"> </span><span class="identifier-syntax">i</span><span class="plain-syntax">=1; </span><span class="identifier-syntax">i</span><span class="function-syntax"><=current_page-></span><span class="element-syntax">no_elements</span><span class="plain-syntax">; </span><span class="identifier-syntax">i</span><span class="plain-syntax">++) {</span>
|
|
<span class="plain-syntax"> </span><span class="identifier-syntax">WRITE</span><span class="plain-syntax">(</span><span class="string-syntax">" hide_element('segment%d');\n"</span><span class="plain-syntax">, </span><span class="identifier-syntax">i</span><span class="plain-syntax">);</span>
|
|
<span class="plain-syntax"> </span><span class="identifier-syntax">WRITE</span><span class="plain-syntax">(</span><span class="string-syntax">" light_up('segment%d');\n"</span><span class="plain-syntax">, </span><span class="identifier-syntax">i</span><span class="plain-syntax">);</span>
|
|
<span class="plain-syntax"> }</span>
|
|
<span class="plain-syntax"> </span><span class="identifier-syntax">WRITE</span><span class="plain-syntax">(</span><span class="string-syntax">"}\n"</span><span class="plain-syntax">);</span>
|
|
</pre>
|
|
<ul class="endnotetexts"><li>This code is used in <a href="2-sas.html#SP1_2">§1.2</a>.</li></ul>
|
|
<p class="commentary firstcommentary"><a id="SP1_2_7" class="paragraph-anchor"></a><b>§1.2.7. </b>And at the bottom level of the Javascript code we have service functions
|
|
to show, hide and colour things:
|
|
</p>
|
|
|
|
<p class="commentary"><span class="named-paragraph-container code-font"><span class="named-paragraph-defn">Write Javascript code for showing and hiding a single element</span><span class="named-paragraph-number">1.2.7</span></span><span class="comment-syntax"> =</span>
|
|
</p>
|
|
|
|
<pre class="displayed-code all-displayed-code code-font">
|
|
<span class="plain-syntax"> </span><span class="identifier-syntax">WRITE</span><span class="plain-syntax">(</span><span class="string-syntax">"function show_element(id) {\n"</span><span class="plain-syntax">);</span>
|
|
<span class="plain-syntax"> </span><span class="identifier-syntax">WRITE</span><span class="plain-syntax">(</span><span class="string-syntax">" document.getElementById(id).style.display = '';\n"</span><span class="plain-syntax">);</span>
|
|
<span class="plain-syntax"> </span><span class="identifier-syntax">WRITE</span><span class="plain-syntax">(</span><span class="string-syntax">"}\n"</span><span class="plain-syntax">);</span>
|
|
<span class="plain-syntax"> </span><span class="identifier-syntax">WRITE</span><span class="plain-syntax">(</span><span class="string-syntax">"function hide_element(id) {\n"</span><span class="plain-syntax">);</span>
|
|
<span class="plain-syntax"> </span><span class="identifier-syntax">WRITE</span><span class="plain-syntax">(</span><span class="string-syntax">" document.getElementById(id).style.display = 'none';\n"</span><span class="plain-syntax">);</span>
|
|
<span class="plain-syntax"> </span><span class="identifier-syntax">WRITE</span><span class="plain-syntax">(</span><span class="string-syntax">"}\n"</span><span class="plain-syntax">);</span>
|
|
</pre>
|
|
<ul class="endnotetexts"><li>This code is used in <a href="2-sas.html#SP1_2">§1.2</a>.</li></ul>
|
|
<p class="commentary firstcommentary"><a id="SP1_2_8" class="paragraph-anchor"></a><b>§1.2.8. </b><span class="named-paragraph-container code-font"><span class="named-paragraph-defn">Write Javascript code for lighting up or greying down an element box</span><span class="named-paragraph-number">1.2.8</span></span><span class="comment-syntax"> =</span>
|
|
</p>
|
|
|
|
<pre class="displayed-code all-displayed-code code-font">
|
|
<span class="plain-syntax"> </span><span class="identifier-syntax">WRITE</span><span class="plain-syntax">(</span><span class="string-syntax">"function light_up(id) {\n"</span><span class="plain-syntax">);</span>
|
|
<span class="plain-syntax"> </span><span class="named-paragraph-container code-font"><a href="2-sas.html#SP1_2_8_1" class="named-paragraph-link"><span class="named-paragraph">Write Javascript to produce the corresponding icon name</span><span class="named-paragraph-number">1.2.8.1</span></a></span><span class="plain-syntax">;</span>
|
|
<span class="plain-syntax"> </span><span class="identifier-syntax">WRITE</span><span class="plain-syntax">(</span><span class="string-syntax">" document.getElementById(ic).style.background = '#%S';\n"</span><span class="plain-syntax">,</span>
|
|
<span class="plain-syntax"> </span><span class="identifier-syntax">current_page</span><span class="plain-syntax">-></span><span class="element-syntax">key_colour</span><span class="plain-syntax">);</span>
|
|
<span class="plain-syntax"> </span><span class="identifier-syntax">WRITE</span><span class="plain-syntax">(</span><span class="string-syntax">"}\n"</span><span class="plain-syntax">);</span>
|
|
<span class="plain-syntax"> </span><span class="identifier-syntax">WRITE</span><span class="plain-syntax">(</span><span class="string-syntax">"function light_down(id) {\n"</span><span class="plain-syntax">);</span>
|
|
<span class="plain-syntax"> </span><span class="named-paragraph-container code-font"><a href="2-sas.html#SP1_2_8_1" class="named-paragraph-link"><span class="named-paragraph">Write Javascript to produce the corresponding icon name</span><span class="named-paragraph-number">1.2.8.1</span></a></span><span class="plain-syntax">;</span>
|
|
<span class="plain-syntax"> </span><span class="identifier-syntax">WRITE</span><span class="plain-syntax">(</span><span class="string-syntax">" document.getElementById(ic).style.background = '#cccccc';\n"</span><span class="plain-syntax">);</span>
|
|
<span class="plain-syntax"> </span><span class="identifier-syntax">WRITE</span><span class="plain-syntax">(</span><span class="string-syntax">"}\n"</span><span class="plain-syntax">);</span>
|
|
</pre>
|
|
<ul class="endnotetexts"><li>This code is used in <a href="2-sas.html#SP1_2">§1.2</a>.</li></ul>
|
|
<p class="commentary firstcommentary"><a id="SP1_2_8_1" class="paragraph-anchor"></a><b>§1.2.8.1. </b><span class="named-paragraph-container code-font"><span class="named-paragraph-defn">Write Javascript to produce the corresponding icon name</span><span class="named-paragraph-number">1.2.8.1</span></span><span class="comment-syntax"> =</span>
|
|
</p>
|
|
|
|
<pre class="displayed-code all-displayed-code code-font">
|
|
<span class="plain-syntax"> </span><span class="identifier-syntax">WRITE</span><span class="plain-syntax">(</span><span class="string-syntax">" var ic = 'box%d_1';\n"</span><span class="plain-syntax">, </span><span class="identifier-syntax">current_page</span><span class="plain-syntax">-></span><span class="identifier-syntax">allocation_id</span><span class="plain-syntax">+1);</span>
|
|
<span class="plain-syntax"> </span><span class="reserved-syntax">for</span><span class="plain-syntax"> (</span><span class="reserved-syntax">int</span><span class="plain-syntax"> </span><span class="identifier-syntax">i</span><span class="plain-syntax">=2; </span><span class="identifier-syntax">i</span><span class="function-syntax"><=current_page-></span><span class="element-syntax">no_elements</span><span class="plain-syntax">; </span><span class="identifier-syntax">i</span><span class="plain-syntax">++)</span>
|
|
<span class="plain-syntax"> </span><span class="identifier-syntax">WRITE</span><span class="plain-syntax">(</span><span class="string-syntax">" if (id == 'segment%d') { ic = 'box%d_%d';}\n"</span><span class="plain-syntax">,</span>
|
|
<span class="plain-syntax"> </span><span class="identifier-syntax">i</span><span class="plain-syntax">, </span><span class="identifier-syntax">current_page</span><span class="plain-syntax">-></span><span class="identifier-syntax">allocation_id</span><span class="plain-syntax">+1, </span><span class="identifier-syntax">i</span><span class="plain-syntax">);</span>
|
|
</pre>
|
|
<ul class="endnotetexts"><li>This code is used in <a href="2-sas.html#SP1_2_8">§1.2.8</a> (twice).</li></ul>
|
|
<nav role="progress"><div class="progresscontainer">
|
|
<ul class="progressbar"><li class="progressprev"><a href="2-ii.html">❮</a></li><li class="progresschapter"><a href="P-wtmd.html">P</a></li><li class="progresschapter"><a href="1-im.html">1</a></li><li class="progresscurrentchapter">2</li><li class="progresssection"><a href="2-il.html">il</a></li><li class="progresssection"><a href="2-ii.html">ii</a></li><li class="progresscurrent">sas</li><li class="progresssection"><a href="2-iu.html">iu</a></li><li class="progresssection"><a href="2-ir.html">ir</a></li><li class="progresssection"><a href="2-lxc.html">lxc</a></li><li class="progresssection"><a href="2-fi.html">fi</a></li><li class="progresssection"><a href="2-fs.html">fs</a></li><li class="progresschapter"><a href="3-tpt.html">3</a></li><li class="progresschapter"><a href="4-mc.html">4</a></li><li class="progressnext"><a href="2-iu.html">❯</a></li></ul></div>
|
|
</nav><!--End of weave-->
|
|
|
|
</main>
|
|
</body>
|
|
</html>
|
|
|