Google Git
Sign in
apache / incubator-annotator-website / 7eca27c06b74107ae19dddbed119f3305ede15d1 / . / content / docs / api / modules / dom.html
blob: dca8c7c86a55791758e111d18140521faac6ba44 [file] [log] [blame]
<!DOCTYPE html>
<html prefix="og: http://ogp.me/ns#">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<title>Apache Annotator (incubating)</title>
<meta property="og:title" content="Apache Annotator" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://annotator.apache.org/" />
<meta property="og:image:url" content="https://annotator.apache.org/images/annotator-logo.svg" />
<meta property="og:image:alt" content="Apache Annotator (incubating) logo" />
<link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/images/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<link rel="alternate" title="DOAP" href="doap.rdf" type="application/rdf+xml" />
<link rel="stylesheet" href="//semantic-ui.com/dist/semantic.min.css" />
</head>
<body>
<div class="ui borderless stackable top attached main menu">
<div class="ui container">
<a class="item" href="/" style="color: rgba(0,0,0,.87);">
<img class="ui small image" src="/images/annotator-logo.svg" alt="Apache Annotator (incubating)" />
</a>
<div class="right menu">
<a class="item" href="/demo/"><span class="ui positive button">Demo!</span></a>
<a class="item" rel="external" href="https://www.npmjs.com/package/apache-annotator">NPM</a>
<a class="item" rel="external" href="https://github.com/apache?q=annotator#org-repositories">Code</a>
<a class="item" rel="external" href="https://github.com/apache/incubator-annotator/issues">Issues</a>
<a class="active item" href="/docs/">Docs</a>
<a class="item" rel="external" href="https://mail-archives.apache.org/mod_mbox/incubator-annotator-dev/">Mailing List</a>
</div>
</div>
</div>
<div class="ui basic segment container">
<link rel="stylesheet" href="../assets/css/main.css">
<script async src="../assets/js/search.js" id="search-script"></script>
<aside>
<style>
#tsd-search {
position: relative;
}
#tsd-search input {
border: 1px solid grey;
border-radius: 2px;
padding: 0.2em;
}
#tsd-search .results {
z-index: 1;
position: absolute;
}
</style>
<div id="tsd-search" data-index="../assets/js/search.json" data-base="..">
<div>
<label for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
<input id="tsd-search-field" type="text" />
</div>
<ul class="results">
<li class="state loading">Preparing search index...</li>
<li class="state failure">The search index is not available</li>
</ul>
</div>
</aside>
<header style="margin: 2em 0;" id="typedoc-title">
<style>
#typedoc-title h1 {
margin-top: 0;
}
</style>
<ul class="tsd-breadcrumb">
<li>
<a href="../index.html">apache-annotator</a>
</li>
<li>
<a href="dom.html">dom</a>
</li>
</ul>
<h1>Module dom</h1>
</header>
<main>
<div class="row">
<div class="col-8 col-content">
<section class="tsd-panel-group tsd-index-group">
<h2>Index</h2>
<section class="tsd-panel tsd-index-panel">
<div class="tsd-index-content">
<section class="tsd-index-section ">
<h3>Functions</h3>
<ul class="tsd-index-list">
<li class="tsd-kind-function tsd-parent-kind-module"><a href="dom.html#createcssselectormatcher" class="tsd-kind-icon">create<wbr>Css<wbr>Selector<wbr>Matcher</a></li>
<li class="tsd-kind-function tsd-parent-kind-module"><a href="dom.html#createtextpositionselectormatcher" class="tsd-kind-icon">create<wbr>Text<wbr>Position<wbr>Selector<wbr>Matcher</a></li>
<li class="tsd-kind-function tsd-parent-kind-module"><a href="dom.html#createtextquoteselectormatcher" class="tsd-kind-icon">create<wbr>Text<wbr>Quote<wbr>Selector<wbr>Matcher</a></li>
<li class="tsd-kind-function tsd-parent-kind-module"><a href="dom.html#describetextposition" class="tsd-kind-icon">describe<wbr>Text<wbr>Position</a></li>
<li class="tsd-kind-function tsd-parent-kind-module"><a href="dom.html#describetextquote" class="tsd-kind-icon">describe<wbr>Text<wbr>Quote</a></li>
<li class="tsd-kind-function tsd-parent-kind-module"><a href="dom.html#highlightrange" class="tsd-kind-icon">highlight<wbr>Range</a></li>
<li class="tsd-kind-function tsd-parent-kind-module"><a href="dom.html#makecreaterangeselectormatcher" class="tsd-kind-icon">make<wbr>Create<wbr>Range<wbr>Selector<wbr>Matcher</a></li>
</ul>
</section>
</div>
</section>
</section>
<section class="tsd-panel-group tsd-member-group ">
<h2>Functions</h2>
<section class="tsd-panel tsd-member tsd-kind-function tsd-parent-kind-module">
<a name="createcssselectormatcher" class="tsd-anchor"></a>
<h3>create<wbr>Css<wbr>Selector<wbr>Matcher</h3>
<ul class="tsd-signatures tsd-kind-function tsd-parent-kind-module">
<li class="tsd-signature tsd-kind-icon">create<wbr>Css<wbr>Selector<wbr>Matcher<span class="tsd-signature-symbol">(</span>selector<span class="tsd-signature-symbol">: </span><a href="../interfaces/selector.cssselector.html" class="tsd-signature-type" data-tsd-kind="Interface">CssSelector</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="../interfaces/selector.matcher.html" class="tsd-signature-type" data-tsd-kind="Interface">Matcher</a><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">Range</span><span class="tsd-signature-symbol">, </span><span class="tsd-signature-type">Range</span><span class="tsd-signature-symbol">&gt;</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<aside class="tsd-sources">
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Find the elements corresponding to the given <a href="../interfaces/selector.cssselector.html">CssSelector</a>.</p>
</div>
<p>The given CssSelector returns all elements within <code>scope</code> that it matches.
However, the selector is evaluated relative to the Document as a whole.
<em>(XXX is this intentional, a mistake, or compromise?)</em></p>
<p>The function is curried, taking first the selector and then the scope.</p>
<p>As there may be multiple matches for a given selector, the matcher will
return an (async) generator that produces each match in the order they are
found in the text.</p>
<p>Each matching element is returned as a <a href="https://developer.mozilla.org/en-US/docs/Web/API/Range" class="external">Range</a> surrounding that element. This in order to make its output reusable
as the scope for any subsequents selectors that <a href="../interfaces/selector.selector-1.html#refinedby">refine</a> this CssSelector.</p>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>selector: <a href="../interfaces/selector.cssselector.html" class="tsd-signature-type" data-tsd-kind="Interface">CssSelector</a></h5>
<div class="tsd-comment tsd-typography">
<p>The <a href="../interfaces/selector.cssselector.html">CssSelector</a> to be
anchored</p>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <a href="../interfaces/selector.matcher.html" class="tsd-signature-type" data-tsd-kind="Interface">Matcher</a><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">Range</span><span class="tsd-signature-symbol">, </span><span class="tsd-signature-type">Range</span><span class="tsd-signature-symbol">&gt;</span></h4>
<p>A <a href="../interfaces/selector.matcher.html">Matcher</a> function that applies
<code>selector</code> to a given <a href="https://developer.mozilla.org/en-US/docs/Web/API/Range" class="external">Range</a></p>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-function tsd-parent-kind-module">
<a name="createtextpositionselectormatcher" class="tsd-anchor"></a>
<h3>create<wbr>Text<wbr>Position<wbr>Selector<wbr>Matcher</h3>
<ul class="tsd-signatures tsd-kind-function tsd-parent-kind-module">
<li class="tsd-signature tsd-kind-icon">create<wbr>Text<wbr>Position<wbr>Selector<wbr>Matcher<span class="tsd-signature-symbol">(</span>selector<span class="tsd-signature-symbol">: </span><a href="../interfaces/selector.textpositionselector.html" class="tsd-signature-type" data-tsd-kind="Interface">TextPositionSelector</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="../interfaces/selector.matcher.html" class="tsd-signature-type" data-tsd-kind="Interface">Matcher</a><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">Range</span><span class="tsd-signature-symbol">, </span><span class="tsd-signature-type">Range</span><span class="tsd-signature-symbol">&gt;</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<aside class="tsd-sources">
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Find the range of text corresponding to the given <a href="../interfaces/selector.textpositionselector.html">TextPositionSelector</a>.</p>
</div>
<p>The start and end positions are measured relative to the first text character
in the given scope.</p>
<p>The function is curried, taking first the selector and then the scope.</p>
<p>Its end result is an (async) generator producing a single <a href="https://developer.mozilla.org/en-US/docs/Web/API/Range" class="external">Range</a> to represent the match. (unlike a <a href="../interfaces/selector.textquoteselector.html">TextQuoteSelector</a>, a TextPositionSelector cannot have
multiple matches).</p>
<dl class="tsd-comment-tags">
<dt>example</dt>
<dd><pre><code><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">selector</span><span style="color: #000000"> = { </span><span style="color: #001080">type:</span><span style="color: #000000"> </span><span style="color: #A31515">&#039;TextPositionSelector&#039;</span><span style="color: #000000">, </span><span style="color: #001080">start:</span><span style="color: #000000"> </span><span style="color: #098658">702</span><span style="color: #000000">, </span><span style="color: #001080">end:</span><span style="color: #000000"> </span><span style="color: #098658">736</span><span style="color: #000000"> };</span>
<span style="color: #008000">// Search in the whole document.</span>
<span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">scope</span><span style="color: #000000"> = </span><span style="color: #001080">document</span><span style="color: #000000">.</span><span style="color: #795E26">createRange</span><span style="color: #000000">();</span>
<span style="color: #001080">scope</span><span style="color: #000000">.</span><span style="color: #795E26">selectNodeContents</span><span style="color: #000000">(</span><span style="color: #001080">document</span><span style="color: #000000">);</span>
<span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">matches</span><span style="color: #000000"> = </span><span style="color: #795E26">textQuoteSelectorMatcher</span><span style="color: #000000">(</span><span style="color: #001080">selector</span><span style="color: #000000">)(</span><span style="color: #001080">scope</span><span style="color: #000000">);</span>
<span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">match</span><span style="color: #000000"> = (</span><span style="color: #AF00DB">await</span><span style="color: #000000"> </span><span style="color: #001080">matches</span><span style="color: #000000">.</span><span style="color: #795E26">next</span><span style="color: #000000">()).</span><span style="color: #001080">value</span><span style="color: #000000">;</span>
<span style="color: #008000">// ⇒ Range { startContainer: #text, startOffset: 64, endContainer: #text,</span>
<span style="color: #008000">// endOffset: 98, … }</span>
</code></pre>
</dd>
</dl>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>selector: <a href="../interfaces/selector.textpositionselector.html" class="tsd-signature-type" data-tsd-kind="Interface">TextPositionSelector</a></h5>
<div class="tsd-comment tsd-typography">
<p>The <a href="../interfaces/selector.textpositionselector.html">TextPositionSelector</a>
to be anchored</p>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <a href="../interfaces/selector.matcher.html" class="tsd-signature-type" data-tsd-kind="Interface">Matcher</a><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">Range</span><span class="tsd-signature-symbol">, </span><span class="tsd-signature-type">Range</span><span class="tsd-signature-symbol">&gt;</span></h4>
<p>A <a href="../interfaces/selector.matcher.html">Matcher</a> function that applies
<code>selector</code> to a given <a href="https://developer.mozilla.org/en-US/docs/Web/API/Range" class="external">Range</a></p>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-function tsd-parent-kind-module">
<a name="createtextquoteselectormatcher" class="tsd-anchor"></a>
<h3>create<wbr>Text<wbr>Quote<wbr>Selector<wbr>Matcher</h3>
<ul class="tsd-signatures tsd-kind-function tsd-parent-kind-module">
<li class="tsd-signature tsd-kind-icon">create<wbr>Text<wbr>Quote<wbr>Selector<wbr>Matcher<span class="tsd-signature-symbol">(</span>selector<span class="tsd-signature-symbol">: </span><a href="../interfaces/selector.textquoteselector.html" class="tsd-signature-type" data-tsd-kind="Interface">TextQuoteSelector</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="../interfaces/selector.matcher.html" class="tsd-signature-type" data-tsd-kind="Interface">Matcher</a><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">Range</span><span class="tsd-signature-symbol">, </span><span class="tsd-signature-type">Range</span><span class="tsd-signature-symbol">&gt;</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<aside class="tsd-sources">
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Find occurrences in a text matching the given <a href="../interfaces/selector.textquoteselector.html">TextQuoteSelector</a>.</p>
</div>
<p>This performs an exact search for the selector’s quote (including prefix and
suffix) within the text contained in the given scope (a <a href="https://developer.mozilla.org/en-US/docs/Web/API/Range" class="external">Range</a>).</p>
<p>Note the match is based on strict character-by-character equivalence, i.e.
it is sensitive to whitespace, capitalisation, etc.</p>
<p>The function is curried, taking first the selector and then the scope.</p>
<p>As there may be multiple matches for a given selector (when its prefix and
suffix attributes are not sufficient to disambiguate it), the matcher will
return an (async) generator that produces each match in the order they are
found in the text.</p>
<dl class="tsd-comment-tags">
<dt>example</dt>
<dd><pre><code><span style="color: #008000">// Find the word ‘banana’.</span>
<span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">selector</span><span style="color: #000000"> = { </span><span style="color: #001080">type:</span><span style="color: #000000"> </span><span style="color: #A31515">&#039;TextQuoteSelector&#039;</span><span style="color: #000000">, </span><span style="color: #001080">exact:</span><span style="color: #000000"> </span><span style="color: #A31515">&#039;banana&#039;</span><span style="color: #000000"> };</span>
<span style="color: #008000">// Search in the document body.</span>
<span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">scope</span><span style="color: #000000"> = </span><span style="color: #001080">document</span><span style="color: #000000">.</span><span style="color: #795E26">createRange</span><span style="color: #000000">();</span>
<span style="color: #001080">scope</span><span style="color: #000000">.</span><span style="color: #795E26">selectNodeContents</span><span style="color: #000000">(</span><span style="color: #001080">document</span><span style="color: #000000">.</span><span style="color: #001080">body</span><span style="color: #000000">);</span>
<span style="color: #008000">// Read all matches.</span>
<span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">matches</span><span style="color: #000000"> = </span><span style="color: #795E26">textQuoteSelectorMatcher</span><span style="color: #000000">(</span><span style="color: #001080">selector</span><span style="color: #000000">)(</span><span style="color: #001080">scope</span><span style="color: #000000">);</span>
<span style="color: #AF00DB">for</span><span style="color: #000000"> </span><span style="color: #AF00DB">await</span><span style="color: #000000"> (</span><span style="color: #001080">match</span><span style="color: #000000"> </span><span style="color: #0000FF">of</span><span style="color: #000000"> </span><span style="color: #001080">matches</span><span style="color: #000000">) </span><span style="color: #001080">console</span><span style="color: #000000">.</span><span style="color: #795E26">log</span><span style="color: #000000">(</span><span style="color: #001080">match</span><span style="color: #000000">);</span>
<span style="color: #008000">// ⇒ Range { startContainer: #text, startOffset: 187, endContainer: #text,</span>
<span style="color: #008000">// endOffset: 193, … }</span>
<span style="color: #008000">// ⇒ Range { startContainer: #text, startOffset: 631, endContainer: #text,</span>
<span style="color: #008000">// endOffset: 637, … }</span>
</code></pre>
</dd>
</dl>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>selector: <a href="../interfaces/selector.textquoteselector.html" class="tsd-signature-type" data-tsd-kind="Interface">TextQuoteSelector</a></h5>
<div class="tsd-comment tsd-typography">
<p>The <a href="../interfaces/selector.textquoteselector.html">TextQuoteSelector</a>
to be anchored</p>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <a href="../interfaces/selector.matcher.html" class="tsd-signature-type" data-tsd-kind="Interface">Matcher</a><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">Range</span><span class="tsd-signature-symbol">, </span><span class="tsd-signature-type">Range</span><span class="tsd-signature-symbol">&gt;</span></h4>
<p>a <a href="../interfaces/selector.matcher.html">Matcher</a> function that applies
<code>selector</code> to a given <a href="https://developer.mozilla.org/en-US/docs/Web/API/Range" class="external">Range</a></p>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-function tsd-parent-kind-module">
<a name="describetextposition" class="tsd-anchor"></a>
<h3>describe<wbr>Text<wbr>Position</h3>
<ul class="tsd-signatures tsd-kind-function tsd-parent-kind-module">
<li class="tsd-signature tsd-kind-icon">describe<wbr>Text<wbr>Position<span class="tsd-signature-symbol">(</span>range<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">Range</span>, maybeScope<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">Range</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">Promise</span><span class="tsd-signature-symbol">&lt;</span><a href="../interfaces/selector.textpositionselector.html" class="tsd-signature-type" data-tsd-kind="Interface">TextPositionSelector</a><span class="tsd-signature-symbol">&gt;</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<aside class="tsd-sources">
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Returns a <a href="../interfaces/selector.textpositionselector.html">TextPositionSelector</a> that points
at the target text within the given scope.</p>
</div>
<p>When no scope is given, the position is described relative to the document
as a whole. Note this means all the characters in all Text nodes are counted
to determine the target’s position, including those in the <code>&lt;head&gt;</code> and
whitespace, hence even a minor modification could make the selector point to
a different text than its original target.</p>
<dl class="tsd-comment-tags">
<dt>example</dt>
<dd><pre><code><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">target</span><span style="color: #000000"> = </span><span style="color: #001080">window</span><span style="color: #000000">.</span><span style="color: #795E26">getSelection</span><span style="color: #000000">().</span><span style="color: #795E26">getRangeAt</span><span style="color: #000000">(</span><span style="color: #098658">0</span><span style="color: #000000">);</span>
<span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">selector</span><span style="color: #000000"> = </span><span style="color: #AF00DB">await</span><span style="color: #000000"> </span><span style="color: #795E26">describeTextPosition</span><span style="color: #000000">(</span><span style="color: #001080">target</span><span style="color: #000000">);</span>
<span style="color: #001080">console</span><span style="color: #000000">.</span><span style="color: #795E26">log</span><span style="color: #000000">(</span><span style="color: #001080">selector</span><span style="color: #000000">);</span>
<span style="color: #008000">// {</span>
<span style="color: #008000">// type: &#039;TextPositionSelector&#039;,</span>
<span style="color: #008000">// start: 702,</span>
<span style="color: #008000">// end: 736</span>
<span style="color: #008000">// }</span>
</code></pre>
</dd>
</dl>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>range: <span class="tsd-signature-type">Range</span></h5>
<div class="tsd-comment tsd-typography">
<p>The range of characters that the selector should describe</p>
</div>
</li>
<li>
<h5><span class="tsd-flag ts-flagOptional">Optional</span> maybeScope: <span class="tsd-signature-type">Range</span></h5>
<div class="tsd-comment tsd-typography">
<p>A <a href="https://developer.mozilla.org/en-US/docs/Web/API/Range" class="external">Range</a> that serves as the ‘document’ for purposes of finding occurrences
and determining prefix and suffix. Defaults to span the full Document
containing the range.</p>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">Promise</span><span class="tsd-signature-symbol">&lt;</span><a href="../interfaces/selector.textpositionselector.html" class="tsd-signature-type" data-tsd-kind="Interface">TextPositionSelector</a><span class="tsd-signature-symbol">&gt;</span></h4>
<p>The selector describing the <code>range</code> relative to <code>scope</code></p>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-function tsd-parent-kind-module">
<a name="describetextquote" class="tsd-anchor"></a>
<h3>describe<wbr>Text<wbr>Quote</h3>
<ul class="tsd-signatures tsd-kind-function tsd-parent-kind-module">
<li class="tsd-signature tsd-kind-icon">describe<wbr>Text<wbr>Quote<span class="tsd-signature-symbol">(</span>range<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">Range</span>, maybeScope<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">Range</span>, options<span class="tsd-signature-symbol">?: </span><a href="../interfaces/selector.describetextquoteoptions.html" class="tsd-signature-type" data-tsd-kind="Interface">DescribeTextQuoteOptions</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">Promise</span><span class="tsd-signature-symbol">&lt;</span><a href="../interfaces/selector.textquoteselector.html" class="tsd-signature-type" data-tsd-kind="Interface">TextQuoteSelector</a><span class="tsd-signature-symbol">&gt;</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<aside class="tsd-sources">
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Create a <a href="../interfaces/selector.textquoteselector.html">TextQuoteSelector</a> that
unambiguously describes the given range.</p>
</div>
<p>The selector will contain the <em>exact</em> target quote, and in case this quote
appears multiple times in the text, sufficient context around the quote will
be included in the selector’s <em>prefix</em> and <em>suffix</em> attributes to
disambiguate. By default, more prefix and suffix are included than strictly
required; both in order to be robust against slight modifications, and in an
attempt to not end halfway a word (mainly for the sake of human readability).</p>
<dl class="tsd-comment-tags">
<dt>example</dt>
<dd><pre><code><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">target</span><span style="color: #000000"> = </span><span style="color: #001080">window</span><span style="color: #000000">.</span><span style="color: #795E26">getSelection</span><span style="color: #000000">().</span><span style="color: #795E26">getRangeAt</span><span style="color: #000000">(</span><span style="color: #098658">0</span><span style="color: #000000">);</span>
<span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">selector</span><span style="color: #000000"> = </span><span style="color: #AF00DB">await</span><span style="color: #000000"> </span><span style="color: #795E26">describeTextQuote</span><span style="color: #000000">(</span><span style="color: #001080">target</span><span style="color: #000000">);</span>
<span style="color: #001080">console</span><span style="color: #000000">.</span><span style="color: #795E26">log</span><span style="color: #000000">(</span><span style="color: #001080">selector</span><span style="color: #000000">);</span>
<span style="color: #008000">// {</span>
<span style="color: #008000">// type: &#039;TextQuoteSelector&#039;,</span>
<span style="color: #008000">// exact: &#039;ipsum&#039;,</span>
<span style="color: #008000">// prefix: &#039;Lorem &#039;,</span>
<span style="color: #008000">// suffix: &#039; dolor&#039;</span>
<span style="color: #008000">// }</span>
</code></pre>
</dd>
</dl>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>range: <span class="tsd-signature-type">Range</span></h5>
<div class="tsd-comment tsd-typography">
<p>The <a href="https://developer.mozilla.org/en-US/docs/Web/API/Range" class="external">Range</a> whose text content will be described</p>
</div>
</li>
<li>
<h5><span class="tsd-flag ts-flagOptional">Optional</span> maybeScope: <span class="tsd-signature-type">Range</span></h5>
<div class="tsd-comment tsd-typography">
<p>A <a href="https://developer.mozilla.org/en-US/docs/Web/API/Range" class="external">Range</a> that serves as the ‘document’ for purposes of finding occurrences
and determining prefix and suffix. Defaults to span the full Document
containing the range.</p>
</div>
</li>
<li>
<h5><span class="tsd-flag ts-flagOptional">Optional</span> options: <a href="../interfaces/selector.describetextquoteoptions.html" class="tsd-signature-type" data-tsd-kind="Interface">DescribeTextQuoteOptions</a></h5>
<div class="tsd-comment tsd-typography">
<p>Options to fine-tune the function’s behaviour.</p>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">Promise</span><span class="tsd-signature-symbol">&lt;</span><a href="../interfaces/selector.textquoteselector.html" class="tsd-signature-type" data-tsd-kind="Interface">TextQuoteSelector</a><span class="tsd-signature-symbol">&gt;</span></h4>
<p>The selector unambiguously describing the <code>range</code> in <code>scope</code>.</p>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-function tsd-parent-kind-module">
<a name="highlightrange" class="tsd-anchor"></a>
<h3>highlight<wbr>Range</h3>
<ul class="tsd-signatures tsd-kind-function tsd-parent-kind-module">
<li class="tsd-signature tsd-kind-icon">highlight<wbr>Range<span class="tsd-signature-symbol">(</span>range<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">Range</span>, tagName<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">string</span>, attributes<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">Record</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">, </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> =&gt; </span><span class="tsd-signature-type">void</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<aside class="tsd-sources">
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Wrap each text node in a given DOM Range with a <code>&lt;mark&gt;</code> or other element.</p>
</div>
<p>If the Range start and/or ends within a Text node, that node will be split
in order to only wrap the contained part in the mark element.</p>
<p>The highlight can be removed again by calling the function that cleans up the
wrapper elements. Note that this might not perfectly restore the DOM to its
previous state: text nodes that were split are not merged again. One could
consider running <code>range.commonAncestorContainer.normalize()</code> afterwards to
join all adjacent text nodes.</p>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>range: <span class="tsd-signature-type">Range</span></h5>
<div class="tsd-comment tsd-typography">
<p>A DOM Range object. Note that as highlighting modifies the
DOM, the range may be unusable afterwards.</p>
</div>
</li>
<li>
<h5><span class="tsd-flag ts-flagOptional">Optional</span> tagName: <span class="tsd-signature-type">string</span></h5>
<div class="tsd-comment tsd-typography">
<p>The element used to wrap text nodes. Defaults to &#39;mark&#39;.</p>
</div>
</li>
<li>
<h5><span class="tsd-flag ts-flagOptional">Optional</span> attributes: <span class="tsd-signature-type">Record</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">, </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">&gt;</span></h5>
<div class="tsd-comment tsd-typography">
<p>An object defining any attributes to be set on the
wrapper elements</p>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> =&gt; </span><span class="tsd-signature-type">void</span></h4>
<p>A function that removes the created highlight.</p>
<ul class="tsd-parameters">
<li class="tsd-parameter-signature">
<ul class="tsd-signatures tsd-kind-type-literal">
<li class="tsd-signature tsd-kind-icon"><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-function tsd-parent-kind-module">
<a name="makecreaterangeselectormatcher" class="tsd-anchor"></a>
<h3>make<wbr>Create<wbr>Range<wbr>Selector<wbr>Matcher</h3>
<ul class="tsd-signatures tsd-kind-function tsd-parent-kind-module">
<li class="tsd-signature tsd-kind-icon">make<wbr>Create<wbr>Range<wbr>Selector<wbr>Matcher<span class="tsd-signature-symbol">(</span>createMatcher<span class="tsd-signature-symbol">: </span>&lt;T&gt;<span class="tsd-signature-symbol">(</span>selector<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">T</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> =&gt; </span><a href="../interfaces/selector.matcher.html" class="tsd-signature-type" data-tsd-kind="Interface">Matcher</a><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">Range</span><span class="tsd-signature-symbol">, </span><span class="tsd-signature-type">Range</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">(</span>selector<span class="tsd-signature-symbol">: </span><a href="../interfaces/selector.rangeselector.html" class="tsd-signature-type" data-tsd-kind="Interface">RangeSelector</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> =&gt; </span><a href="../interfaces/selector.matcher.html" class="tsd-signature-type" data-tsd-kind="Interface">Matcher</a><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">Range</span><span class="tsd-signature-symbol">, </span><span class="tsd-signature-type">Range</span><span class="tsd-signature-symbol">&gt;</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<aside class="tsd-sources">
</aside>
<div class="tsd-comment tsd-typography">
<div class="lead">
<p>Find the range(s) corresponding to the given <a href="../interfaces/selector.rangeselector.html">RangeSelector</a>.</p>
</div>
<p>As a RangeSelector itself nests two further selectors, one needs to pass a
<code>createMatcher</code> function that will be used to process those nested selectors.</p>
<p>The function is curried, taking first the <code>createMatcher</code> function, then the
selector, and then the scope.</p>
<p>As there may be multiple matches for a given selector, the matcher will
return an (async) generator that produces each match in the order they are
found in the text. If both its nested selectors produce multiple matches, the
RangeSelector matches each possible pair among those in which the order of
start and end are respected. <em>(Note this behaviour is a rather free
interpretation — the Web Annotation Data Model spec is silent about multiple
matches for RangeSelectors)</em></p>
<dl class="tsd-comment-tags">
<dt>example</dt>
<dd><p>By using a matcher for <a href="../interfaces/selector.textquoteselector.html">TextQuoteSelector</a>s, one
could create a matcher for text quotes with ellipsis to select a phrase
“ipsum … amet,”:</p>
<pre><code><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">selector</span><span style="color: #000000"> = {</span>
<span style="color: #000000"> </span><span style="color: #001080">type:</span><span style="color: #000000"> </span><span style="color: #A31515">&#039;RangeSelector&#039;</span><span style="color: #000000">,</span>
<span style="color: #000000"> </span><span style="color: #001080">startSelector:</span><span style="color: #000000"> {</span>
<span style="color: #000000"> </span><span style="color: #001080">type:</span><span style="color: #000000"> </span><span style="color: #A31515">&#039;TextQuoteSelector&#039;</span><span style="color: #000000">,</span>
<span style="color: #000000"> </span><span style="color: #001080">exact:</span><span style="color: #000000"> </span><span style="color: #A31515">&#039;ipsum &#039;</span><span style="color: #000000">,</span>
<span style="color: #000000"> },</span>
<span style="color: #000000"> </span><span style="color: #001080">endSelector:</span><span style="color: #000000"> {</span>
<span style="color: #000000"> </span><span style="color: #001080">type:</span><span style="color: #000000"> </span><span style="color: #A31515">&#039;TextQuoteSelector&#039;</span><span style="color: #000000">,</span>
<span style="color: #000000"> </span><span style="color: #008000">// Because the end of a RangeSelector is *exclusive*, we’ll present the</span>
<span style="color: #000000"> </span><span style="color: #008000">// latter part of the quote as the *prefix* so it will part of the match.</span>
<span style="color: #000000"> </span><span style="color: #001080">exact:</span><span style="color: #000000"> </span><span style="color: #A31515">&#039;&#039;</span><span style="color: #000000">,</span>
<span style="color: #000000"> </span><span style="color: #001080">prefix:</span><span style="color: #000000"> </span><span style="color: #A31515">&#039; amet,&#039;</span><span style="color: #000000">,</span>
<span style="color: #000000"> }</span>
<span style="color: #000000">}}</span>
<span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">createRangeSelectorMatcher</span><span style="color: #000000"> = </span><span style="color: #795E26">makeCreateRangeSelectorMatcher</span><span style="color: #000000">(</span><span style="color: #001080">createTextQuoteMatcher</span><span style="color: #000000">);</span>
<span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">match</span><span style="color: #000000"> = </span><span style="color: #795E26">createRangeSelectorMatcher</span><span style="color: #000000">(</span><span style="color: #001080">selector</span><span style="color: #000000">)(</span><span style="color: #001080">document</span><span style="color: #000000">.</span><span style="color: #001080">body</span><span style="color: #000000">);</span>
<span style="color: #001080">console</span><span style="color: #000000">.</span><span style="color: #795E26">log</span><span style="color: #000000">(</span><span style="color: #001080">match</span><span style="color: #000000">)</span>
<span style="color: #008000">// ⇒ Range { startContainer: #text, startOffset: 6, endContainer: #text,</span>
<span style="color: #008000">// endOffset: 27, … }</span>
</code></pre>
</dd>
<dt>example</dt>
<dd><p>To support RangeSelectors that might themselves contain RangeSelectors,
recursion can be created by supplying the resulting matcher creator function
as the <code>createMatcher</code> parameter:</p>
<pre><code><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #795E26">createWhicheverMatcher</span><span style="color: #000000"> = (</span><span style="color: #001080">selector</span><span style="color: #000000">) </span><span style="color: #0000FF">=&gt;</span><span style="color: #000000"> {</span>
<span style="color: #000000"> </span><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">innerCreateMatcher</span><span style="color: #000000"> = {</span>
<span style="color: #000000"> </span><span style="color: #001080">TextQuoteSelector:</span><span style="color: #000000"> </span><span style="color: #001080">createTextQuoteSelectorMatcher</span><span style="color: #000000">,</span>
<span style="color: #000000"> </span><span style="color: #001080">TextPositionSelector:</span><span style="color: #000000"> </span><span style="color: #001080">createTextPositionSelectorMatcher</span><span style="color: #000000">,</span>
<span style="color: #000000"> </span><span style="color: #001080">RangeSelector:</span><span style="color: #000000"> </span><span style="color: #795E26">makeCreateRangeSelectorMatcher</span><span style="color: #000000">(</span><span style="color: #001080">createWhicheverMatcher</span><span style="color: #000000">),</span>
<span style="color: #000000"> }[</span><span style="color: #001080">selector</span><span style="color: #000000">.</span><span style="color: #001080">type</span><span style="color: #000000">];</span>
<span style="color: #000000"> </span><span style="color: #AF00DB">return</span><span style="color: #000000"> </span><span style="color: #795E26">innerCreateMatcher</span><span style="color: #000000">(</span><span style="color: #001080">selector</span><span style="color: #000000">);</span>
<span style="color: #000000">});</span>
</code></pre>
</dd>
</dl>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>createMatcher: &lt;T&gt;<span class="tsd-signature-symbol">(</span>selector<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">T</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> =&gt; </span><a href="../interfaces/selector.matcher.html" class="tsd-signature-type" data-tsd-kind="Interface">Matcher</a><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">Range</span><span class="tsd-signature-symbol">, </span><span class="tsd-signature-type">Range</span><span class="tsd-signature-symbol">&gt;</span></h5>
<div class="tsd-comment tsd-typography">
<p>The function used to process nested selectors.</p>
</div>
<ul class="tsd-parameters">
<li class="tsd-parameter-signature">
<ul class="tsd-signatures tsd-kind-type-literal tsd-has-type-parameter">
<li class="tsd-signature tsd-kind-icon">&lt;T&gt;<span class="tsd-signature-symbol">(</span>selector<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">T</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="../interfaces/selector.matcher.html" class="tsd-signature-type" data-tsd-kind="Interface">Matcher</a><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">Range</span><span class="tsd-signature-symbol">, </span><span class="tsd-signature-type">Range</span><span class="tsd-signature-symbol">&gt;</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<h4 class="tsd-type-parameters-title">Type parameters</h4>
<ul class="tsd-type-parameters">
<li>
<h4>T<span class="tsd-signature-symbol">: </span><a href="../interfaces/selector.selector-1.html" class="tsd-signature-type" data-tsd-kind="Interface">Selector</a></h4>
</li>
</ul>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>selector: <span class="tsd-signature-type">T</span></h5>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <a href="../interfaces/selector.matcher.html" class="tsd-signature-type" data-tsd-kind="Interface">Matcher</a><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">Range</span><span class="tsd-signature-symbol">, </span><span class="tsd-signature-type">Range</span><span class="tsd-signature-symbol">&gt;</span></h4>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-symbol">(</span>selector<span class="tsd-signature-symbol">: </span><a href="../interfaces/selector.rangeselector.html" class="tsd-signature-type" data-tsd-kind="Interface">RangeSelector</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> =&gt; </span><a href="../interfaces/selector.matcher.html" class="tsd-signature-type" data-tsd-kind="Interface">Matcher</a><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">Range</span><span class="tsd-signature-symbol">, </span><span class="tsd-signature-type">Range</span><span class="tsd-signature-symbol">&gt;</span></h4>
<p>A function that, given a RangeSelector, creates a <a href="../interfaces/selector.matcher.html">Matcher</a> function that applies it to a given <a href="https://developer.mozilla.org/en-US/docs/Web/API/Range" class="external">Range</a></p>
<ul class="tsd-parameters">
<li class="tsd-parameter-signature">
<ul class="tsd-signatures tsd-kind-type-literal">
<li class="tsd-signature tsd-kind-icon"><span class="tsd-signature-symbol">(</span>selector<span class="tsd-signature-symbol">: </span><a href="../interfaces/selector.rangeselector.html" class="tsd-signature-type" data-tsd-kind="Interface">RangeSelector</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="../interfaces/selector.matcher.html" class="tsd-signature-type" data-tsd-kind="Interface">Matcher</a><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">Range</span><span class="tsd-signature-symbol">, </span><span class="tsd-signature-type">Range</span><span class="tsd-signature-symbol">&gt;</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>selector: <a href="../interfaces/selector.rangeselector.html" class="tsd-signature-type" data-tsd-kind="Interface">RangeSelector</a></h5>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <a href="../interfaces/selector.matcher.html" class="tsd-signature-type" data-tsd-kind="Interface">Matcher</a><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">Range</span><span class="tsd-signature-symbol">, </span><span class="tsd-signature-type">Range</span><span class="tsd-signature-symbol">&gt;</span></h4>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</section>
</section>
</div>
<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
<nav class="tsd-navigation primary">
<ul>
<li class=" ">
<a href="../index.html">Exports</a>
</li>
<li class="current tsd-kind-module">
<a href="dom.html">dom</a>
</li>
<li class=" tsd-kind-module">
<a href="selector.html">selector</a>
</li>
</ul>
</nav>
<nav class="tsd-navigation secondary menu-sticky">
<ul class="before-current">
<li class=" tsd-kind-function tsd-parent-kind-module">
<a href="dom.html#createcssselectormatcher" class="tsd-kind-icon">create<wbr>Css<wbr>Selector<wbr>Matcher</a>
</li>
<li class=" tsd-kind-function tsd-parent-kind-module">
<a href="dom.html#createtextpositionselectormatcher" class="tsd-kind-icon">create<wbr>Text<wbr>Position<wbr>Selector<wbr>Matcher</a>
</li>
<li class=" tsd-kind-function tsd-parent-kind-module">
<a href="dom.html#createtextquoteselectormatcher" class="tsd-kind-icon">create<wbr>Text<wbr>Quote<wbr>Selector<wbr>Matcher</a>
</li>
<li class=" tsd-kind-function tsd-parent-kind-module">
<a href="dom.html#describetextposition" class="tsd-kind-icon">describe<wbr>Text<wbr>Position</a>
</li>
<li class=" tsd-kind-function tsd-parent-kind-module">
<a href="dom.html#describetextquote" class="tsd-kind-icon">describe<wbr>Text<wbr>Quote</a>
</li>
<li class=" tsd-kind-function tsd-parent-kind-module">
<a href="dom.html#highlightrange" class="tsd-kind-icon">highlight<wbr>Range</a>
</li>
<li class=" tsd-kind-function tsd-parent-kind-module">
<a href="dom.html#makecreaterangeselectormatcher" class="tsd-kind-icon">make<wbr>Create<wbr>Range<wbr>Selector<wbr>Matcher</a>
</li>
</ul>
</nav>
</div>
</div>
</main>
<script src="../assets/js/main.js"></script>
</div>
<footer class="ui bottom attached segment">
<div class="ui container">
<div class="ui equal height divided stackable grid">
<div class="four wide column">
<a class="ui left floated medium image" href="https://apache.org/" target="_blank">
<img src="https://incubator.apache.org/images/incubator_feather_egg_logo_sm.png" alt="logo of the Apache Incubator" />
</a>
<p>
<em>Copyright © 2016-2018 The Apache Software Foundation, Licensed under
the <a href="https://www.apache.org/licenses/LICENSE-2.0" rel="license external">Apache License, Version 2.0</a>.
|
<a rel="external" href="https://www.apache.org/foundation/policies/privacy">Privacy Policy</a>
</em>
</p>
</div>
<div class="nine wide column">
<p>
<em>Apache Annotator is an effort undergoing incubation at <a target="_blank" href="https://apache.org/">The Apache Software Foundation (ASF)</a> sponsored by the Apache Incubator PMC. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</em></p>
<p><em>Apache®, the names of Apache projects, and the feather logo are either <a rel="external" href="https://www.apache.org/foundation/marks/list/">registered trademarks or trademarks</a> of the Apache Software Foundation in the United States and/or other countries.</em></p>
</div>
<div class="three wide column">
<h4 class="header">The <abbr title="Apache Software Foundation">ASF</abbr></h4>
<div class="ui link list">
<a class="item" rel="external" href="https://incubator.apache.org/">Apache Incubator</a>
<a class="item" rel="external" href="https://www.apache.org/">About the ASF</a>
<a class="item" rel="external" href="https://www.apache.org/events/current-event">Events</a>
<a class="item" rel="external" href="https://www.apache.org/foundation/thanks.html">Thanks</a>
<a class="item" rel="external" href="https://www.apache.org/foundation/sponsorship.html">Become a Sponsor</a>
<a class="item" rel="external" href="https://www.apache.org/security/">Security</a>
<a class="item" rel="external" href="https://www.apache.org/licenses/">License</a>
</div>
</div>
</div>
</div>
</footer>
</body>
</html>