metanohi/site/projects/totxt/index.org

#+title: totxt
#&summary
Dynamic oldstyle tty webpages with fancy effects.
#&
#+license: bysa, page
#+license: gpl 3+, script

#+javascript: totxt.js

#++show
#+BEGIN_SRC javascript
window.addEventListener('load', function(event){
    load_totxt_generator();
}, false);
#+END_SRC

#++show
#+BEGIN_SRC css
pre.totxt.dynamic0:hover {
    background-color: #ff0000;
    cursor: pointer;
}
#+END_SRC


* totxt&tt

#++show
#+BEGIN_SRC html
<h1 class='totxt'>What is totxt?</h1>
<h2>totxt is a futuristic program</h2>
<p>
totxt is a JavaScript program that transforms text with regular HTML formatting
into text that looks like what you're reading right now. The file <a
href='totxt.js'>totxt.js</a> contains the function <span
class='code'>load_totxt_generator</span>, which, when run, finds text in HTML
elements and converts that text into this. Before reading on, have a look at
the following examples to see how it works:<br /><br />
<a href='http://projects.metanohi.name/totxt/example1.php'>Example 1</a><br />
<a href='http://projects.metanohi.name/totxt/example2.php'>Example 2</a><br />
<a href='http://projects.metanohi.name/totxt/example3.php'>Example 3</a><br />
<br />
You might also want to take a look at how the examples look without the use of totxt:<br /><br />
<a href='http://projects.metanohi.name/totxt/example1.php?n'>Example 1 without totxt</a><br />
<a href='http://projects.metanohi.name/totxt/example2.php?n'>Example 2 without totxt</a><br />
<a href='http://projects.metanohi.name/totxt/example3.php?n'>Example 3 without totxt</a><br />
</p>
<p></p>
<p>totxt is free software; you can redistribute it and/or modify it under the terms of the <a href="http://www.gnu.org/licenses/gpl.html" rel="license">GNU General Public License</a> as published by the Free Software Foundation; either version 3 of the License, or (at your option)
any later version.</p>
<p></p>
<p>
totxt accepts two ways of ignoring default values: a global way, which has an effect on all totxt elements, and a local way, which only has an effect on a particular totxt element. <span class='b'>An example:</span><br />
Before running the <span class='code'>load_totxt_generator</span> function, define this inside a script tag:<br />
    totxt_DYNAMIC = 0<br />
This will make all totxt elements dynamic, i.e. it will be possible to open and close totxt boxes. When closed, only the header is displayed, while in its open state, both the header, the subheader (if any) and the text will be visible. The 0 value means that all totxt elements first appear in their closed forms. Assigning a value of 1 will make all elements start out as open. Any other value than 0 or 1 will not work. Note that, by default, being dynamic also means that an element opens and closes in a sliding motion and that an element is opened by clicking on it and closed by doubleclicking on it.<br />
Another way to defy normal values is to locally define changes. Applying 'dynamic0' as a class to a totxt element, such that it will look something like:<br />
    &lt;h1 class='totxt dynamic0'&gt;A header&lt;/h1&gt;<br />
will have the same effect as defining it the global way, except this will only affect the current element, and not all elements.
</p>
<p><br />Below is a table describing the values of totxt.</p>

<table class='border space'>
    <thead><tr>
        <th>Global variable</th>
        <th>Local definition</th>
        <th>Description</th>
        <th>Default value</th>
    </tr></thead>
    <tbody>
    <tr>
        <td>totxt_WIDTH</td>
        <td>widthX</td>
        <td>Line width</td>
        <td>80</td>
    </tr>
    
    <tr>
        <td>totxt_DYNAMIC</td>
        <td>dynamicX</td>
        <td>Dynamic, open or closed?</td>
        <td>-1 (not dynamic)</td>
    </tr>
    
    <tr>
        <td>totxt_DYNAMIC_SPEED</td>
        <td>speedX</td>
        <td>Speed of line removal/appending when sliding (in ms)</td>
        <td>50</td>
    </tr>
    
    <tr>
        <td>totxt_DYNAMIC_LINES</td>
        <td>linesX</td>
        <td>Amount of line(s) to (dis)appear per function call</td>
        <td>1</td>
    </tr>
    
    <tr>
        <td>totxt_QUICK_DYNAMIC</td>
        <td>quick_dynamic</td>
        <td>Open/close boxes instantly. Do not slide.</td>
        <td>false</td>
    </tr>
    
    <tr>
        <td>totxt_DEL_XWS</td>
        <td>del_excess_whitespace</td>
        <td>Delete excess whitespace</td>
        <td>false</td>
    </tr>
    
    <tr>
        <td>totxt_HEADER_ALIGN</td>
        <td>halignX</td>
        <td>Alignment of header (0 = left, 1 = center, 2 = right)</td>
        <td>1 (center)</td>
    </tr>
    
    <tr>
        <td>totxt_SUBHEADER_ALIGN</td>
        <td>shalignX</td>
        <td>Alignment of subheader</td>
        <td>0 (left)</td>
    </tr>
    
    <tr>
        <td>totxt_TEXT_ALIGN</td>
        <td>talignX</td>
        <td>Alignment of text</td>
        <td>0 (left)</td>
    </tr>
    </tbody>
