1514 lines
69 KiB
HTML
1514 lines
69 KiB
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
|
<html>
|
|
<head>
|
|
<title>How to Write a Web</title>
|
|
<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="../inweb.css" rel="stylesheet" rev="stylesheet" type="text/css">
|
|
|
|
</head>
|
|
<body>
|
|
<nav role="navigation">
|
|
<h1><a href="../webs.html">Sources</a></h1>
|
|
<ul>
|
|
<li><a href="../inweb/index.html">inweb</a></li>
|
|
</ul>
|
|
<h2>Foundation</h2>
|
|
<ul>
|
|
<li><a href="../foundation-module/index.html">foundation-module</a></li>
|
|
<li><a href="../foundation-test/index.html">foundation-test</a></li>
|
|
</ul>
|
|
|
|
|
|
</nav>
|
|
<main role="main">
|
|
|
|
<!--Weave of 'How to Write a Web' generated by 7-->
|
|
<ul class="crumbs"><li><a href="../webs.html">Source</a></li><li><a href="index.html">inweb</a></li><li><a href="index.html#M">Manual</a></li><li><b>How to Write a Web</b></li></ul><p class="purpose">How to mark up code for literate programming.</p>
|
|
|
|
<ul class="toc"><li><a href="#SP1">§1. The title of a section</a></li><li><a href="#SP2">§2. Paragraphing</a></li><li><a href="#SP6">§6. Conditional compilation</a></li><li><a href="#SP7">§7. Commentary</a></li><li><a href="#SP12">§12. Code samples and other extraneous matter</a></li><li><a href="#SP13">§13. Links</a></li><li><a href="#SP14">§14. Cross-references</a></li><li><a href="#SP15">§15. Figures</a></li><li><a href="#SP16">§16. Embedded video</a></li><li><a href="#SP19">§19. Mathematics notation</a></li><li><a href="#SP20">§20. Footnotes</a></li></ul><hr class="tocbar">
|
|
|
|
<p class="inwebparagraph"><a id="SP1"></a><b>§1. The title of a section. </b>In any section file, there will be a few lines at the top which occur before
|
|
the first paragraph of code begins. (The first paragraph begins on the first
|
|
line which starts with an <code class="display"><span class="extract">@</span></code> character.)
|
|
</p>
|
|
|
|
<p class="inwebparagraph">The first line should be the title of the section, followed by a full stop.
|
|
For example:
|
|
</p>
|
|
|
|
<pre class="display">
|
|
<span class="plain">The Sieve of Eratosthenes.</span>
|
|
</pre>
|
|
|
|
<p class="inwebparagraph">A section title must contain only filename-safe characters, and it's probably
|
|
wise to make them filename-safe on all platforms: so don't include either
|
|
kind of slash, or a colon, and in general go easy on punctuation marks.
|
|
</p>
|
|
|
|
<p class="inwebparagraph">Optionally, a section heading can also specify its own range abbreviation,
|
|
which must be given in round brackets and followed by a colon:
|
|
</p>
|
|
|
|
<pre class="display">
|
|
<span class="plain">(S/sieve): The Sieve of Eratosthenes.</span>
|
|
</pre>
|
|
|
|
<p class="inwebparagraph">If this is not done (and usually it is not), Inweb will construct a range
|
|
abbreviation itself: in this case, it comes up with <code class="display"><span class="extract">S/tsoe</span></code>.
|
|
</p>
|
|
|
|
<p class="inwebparagraph">Subsequent lines of text are then taken as the optional description of the
|
|
purpose of the code in this section. (This is used on contents pages.) For
|
|
example:
|
|
</p>
|
|
|
|
<pre class="display">
|
|
<span class="plain">A fairly fast way to determine if small numbers are prime, given storage.</span>
|
|
</pre>
|
|
|
|
<p class="inwebparagraph"></p>
|
|
|
|
<p class="inwebparagraph"><a id="SP2"></a><b>§2. Paragraphing. </b>A standard paragraph is introduced with an <code class="display"><span class="extract">@</span></code> command, which must place
|
|
that magic character in the first column of the line:
|
|
</p>
|
|
|
|
<pre class="display">
|
|
<span class="functiontext">@</span><span class="plain"> This is some comment at the start of a new paragraph, which...</span>
|
|
</pre>
|
|
|
|
<p class="inwebparagraph">A fancier paragraph with a subheading attached is introduced using the
|
|
<code class="display"><span class="extract">@h</span></code> or <code class="display"><span class="extract">@heading</span></code> command instead. (This is simply a long and short version
|
|
of the same command.) The text of the subheading then follows, up to the
|
|
first full stop.
|
|
</p>
|
|
|
|
<pre class="display">
|
|
<span class="functiontext">@heading</span><span class="plain"> Reflections on the method.</span>
|
|
</pre>
|
|
|
|
<p class="inwebparagraph">Paragraphs can contain three ingredients, all optional, but if given then
|
|
given in this order: comment, definitions, and code. The following
|
|
example shows all three being used:
|
|
</p>
|
|
|
|
<pre class="display">
|
|
<span class="functiontext">@h</span><span class="plain"> Primality.</span>
|
|
<span class="plain">We provide this as a function which determines whether a number</span>
|
|
<span class="plain">is prime:</span>
|
|
|
|
<span class="functiontext">@d</span><span class="plain"> TRUE 1</span>
|
|
<span class="functiontext">@d</span><span class="plain"> FALSE 0</span>
|
|
|
|
<span class="functiontext">=</span>
|
|
<span class="plain">int isprime(int n) {</span>
|
|
<span class="plain">if (n <= 1) return FALSE;</span>
|
|
<span class="plain">for (int m = 2; m*m <= n; m++)</span>
|
|
<span class="plain">if (n % m == 0)</span>
|
|
<span class="plain">return FALSE;</span>
|
|
<span class="plain">return TRUE;</span>
|
|
<span class="plain">}</span>
|
|
</pre>
|
|
|
|
<p class="inwebparagraph"></p>
|
|
|
|
<p class="inwebparagraph"><a id="SP3"></a><b>§3. </b>Definitions are made using one of three commands: <code class="display"><span class="extract">@d</span></code> or <code class="display"><span class="extract">@define</span></code>; or
|
|
<code class="display"><span class="extract">@e</span></code> or <code class="display"><span class="extract">@enum</span></code>; or <code class="display"><span class="extract">@default</span></code>, which is rarely used and has no abbreviation.
|
|
These create new constants in the program, with the values given: they are
|
|
the equivalent of a <code class="display"><span class="extract">#define</span></code> directive in C. <code class="display"><span class="extract">@define</span></code> is the simpler form.
|
|
For example,
|
|
</p>
|
|
|
|
<pre class="display">
|
|
<span class="functiontext">@define</span><span class="plain"> ENIGMATIC_NUMBER 90125</span>
|
|
</pre>
|
|
|
|
<p class="inwebparagraph">sets <code class="display"><span class="extract">ENIGMATIC_NUMBER</span></code> to 90125. Unlike in the C preprocessor, multi-line
|
|
definitions are automatically handled, so for example:
|
|
</p>
|
|
|
|
<pre class="display">
|
|
<span class="functiontext">@</span><span class="plain"> The following macro defines a function:</span>
|
|
<span class="functiontext">@d</span><span class="plain"> EAT_FRUIT(variety)</span>
|
|
<span class="plain">int consume_by_##variety(variety *frp) {</span>
|
|
<span class="plain">return frp->eat_by_date;</span>
|
|
<span class="plain">}</span>
|
|
<span class="functiontext">=</span>
|
|
<span class="plain">banana my_banana; /* initialised somewhere else, let's suppose */</span>
|
|
<span class="plain">EAT_FRUIT(banana) /* expands with the definition above */</span>
|
|
<span class="plain">void consider_fruit(void) {</span>
|
|
<span class="plain">printf("The banana has an eat-by date of %d.", consume_by_banana(&my_banana));</span>
|
|
<span class="plain">}</span>
|
|
</pre>
|
|
|
|
<p class="inwebparagraph">In fact, a definition continues until the next definition, or until the code
|
|
part of the paragraph begins, or until the paragraph ends, whichever comes
|
|
first.
|
|
</p>
|
|
|
|
<p class="inwebparagraph">Enumerations with <code class="display"><span class="extract">@enum</span></code> are a convenience to define enumerated constants.
|
|
For example,
|
|
</p>
|
|
|
|
<pre class="display">
|
|
<span class="functiontext">@enum</span><span class="plain"> JANUARY_MNTH from 0</span>
|
|
<span class="functiontext">@enum</span><span class="plain"> FEBRUARY_MNTH</span>
|
|
<span class="functiontext">@enum</span><span class="plain"> MARCH_MNTH</span>
|
|
</pre>
|
|
|
|
<p class="inwebparagraph">and so on, is equivalent to
|
|
</p>
|
|
|
|
<pre class="display">
|
|
<span class="functiontext">@define</span><span class="plain"> JANUARY_MNTH 0</span>
|
|
<span class="functiontext">@define</span><span class="plain"> FEBRUARY_MNTH 1</span>
|
|
<span class="functiontext">@define</span><span class="plain"> MARCH_MNTH 2</span>
|
|
</pre>
|
|
|
|
<p class="inwebparagraph">What happens is that <code class="display"><span class="extract">@enum</span></code> looks at the tail of the name, from the last
|
|
underscore to the end: in this case, <code class="display"><span class="extract">_MNTH</span></code>. The first time an enumerated
|
|
value is asked for with this tail, <code class="display"><span class="extract">from</span></code> is used to specify the lowest
|
|
number to be used - in the above case, months begin counting from 0. With
|
|
each subsequent <code class="display"><span class="extract">_MNTH</span></code> request, <code class="display"><span class="extract">@enum</span></code> allocates the next unused value.
|
|
</p>
|
|
|
|
<p class="inwebparagraph">All symbols defined with <code class="display"><span class="extract">@define</span></code> or <code class="display"><span class="extract">@enum</span></code> are global, and can be used
|
|
from anywhere in the web, including in sections or paragraphs earlier than
|
|
the ones in which they are defined. (The tangler automatically arranges code
|
|
as necessary to make this work.)
|
|
</p>
|
|
|
|
<p class="inwebparagraph">A symbol defined with <code class="display"><span class="extract">@default</span></code> has the given value only if some other use
|
|
of <code class="display"><span class="extract">@d</span></code> or <code class="display"><span class="extract">@e</span></code> in the web has not already defined it. For example, if the
|
|
web contains:
|
|
</p>
|
|
|
|
<pre class="display">
|
|
<span class="functiontext">@default</span><span class="plain"> MAX_HEADROOM 100</span>
|
|
<span class="functiontext">@d</span><span class="plain"> MAX_HEADROOM 99</span>
|
|
</pre>
|
|
|
|
<p class="inwebparagraph">or
|
|
</p>
|
|
|
|
<pre class="display">
|
|
<span class="functiontext">@d</span><span class="plain"> MAX_HEADROOM 99</span>
|
|
<span class="functiontext">@default</span><span class="plain"> MAX_HEADROOM 100</span>
|
|
</pre>
|
|
|
|
<p class="inwebparagraph">then the value is 99, but if only
|
|
</p>
|
|
|
|
<pre class="display">
|
|
<span class="functiontext">@default</span><span class="plain"> MAX_HEADROOM 100</span>
|
|
</pre>
|
|
|
|
<p class="inwebparagraph">then the value is 100.
|
|
</p>
|
|
|
|
<p class="inwebparagraph"><a id="SP4"></a><b>§4. </b>Finally, a paragraph can contain code. This is introduced with an equals
|
|
sign: in some sense, the value of the paragraph is the code it contains.
|
|
In many paragraphs, as in the example above, the divider is just
|
|
</p>
|
|
|
|
<pre class="display">
|
|
<span class="functiontext">=</span>
|
|
</pre>
|
|
|
|
<p class="inwebparagraph">and this means that the rest of the paragraph is part of the program.
|
|
Ordinarily, this must appear in column 1, but a special abbreviation is
|
|
allowed for paragraphs with no comment and no definitions:
|
|
</p>
|
|
|
|
<pre class="display">
|
|
<span class="functiontext">@ =</span>
|
|
</pre>
|
|
|
|
<p class="inwebparagraph">This is exactly equivalent to:
|
|
</p>
|
|
|
|
<pre class="display">
|
|
<span class="functiontext">@</span>
|
|
|
|
<span class="functiontext">=</span>
|
|
</pre>
|
|
|
|
<p class="inwebparagraph">We can tell the tangler to place the code early in the tangled program,
|
|
rather than at its natural place in the sequence, by annotating
|
|
</p>
|
|
|
|
<pre class="display">
|
|
<span class="functiontext">= (early code)</span>
|
|
</pre>
|
|
|
|
<p class="inwebparagraph">instead of just <code class="display"><span class="extract">=</span></code>. (This is occasionally useful where, for example, it's
|
|
necessary to create global variables which will be referred to in other
|
|
sections of code.) The more extreme <code class="display"><span class="extract">= (very early code)</span></code> can be used in C
|
|
for complicated header file inclusions, but should be kept to an absolute
|
|
minimum, if only for clarity.
|
|
</p>
|
|
|
|
<p class="inwebparagraph"><a id="SP5"></a><b>§5. </b>One last feature, but it's the most important. Some code extracts are
|
|
given names, in angle brackets. If so, then the paragraph is the definition
|
|
of that extract. For example:
|
|
</p>
|
|
|
|
<pre class="display">
|
|
<span class="functiontext">@<Dramatic finale@> =</span>
|
|
<span class="plain">printf("I'm ruined! Ruined, I say!\n");</span>
|
|
<span class="plain">exit(1);</span>
|
|
</pre>
|
|
|
|
<p class="inwebparagraph">Notice that the equals sign is still there: it's just that the chunk of code
|
|
is given a name, written inside <code class="display"><span class="extract">@<</span></code> and <code class="display"><span class="extract">@></span></code> "brackets". (This notation
|
|
goes all the way back to Knuth's original WEB.)
|
|
</p>
|
|
|
|
<p class="inwebparagraph">What does the tangler do with this? It doesn't place the code as the next
|
|
item in the program. Instead, it expands any mention of <code class="display"><span class="extract">@<Dramatic finale@></span></code>
|
|
elsewhere in the section with this block of code. It can be expanded as
|
|
many times as necessary, but only within the same section. Another section
|
|
would be quite free to define its own <code class="display"><span class="extract">@<Dramatic finale@></span></code>, but it would
|
|
not be able to see this one.
|
|
</p>
|
|
|
|
<p class="inwebparagraph">Why is this important? One of the points of literate programming is to
|
|
subdivide the program on conceptual lines, even within single functions.
|
|
For example:
|
|
</p>
|
|
|
|
<pre class="display">
|
|
<span class="functiontext">@<Perform the sieve@> =</span>
|
|
<span class="functiontext">@<Start with all numbers from 2 upwards in the sieve@></span><span class="plain">;</span>
|
|
<span class="plain">for (int n=2; n*n <= RANGE; n++)</span>
|
|
<span class="plain">if (still_in_sieve[n])</span>
|
|
<span class="functiontext">@<Shake out multiples of n@></span><span class="plain">;</span>
|
|
<span class="plain">sieve_performed = TRUE;</span>
|
|
</pre>
|
|
|
|
<p class="inwebparagraph">This is easier to understand than writing the function all in one go, and
|
|
more practicable than breaking it up into smaller functions.
|
|
</p>
|
|
|
|
<p class="inwebparagraph">Named paragraphs behave, in some ways, like macro definitions, and those
|
|
have a bad name nowadays - probably fairly. But Inweb makes them much
|
|
safer to use than traditional macros, because it tangles them into code
|
|
blocks, not just into runs of statements. A variable defined inside a
|
|
named paragraph has, as its scope, just that paragraph. And this:
|
|
</p>
|
|
|
|
<pre class="display">
|
|
<span class="plain">if (still_in_sieve[n])</span>
|
|
<span class="functiontext">@<Shake out multiples of n@></span><span class="plain">;</span>
|
|
</pre>
|
|
|
|
<p class="inwebparagraph">works safely because <code class="display"><span class="extract">@<Shake out multiples of n@></span></code> is, thanks to being a
|
|
code block, semantically a single statement.
|
|
</p>
|
|
|
|
<p class="inwebparagraph">Finally, note that if there are no commentary or definitions attached to
|
|
the paragraph then it's not necessary to type the initial <code class="display"><span class="extract">@</span></code>. That is,
|
|
this:
|
|
</p>
|
|
|
|
<pre class="display">
|
|
<span class="functiontext">@</span>
|
|
|
|
<span class="functiontext">@<Prepare to exit@> =</span>
|
|
</pre>
|
|
|
|
<p class="inwebparagraph">...is not necessary, and it's sufficient to type just:
|
|
</p>
|
|
|
|
<pre class="display">
|
|
<span class="functiontext">@<Prepare to exit@> =</span>
|
|
</pre>
|
|
|
|
<p class="inwebparagraph"></p>
|
|
|
|
<p class="inwebparagraph"><a id="SP6"></a><b>§6. Conditional compilation. </b>In some languages, especially C, it's very hard to write a program which will
|
|
run on multiple operating systems without some use of conditional compilation:
|
|
that is, putting some code or definitions inside <code class="display"><span class="extract">#ifdef</span></code> clauses or the like.
|
|
</p>
|
|
|
|
<p class="inwebparagraph">Inweb can't alter this sad fact of life, but it can make the process tidier.
|
|
If a paragraph has the tag <code class="display"><span class="extract">^"ifdef-SYMBOL"</span></code>, then any material in it will
|
|
be tangled in such a way that it takes effect only if <code class="display"><span class="extract">SYMBOL</span></code> is defined.
|
|
For example, in a C-language web with the paragraph:
|
|
</p>
|
|
|
|
<pre class="display">
|
|
<span class="functiontext">@h</span><span class="plain"> Windows stuff. ^"ifdef-PLATFORM_WINDOWS"</span>
|
|
|
|
<span class="functiontext">@d</span><span class="plain"> THREADS_AVAILABLE 12</span>
|
|
<span class="functiontext">=</span>
|
|
<span class="plain">void start_threads(int n) {</span>
|
|
<span class="plain">...</span>
|
|
<span class="plain">}</span>
|
|
</pre>
|
|
|
|
<p class="inwebparagraph">...the definition of <code class="display"><span class="extract">THREADS_AVAILABLE</span></code> and the function <code class="display"><span class="extract">start_threads</span></code>
|
|
would be made only inside a <code class="display"><span class="extract">#ifdef PLATFORM_WINDOWS</span></code> clause; the same would
|
|
happen for any typedefs or <code class="display"><span class="extract">#include</span></code>s made.
|
|
</p>
|
|
|
|
<p class="inwebparagraph">Similarly, tagging a paragraph <code class="display"><span class="extract">^"ifndef-SYMBOL"</span></code> causes it to have effect
|
|
only if <code class="display"><span class="extract">SYMBOL</span></code> is undefined. A paragraph can have any number of such
|
|
conditions applied to it, and if so then all of the conditions must be met.
|
|
</p>
|
|
|
|
<p class="inwebparagraph">Note that since tags can be applied to entire sections of a web, at the
|
|
Contents listing, it's straightforward to give, say, two versions of a
|
|
section file, one with effect on MacOS, one with effect on Windows.
|
|
</p>
|
|
|
|
<p class="inwebparagraph"><a id="SP7"></a><b>§7. Commentary. </b>The comment part of a paragraph is ignored by the tangler, and appears only
|
|
in weaves. For the most part, the text is simply copied over verbatim: but
|
|
Inweb quietly tries to improve the appearance of what it copies, and a
|
|
few special notations are allowed, to help with this.
|
|
</p>
|
|
|
|
<p class="inwebparagraph"><a id="SP8"></a><b>§8. </b>A doubled hyphen becomes an em-rule; double-quotation marks automatically
|
|
smarten (in TeX format, at least).
|
|
</p>
|
|
|
|
<p class="inwebparagraph"><a id="SP9"></a><b>§9. </b>Lines beginning with what look like bracketed list numbers or letters are
|
|
set as such, running on into little indented paragraphs. Thus
|
|
</p>
|
|
|
|
<pre class="display">
|
|
<span class="plain">(a) Intellectual property has the shelf life of a banana. (Bill Gates)</span>
|
|
<span class="plain">(b) He is the very pineapple of politeness! (Richard Brinsley Sheridan)</span>
|
|
<span class="plain">(c) Harvard takes perfectly good plums as students, and turns them into</span>
|
|
<span class="plain">prunes. (Frank Lloyd Wright)</span>
|
|
</pre>
|
|
|
|
<p class="inwebparagraph">will be typeset thus:
|
|
</p>
|
|
|
|
<p class="inwebparagraph"></p>
|
|
|
|
<ul class="items"><li>(a) Intellectual property has the shelf life of a banana. (Bill Gates)
|
|
</li><li>(b) He is the very pineapple of politeness! (Richard Brinsley Sheridan)
|
|
</li><li>(c) Harvard takes perfectly good plums as students, and turns them into
|
|
prunes. (Frank Lloyd Wright)
|
|
</li></ul>
|
|
<p class="inwebparagraph">A line which begins <code class="display"><span class="extract">(...)</span></code> will be treated as a continuation of indented
|
|
matter (following on from some break-off such as a source quotation).
|
|
A line which begins <code class="display"><span class="extract">(-X)</span></code> will be treated as if it were <code class="display"><span class="extract">(X)</span></code>, but
|
|
indented one tab stop further in, like so:
|
|
</p>
|
|
|
|
<p class="inwebparagraph"></p>
|
|
|
|
<ul class="items"><li>(c) Harvard blah, blah, blah. (Frank Lloyd Wright)
|
|
<ul class="items"><li>(d) Pick a song and sing a yellow nectarine. (Scott Weiland)
|
|
</li></ul>
|
|
</li></ul>
|
|
<p class="inwebparagraph"><a id="SP10"></a><b>§10. </b>Text placed between vertical strokes will be set in a fixed-space, code
|
|
style font, <code class="display"><span class="extract">thus</span></code>. This paragraph appears in the web you are reading thus:
|
|
</p>
|
|
|
|
<pre class="display">
|
|
<span class="functiontext">@</span><span class="plain"> Text placed between vertical strokes will be set in a fixed-space, code</span>
|
|
<span class="plain">style font, |thus|. This paragraph appears in the web you are reading thus:</span>
|
|
</pre>
|
|
|
|
<p class="inwebparagraph">This notation may be inconvenient if you need the vertical stroke character
|
|
for something else, especially as the notation is used both in code comments
|
|
and in paragraph commentary. But both notations can be configured in the
|
|
Contents page of a web, thus:
|
|
</p>
|
|
|
|
<pre class="display">
|
|
<span class="element">Code In Code Comments Notation</span><span class="plain">:</span><span class="string"> Off</span>
|
|
<span class="element">Code In Commentary Notation</span><span class="plain">:</span><span class="string"> %%</span>
|
|
</pre>
|
|
|
|
<p class="inwebparagraph">This example would turn off the feature in code comments, but allow it in
|
|
paragraph commentary; we would then need to write...
|
|
</p>
|
|
|
|
<pre class="display">
|
|
<span class="functiontext">@</span><span class="plain"> Text placed between vertical strokes will be set in a fixed-space, code</span>
|
|
<span class="plain">style font, %%thus%%. This paragraph appears in the web you are reading thus:</span>
|
|
</pre>
|
|
|
|
<p class="inwebparagraph"></p>
|
|
|
|
<p class="inwebparagraph"><a id="SP11"></a><b>§11. </b>A line written thus:
|
|
</p>
|
|
|
|
<pre class="display">
|
|
<span class="plain">>> The monkey carries the blue scarf.</span>
|
|
</pre>
|
|
|
|
<p class="inwebparagraph">is typeset as an extract of text thus:
|
|
</p>
|
|
|
|
<blockquote>
|
|
<p>The monkey carries the blue scarf.</p>
|
|
|
|
</blockquote>
|
|
|
|
<p class="inwebparagraph">(This is a feature used for Inform 7 "code" samples, those being essentially
|
|
natural language text.)
|
|
</p>
|
|
|
|
<p class="inwebparagraph"><a id="SP12"></a><b>§12. Code samples and other extraneous matter. </b>When is code not code? When it's an extract of text being displayed for
|
|
documentation reasons, is the answer. We can include this like so:
|
|
</p>
|
|
|
|
<pre class="display">
|
|
<span class="functiontext">= (text)</span>
|
|
<span class="plain">Here is my sample bit of text.</span>
|
|
<span class="functiontext">= (undisplayed text)</span>
|
|
</pre>
|
|
|
|
<p class="inwebparagraph">This is assumed to be plain text, and is syntax-coloured (or rather, not)
|
|
as such, but otherwise it's woven as code. Using the word <code class="display"><span class="extract">undisplayed</span></code>
|
|
before <code class="display"><span class="extract">text</span></code> tells Inweb to do so less showily, on HTML weaves:
|
|
</p>
|
|
|
|
<pre class="display">
|
|
<span class="functiontext">= (undisplayed text)</span>
|
|
</pre>
|
|
|
|
<p class="inwebparagraph">Sometimes, though, we do want syntax colouring. If in fact it is a
|
|
hypothetical piece of code from the program — for example, a demonstration of
|
|
an API, but for reading and not to be compiled — we can instead write:
|
|
</p>
|
|
|
|
<pre class="display">
|
|
<span class="functiontext">= (text as code)</span>
|
|
</pre>
|
|
|
|
<p class="inwebparagraph">and the text will then be treated visually exactly as the surrounding
|
|
program is. If, on the other hand, it's a sample piece of code from a
|
|
different language altogether, we can specify which:
|
|
</p>
|
|
|
|
<pre class="display">
|
|
<span class="functiontext">= (text as ACME)</span>
|
|
</pre>
|
|
|
|
<p class="inwebparagraph">This will then be syntax-coloured following the rules for ACME (or any
|
|
other language supported by Inweb).
|
|
</p>
|
|
|
|
<p class="inwebparagraph">Note that if your web is written in, for example, C, then these are
|
|
subtly different:
|
|
</p>
|
|
|
|
<pre class="display">
|
|
<span class="functiontext">= (text as C)</span>
|
|
<span class="functiontext">= (text as code)</span>
|
|
</pre>
|
|
|
|
<p class="inwebparagraph">The difference is that syntax-colouring in the first case doesn't know
|
|
the names of any surrounding functions or data structures; in the second
|
|
case, it knows the names of all those in your program.
|
|
</p>
|
|
|
|
<p class="inwebparagraph">Samples of code are, uniquely, allowed to end mid-way in a paragraph (unlike
|
|
real code): placing a <code class="display"><span class="extract">=</span></code> on the left margin allows the commentary to resume.
|
|
For example,
|
|
</p>
|
|
|
|
<pre class="display">
|
|
<span class="functiontext">= (text as ACME)</span>
|
|
<span class="plain">BEQ .adjustXRegister</span>
|
|
<span class="functiontext">=</span>
|
|
<span class="plain">...which is essential in order to restore the state of</span>
|
|
</pre>
|
|
|
|
<p class="inwebparagraph"></p>
|
|
|
|
<p class="inwebparagraph"><a id="SP13"></a><b>§13. Links. </b>URLs in the web are automatically recognised and a weave to HTML will
|
|
make them into links. For example:
|
|
</p>
|
|
|
|
<pre class="display">
|
|
<span class="plain">For further reading, see: https://en.wikipedia.org/wiki/How_to_Avoid_Huge_Ships</span>
|
|
</pre>
|
|
|
|
<p class="inwebparagraph">For further reading, see: <a href="https://en.wikipedia.org/wiki/How_to_Avoid_Huge_Ships
|
|
" class="external">https://en.wikipedia.org/wiki/How_to_Avoid_Huge_Ships
|
|
</a></p>
|
|
|
|
<p class="inwebparagraph">Note that URLs are considered to continue to the next white space, so don't
|
|
end them with full stops or commas.
|
|
</p>
|
|
|
|
<p class="inwebparagraph">URLs will also be recognised in any text extract marked as <code class="display"><span class="extract">hyperlinked</span></code>.
|
|
For example,
|
|
</p>
|
|
|
|
<pre class="display">
|
|
<span class="plain">Compare: https://en.wikipedia.org/wiki/Crocheting_Adventures_with_Hyperbolic_Planes</span>
|
|
</pre>
|
|
|
|
<p class="inwebparagraph">produces:
|
|
</p>
|
|
|
|
<pre class="display">
|
|
<span class="plain">Compare: <a href="https://en.wikipedia.org/wiki/Crocheting_Adventures_with_Hyperbolic_Planes" class="external">https://en.wikipedia.org/wiki/Crocheting_Adventures_with_Hyperbolic_Planes</a></span>
|
|
</pre>
|
|
|
|
<p class="inwebparagraph"></p>
|
|
|
|
<p class="inwebparagraph"><a id="SP14"></a><b>§14. Cross-references. </b>These are like links, but internal. These are normally written within <code class="display"><span class="extract">//</span></code>
|
|
signs and are only available in the commentary of a web. They allow us to
|
|
place cross-references like so:
|
|
</p>
|
|
|
|
<pre class="display">
|
|
<span class="plain">To see how cross-references are implemented, see //Format Methods//,</span>
|
|
<span class="plain">or more generally the whole of //Chapter 5//; to decipher the text,</span>
|
|
<span class="plain">Inweb uses code from //foundation// at //foundation: Web Modules//.</span>
|
|
</pre>
|
|
|
|
<p class="inwebparagraph">To see how cross-references are implemented, see <a href="5-fm.html" class="internal">Format Methods</a>,
|
|
or more generally the whole of <a href="5-fm.html" class="internal">Chapter 5: Formats</a>; to decipher the text,
|
|
Inweb uses code from <a href="../foundation-module/1-fm.html" class="internal">the foundation module</a> at <a href="../foundation-module/8-wm.html" class="internal">Web Modules (in foundation)</a>.
|
|
</p>
|
|
|
|
<p class="inwebparagraph">What happened in that last sentence is that Inweb noticed the following:
|
|
</p>
|
|
|
|
<ul class="items"><li>(a) "Format Methods" is the name of a section of code in the Inweb web;
|
|
</li><li>(b) The web also has a "Chapter 5";
|
|
</li><li>(c) It uses a module called "foundation";
|
|
</li><li>(d) And that module has a section called "Web Modules".
|
|
</li></ul>
|
|
<p class="inwebparagraph">Inweb then made links accordingly. Chapters, which can be referred to either
|
|
numerically, link to the first section in them; modules likewise.
|
|
</p>
|
|
|
|
<p class="inwebparagraph">Errors are thrown if these references are in any way ambiguous. They are not
|
|
case sensitive.
|
|
</p>
|
|
|
|
<p class="inwebparagraph">Cross-references also work inside text extracts marked as <code class="display"><span class="extract">hyperlinked</span></code>.
|
|
</p>
|
|
|
|
<pre class="display">
|
|
<span class="functiontext">= (hyperlinked text)</span>
|
|
<span class="plain">See the //Manual// for more on this.</span>
|
|
<span class="functiontext">=</span>
|
|
</pre>
|
|
|
|
<p class="inwebparagraph">produces:
|
|
</p>
|
|
|
|
<pre class="display">
|
|
<span class="plain">See the <a href="M-iti.html" class="internal">Manual</a> for more on this.</span>
|
|
</pre>
|
|
|
|
<p class="inwebparagraph"></p>
|
|
|
|
<p class="inwebparagraph">This notation may be inconvenient if you need <code class="display"><span class="extract">//</span></code> for something else, but it
|
|
can be configured in the Contents page of a web, say like so:
|
|
</p>
|
|
|
|
<pre class="display">
|
|
<span class="element">Cross-References Notation</span><span class="plain">:</span><span class="string"> &&&</span>
|
|
</pre>
|
|
|
|
<p class="inwebparagraph">It's also possible to disable cross-referencing entirely with:
|
|
</p>
|
|
|
|
<pre class="display">
|
|
<span class="element">Cross-References Notation</span><span class="plain">:</span><span class="string"> Off</span>
|
|
</pre>
|
|
|
|
<p class="inwebparagraph"></p>
|
|
|
|
<p class="inwebparagraph"><a id="SP15"></a><b>§15. Figures. </b>Images to be included in weaves of a web are called "Figures", as they
|
|
would be in a printed book. These images should ideally be in PNG, JPG or PDF
|
|
format and placed in a subdirectory of the web called <code class="display"><span class="extract">Figures</span></code>: for instance,
|
|
the weaver would seek <code class="display"><span class="extract">Fig_2_3.pdf</span></code> at pathname <code class="display"><span class="extract">Figures/Fig_2_3.pdf</span></code>.
|
|
</p>
|
|
|
|
<p class="inwebparagraph">To embed an image, we write like so:
|
|
</p>
|
|
|
|
<pre class="display">
|
|
<span class="functiontext">= (figure mars.jpg)</span>
|
|
</pre>
|
|
|
|
<p class="inwebparagraph">With results like so:
|
|
</p>
|
|
|
|
<center><img src="mars.jpg"></center>
|
|
<p class="inwebparagraph">Inweb also has some limited ability to control the dimensions of an image as it
|
|
would be used in a PDF via TeX:
|
|
</p>
|
|
|
|
<pre class="display">
|
|
<span class="functiontext">= (figure Whatever.jpg width 6cm)</span>
|
|
<span class="functiontext">= (figure Something.jpg height 2cm)</span>
|
|
</pre>
|
|
|
|
<p class="inwebparagraph">In these examples, we constrain the width or the height of the image
|
|
to be exactly that given: it is scaled accordingly. (They can't both be
|
|
constrained, so you can't change the aspect ratio.)
|
|
</p>
|
|
|
|
<p class="inwebparagraph"><a id="SP16"></a><b>§16. Embedded video. </b>This makes sense only for some HTML-like weave formats, but we can also
|
|
cause videos to be embedded:
|
|
</p>
|
|
|
|
<pre class="display">
|
|
<span class="functiontext">= (embedded YouTube video GR3aImy7dWw)</span>
|
|
</pre>
|
|
|
|
<p class="inwebparagraph">With results like so:
|
|
</p>
|
|
|
|
<center><iframe width="720" height="405" src="https://www.youtube.com/embed/GR3aImy7dWw" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
|
|
|
|
</center>
|
|
<p class="inwebparagraph">The YouTube ID number <code class="display"><span class="extract">GR3aImy7dWw</span></code> can be read from its Share URL, which in
|
|
this case was <code class="display"><span class="extract">https://youtu.be/GR3aImy7dWw</span></code>.
|
|
</p>
|
|
|
|
<p class="inwebparagraph">Similarly for Vimeo:
|
|
</p>
|
|
|
|
<pre class="display">
|
|
<span class="functiontext">= (embedded Vimeo video 204519)</span>
|
|
</pre>
|
|
|
|
<p class="inwebparagraph">With results like so:
|
|
</p>
|
|
|
|
<center><iframe src="https://player.vimeo.com/video/204519" width="720" height="405" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
|
|
|
|
</center>
|
|
<p class="inwebparagraph">For audio, you may like to try SoundCloud:
|
|
</p>
|
|
|
|
<pre class="display">
|
|
<span class="functiontext">= (embedded SoundCloud audio 42803139)</span>
|
|
</pre>
|
|
|
|
<p class="inwebparagraph">With results like so:
|
|
</p>
|
|
|
|
<center><iframe width="100%" height="405" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/42803139&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe>
|
|
</center>
|
|
<p class="inwebparagraph"><a id="SP17"></a><b>§17. </b>Adding width and height is straightforward; by default the dimensions are
|
|
720 by 405.
|
|
</p>
|
|
|
|
<pre class="display">
|
|
<span class="functiontext">= (embedded Vimeo video 204519 at 400 by 300)</span>
|
|
<span class="functiontext">= (embedded SoundCloud audio 42803139 at 200)</span>
|
|
</pre>
|
|
|
|
<p class="inwebparagraph">The latter sets just the height (of the displayed waveform, that is —
|
|
arguably music has width and not height, but SoundCloud thinks otherwise).
|
|
</p>
|
|
|
|
<p class="inwebparagraph"><a id="SP18"></a><b>§18. </b>It's easy to add services. These are all handled by using prototype code
|
|
for a suitable HTML <code class="display"><span class="extract"><iframe></span></code>, and those prototypes are stored in the
|
|
<code class="display"><span class="extract">Embedding</span></code> subdirectory of the Inweb installation. But you can use your
|
|
own prototypes instead, by creating an <code class="display"><span class="extract">Embedding</span></code> subdirectory of your own
|
|
web; this overrides the ones built in. If your service is, say, <code class="display"><span class="extract">WebTubeo</span></code>,
|
|
then the file would be <code class="display"><span class="extract">W/Embedding/WebTubeo.html</span></code>.
|
|
</p>
|
|
|
|
<p class="inwebparagraph"><a id="SP19"></a><b>§19. Mathematics notation. </b>Literate programming is a good technique to justify code which hangs on
|
|
unobvious pieces of mathematics or computer science, and which must therefore
|
|
be explained carefully. Formulae or equations are a real convenience for that.
|
|
</p>
|
|
|
|
<p class="inwebparagraph">For example, it's known that the average running time of Euclid's GCD
|
|
algorithm on \(a\) and numbers coprime to \(a\) is:
|
|
$$ \tau (a)={\frac {12}{\pi ^{2}}}\ln 2\ln a+C+O(a^{-1/6-\varepsilon }) $$
|
|
where \(C\) is Porter's constant,
|
|
$$ C=-{\frac {1}{2}}+{\frac {6\ln 2}{\pi ^{2}}}
|
|
\left(4\gamma - {\frac {24}{\pi ^{2}}}\zeta'(2)+3\ln 2-2\right)\approx 1.467 $$
|
|
which involves evaluating Euler's constant \(\gamma\) and the first derivative
|
|
of the Riemann zeta function \(\zeta'(z)\) at \(z=2\).
|
|
</p>
|
|
|
|
<p class="inwebparagraph">That passage was achieved by typing this as the Inweb source:
|
|
</p>
|
|
|
|
<pre class="display">
|
|
<span class="plain">For example, it's known that the average running time of Euclid's GCD</span>
|
|
<span class="plain">algorithm on $a$ and numbers coprime to $a$ is:</span>
|
|
<span class="plain">$$ \tau (a)={\frac {12}{\pi ^{2}}}\ln 2\ln a+C+O(a^{-1/6-\varepsilon }) $$</span>
|
|
<span class="plain">where $C$ is Porter's constant,</span>
|
|
<span class="plain">$$ C=-{\frac {1}{2}}+{\frac {6\ln 2}{\pi ^{2}}}</span>
|
|
<span class="plain">\left(4\gamma - {\frac {24}{\pi^{2}}}\zeta'(2)+3\ln 2-2\right)\approx 1.467 $$</span>
|
|
<span class="plain">which involves evaluating Euler's constant $\gamma$ and the first derivative</span>
|
|
<span class="plain">of the Riemann zeta function $\zeta'(z)$ at $z=2$.</span>
|
|
</pre>
|
|
|
|
<p class="inwebparagraph">Mathematical formulae can be typed in TeX notation between dollar signs,
|
|
as usual for TeX formulae.
|
|
</p>
|
|
|
|
<p class="inwebparagraph">The rendering is done by default via the MathJax3 project, full details
|
|
of which can be found at: <a href="https://docs.mathjax.org/en/latest/index.html
|
|
" class="external">https://docs.mathjax.org/en/latest/index.html
|
|
</a></p>
|
|
|
|
<p class="inwebparagraph">Inweb in fact managed this by including a "plugin" with the HTML page you
|
|
are now reading: a plugin called <code class="display"><span class="extract">MathJax3</span></code>. Plugins are simply small
|
|
fragments of HTML added to the head of a page, and usually contain Javascript
|
|
code needed for special effects in it. To use a different renderer, simply
|
|
change the value of <code class="display"><span class="extract">TeX Mathematics Plugin</span></code> for your web (by default it is
|
|
set to <code class="display"><span class="extract">MathJax3</span></code>); or if you don't want to use Javascript at all, change
|
|
this to <code class="display"><span class="extract">None</span></code>, but then Inweb can really only make the grossest approximation
|
|
of what you would like to achieve.
|
|
</p>
|
|
|
|
<p class="inwebparagraph">In some webs, TeX notation is an unwanted nuisance. So this feature can be
|
|
deactivated entirely by writing the following in the Contents section of a web:
|
|
</p>
|
|
|
|
<pre class="display">
|
|
<span class="element">TeX Mathematics Notation</span><span class="plain">:</span><span class="string"> Off</span>
|
|
</pre>
|
|
|
|
<p class="inwebparagraph">(This is always <code class="display"><span class="extract">On</span></code>, the default, or <code class="display"><span class="extract">Off</span></code>.)
|
|
</p>
|
|
|
|
<p class="inwebparagraph"><a id="SP20"></a><b>§20. Footnotes. </b>Not everyone likes footnotes,<sup id="fnref:1"><a href="#fn:1" rel="footnote">1</a></sup> but sometimes they're a tidy way to make
|
|
references.<sup id="fnref:2"><a href="#fn:2" rel="footnote">2</a></sup>
|
|
</p>
|
|
|
|
<p class="inwebparagraph"><li class="footnote" id="fn:1"><p><sup id="fnref:1"><a href="#fn:1" rel="footnote">1</a></sup> But see Anthony Grafton, "The Footnote: A Curious History" (Harvard
|
|
University Press, 1999).
|
|
<a href="#fnref:1" title="return to text"> ↩</a></p></li><li class="footnote" id="fn:2"><p><sup id="fnref:2"><a href="#fn:2" rel="footnote">2</a></sup> For example, to cite Donald Knuth, "Evaluation of Porter's constant",
|
|
Computers & Mathematics with Applications, 2, 137-39 (1976).
|
|
<a href="#fnref:2" title="return to text"> ↩</a></p></li></p>
|
|
|
|
<p class="inwebparagraph"><a id="SP21"></a><b>§21. </b>The content of that sentence was typed as follows:
|
|
</p>
|
|
|
|
<pre class="display">
|
|
<span class="plain">Not everyone likes footnotes,[1] but sometimes they're a tidy way to make</span>
|
|
<span class="plain">references.[2]</span>
|
|
|
|
<span class="identifier">[1]</span><span class="plain"> But see Anthony Grafton, "The Footnote: A Curious History" (Harvard</span>
|
|
<span class="plain">University Press, 1999).</span>
|
|
<span class="identifier">[2]</span><span class="plain"> For example, to cite Donald Knuth, "Evaluation of Porter's constant",</span>
|
|
<span class="plain">Computers & Mathematics with Applications, 2, 137-39 (1976).</span>
|
|
</pre>
|
|
|
|
<p class="inwebparagraph">If you're reading this as a web page (with Javascript on), then you should
|
|
have seen clickable footnote blobs, which reveal the text. If Javascript is
|
|
off, there's a more conventionally textual presentation.
|
|
</p>
|
|
|
|
<p class="inwebparagraph">These blob-footnotes are fine for snarky asides or quick references, but long
|
|
discursive notes need more space, so if you intend to use those then you
|
|
should probably turn this rendering off altogether:
|
|
</p>
|
|
|
|
<pre class="display">
|
|
<span class="element">Footnotes Plugin</span><span class="plain">:</span><span class="string"> None</span>
|
|
</pre>
|
|
|
|
<p class="inwebparagraph">Footnotes are otherwise rendered by the <code class="display"><span class="extract">Bigfoot</span></code> plugin, which is the default
|
|
value of this; its big feet unfortunately tread on the <code class="display"><span class="extract">MathJax3</span></code> plugin, so
|
|
right now it's not possible to have mathematics in a footnote when <code class="display"><span class="extract">Bigfoot</span></code>
|
|
is in use.
|
|
</p>
|
|
|
|
<p class="inwebparagraph"><a id="SP22"></a><b>§22. </b>Once again, notation may be an issue, and so it's controllable. By default,
|
|
we have:
|
|
</p>
|
|
|
|
<pre class="display">
|
|
<span class="element">Footnote Begins Notation</span><span class="plain">:</span><span class="string"> [</span>
|
|
<span class="element">Footnote Ends Notation</span><span class="plain">:</span><span class="string"> ]</span>
|
|
</pre>
|
|
|
|
<p class="inwebparagraph">but if you need squares for something else in your commentary, then perhaps:
|
|
</p>
|
|
|
|
<pre class="display">
|
|
<span class="element">Footnote Begins Notation</span><span class="plain">:</span><span class="string"> [fn</span>
|
|
<span class="element">Footnote Ends Notation</span><span class="plain">:</span><span class="string"> ]</span>
|
|
</pre>
|
|
|
|
<p class="inwebparagraph">would be sensible. The "cue" between these notations is required to be a
|
|
string of digits; each must occur just once in its section; and each must
|
|
have a text and a cue which match up correctly.
|
|
</p>
|
|
|
|
<hr class="tocbar">
|
|
<ul class="toc"><li><a href="M-wtaw.html">Back to 'Webs, Tangling and Weaving'</a></li><li><a href="M-tid.html">Continue with 'The InC Dialect'</a></li></ul><hr class="tocbar">
|
|
<!--End of weave-->
|
|
<script>
|
|
MathJax = {
|
|
tex: {
|
|
inlineMath: <b>'$', '$'], ['\\(', '\\)'</b>
|
|
},
|
|
svg: {
|
|
fontCache: 'global'
|
|
}
|
|
};
|
|
</script>
|
|
<script type="text/javascript" id="MathJax-script" async
|
|
src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js">
|
|
</script>
|
|
|
|
<script src="http://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
|
|
<script type="text/javascript">
|
|
(function() {
|
|
(function($) {
|
|
return $.bigfoot = function(options) {
|
|
var addBreakpoint, baseFontSize, bigfoot, buttonHover, calculatePixelDimension, cleanFootnoteLinks, clickButton, createPopover, defaults, deleteEmptyOrHR, escapeKeypress, footnoteInit, getSetting, makeDefaultCallbacks, popoverStates, positionTooltip, removeBackLinks, removeBreakpoint, removePopovers, replaceWithReferenceAttributes, repositionFeet, roomCalc, settings, touchClick, unhoverFeet, updateSetting, viewportDetails;
|
|
bigfoot = void 0;
|
|
defaults = {
|
|
actionOriginalFN: "hide",
|
|
activateCallback: function() {},
|
|
activateOnHover: false,
|
|
allowMultipleFN: false,
|
|
anchorPattern: /(fn|footnote|note)[:\-_\d]/gi,
|
|
anchorParentTagname: 'sup',
|
|
breakpoints: {},
|
|
deleteOnUnhover: false,
|
|
footnoteParentClass: 'footnote',
|
|
footnoteTagname: 'li',
|
|
hoverDelay: 250,
|
|
numberResetSelector: void 0,
|
|
popoverDeleteDelay: 300,
|
|
popoverCreateDelay: 100,
|
|
positionContent: true,
|
|
preventPageScroll: true,
|
|
scope: false,
|
|
useFootnoteOnlyOnce: true,
|
|
contentMarkup: "<aside class=\"bigfoot-footnote is-positioned-bottom\" data-footnote-number=\"{{FOOTNOTENUM}}\" data-footnote-identifier=\"{{FOOTNOTEID}}\" alt=\"Footnote {{FOOTNOTENUM}}\"> <div class=\"bigfoot-footnote__wrapper\"> <div class=\"bigfoot-footnote__content\"> {{FOOTNOTECONTENT}} </div></div> <div class=\"bigfoot-footnote__tooltip\"></div> </aside>",
|
|
buttonMarkup: "<div class='bigfoot-footnote__container'> <button class=\"bigfoot-footnote__button\" id=\"{{SUP:data-footnote-backlink-ref}}\" data-footnote-number=\"{{FOOTNOTENUM}}\" data-footnote-identifier=\"{{FOOTNOTEID}}\" alt=\"See Footnote {{FOOTNOTENUM}}\" rel=\"footnote\" data-bigfoot-footnote=\"{{FOOTNOTECONTENT}}\"> <svg class=\"bigfoot-footnote__button__circle\" viewbox=\"0 0 6 6\" preserveAspectRatio=\"xMinYMin\"><circle r=\"3\" cx=\"3\" cy=\"3\" fill=\"white\"></circle></svg> <svg class=\"bigfoot-footnote__button__circle\" viewbox=\"0 0 6 6\" preserveAspectRatio=\"xMinYMin\"><circle r=\"3\" cx=\"3\" cy=\"3\" fill=\"white\"></circle></svg> <svg class=\"bigfoot-footnote__button__circle\" viewbox=\"0 0 6 6\" preserveAspectRatio=\"xMinYMin\"><circle r=\"3\" cx=\"3\" cy=\"3\" fill=\"white\"></circle></svg> </button></div>"
|
|
};
|
|
settings = $.extend(defaults, options);
|
|
popoverStates = {};
|
|
footnoteInit = function() {
|
|
var $curResetElement, $currentLastFootnoteLink, $footnoteAnchors, $footnoteButton, $lastResetElement, $parent, $relevantFNLink, $relevantFootnote, finalFNLinks, footnoteButton, footnoteButtonSearchQuery, footnoteContent, footnoteIDNum, footnoteLinks, footnoteNum, footnotes, i, _i, _ref, _results;
|
|
footnoteButtonSearchQuery = settings.scope ? "" + settings.scope + " a[href*=\"#\"]" : "a[href*=\"#\"]";
|
|
$footnoteAnchors = $(footnoteButtonSearchQuery).filter(function() {
|
|
var $this, relAttr;
|
|
$this = $(this);
|
|
relAttr = $this.attr("rel");
|
|
if (relAttr === "null" || (relAttr == null)) {
|
|
relAttr = "";
|
|
}
|
|
return ("" + ($this.attr("href")) + relAttr).match(settings.anchorPattern) && $this.closest("[class*=" + settings.footnoteParentClass + "]:not(a):not(" + settings.anchorParentTagname + ")").length < 1;
|
|
});
|
|
footnotes = [];
|
|
footnoteLinks = [];
|
|
finalFNLinks = [];
|
|
cleanFootnoteLinks($footnoteAnchors, footnoteLinks);
|
|
$(footnoteLinks).each(function() {
|
|
var $closestFootnoteEl, relatedFN;
|
|
relatedFN = $(this).data("footnote-ref").replace(/[:.+~*\]\[]/g, "\\$&");
|
|
if (settings.useFootnoteOnlyOnce) {
|
|
relatedFN = "" + relatedFN + ":not(.footnote-processed)";
|
|
}
|
|
$closestFootnoteEl = $(relatedFN).closest(settings.footnoteTagname);
|
|
if ($closestFootnoteEl.length > 0) {
|
|
footnotes.push($closestFootnoteEl.first().addClass("footnote-processed"));
|
|
return finalFNLinks.push(this);
|
|
}
|
|
});
|
|
$currentLastFootnoteLink = $("[data-footnote-identifier]:last");
|
|
footnoteIDNum = $currentLastFootnoteLink.length < 1 ? 0 : +$currentLastFootnoteLink.data("footnote-identifier");
|
|
_results = [];
|
|
for (i = _i = 0, _ref = footnotes.length; 0 <= _ref ? _i < _ref : _i > _ref; i = 0 <= _ref ? ++_i : --_i) {
|
|
footnoteContent = removeBackLinks($(footnotes[i]).html().trim(), $(finalFNLinks[i]).data("footnote-backlink-ref"));
|
|
footnoteContent = footnoteContent.replace(/"/g, """).replace(/</g, "<sym;").replace(/>/g, ">sym;");
|
|
footnoteIDNum += 1;
|
|
footnoteButton = "";
|
|
$relevantFNLink = $(finalFNLinks[i]);
|
|
$relevantFootnote = $(footnotes[i]);
|
|
if (settings.numberResetSelector != null) {
|
|
$curResetElement = $relevantFNLink.closest(settings.numberResetSelector);
|
|
if ($curResetElement.is($lastResetElement)) {
|
|
footnoteNum += 1;
|
|
} else {
|
|
footnoteNum = 1;
|
|
}
|
|
$lastResetElement = $curResetElement;
|
|
} else {
|
|
footnoteNum = footnoteIDNum;
|
|
}
|
|
if (footnoteContent.indexOf("<") !== 0) {
|
|
footnoteContent = "<p>" + footnoteContent + "</p>";
|
|
}
|
|
footnoteButton = settings.buttonMarkup.replace(/\{\{FOOTNOTENUM\}\}/g, footnoteNum).replace(/\{\{FOOTNOTEID\}\}/g, footnoteIDNum).replace(/\{\{FOOTNOTECONTENT\}\}/g, footnoteContent);
|
|
footnoteButton = replaceWithReferenceAttributes(footnoteButton, "SUP", $relevantFNLink);
|
|
footnoteButton = replaceWithReferenceAttributes(footnoteButton, "FN", $relevantFootnote);
|
|
$footnoteButton = $(footnoteButton).insertBefore($relevantFNLink);
|
|
$parent = $relevantFootnote.parent();
|
|
switch (settings.actionOriginalFN.toLowerCase()) {
|
|
case "hide":
|
|
$relevantFNLink.addClass("footnote-print-only");
|
|
$relevantFootnote.addClass("footnote-print-only");
|
|
_results.push(deleteEmptyOrHR($parent));
|
|
break;
|
|
case "delete":
|
|
$relevantFNLink.remove();
|
|
$relevantFootnote.remove();
|
|
_results.push(deleteEmptyOrHR($parent));
|
|
break;
|
|
default:
|
|
_results.push($relevantFNLink.addClass("footnote-print-only"));
|
|
}
|
|
}
|
|
return _results;
|
|
};
|
|
cleanFootnoteLinks = function($footnoteAnchors, footnoteLinks) {
|
|
var $parent, $supChild, linkHREF, linkID;
|
|
if (footnoteLinks == null) {
|
|
footnoteLinks = [];
|
|
}
|
|
$parent = void 0;
|
|
$supChild = void 0;
|
|
linkHREF = void 0;
|
|
linkID = void 0;
|
|
$footnoteAnchors.each(function() {
|
|
var $child, $this;
|
|
$this = $(this);
|
|
linkHREF = "#" + ($this.attr("href")).split("#")[1];
|
|
$parent = $this.closest(settings.anchorParentTagname);
|
|
$child = $this.find(settings.anchorParentTagname);
|
|
if ($parent.length > 0) {
|
|
linkID = ($parent.attr("id") || "") + ($this.attr("id") || "");
|
|
return footnoteLinks.push($parent.attr({
|
|
"data-footnote-backlink-ref": linkID,
|
|
"data-footnote-ref": linkHREF
|
|
}));
|
|
} else if ($child.length > 0) {
|
|
linkID = ($child.attr("id") || "") + ($this.attr("id") || "");
|
|
return footnoteLinks.push($this.attr({
|
|
"data-footnote-backlink-ref": linkID,
|
|
"data-footnote-ref": linkHREF
|
|
}));
|
|
} else {
|
|
linkID = $this.attr("id") || "";
|
|
return footnoteLinks.push($this.attr({
|
|
"data-footnote-backlink-ref": linkID,
|
|
"data-footnote-ref": linkHREF
|
|
}));
|
|
}
|
|
});
|
|
};
|
|
deleteEmptyOrHR = function($el) {
|
|
var $parent;
|
|
$parent = void 0;
|
|
if ($el.is(":empty") || $el.children(":not(.footnote-print-only)").length === 0) {
|
|
$parent = $el.parent();
|
|
if (settings.actionOriginalFN.toLowerCase() === "delete") {
|
|
$el.remove();
|
|
} else {
|
|
$el.addClass("footnote-print-only");
|
|
}
|
|
return deleteEmptyOrHR($parent);
|
|
} else if ($el.children(":not(.footnote-print-only)").length === $el.children("hr:not(.footnote-print-only)").length) {
|
|
$parent = $el.parent();
|
|
if (settings.actionOriginalFN.toLowerCase() === "delete") {
|
|
$el.remove();
|
|
} else {
|
|
$el.children("hr").addClass("footnote-print-only");
|
|
$el.addClass("footnote-print-only");
|
|
}
|
|
return deleteEmptyOrHR($parent);
|
|
}
|
|
};
|
|
removeBackLinks = function(footnoteHTML, backlinkID) {
|
|
var regex;
|
|
if (backlinkID.indexOf(' ') >= 0) {
|
|
backlinkID = backlinkID.trim().replace(/\s+/g, "|").replace(/(.*)/g, "($1)");
|
|
}
|
|
regex = new RegExp("(\\s| )*<\\s*a[^#<]*#" + backlinkID + "[^>]*>(.*?)<\\s*/\\s*a>", "g");
|
|
return footnoteHTML.replace(regex, "").replace("[]", "");
|
|
};
|
|
replaceWithReferenceAttributes = function(string, referenceKeyword, $referenceElement) {
|
|
var refMatches, refRegex, refReplaceRegex, refReplaceText;
|
|
refRegex = new RegExp("\\{\\{" + referenceKeyword + ":([^\\}]*)\\}\\}", "g");
|
|
refMatches = void 0;
|
|
refReplaceText = void 0;
|
|
refReplaceRegex = void 0;
|
|
refMatches = refRegex.exec(string);
|
|
while (refMatches) {
|
|
if (refMatches[1]) {
|
|
refReplaceText = $referenceElement.attr(refMatches[1]) || "";
|
|
string = string.replace("{{" + referenceKeyword + ":" + refMatches[1] + "}}", refReplaceText);
|
|
}
|
|
refMatches = refRegex.exec(string);
|
|
}
|
|
return string;
|
|
};
|
|
buttonHover = function(event) {
|
|
var $buttonHovered, dataIdentifier, otherPopoverSelector;
|
|
if (settings.activateOnHover) {
|
|
$buttonHovered = $(event.target).closest(".bigfoot-footnote__button");
|
|
dataIdentifier = "[data-footnote-identifier=\"" + ($buttonHovered.attr("data-footnote-identifier")) + "\"]";
|
|
if ($buttonHovered.hasClass("is-active")) {
|
|
return;
|
|
}
|
|
$buttonHovered.addClass("is-hover-instantiated");
|
|
if (!settings.allowMultipleFN) {
|
|
otherPopoverSelector = ".bigfoot-footnote:not(" + dataIdentifier + ")";
|
|
removePopovers(otherPopoverSelector);
|
|
}
|
|
createPopover(".bigfoot-footnote__button" + dataIdentifier).addClass("is-hover-instantiated");
|
|
}
|
|
};
|
|
touchClick = function(event) {
|
|
var $nearButton, $nearFootnote, $target;
|
|
$target = $(event.target);
|
|
$nearButton = $target.closest(".bigfoot-footnote__button");
|
|
$nearFootnote = $target.closest(".bigfoot-footnote");
|
|
if ($nearButton.length > 0) {
|
|
event.preventDefault();
|
|
clickButton($nearButton);
|
|
} else if ($nearFootnote.length < 1) {
|
|
if ($(".bigfoot-footnote").length > 0) {
|
|
removePopovers();
|
|
}
|
|
}
|
|
};
|
|
clickButton = function($button) {
|
|
var dataIdentifier;
|
|
$button.blur();
|
|
dataIdentifier = "data-footnote-identifier=\"" + ($button.attr("data-footnote-identifier")) + "\"";
|
|
if ($button.hasClass("changing")) {
|
|
return;
|
|
} else if (!$button.hasClass("is-active")) {
|
|
$button.addClass("changing");
|
|
setTimeout((function() {
|
|
return $button.removeClass("changing");
|
|
}), settings.popoverCreateDelay);
|
|
createPopover(".bigfoot-footnote__button[" + dataIdentifier + "]");
|
|
$button.addClass("is-click-instantiated");
|
|
if (!settings.allowMultipleFN) {
|
|
removePopovers(".bigfoot-footnote:not([" + dataIdentifier + "])");
|
|
}
|
|
} else {
|
|
if (!settings.allowMultipleFN) {
|
|
removePopovers();
|
|
} else {
|
|
removePopovers(".bigfoot-footnote[" + dataIdentifier + "]");
|
|
}
|
|
}
|
|
};
|
|
createPopover = function(selector) {
|
|
var $buttons, $popoversCreated;
|
|
$buttons = void 0;
|
|
if (typeof selector !== "string" && settings.allowMultipleFN) {
|
|
$buttons = selector;
|
|
} else if (typeof selector !== "string") {
|
|
$buttons = selector.first();
|
|
} else if (settings.allowMultipleFN) {
|
|
$buttons = $(selector).closest(".bigfoot-footnote__button");
|
|
} else {
|
|
$buttons = $(selector + ":first").closest(".bigfoot-footnote__button");
|
|
}
|
|
$popoversCreated = $();
|
|
$buttons.each(function() {
|
|
var $content, $contentContainer, $this, content;
|
|
$this = $(this);
|
|
content = void 0;
|
|
try {
|
|
content = settings.contentMarkup.replace(/\{\{FOOTNOTENUM\}\}/g, $this.attr("data-footnote-number")).replace(/\{\{FOOTNOTEID\}\}/g, $this.attr("data-footnote-identifier")).replace(/\{\{FOOTNOTECONTENT\}\}/g, $this.attr("data-bigfoot-footnote")).replace(/\>sym\;/g, ">").replace(/\<sym\;/g, "<");
|
|
return content = replaceWithReferenceAttributes(content, "BUTTON", $this);
|
|
} finally {
|
|
$content = $(content);
|
|
try {
|
|
settings.activateCallback($content, $this);
|
|
} catch (_error) {}
|
|
$content.insertAfter($buttons);
|
|
popoverStates[$this.attr("data-footnote-identifier")] = "init";
|
|
$content.attr("bigfoot-max-width", calculatePixelDimension($content.css("max-width"), $content));
|
|
$content.css("max-width", 10000);
|
|
$contentContainer = $content.find(".bigfoot-footnote__content");
|
|
$content.attr("data-bigfoot-max-height", calculatePixelDimension($contentContainer.css("max-height"), $contentContainer));
|
|
repositionFeet();
|
|
$this.addClass("is-active");
|
|
$content.find(".bigfoot-footnote__content").bindScrollHandler();
|
|
$popoversCreated = $popoversCreated.add($content);
|
|
}
|
|
});
|
|
setTimeout((function() {
|
|
return $popoversCreated.addClass("is-active");
|
|
}), settings.popoverCreateDelay);
|
|
return $popoversCreated;
|
|
};
|
|
baseFontSize = function() {
|
|
var el, size;
|
|
el = document.createElement("div");
|
|
el.style.cssText = "display:inline-block;padding:0;line-height:1;position:absolute;visibility:hidden;font-size:1em;";
|
|
el.appendChild(document.createElement("M"));
|
|
document.body.appendChild(el);
|
|
size = el.offsetHeight;
|
|
document.body.removeChild(el);
|
|
return size;
|
|
};
|
|
calculatePixelDimension = function(dim, $el) {
|
|
if (dim === "none") {
|
|
dim = 10000;
|
|
} else if (dim.indexOf("rem") >= 0) {
|
|
dim = parseFloat(dim) * baseFontSize();
|
|
} else if (dim.indexOf("em") >= 0) {
|
|
dim = parseFloat(dim) * parseFloat($el.css("font-size"));
|
|
} else if (dim.indexOf("px") >= 0) {
|
|
dim = parseFloat(dim);
|
|
if (dim <= 60) {
|
|
dim = dim / parseFloat($el.parent().css("width"));
|
|
}
|
|
} else if (dim.indexOf("%") >= 0) {
|
|
dim = parseFloat(dim) / 100;
|
|
}
|
|
return dim;
|
|
};
|
|
$.fn.bindScrollHandler = function() {
|
|
if (!settings.preventPageScroll) {
|
|
return $(this);
|
|
}
|
|
$(this).on("DOMMouseScroll mousewheel", function(event) {
|
|
var $popover, $this, delta, height, prevent, scrollHeight, scrollTop, up;
|
|
$this = $(this);
|
|
scrollTop = $this.scrollTop();
|
|
scrollHeight = $this[0].scrollHeight;
|
|
height = parseInt($this.css("height"));
|
|
$popover = $this.closest(".bigfoot-footnote");
|
|
if ($this.scrollTop() > 0 && $this.scrollTop() < 10) {
|
|
$popover.addClass("is-scrollable");
|
|
}
|
|
if (!$popover.hasClass("is-scrollable")) {
|
|
return;
|
|
}
|
|
delta = event.type === "DOMMouseScroll" ? event.originalEvent.detail * -40 : event.originalEvent.wheelDelta;
|
|
up = delta > 0;
|
|
prevent = function() {
|
|
event.stopPropagation();
|
|
event.preventDefault();
|
|
event.returnValue = false;
|
|
return false;
|
|
};
|
|
if (!up && -delta > scrollHeight - height - scrollTop) {
|
|
$this.scrollTop(scrollHeight);
|
|
$popover.addClass("is-fully-scrolled");
|
|
return prevent();
|
|
} else if (up && delta > scrollTop) {
|
|
$this.scrollTop(0);
|
|
$popover.removeClass("is-fully-scrolled");
|
|
return prevent();
|
|
} else {
|
|
return $popover.removeClass("is-fully-scrolled");
|
|
}
|
|
});
|
|
return $(this);
|
|
};
|
|
unhoverFeet = function(e) {
|
|
if (settings.deleteOnUnhover && settings.activateOnHover) {
|
|
return setTimeout((function() {
|
|
var $target;
|
|
$target = $(e.target).closest(".bigfoot-footnote, .bigfoot-footnote__button");
|
|
if ($(".bigfoot-footnote__button:hover, .bigfoot-footnote:hover").length < 1) {
|
|
return removePopovers();
|
|
}
|
|
}), settings.hoverDelay);
|
|
}
|
|
};
|
|
escapeKeypress = function(event) {
|
|
if (event.keyCode === 27) {
|
|
return removePopovers();
|
|
}
|
|
};
|
|
removePopovers = function(footnotes, timeout) {
|
|
var $buttonsClosed, $linkedButton, $this, footnoteID;
|
|
if (footnotes == null) {
|
|
footnotes = ".bigfoot-footnote";
|
|
}
|
|
if (timeout == null) {
|
|
timeout = settings.popoverDeleteDelay;
|
|
}
|
|
$buttonsClosed = $();
|
|
footnoteID = void 0;
|
|
$linkedButton = void 0;
|
|
$this = void 0;
|
|
$(footnotes).each(function() {
|
|
$this = $(this);
|
|
footnoteID = $this.attr("data-footnote-identifier");
|
|
$linkedButton = $(".bigfoot-footnote__button[data-footnote-identifier=\"" + footnoteID + "\"]");
|
|
if (!$linkedButton.hasClass("changing")) {
|
|
$buttonsClosed = $buttonsClosed.add($linkedButton);
|
|
$linkedButton.removeClass("is-active is-hover-instantiated is-click-instantiated").addClass("changing");
|
|
$this.removeClass("is-active").addClass("disapearing");
|
|
return setTimeout((function() {
|
|
$this.remove();
|
|
delete popoverStates[footnoteID];
|
|
return $linkedButton.removeClass("changing");
|
|
}), timeout);
|
|
}
|
|
});
|
|
return $buttonsClosed;
|
|
};
|
|
repositionFeet = function(e) {
|
|
var type;
|
|
if (settings.positionContent) {
|
|
type = e ? e.type : "resize";
|
|
$(".bigfoot-footnote").each(function() {
|
|
var $button, $contentWrapper, $mainWrap, $this, dataIdentifier, identifier, lastState, marginSize, maxHeightInCSS, maxHeightOnScreen, maxWidth, maxWidthInCSS, positionOnTop, relativeToWidth, roomLeft, totalHeight;
|
|
$this = $(this);
|
|
identifier = $this.attr("data-footnote-identifier");
|
|
dataIdentifier = "data-footnote-identifier=\"" + identifier + "\"";
|
|
$contentWrapper = $this.find(".bigfoot-footnote__content");
|
|
$button = $this.siblings(".bigfoot-footnote__button");
|
|
roomLeft = roomCalc($button);
|
|
marginSize = parseFloat($this.css("margin-top"));
|
|
maxHeightInCSS = +($this.attr("data-bigfoot-max-height"));
|
|
totalHeight = 2 * marginSize + $this.outerHeight();
|
|
maxHeightOnScreen = 10000;
|
|
positionOnTop = roomLeft.bottomRoom < totalHeight && roomLeft.topRoom > roomLeft.bottomRoom;
|
|
lastState = popoverStates[identifier];
|
|
if (positionOnTop) {
|
|
if (lastState !== "top") {
|
|
popoverStates[identifier] = "top";
|
|
$this.addClass("is-positioned-top").removeClass("is-positioned-bottom");
|
|
$this.css("transform-origin", (roomLeft.leftRelative * 100) + "% 100%");
|
|
}
|
|
maxHeightOnScreen = roomLeft.topRoom - marginSize - 15;
|
|
} else {
|
|
if (lastState !== "bottom" || lastState === "init") {
|
|
popoverStates[identifier] = "bottom";
|
|
$this.removeClass("is-positioned-top").addClass("is-positioned-bottom");
|
|
$this.css("transform-origin", (roomLeft.leftRelative * 100) + "% 0%");
|
|
}
|
|
maxHeightOnScreen = roomLeft.bottomRoom - marginSize - 15;
|
|
}
|
|
$this.find(".bigfoot-footnote__content").css({
|
|
"max-height": Math.min(maxHeightOnScreen, maxHeightInCSS) + "px"
|
|
});
|
|
if (type === "resize") {
|
|
maxWidthInCSS = parseFloat($this.attr("bigfoot-max-width"));
|
|
$mainWrap = $this.find(".bigfoot-footnote__wrapper");
|
|
maxWidth = maxWidthInCSS;
|
|
if (maxWidthInCSS <= 1) {
|
|
relativeToWidth = (function() {
|
|
var jq, userSpecifiedRelativeElWidth;
|
|
userSpecifiedRelativeElWidth = 10000;
|
|
if (settings.maxWidthRelativeTo) {
|
|
jq = $(settings.maxWidthRelativeTo);
|
|
if (jq.length > 0) {
|
|
userSpecifiedRelativeElWidth = jq.outerWidth();
|
|
}
|
|
}
|
|
return Math.min(window.innerWidth, userSpecifiedRelativeElWidth);
|
|
})();
|
|
maxWidth = relativeToWidth * maxWidthInCSS;
|
|
}
|
|
maxWidth = Math.min(maxWidth, $this.find(".bigfoot-footnote__content").outerWidth() + 1);
|
|
$mainWrap.css("max-width", maxWidth + "px");
|
|
$this.css({
|
|
left: (-roomLeft.leftRelative * maxWidth + parseFloat($button.css("margin-left")) + $button.outerWidth() / 2) + "px"
|
|
});
|
|
positionTooltip($this, roomLeft.leftRelative);
|
|
}
|
|
if (parseInt($this.outerHeight()) < $this.find(".bigfoot-footnote__content")[0].scrollHeight) {
|
|
return $this.addClass("is-scrollable");
|
|
}
|
|
});
|
|
}
|
|
};
|
|
positionTooltip = function($popover, leftRelative) {
|
|
var $tooltip;
|
|
if (leftRelative == null) {
|
|
leftRelative = 0.5;
|
|
}
|
|
$tooltip = $popover.find(".bigfoot-footnote__tooltip");
|
|
if ($tooltip.length > 0) {
|
|
$tooltip.css("left", "" + (leftRelative * 100) + "%");
|
|
}
|
|
};
|
|
roomCalc = function($el) {
|
|
var elHeight, elLeftMargin, elWidth, leftRoom, topRoom, w;
|
|
elLeftMargin = parseFloat($el.css("margin-left"));
|
|
elWidth = parseFloat($el.outerWidth()) - elLeftMargin;
|
|
elHeight = parseFloat($el.outerHeight());
|
|
w = viewportDetails();
|
|
topRoom = $el.offset().top - w.scrollY + elHeight / 2;
|
|
leftRoom = $el.offset().left - w.scrollX + elWidth / 2;
|
|
return {
|
|
topRoom: topRoom,
|
|
bottomRoom: w.height - topRoom,
|
|
leftRoom: leftRoom,
|
|
rightRoom: w.width - leftRoom,
|
|
leftRelative: leftRoom / w.width,
|
|
topRelative: topRoom / w.height
|
|
};
|
|
};
|
|
viewportDetails = function() {
|
|
var $window;
|
|
$window = $(window);
|
|
return {
|
|
width: window.innerWidth,
|
|
height: window.innerHeight,
|
|
scrollX: $window.scrollLeft(),
|
|
scrollY: $window.scrollTop()
|
|
};
|
|
};
|
|
addBreakpoint = function(size, trueCallback, falseCallback, deleteDelay, removeOpen) {
|
|
var falseDefaultPositionSetting, minMax, mqListener, mql, query, s, trueDefaultPositionSetting;
|
|
if (deleteDelay == null) {
|
|
deleteDelay = settings.popoverDeleteDelay;
|
|
}
|
|
if (removeOpen == null) {
|
|
removeOpen = true;
|
|
}
|
|
mql = void 0;
|
|
minMax = void 0;
|
|
s = void 0;
|
|
if (typeof size === "string") {
|
|
s = size.toLowerCase() === "iphone" ? "<320px" : size.toLowerCase() === "ipad" ? "<768px" : size;
|
|
minMax = s.charAt(0) === ">" ? "min" : s.charAt(0) === "<" ? "max" : null;
|
|
query = minMax ? "(" + minMax + "-width: " + (s.substring(1)) + ")" : s;
|
|
mql = window.matchMedia(query);
|
|
} else {
|
|
mql = size;
|
|
}
|
|
if (mql.media && mql.media === "invalid") {
|
|
return {
|
|
added: false,
|
|
mq: mql,
|
|
listener: null
|
|
};
|
|
}
|
|
trueDefaultPositionSetting = minMax === "min";
|
|
falseDefaultPositionSetting = minMax === "max";
|
|
trueCallback = trueCallback || makeDefaultCallbacks(removeOpen, deleteDelay, trueDefaultPositionSetting, function($popover) {
|
|
return $popover.addClass("is-bottom-fixed");
|
|
});
|
|
falseCallback = falseCallback || makeDefaultCallbacks(removeOpen, deleteDelay, falseDefaultPositionSetting, function() {});
|
|
mqListener = function(mq) {
|
|
if (mq.matches) {
|
|
trueCallback(removeOpen, bigfoot);
|
|
} else {
|
|
falseCallback(removeOpen, bigfoot);
|
|
}
|
|
};
|
|
mql.addListener(mqListener);
|
|
mqListener(mql);
|
|
settings.breakpoints[size] = {
|
|
added: true,
|
|
mq: mql,
|
|
listener: mqListener
|
|
};
|
|
return settings.breakpoints[size];
|
|
};
|
|
makeDefaultCallbacks = function(removeOpen, deleteDelay, position, callback) {
|
|
return function(removeOpen, bigfoot) {
|
|
var $closedPopovers;
|
|
$closedPopovers = void 0;
|
|
if (removeOpen) {
|
|
$closedPopovers = bigfoot.close();
|
|
bigfoot.updateSetting("activateCallback", callback);
|
|
}
|
|
return setTimeout((function() {
|
|
bigfoot.updateSetting("positionContent", position);
|
|
if (removeOpen) {
|
|
return bigfoot.activate($closedPopovers);
|
|
}
|
|
}), deleteDelay);
|
|
};
|
|
};
|
|
removeBreakpoint = function(target, callback) {
|
|
var b, breakpoint, mq, mqFound;
|
|
mq = null;
|
|
b = void 0;
|
|
mqFound = false;
|
|
if (typeof target === "string") {
|
|
mqFound = settings.breakpoints[target] !== undefined;
|
|
} else {
|
|
for (b in settings.breakpoints) {
|
|
if (settings.breakpoints.hasOwnProperty(b) && settings.breakpoints[b].mq === target) {
|
|
mqFound = true;
|
|
}
|
|
}
|
|
}
|
|
if (mqFound) {
|
|
breakpoint = settings.breakpoints[b || target];
|
|
if (callback) {
|
|
callback({
|
|
matches: false
|
|
});
|
|
} else {
|
|
breakpoint.listener({
|
|
matches: false
|
|
});
|
|
}
|
|
breakpoint.mq.removeListener(breakpoint.listener);
|
|
delete settings.breakpoints[b || target];
|
|
}
|
|
return mqFound;
|
|
};
|
|
updateSetting = function(newSettings, value) {
|
|
var oldValue, prop;
|
|
oldValue = void 0;
|
|
if (typeof newSettings === "string") {
|
|
oldValue = settings[newSettings];
|
|
settings[newSettings] = value;
|
|
} else {
|
|
oldValue = {};
|
|
for (prop in newSettings) {
|
|
if (newSettings.hasOwnProperty(prop)) {
|
|
oldValue[prop] = settings[prop];
|
|
settings[prop] = newSettings[prop];
|
|
}
|
|
}
|
|
}
|
|
return oldValue;
|
|
};
|
|
getSetting = function(setting) {
|
|
return settings[setting];
|
|
};
|
|
$(document).ready(function() {
|
|
footnoteInit();
|
|
$(document).on("mouseenter", ".bigfoot-footnote__button", buttonHover);
|
|
$(document).on("touchend click", touchClick);
|
|
$(document).on("mouseout", ".is-hover-instantiated", unhoverFeet);
|
|
$(document).on("keyup", escapeKeypress);
|
|
$(window).on("scroll resize", repositionFeet);
|
|
return $(document).on("gestureend", function() {
|
|
return repositionFeet();
|
|
});
|
|
});
|
|
bigfoot = {
|
|
removePopovers: removePopovers,
|
|
close: removePopovers,
|
|
createPopover: createPopover,
|
|
activate: createPopover,
|
|
repositionFeet: repositionFeet,
|
|
reposition: repositionFeet,
|
|
addBreakpoint: addBreakpoint,
|
|
removeBreakpoint: removeBreakpoint,
|
|
getSetting: getSetting,
|
|
updateSetting: updateSetting
|
|
};
|
|
return bigfoot;
|
|
};
|
|
})(jQuery);
|
|
|
|
}).call(this);
|
|
|
|
</script>
|
|
<script type="text/javascript">
|
|
$.bigfoot();
|
|
</script>
|
|
|
|
<link href="Bigfoot.css" rel="stylesheet" rev="stylesheet" type="text/css">
|
|
</main>
|
|
</body>
|
|
</html>
|
|
|