scrawl-canvas
Version:
Version 8.9.4 - 19 Nov 2022
1,032 lines (659 loc) • 51.6 kB
HTML
<!DOCTYPE html>
<html>
<head>
<title>Anchor mixin</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
<link rel="stylesheet" media="all" href="../../docco.css" />
</head>
<body>
<div id="container">
<div id="background"></div>
<ul id="jump_to">
<li>
<a class="large" href="javascript:void(0);">Jump To …</a>
<a class="small" href="javascript:void(0);">+</a>
<div id="jump_wrapper">
<div id="jump_page_wrapper">
<div id="jump_page">
<a class="source" href="../core/animationloop.html">
./source/core/animationloop.js
</a>
<a class="source" href="../core/document.html">
./source/core/document.js
</a>
<a class="source" href="../core/events.html">
./source/core/events.js
</a>
<a class="source" href="../core/init.html">
./source/core/init.js
</a>
<a class="source" href="../core/library.html">
./source/core/library.js
</a>
<a class="source" href="../core/random-seed.html">
./source/core/random-seed.js
</a>
<a class="source" href="../core/snippets.html">
./source/core/snippets.js
</a>
<a class="source" href="../core/userInteraction.html">
./source/core/userInteraction.js
</a>
<a class="source" href="../core/utilities.html">
./source/core/utilities.js
</a>
<a class="source" href="../factory/action.html">
./source/factory/action.js
</a>
<a class="source" href="../factory/anchor.html">
./source/factory/anchor.js
</a>
<a class="source" href="../factory/animation.html">
./source/factory/animation.js
</a>
<a class="source" href="../factory/bezier.html">
./source/factory/bezier.js
</a>
<a class="source" href="../factory/block.html">
./source/factory/block.js
</a>
<a class="source" href="../factory/canvas.html">
./source/factory/canvas.js
</a>
<a class="source" href="../factory/cell.html">
./source/factory/cell.js
</a>
<a class="source" href="../factory/cog.html">
./source/factory/cog.js
</a>
<a class="source" href="../factory/color.html">
./source/factory/color.js
</a>
<a class="source" href="../factory/conicGradient.html">
./source/factory/conicGradient.js
</a>
<a class="source" href="../factory/coordinate.html">
./source/factory/coordinate.js
</a>
<a class="source" href="../factory/crescent.html">
./source/factory/crescent.js
</a>
<a class="source" href="../factory/element.html">
./source/factory/element.js
</a>
<a class="source" href="../factory/emitter.html">
./source/factory/emitter.js
</a>
<a class="source" href="../factory/filter.html">
./source/factory/filter.js
</a>
<a class="source" href="../factory/filterEngine-bluenoiseData.html">
./source/factory/filterEngine-bluenoiseData.js
</a>
<a class="source" href="../factory/filterEngine.html">
./source/factory/filterEngine.js
</a>
<a class="source" href="../factory/fontAttributes.html">
./source/factory/fontAttributes.js
</a>
<a class="source" href="../factory/gradient.html">
./source/factory/gradient.js
</a>
<a class="source" href="../factory/grid.html">
./source/factory/grid.js
</a>
<a class="source" href="../factory/group.html">
./source/factory/group.js
</a>
<a class="source" href="../factory/imageAsset.html">
./source/factory/imageAsset.js
</a>
<a class="source" href="../factory/line.html">
./source/factory/line.js
</a>
<a class="source" href="../factory/lineSpiral.html">
./source/factory/lineSpiral.js
</a>
<a class="source" href="../factory/loom.html">
./source/factory/loom.js
</a>
<a class="source" href="../factory/mesh.html">
./source/factory/mesh.js
</a>
<a class="source" href="../factory/net.html">
./source/factory/net.js
</a>
<a class="source" href="../factory/noiseAsset.html">
./source/factory/noiseAsset.js
</a>
<a class="source" href="../factory/oval.html">
./source/factory/oval.js
</a>
<a class="source" href="../factory/palette.html">
./source/factory/palette.js
</a>
<a class="source" href="../factory/particle.html">
./source/factory/particle.js
</a>
<a class="source" href="../factory/particleForce.html">
./source/factory/particleForce.js
</a>
<a class="source" href="../factory/particleHistory.html">
./source/factory/particleHistory.js
</a>
<a class="source" href="../factory/particleSpring.html">
./source/factory/particleSpring.js
</a>
<a class="source" href="../factory/particleWorld.html">
./source/factory/particleWorld.js
</a>
<a class="source" href="../factory/pattern.html">
./source/factory/pattern.js
</a>
<a class="source" href="../factory/phrase.html">
./source/factory/phrase.js
</a>
<a class="source" href="../factory/picture.html">
./source/factory/picture.js
</a>
<a class="source" href="../factory/polygon.html">
./source/factory/polygon.js
</a>
<a class="source" href="../factory/polyline.html">
./source/factory/polyline.js
</a>
<a class="source" href="../factory/quadratic.html">
./source/factory/quadratic.js
</a>
<a class="source" href="../factory/quaternion.html">
./source/factory/quaternion.js
</a>
<a class="source" href="../factory/radialGradient.html">
./source/factory/radialGradient.js
</a>
<a class="source" href="../factory/rawAsset.html">
./source/factory/rawAsset.js
</a>
<a class="source" href="../factory/rdAsset.html">
./source/factory/rdAsset.js
</a>
<a class="source" href="../factory/rectangle.html">
./source/factory/rectangle.js
</a>
<a class="source" href="../factory/renderAnimation.html">
./source/factory/renderAnimation.js
</a>
<a class="source" href="../factory/shape.html">
./source/factory/shape.js
</a>
<a class="source" href="../factory/spiral.html">
./source/factory/spiral.js
</a>
<a class="source" href="../factory/spriteAsset.html">
./source/factory/spriteAsset.js
</a>
<a class="source" href="../factory/stack.html">
./source/factory/stack.js
</a>
<a class="source" href="../factory/star.html">
./source/factory/star.js
</a>
<a class="source" href="../factory/state.html">
./source/factory/state.js
</a>
<a class="source" href="../factory/tetragon.html">
./source/factory/tetragon.js
</a>
<a class="source" href="../factory/ticker.html">
./source/factory/ticker.js
</a>
<a class="source" href="../factory/tracer.html">
./source/factory/tracer.js
</a>
<a class="source" href="../factory/tween.html">
./source/factory/tween.js
</a>
<a class="source" href="../factory/unstackedElement.html">
./source/factory/unstackedElement.js
</a>
<a class="source" href="../factory/vector.html">
./source/factory/vector.js
</a>
<a class="source" href="../factory/videoAsset.html">
./source/factory/videoAsset.js
</a>
<a class="source" href="../factory/wheel.html">
./source/factory/wheel.js
</a>
<a class="source" href="anchor.html">
./source/mixin/anchor.js
</a>
<a class="source" href="asset.html">
./source/mixin/asset.js
</a>
<a class="source" href="assetAdvancedFunctionality.html">
./source/mixin/assetAdvancedFunctionality.js
</a>
<a class="source" href="assetConsumer.html">
./source/mixin/assetConsumer.js
</a>
<a class="source" href="base.html">
./source/mixin/base.js
</a>
<a class="source" href="cascade.html">
./source/mixin/cascade.js
</a>
<a class="source" href="delta.html">
./source/mixin/delta.js
</a>
<a class="source" href="displayShape.html">
./source/mixin/displayShape.js
</a>
<a class="source" href="dom.html">
./source/mixin/dom.js
</a>
<a class="source" href="entity.html">
./source/mixin/entity.js
</a>
<a class="source" href="filter.html">
./source/mixin/filter.js
</a>
<a class="source" href="mimic.html">
./source/mixin/mimic.js
</a>
<a class="source" href="path.html">
./source/mixin/path.js
</a>
<a class="source" href="pattern.html">
./source/mixin/pattern.js
</a>
<a class="source" href="pivot.html">
./source/mixin/pivot.js
</a>
<a class="source" href="position.html">
./source/mixin/position.js
</a>
<a class="source" href="shapeBasic.html">
./source/mixin/shapeBasic.js
</a>
<a class="source" href="shapeCurve.html">
./source/mixin/shapeCurve.js
</a>
<a class="source" href="shapePathCalculation.html">
./source/mixin/shapePathCalculation.js
</a>
<a class="source" href="styles.html">
./source/mixin/styles.js
</a>
<a class="source" href="tween.html">
./source/mixin/tween.js
</a>
</div>
</div>
</li>
</ul>
<ul class="sections">
<li id="section-1">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-1">§</a>
</div>
<h1 id="anchor-mixin">Anchor mixin</h1>
<p>The <a href="./factory/anchor.js">anchor object</a> holds all the data and functionality required to turn an artefact into an HTML clickable link - <a> element - to external URLs. This mixin adds functionality to artefacts for creating and managing anchor objects.</p>
<p>Each artifact can have a maximum of one anchor object associated with it.</p>
</div>
</li>
<li id="section-2">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-2">§</a>
</div>
<h4 id="imports">Imports</h4>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">import</span> { canvas } <span class="hljs-keyword">from</span> <span class="hljs-string">'../core/library.js'</span>;
<span class="hljs-keyword">import</span> { mergeOver, isa_obj, Ωempty } <span class="hljs-keyword">from</span> <span class="hljs-string">'../core/utilities.js'</span>;
<span class="hljs-keyword">import</span> { makeAnchor } <span class="hljs-keyword">from</span> <span class="hljs-string">'../factory/anchor.js'</span>;
<span class="hljs-keyword">import</span> { scrawlNavigationHold } <span class="hljs-keyword">from</span> <span class="hljs-string">'../core/document.js'</span>;</pre></div></div>
</li>
<li id="section-3">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-3">§</a>
</div>
<h4 id="export-function">Export function</h4>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-keyword">function</span> (<span class="hljs-params">P = Ωempty</span>) {</pre></div></div>
</li>
<li id="section-4">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-4">§</a>
</div>
<h4 id="shared-attributes">Shared attributes</h4>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">let</span> defaultAttributes = {</pre></div></div>
</li>
<li id="section-5">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-5">§</a>
</div>
<p><strong>anchor</strong> - a handle to the anchor object. When creating or setting an artefact this can be supplied in the argument object as a Javascript object containing the data required to create the anchor.</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-attr">anchor</span>: <span class="hljs-literal">null</span>,
};
P.<span class="hljs-property">defs</span> = <span class="hljs-title function_">mergeOver</span>(P.<span class="hljs-property">defs</span>, defaultAttributes);</pre></div></div>
</li>
<li id="section-6">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-6">§</a>
</div>
<h4 id="packet-management">Packet management</h4>
<p>No additional packet functionality required</p>
</div>
</li>
<li id="section-7">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-7">§</a>
</div>
<h4 id="clone-management">Clone management</h4>
<p>No additional clone functionality required</p>
</div>
</li>
<li id="section-8">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-8">§</a>
</div>
<h4 id="kill-management">Kill management</h4>
<p><code>demolishAnchor</code> - Note that a <code>handlePacketAnchor</code> function is also defined in the <a href="./position.html">position</a> mixin, to manage the surrounding kill functionality.</p>
</div>
<div class="content"><div class='highlight'><pre> P.<span class="hljs-property">demolishAnchor</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) {
<span class="hljs-keyword">if</span> (<span class="hljs-variable language_">this</span>.<span class="hljs-property">anchor</span>) <span class="hljs-variable language_">this</span>.<span class="hljs-property">anchor</span>.<span class="hljs-title function_">demolish</span>();
};</pre></div></div>
</li>
<li id="section-9">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-9">§</a>
</div>
<h4 id="get-set-deltaset">Get, Set, deltaSet</h4>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">let</span> G = P.<span class="hljs-property">getters</span>,
S = P.<span class="hljs-property">setters</span>,
D = P.<span class="hljs-property">deltaSetters</span>;</pre></div></div>
</li>
<li id="section-10">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-10">§</a>
</div>
<p>The following attributes (which largely map to <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a">HTML anchor attributes</a>) can be included in the argument object passed to the artefact’s factory and <code>set</code> functions, or passed as a String to the <code>get</code> function:</p>
<pre><code>artefact.<span class="hljs-property">anchorDescription</span> ~~> anchor.<span class="hljs-property">description</span>
artefact.<span class="hljs-property">anchorType</span> ~~> anchor.<span class="hljs-property">type</span>
artefact.<span class="hljs-property">anchorTarget</span> ~~> anchor.<span class="hljs-property">target</span>
artefact.<span class="hljs-property">anchorRel</span> ~~> anchor.<span class="hljs-property">rel</span>
artefact.<span class="hljs-property">anchorReferrerPolicy</span> ~~> anchor.<span class="hljs-property">referrerPolicy</span>
artefact.<span class="hljs-property">anchorPing</span> ~~> anchor.<span class="hljs-property">ping</span>
artefact.<span class="hljs-property">anchorHreflang</span> ~~> anchor.<span class="hljs-property">hreflang</span>
artefact.<span class="hljs-property">anchorHref</span> ~~> anchor.<span class="hljs-property">href</span>
artefact.<span class="hljs-property">anchorDownload</span> ~~> anchor.<span class="hljs-property">download</span>
artefact.<span class="hljs-property">anchorFocusAction</span> ~~> anchor.<span class="hljs-property">focusAction</span>
artefact.<span class="hljs-property">anchorBlurAction</span> ~~> anchor.<span class="hljs-property">blurAction</span>
</code></pre>
</div>
</li>
<li id="section-11">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-11">§</a>
</div>
<p><strong>anchorDescription</strong></p>
</div>
<div class="content"><div class='highlight'><pre> G.<span class="hljs-property">anchorDescription</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) {
<span class="hljs-keyword">if</span> (<span class="hljs-variable language_">this</span>.<span class="hljs-property">anchor</span>) <span class="hljs-keyword">return</span> <span class="hljs-variable language_">this</span>.<span class="hljs-property">anchor</span>.<span class="hljs-title function_">get</span>(<span class="hljs-string">'description'</span>);
<span class="hljs-keyword">return</span> <span class="hljs-string">''</span>;
};
S.<span class="hljs-property">anchorDescription</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">item</span>) {
<span class="hljs-keyword">if</span> (!<span class="hljs-variable language_">this</span>.<span class="hljs-property">anchor</span>) <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">buildAnchor</span>();
<span class="hljs-keyword">if</span> (<span class="hljs-variable language_">this</span>.<span class="hljs-property">anchor</span>) <span class="hljs-variable language_">this</span>.<span class="hljs-property">anchor</span>.<span class="hljs-property">setters</span>.<span class="hljs-title function_">description</span>(item);
};</pre></div></div>
</li>
<li id="section-12">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-12">§</a>
</div>
<p><strong>anchorType</strong></p>
</div>
<div class="content"><div class='highlight'><pre> G.<span class="hljs-property">anchorType</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) {
<span class="hljs-keyword">if</span> (<span class="hljs-variable language_">this</span>.<span class="hljs-property">anchor</span>) <span class="hljs-keyword">return</span> <span class="hljs-variable language_">this</span>.<span class="hljs-property">anchor</span>.<span class="hljs-title function_">get</span>(<span class="hljs-string">'type'</span>);
<span class="hljs-keyword">return</span> <span class="hljs-string">''</span>;
};
S.<span class="hljs-property">anchorType</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">item</span>) {
<span class="hljs-keyword">if</span> (!<span class="hljs-variable language_">this</span>.<span class="hljs-property">anchor</span>) <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">buildAnchor</span>();
<span class="hljs-keyword">if</span> (<span class="hljs-variable language_">this</span>.<span class="hljs-property">anchor</span>) <span class="hljs-variable language_">this</span>.<span class="hljs-property">anchor</span>.<span class="hljs-property">setters</span>.<span class="hljs-title function_">anchorType</span>(item);
};</pre></div></div>
</li>
<li id="section-13">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-13">§</a>
</div>
<p><strong>anchorTarget</strong></p>
</div>
<div class="content"><div class='highlight'><pre> G.<span class="hljs-property">anchorTarget</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) {
<span class="hljs-keyword">if</span> (<span class="hljs-variable language_">this</span>.<span class="hljs-property">anchor</span>) <span class="hljs-keyword">return</span> <span class="hljs-variable language_">this</span>.<span class="hljs-property">anchor</span>.<span class="hljs-title function_">get</span>(<span class="hljs-string">'target'</span>);
<span class="hljs-keyword">return</span> <span class="hljs-string">''</span>;
};
S.<span class="hljs-property">anchorTarget</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">item</span>) {
<span class="hljs-keyword">if</span> (!<span class="hljs-variable language_">this</span>.<span class="hljs-property">anchor</span>) <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">buildAnchor</span>();
<span class="hljs-keyword">if</span> (<span class="hljs-variable language_">this</span>.<span class="hljs-property">anchor</span>) <span class="hljs-variable language_">this</span>.<span class="hljs-property">anchor</span>.<span class="hljs-property">setters</span>.<span class="hljs-title function_">target</span>(item);
};</pre></div></div>
</li>
<li id="section-14">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-14">§</a>
</div>
<p><strong>anchorRel</strong></p>
</div>
<div class="content"><div class='highlight'><pre> G.<span class="hljs-property">anchorRel</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) {
<span class="hljs-keyword">if</span> (<span class="hljs-variable language_">this</span>.<span class="hljs-property">anchor</span>) <span class="hljs-keyword">return</span> <span class="hljs-variable language_">this</span>.<span class="hljs-property">anchor</span>.<span class="hljs-title function_">get</span>(<span class="hljs-string">'rel'</span>);
<span class="hljs-keyword">return</span> <span class="hljs-string">''</span>;
};
S.<span class="hljs-property">anchorRel</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">item</span>) {
<span class="hljs-keyword">if</span> (!<span class="hljs-variable language_">this</span>.<span class="hljs-property">anchor</span>) <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">buildAnchor</span>();
<span class="hljs-keyword">if</span> (<span class="hljs-variable language_">this</span>.<span class="hljs-property">anchor</span>) <span class="hljs-variable language_">this</span>.<span class="hljs-property">anchor</span>.<span class="hljs-property">setters</span>.<span class="hljs-title function_">rel</span>(item);
};</pre></div></div>
</li>
<li id="section-15">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-15">§</a>
</div>
<p><strong>anchorReferrerPolicy</strong></p>
</div>
<div class="content"><div class='highlight'><pre> G.<span class="hljs-property">anchorReferrerPolicy</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) {
<span class="hljs-keyword">if</span> (<span class="hljs-variable language_">this</span>.<span class="hljs-property">anchor</span>) <span class="hljs-keyword">return</span> <span class="hljs-variable language_">this</span>.<span class="hljs-property">anchor</span>.<span class="hljs-title function_">get</span>(<span class="hljs-string">'referrerpolicy'</span>);
<span class="hljs-keyword">return</span> <span class="hljs-string">''</span>;
};
S.<span class="hljs-property">anchorReferrerPolicy</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">item</span>) {
<span class="hljs-keyword">if</span> (!<span class="hljs-variable language_">this</span>.<span class="hljs-property">anchor</span>) <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">buildAnchor</span>();
<span class="hljs-keyword">if</span> (<span class="hljs-variable language_">this</span>.<span class="hljs-property">anchor</span>) <span class="hljs-variable language_">this</span>.<span class="hljs-property">anchor</span>.<span class="hljs-property">setters</span>.<span class="hljs-title function_">referrerpolicy</span>(item);
};</pre></div></div>
</li>
<li id="section-16">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-16">§</a>
</div>
<p><strong>anchorPing</strong></p>
</div>
<div class="content"><div class='highlight'><pre> G.<span class="hljs-property">anchorPing</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) {
<span class="hljs-keyword">if</span> (<span class="hljs-variable language_">this</span>.<span class="hljs-property">anchor</span>) <span class="hljs-keyword">return</span> <span class="hljs-variable language_">this</span>.<span class="hljs-property">anchor</span>.<span class="hljs-title function_">get</span>(<span class="hljs-string">'ping'</span>);
<span class="hljs-keyword">return</span> <span class="hljs-string">''</span>;
};
S.<span class="hljs-property">anchorPing</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">item</span>) {
<span class="hljs-keyword">if</span> (!<span class="hljs-variable language_">this</span>.<span class="hljs-property">anchor</span>) <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">buildAnchor</span>();
<span class="hljs-keyword">if</span> (<span class="hljs-variable language_">this</span>.<span class="hljs-property">anchor</span>) <span class="hljs-variable language_">this</span>.<span class="hljs-property">anchor</span>.<span class="hljs-property">setters</span>.<span class="hljs-title function_">ping</span>(item);
};</pre></div></div>
</li>
<li id="section-17">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-17">§</a>
</div>
<p><strong>anchorHreflang</strong></p>
</div>
<div class="content"><div class='highlight'><pre> G.<span class="hljs-property">anchorHreflang</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) {
<span class="hljs-keyword">if</span> (<span class="hljs-variable language_">this</span>.<span class="hljs-property">anchor</span>) <span class="hljs-keyword">return</span> <span class="hljs-variable language_">this</span>.<span class="hljs-property">anchor</span>.<span class="hljs-title function_">get</span>(<span class="hljs-string">'hreflang'</span>);
<span class="hljs-keyword">return</span> <span class="hljs-string">''</span>;
};
S.<span class="hljs-property">anchorHreflang</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">item</span>) {
<span class="hljs-keyword">if</span> (!<span class="hljs-variable language_">this</span>.<span class="hljs-property">anchor</span>) <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">buildAnchor</span>();
<span class="hljs-keyword">if</span> (<span class="hljs-variable language_">this</span>.<span class="hljs-property">anchor</span>) <span class="hljs-variable language_">this</span>.<span class="hljs-property">anchor</span>.<span class="hljs-property">setters</span>.<span class="hljs-title function_">hreflang</span>(item);
};</pre></div></div>
</li>
<li id="section-18">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-18">§</a>
</div>
<p><strong>anchorHref</strong></p>
</div>
<div class="content"><div class='highlight'><pre> G.<span class="hljs-property">anchorHref</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) {
<span class="hljs-keyword">if</span> (<span class="hljs-variable language_">this</span>.<span class="hljs-property">anchor</span>) <span class="hljs-keyword">return</span> <span class="hljs-variable language_">this</span>.<span class="hljs-property">anchor</span>.<span class="hljs-title function_">get</span>(<span class="hljs-string">'href'</span>);
<span class="hljs-keyword">return</span> <span class="hljs-string">''</span>;
};
S.<span class="hljs-property">anchorHref</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">item</span>) {
<span class="hljs-keyword">if</span> (!<span class="hljs-variable language_">this</span>.<span class="hljs-property">anchor</span>) <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">buildAnchor</span>();
<span class="hljs-keyword">if</span> (<span class="hljs-variable language_">this</span>.<span class="hljs-property">anchor</span>) <span class="hljs-variable language_">this</span>.<span class="hljs-property">anchor</span>.<span class="hljs-property">setters</span>.<span class="hljs-title function_">href</span>(item);
};</pre></div></div>
</li>
<li id="section-19">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-19">§</a>
</div>
<p><strong>anchorDownload</strong></p>
</div>
<div class="content"><div class='highlight'><pre> G.<span class="hljs-property">anchorDownload</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) {
<span class="hljs-keyword">if</span> (<span class="hljs-variable language_">this</span>.<span class="hljs-property">anchor</span>) <span class="hljs-keyword">return</span> <span class="hljs-variable language_">this</span>.<span class="hljs-property">anchor</span>.<span class="hljs-title function_">get</span>(<span class="hljs-string">'download'</span>);
<span class="hljs-keyword">return</span> <span class="hljs-string">''</span>;
};
S.<span class="hljs-property">anchorDownload</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">item</span>) {
<span class="hljs-keyword">if</span> (!<span class="hljs-variable language_">this</span>.<span class="hljs-property">anchor</span>) <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">buildAnchor</span>();
<span class="hljs-keyword">if</span> (<span class="hljs-variable language_">this</span>.<span class="hljs-property">anchor</span>) <span class="hljs-variable language_">this</span>.<span class="hljs-property">anchor</span>.<span class="hljs-property">setters</span>.<span class="hljs-title function_">download</span>(item);
};</pre></div></div>
</li>
<li id="section-20">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-20">§</a>
</div>
<p><strong>anchorFocusAction</strong></p>
</div>
<div class="content"><div class='highlight'><pre> S.<span class="hljs-property">anchorFocusAction</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">item</span>) {
<span class="hljs-keyword">if</span> (!<span class="hljs-variable language_">this</span>.<span class="hljs-property">anchor</span>) <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">buildAnchor</span>();
<span class="hljs-keyword">if</span> (<span class="hljs-variable language_">this</span>.<span class="hljs-property">anchor</span>) <span class="hljs-variable language_">this</span>.<span class="hljs-property">anchor</span>.<span class="hljs-property">setters</span>.<span class="hljs-title function_">focusAction</span>(item);
};</pre></div></div>
</li>
<li id="section-21">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-21">§</a>
</div>
<p><strong>anchorBlurAction</strong></p>
</div>
<div class="content"><div class='highlight'><pre> S.<span class="hljs-property">anchorBlurAction</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">item</span>) {
<span class="hljs-keyword">if</span> (!<span class="hljs-variable language_">this</span>.<span class="hljs-property">anchor</span>) <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">buildAnchor</span>();
<span class="hljs-keyword">if</span> (<span class="hljs-variable language_">this</span>.<span class="hljs-property">anchor</span>) <span class="hljs-variable language_">this</span>.<span class="hljs-property">anchor</span>.<span class="hljs-property">setters</span>.<span class="hljs-title function_">blurAction</span>(item);
};</pre></div></div>
</li>
<li id="section-22">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-22">§</a>
</div>
<p>The artefact’s factory and <code>set</code> functions’ argument object can include a single <strong>anchor</strong> attribute, whose value should be an object containing anchor key:value pairs</p>
<pre><code>artefact.<span class="hljs-title function_">set</span>({
<span class="hljs-attr">anchor</span>: {
<span class="hljs-attr">description</span>: <span class="hljs-string">'value'</span>,
<span class="hljs-attr">type</span>: <span class="hljs-string">'value'</span>,
<span class="hljs-attr">target</span>: <span class="hljs-string">'value'</span>,
<span class="hljs-attr">rel</span>: <span class="hljs-string">'value'</span>,
<span class="hljs-attr">referrerPolicy</span>: <span class="hljs-string">'value'</span>,
<span class="hljs-attr">ping</span>: <span class="hljs-string">'value'</span>,
<span class="hljs-attr">hreflang</span>: <span class="hljs-string">'value'</span>,
<span class="hljs-attr">href</span>: <span class="hljs-string">'value'</span>,
<span class="hljs-attr">download</span>: <span class="hljs-string">'value'</span>,
},
});
</code></pre>
</div>
<div class="content"><div class='highlight'><pre> S.<span class="hljs-property">anchor</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">items</span>) {
<span class="hljs-keyword">if</span> (!<span class="hljs-variable language_">this</span>.<span class="hljs-property">anchor</span>) <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">buildAnchor</span>(items);
<span class="hljs-keyword">else</span> <span class="hljs-variable language_">this</span>.<span class="hljs-property">anchor</span>.<span class="hljs-title function_">set</span>(items);
};</pre></div></div>
</li>
<li id="section-23">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-23">§</a>
</div>
<h4 id="prototype-functions">Prototype functions</h4>
</div>
</li>
<li id="section-24">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-24">§</a>
</div>
<p>The <code>buildAnchor</code> function triggers the (re)build of the <a> element and adds it to the DOM</p>
<p>Scrawl-canvas generated anchor links are kept in hidden <nav> elements - either the Canvas object’s nav, or the Scrawl-canvas default nav (referenced by <em>scrawlNavigationHold</em>) which Scrawl-canvas automatically generates and adds to the top of the DOM <body> element when it first runs. </p>
<p>This is done to give screen readers access to link URLs and descriptions associated with Canvas graphical entitys (which visually impaired users may not be able to see). It also allows links to be tabbed through and invoked in the normal way (which may vary dependent on how browsers implement tab focus functionality)</p>
</div>
<div class="content"><div class='highlight'><pre> P.<span class="hljs-property">buildAnchor</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">items</span>) {
<span class="hljs-keyword">if</span> (<span class="hljs-title function_">isa_obj</span>(items)) {
<span class="hljs-keyword">if</span> (<span class="hljs-variable language_">this</span>.<span class="hljs-property">anchor</span>) <span class="hljs-variable language_">this</span>.<span class="hljs-property">anchor</span>.<span class="hljs-title function_">demolish</span>();
<span class="hljs-keyword">if</span> (!items.<span class="hljs-property">name</span>) items.<span class="hljs-property">name</span> = <span class="hljs-string">`<span class="hljs-subst">${<span class="hljs-variable language_">this</span>.name}</span>-anchor`</span>;
<span class="hljs-keyword">if</span> (!items.<span class="hljs-property">description</span>) items.<span class="hljs-property">description</span> = <span class="hljs-string">`Anchor link for <span class="hljs-subst">${<span class="hljs-variable language_">this</span>.name}</span> <span class="hljs-subst">${<span class="hljs-variable language_">this</span>.type}</span>`</span>;
items.<span class="hljs-property">host</span> = <span class="hljs-variable language_">this</span>;
items.<span class="hljs-property">hold</span> = <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">getAnchorHold</span>();
<span class="hljs-variable language_">this</span>.<span class="hljs-property">anchor</span> = <span class="hljs-title function_">makeAnchor</span>(items);
}
};</pre></div></div>
</li>
<li id="section-25">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-25">§</a>
</div>
<p><code>getAnchorHold</code> - internal function. Locate the current DOM hold element allocated for hosting <a> elements.</p>
</div>
<div class="content"><div class='highlight'><pre> P.<span class="hljs-property">getAnchorHold</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) {
<span class="hljs-keyword">let</span> entityHost = <span class="hljs-variable language_">this</span>.<span class="hljs-property">currentHost</span>;
<span class="hljs-keyword">if</span> (entityHost) {
<span class="hljs-keyword">if</span> (entityHost.<span class="hljs-property">type</span> === <span class="hljs-string">'Canvas'</span>) <span class="hljs-keyword">return</span> entityHost.<span class="hljs-property">navigation</span>;
<span class="hljs-keyword">if</span> (entityHost.<span class="hljs-property">type</span> === <span class="hljs-string">'Cell'</span>) {
<span class="hljs-keyword">let</span> cellHost = (entityHost.<span class="hljs-property">currentHost</span>) ? entityHost.<span class="hljs-property">currentHost</span> : canvas[entityHost.<span class="hljs-property">host</span>];
<span class="hljs-keyword">if</span> (cellHost && cellHost.<span class="hljs-property">type</span> === <span class="hljs-string">'Canvas'</span>) <span class="hljs-keyword">return</span> cellHost.<span class="hljs-property">navigation</span>;
}
}
<span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyAnchorHold</span> = <span class="hljs-literal">true</span>;
<span class="hljs-keyword">return</span> scrawlNavigationHold;
}</pre></div></div>
</li>
<li id="section-26">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-26">§</a>
</div>
<p><code>rebuildAnchor</code> - triggers the Anchor object’s <code>build</code> function</p>
</div>
<div class="content"><div class='highlight'><pre> P.<span class="hljs-property">rebuildAnchor</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) {
<span class="hljs-keyword">if</span> (<span class="hljs-variable language_">this</span>.<span class="hljs-property">anchor</span>) <span class="hljs-variable lang