ifhub/inform7
1
0
Fork 0
mirror of https://github.com/ganelson/inform.git synced 2024-07-01 06:24:58 +03:00
Code Issues Projects Releases Wiki Activity
inform7/docs/index-module/2-sas.html

292 lines
38 KiB
HTML
Raw Blame History

<!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="../index.html">
<img src="../docs-assets/Inform.png" height=72">
</a></h1>
<ul><li><a href="../index.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>
</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="../index.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>&#167;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">-&gt;</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>&#167;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_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">-&gt;</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">-&gt;</span><span class="identifier-syntax">allocation_id</span><span class="plain-syntax">+1, </span><span class="identifier-syntax">ie</span><span class="plain-syntax">-&gt;</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">-&gt;</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">-&gt;</span><span class="identifier-syntax">allocation_id</span><span class="plain-syntax">+1, </span><span class="identifier-syntax">ie</span><span class="plain-syntax">-&gt;</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">-&gt;</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">&#167;1</a>.</li></ul>
<p class="commentary firstcommentary"><a id="SP1_2" class="paragraph-anchor"></a><b>&#167;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 &gt; 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">&#167;1</a>.</li></ul>
<p class="commentary firstcommentary"><a id="SP1_2_1" class="paragraph-anchor"></a><b>&#167;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>&#167;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">&lt;=current_page-&gt;</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">&#167;1.2</a>.</li></ul>
<p class="commentary firstcommentary"><a id="SP1_2_3" class="paragraph-anchor"></a><b>&#167;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">&#167;1.2</a>.</li></ul>
<p class="commentary firstcommentary"><a id="SP1_2_4" class="paragraph-anchor"></a><b>&#167;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">&lt;=current_page-&gt;</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">&#167;1.2</a>.</li></ul>
<p class="commentary firstcommentary"><a id="SP1_2_5" class="paragraph-anchor"></a><b>&#167;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 &mdash; <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">&lt;=current_page-&gt;</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">&#167;1.2</a>.</li></ul>
<p class="commentary firstcommentary"><a id="SP1_2_6" class="paragraph-anchor"></a><b>&#167;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">&lt;=current_page-&gt;</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">&#167;1.2</a>.</li></ul>
<p class="commentary firstcommentary"><a id="SP1_2_7" class="paragraph-anchor"></a><b>&#167;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">&#167;1.2</a>.</li></ul>
<p class="commentary firstcommentary"><a id="SP1_2_8" class="paragraph-anchor"></a><b>&#167;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">-&gt;</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">&#167;1.2</a>.</li></ul>
<p class="commentary firstcommentary"><a id="SP1_2_8_1" class="paragraph-anchor"></a><b>&#167;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">-&gt;</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">&lt;=current_page-&gt;</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">-&gt;</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">&#167;1.2.8</a> (twice).</li></ul>
<nav role="progress"><div class="progresscontainer">
<ul class="progressbar"><li class="progressprev"><a href="2-ii.html">&#10094;</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">&#10095;</a></li></ul></div>
</nav><!--End of weave-->
</main>
</body>
</html>
Reference in a new issue View git blame Copy permalink