</table>
<br />
<p class='n'>Furthermore, there are some global variables that can be used to modify the what classes to look for.</p>

<table class='border space'>
    <thead><tr>
        <th>Global variable</th>
        <th>Description</th>
        <th>Default value</th>
    </tr></thead>
    <tbody>
    <tr>
        <td>totxt_CLASSNAME</td>
        <td>Main class to look for. Only elements with this classname has a chance of becoming totxt elements.</td>
        <td>totxt</td>
    </tr>
    
    <tr>
        <td>totxt_DYNAMIC_CLASSNAME</td>
        <td></td>
        <td>dynamic</td>
    </tr>
    
    <tr>
        <td>totxt_DYNSPEED_CLASSNAME</td>
        <td></td>
        <td>speed</td>
    </tr>
    
    <tr>
        <td>totxt_DYNLINES_CLASSNAME</td>
        <td></td>
        <td>lines</td>
    </tr>
    
    <tr>
        <td>totxt_HALIGN_CLASSNAME</td>
        <td></td>
        <td>halign</td>
    </tr>
    
    <tr>
        <td>totxt_SHALIGN_CLASSNAME</td>
        <td></td>
        <td>shalign</td>
    </tr>
    
    <tr>
        <td>totxt_TALIGN_CLASSNAME</td>
        <td></td>
        <td>talign</td>
    </tr>
    
    <tr>
        <td>totxt_WIDTH_CLASSNAME</td>
        <td></td>
        <td>width</td>
    </tr>
    
    <tr>
        <td>totxt_DELXWS_CLASSNAME</td>
        <td></td>
        <td>del_excess_whitespace</td>
    </tr>
    
    <tr>
        <td>totxt_QUICK_CLASSNAME</td>
        <td></td>
        <td>quick_dynamic</td>
    </tr>
    
    <tr>
        <td>totxt_HEADER_ELEMENT</td>
        <td>Element type containing header text and totxt information in form of classes</td>
        <td>H1</td>
    </tr>
    
    <tr>
        <td>totxt_SUBHEADER_ELEMENT</td>
        <td>Element type containing subheader text. Any information in classes will be ignored.</td>
        <td>H2</td>
    </tr>
    
    <tr>
        <td>totxt_TEXT_ELEMENT</td>
        <td>Element type containing text. Any information in classes will be ignored.</td>
        <td>P</td>
    </tr>
    
    </tbody>
</table>
<br />
<p>To use totxt, simply save it in a directory, then import it using a script tag. Something like this:</p>
<pre>
&lt;html&gt;
    &lt;head&gt;
        &lt;script type='text/javascript' src='totxt.js'&gt;&lt;/script&gt;
        &lt;script type='text/javascript'&gt;
            window.onload = load_totxt_generator
        &lt;/script&gt;
    &lt;/head&gt;
    
    &lt;body&gt;
        ...
    &lt;/body&gt;
&lt;/html&gt;
</pre>
<p>Note that this will run when the page importing it has loaded. It is of course also possible to execute totxt code on other actions.</p>
<p><span class='code'>load_totxt_generator</span> can be run more than once, without any problems arising.</p>
<br />
<h1 class='totxt dynamic' style='color: #002244'>Important information (click to open)</h1>
<h2>Look no further!</h2>
<p>
totxt elements inherit all classes, any eventual id, and style if present, but only from the header element. When looking for text, totxt searches for subheader elements and text elements below the header element. If any other element than those appears, the search will halt. <span class='b'>An example:</span><br /><br />
&lt;h1 class='totxt'&gt;Header&lt;/h1&gt;<br />
&lt;p&gt;This will be used.&lt;/p&gt;<br />
&lt;p&gt;This will also be used.&lt;/p&gt;<br />
&lt;blockquote&gt;<br />
I fell asleep reading a dull book, and I dreamt that I was reading on, so I woke up from sheer boredom.<br />
&lt;/blockquote&gt;<br />
&lt;p&gt;This will <span class='b'>not</span> be used.&lt;/p&gt;
</p>
#+END_SRC