scrawl-canvas
Version:
Version 8.9.4 - 19 Nov 2022
1,006 lines (651 loc) • 59.3 kB
HTML
<!DOCTYPE html>
<html>
<head>
<title>Anchor factory</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="action.html">
./source/factory/action.js
</a>
<a class="source" href="anchor.html">
./source/factory/anchor.js
</a>
<a class="source" href="animation.html">
./source/factory/animation.js
</a>
<a class="source" href="bezier.html">
./source/factory/bezier.js
</a>
<a class="source" href="block.html">
./source/factory/block.js
</a>
<a class="source" href="canvas.html">
./source/factory/canvas.js
</a>
<a class="source" href="cell.html">
./source/factory/cell.js
</a>
<a class="source" href="cog.html">
./source/factory/cog.js
</a>
<a class="source" href="color.html">
./source/factory/color.js
</a>
<a class="source" href="conicGradient.html">
./source/factory/conicGradient.js
</a>
<a class="source" href="coordinate.html">
./source/factory/coordinate.js
</a>
<a class="source" href="crescent.html">
./source/factory/crescent.js
</a>
<a class="source" href="element.html">
./source/factory/element.js
</a>
<a class="source" href="emitter.html">
./source/factory/emitter.js
</a>
<a class="source" href="filter.html">
./source/factory/filter.js
</a>
<a class="source" href="filterEngine-bluenoiseData.html">
./source/factory/filterEngine-bluenoiseData.js
</a>
<a class="source" href="filterEngine.html">
./source/factory/filterEngine.js
</a>
<a class="source" href="fontAttributes.html">
./source/factory/fontAttributes.js
</a>
<a class="source" href="gradient.html">
./source/factory/gradient.js
</a>
<a class="source" href="grid.html">
./source/factory/grid.js
</a>
<a class="source" href="group.html">
./source/factory/group.js
</a>
<a class="source" href="imageAsset.html">
./source/factory/imageAsset.js
</a>
<a class="source" href="line.html">
./source/factory/line.js
</a>
<a class="source" href="lineSpiral.html">
./source/factory/lineSpiral.js
</a>
<a class="source" href="loom.html">
./source/factory/loom.js
</a>
<a class="source" href="mesh.html">
./source/factory/mesh.js
</a>
<a class="source" href="net.html">
./source/factory/net.js
</a>
<a class="source" href="noiseAsset.html">
./source/factory/noiseAsset.js
</a>
<a class="source" href="oval.html">
./source/factory/oval.js
</a>
<a class="source" href="palette.html">
./source/factory/palette.js
</a>
<a class="source" href="particle.html">
./source/factory/particle.js
</a>
<a class="source" href="particleForce.html">
./source/factory/particleForce.js
</a>
<a class="source" href="particleHistory.html">
./source/factory/particleHistory.js
</a>
<a class="source" href="particleSpring.html">
./source/factory/particleSpring.js
</a>
<a class="source" href="particleWorld.html">
./source/factory/particleWorld.js
</a>
<a class="source" href="pattern.html">
./source/factory/pattern.js
</a>
<a class="source" href="phrase.html">
./source/factory/phrase.js
</a>
<a class="source" href="picture.html">
./source/factory/picture.js
</a>
<a class="source" href="polygon.html">
./source/factory/polygon.js
</a>
<a class="source" href="polyline.html">
./source/factory/polyline.js
</a>
<a class="source" href="quadratic.html">
./source/factory/quadratic.js
</a>
<a class="source" href="quaternion.html">
./source/factory/quaternion.js
</a>
<a class="source" href="radialGradient.html">
./source/factory/radialGradient.js
</a>
<a class="source" href="rawAsset.html">
./source/factory/rawAsset.js
</a>
<a class="source" href="rdAsset.html">
./source/factory/rdAsset.js
</a>
<a class="source" href="rectangle.html">
./source/factory/rectangle.js
</a>
<a class="source" href="renderAnimation.html">
./source/factory/renderAnimation.js
</a>
<a class="source" href="shape.html">
./source/factory/shape.js
</a>
<a class="source" href="spiral.html">
./source/factory/spiral.js
</a>
<a class="source" href="spriteAsset.html">
./source/factory/spriteAsset.js
</a>
<a class="source" href="stack.html">
./source/factory/stack.js
</a>
<a class="source" href="star.html">
./source/factory/star.js
</a>
<a class="source" href="state.html">
./source/factory/state.js
</a>
<a class="source" href="tetragon.html">
./source/factory/tetragon.js
</a>
<a class="source" href="ticker.html">
./source/factory/ticker.js
</a>
<a class="source" href="tracer.html">
./source/factory/tracer.js
</a>
<a class="source" href="tween.html">
./source/factory/tween.js
</a>
<a class="source" href="unstackedElement.html">
./source/factory/unstackedElement.js
</a>
<a class="source" href="vector.html">
./source/factory/vector.js
</a>
<a class="source" href="videoAsset.html">
./source/factory/videoAsset.js
</a>
<a class="source" href="wheel.html">
./source/factory/wheel.js
</a>
<a class="source" href="../mixin/anchor.html">
./source/mixin/anchor.js
</a>
<a class="source" href="../mixin/asset.html">
./source/mixin/asset.js
</a>
<a class="source" href="../mixin/assetAdvancedFunctionality.html">
./source/mixin/assetAdvancedFunctionality.js
</a>
<a class="source" href="../mixin/assetConsumer.html">
./source/mixin/assetConsumer.js
</a>
<a class="source" href="../mixin/base.html">
./source/mixin/base.js
</a>
<a class="source" href="../mixin/cascade.html">
./source/mixin/cascade.js
</a>
<a class="source" href="../mixin/delta.html">
./source/mixin/delta.js
</a>
<a class="source" href="../mixin/displayShape.html">
./source/mixin/displayShape.js
</a>
<a class="source" href="../mixin/dom.html">
./source/mixin/dom.js
</a>
<a class="source" href="../mixin/entity.html">
./source/mixin/entity.js
</a>
<a class="source" href="../mixin/filter.html">
./source/mixin/filter.js
</a>
<a class="source" href="../mixin/mimic.html">
./source/mixin/mimic.js
</a>
<a class="source" href="../mixin/path.html">
./source/mixin/path.js
</a>
<a class="source" href="../mixin/pattern.html">
./source/mixin/pattern.js
</a>
<a class="source" href="../mixin/pivot.html">
./source/mixin/pivot.js
</a>
<a class="source" href="../mixin/position.html">
./source/mixin/position.js
</a>
<a class="source" href="../mixin/shapeBasic.html">
./source/mixin/shapeBasic.js
</a>
<a class="source" href="../mixin/shapeCurve.html">
./source/mixin/shapeCurve.js
</a>
<a class="source" href="../mixin/shapePathCalculation.html">
./source/mixin/shapePathCalculation.js
</a>
<a class="source" href="../mixin/styles.html">
./source/mixin/styles.js
</a>
<a class="source" href="../mixin/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-factory">Anchor factory</h1>
<p>In Scrawl-canvas, an Anchor object holds all the data and functionality required to turn an artefact into a link. That functionality gets defined in this file. </p>
<p>Scrawl-canvas uses the <a href="../mixin/anchor.html">Anchor mixin</a> to add anchor functionality to artefacts - in particular canvas entitys.</p>
<p>This gives us a interactive canvas containing dynamic, clickable regions.</p>
<p>Note that while anchors are primarily for generating URL links to (external site) web pages, they can also be used to trigger any other desired action. This can be achieved by setting the anchor object’s <strong>clickAction</strong> attribute to a function. For instance:</p>
<ul>
<li>We can define a clickAction which emits a Google Analytics tracker message before performing the URL navigation (see demo Canvas-009)</li>
<li>We can suppress the click action (via ‘preventDefault’) and instead action code supplied by a third party library - though there’s usually better ways to achieve this via other Scrawl-canvas functionalities, for instance by using Scrawl-canvas enhanced event listeners or artefact functions (onEnter, onLeave, onDown, onUp).</li>
</ul>
<p>NOTE - generating an anchor will have an impact on the DOM document code, as an (off-viewport) <a> element will be added to it.</p>
<p>The <strong>makeAnchor</strong> function is not exposed to the ‘scrawl’ object, thus objects can only be created indirectly. Anchors can be saved, cloned and killed as part of wider save/kill/clone functionality.</p>
</div>
</li>
<li id="section-2">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-2">§</a>
</div>
<h4 id="demos">Demos:</h4>
<ul>
<li><a href="../../demo/canvas-009.html">Canvas-009</a> - Pattern styles; Entity web link anchors; Dynamic accessibility</li>
<li><a href="../../demo/packets-001.html">Packets-001</a> - Save and load Scrawl-canvas entity using text packets</li>
</ul>
</div>
</li>
<li id="section-3">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-3">§</a>
</div>
<h4 id="imports">Imports</h4>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">import</span> { constructors, artefact } <span class="hljs-keyword">from</span> <span class="hljs-string">'../core/library.js'</span>;
<span class="hljs-keyword">import</span> { mergeOver, pushUnique, isa_fn, isa_dom, Ωempty } <span class="hljs-keyword">from</span> <span class="hljs-string">'../core/utilities.js'</span>;
<span class="hljs-keyword">import</span> baseMix <span class="hljs-keyword">from</span> <span class="hljs-string">'../mixin/base.js'</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="anchor-constructor">Anchor constructor</h4>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">const</span> <span class="hljs-title class_">Anchor</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">items = Ωempty</span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">makeName</span>(items.<span class="hljs-property">name</span>);
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">register</span>();
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">set</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">defs</span>);
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">set</span>(items);
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">build</span>();
<span class="hljs-keyword">return</span> <span class="hljs-variable language_">this</span>;
};</pre></div></div>
</li>
<li id="section-5">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-5">§</a>
</div>
<h4 id="anchor-prototype">Anchor prototype</h4>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">let</span> P = <span class="hljs-title class_">Anchor</span>.<span class="hljs-property"><span class="hljs-keyword">prototype</span></span> = <span class="hljs-title class_">Object</span>.<span class="hljs-title function_">create</span>(<span class="hljs-title class_">Object</span>.<span class="hljs-property"><span class="hljs-keyword">prototype</span></span>);
P.<span class="hljs-property">type</span> = <span class="hljs-string">'Anchor'</span>;
P.<span class="hljs-property">lib</span> = <span class="hljs-string">'anchor'</span>;
P.<span class="hljs-property">isArtefact</span> = <span class="hljs-literal">false</span>;
P.<span class="hljs-property">isAsset</span> = <span class="hljs-literal">false</span>;</pre></div></div>
</li>
<li id="section-6">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-6">§</a>
</div>
<h4 id="mixins">Mixins</h4>
</div>
<div class="content"><div class='highlight'><pre>P = <span class="hljs-title function_">baseMix</span>(P);</pre></div></div>
</li>
<li id="section-7">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-7">§</a>
</div>
<h4 id="anchor-attributes">Anchor attributes</h4>
<ul>
<li>Attributes defined in the <a href="../mixin/base.html">base mixin</a>: <strong>name</strong>.</li>
</ul>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">let</span> defaultAttributes = {</pre></div></div>
</li>
<li id="section-8">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-8">§</a>
</div>
<p><strong>host</strong> - Every anchor will belong to exactly one Artefact.</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-attr">host</span>: <span class="hljs-literal">null</span>,</pre></div></div>
</li>
<li id="section-9">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-9">§</a>
</div>
<p><strong>description</strong> - The text that Scrawl-canvas will include between the anchor tags, when building the anchor. <strong>Always include a description</strong> for accessibility.</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-attr">description</span>: <span class="hljs-string">''</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 are detailed in <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a">MDN’s <a> reference page</a></p>
<ul>
<li>They are (most of) the DOM element’s attributes: <strong>download</strong>, <strong>href</strong>, <strong>hreflang</strong>, <strong>ping</strong>, <strong>referrerpolicy</strong>, <strong>rel</strong>, <strong>target</strong>, <strong>anchorType</strong>.</li>
<li>The HTML Anchor element <code>type</code> attribute is stored in the Scrawl-canvas Anchor object using the key <strong>anchorType</strong>.</li>
<li>Scrawl-canvas will build a link element and add it to the DOM, then invoke a click event on it when required to do so.</li>
</ul>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-attr">download</span>: <span class="hljs-string">''</span>,
<span class="hljs-attr">href</span>: <span class="hljs-string">''</span>,
<span class="hljs-attr">hreflang</span>: <span class="hljs-string">''</span>,
<span class="hljs-attr">ping</span>: <span class="hljs-string">''</span>,
<span class="hljs-attr">referrerpolicy</span>: <span class="hljs-string">''</span>,
<span class="hljs-attr">rel</span>: <span class="hljs-string">'noreferrer'</span>,
<span class="hljs-attr">target</span>: <span class="hljs-string">'_blank'</span>,
<span class="hljs-attr">anchorType</span>: <span class="hljs-string">''</span>,</pre></div></div>
</li>
<li id="section-11">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-11">§</a>
</div>
<p>The <strong>clickAction</strong> attribute is a <em><strong>function which returns a string command</strong></em> which in turn gets attached to the anchor DOM element’s <strong>onclick</strong> attribute. Invoking the result is handled entirely by the browser (as is normal).</p>
</div>
</li>
<li id="section-12">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-12">§</a>
</div>
<h5 id="example-usage">Example usage</h5>
<p>This <strong>doesn’t work!</strong> The browser will generate an error, rather than output an update to the console, when the user clicks on the canvas entity associated with the anchor (although navigation will still occur - the wikipedia page will open in a new browser tab):</p>
<pre><code><span class="hljs-attr">anchor</span>: {
<span class="hljs-attr">name</span>: <span class="hljs-string">'wikipedia-box-link'</span>,
<span class="hljs-attr">href</span>: <span class="hljs-string">'https://en.wikipedia.org/wiki/Box'</span>,
<span class="hljs-attr">description</span>: <span class="hljs-string">'Link to the Wikipedia article on boxes (opens in new tab)'</span>,
<span class="hljs-attr">clickAction</span>: <span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) { <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'box clicked'</span>) },
}
</code></pre>
<p>This <strong>works as expected</strong> - the function returns a string which can then be attached to the <a> DOM element’s <em>onclick</em> attribute:</p>
<pre><code><span class="hljs-attr">anchor</span>: {
<span class="hljs-attr">name</span>: <span class="hljs-string">'wikipedia-box-link'</span>,
<span class="hljs-attr">href</span>: <span class="hljs-string">'https://en.wikipedia.org/wiki/Box'</span>,
<span class="hljs-attr">description</span>: <span class="hljs-string">'Link to the Wikipedia article on boxes (opens in new tab)'</span>,
<span class="hljs-attr">clickAction</span>: <span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) { <span class="hljs-keyword">return</span> <span class="hljs-string">`console.log('box clicked')`</span> },
},
</code></pre>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-attr">clickAction</span>: <span class="hljs-literal">null</span>,</pre></div></div>
</li>
<li id="section-13">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-13">§</a>
</div>
<p>We can instruct the anchor to add event listeners for focus and blur events using the <strong>focusAction</strong> and <strong>blurAction</strong> Boolean flags. When set to true, the <em><strong>focus</strong></em> event listener will invoke the host entity’s <code>onEnter</code> function; the <em><strong>blur</strong></em> event listener invokes the <code>onLeave</code> function. Default is to ignore these events</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-attr">focusAction</span>: <span class="hljs-literal">false</span>,
<span class="hljs-attr">blurAction</span>: <span class="hljs-literal">false</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-14">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-14">§</a>
</div>
<h2 id="packet-management">Packet management</h2>
</div>
<div class="content"><div class='highlight'><pre>P.<span class="hljs-property">packetExclusions</span> = <span class="hljs-title function_">pushUnique</span>(P.<span class="hljs-property">packetExclusions</span>, [<span class="hljs-string">'domElement'</span>]);
P.<span class="hljs-property">packetObjects</span> = <span class="hljs-title function_">pushUnique</span>(P.<span class="hljs-property">packetExclusions</span>, [<span class="hljs-string">'host'</span>]);
P.<span class="hljs-property">packetFunctions</span> = <span class="hljs-title function_">pushUnique</span>(P.<span class="hljs-property">packetFunctions</span>, [<span class="hljs-string">'clickAction'</span>]);</pre></div></div>
</li>
<li id="section-15">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-15">§</a>
</div>
<h4 id="clone-management">Clone management</h4>
<p>No additional clone functionality required</p>
</div>
</li>
<li id="section-16">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-16">§</a>
</div>
<h4 id="kill-management">Kill management</h4>
</div>
<div class="content"><div class='highlight'><pre>P.<span class="hljs-property">demolish</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">domElement</span> && <span class="hljs-variable language_">this</span>.<span class="hljs-property">hold</span>) <span class="hljs-variable language_">this</span>.<span class="hljs-property">hold</span>.<span class="hljs-title function_">removeChild</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">domElement</span>);
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">deregister</span>();
};</pre></div></div>
</li>
<li id="section-17">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-17">§</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> S = P.<span class="hljs-property">setters</span>;</pre></div></div>
</li>
<li id="section-18">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-18">§</a>
</div>
<p>Value should be the artefact object, or its name-String</p>
</div>
<div class="content"><div class='highlight'><pre>S.<span class="hljs-property">host</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">item</span>) {
<span class="hljs-keyword">let</span> h = (item.<span class="hljs-property">substring</span>) ? artefact[item] : item;
<span class="hljs-keyword">if</span> (h && h.<span class="hljs-property">name</span>) <span class="hljs-variable language_">this</span>.<span class="hljs-property">host</span> = h;
};</pre></div></div>
</li>
<li id="section-19">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-19">§</a>
</div>
<p>Used internally - do not set directly! A reference to the hidden DOM hold <div> elemenbt where the anchors <a> element is kept.</p>
</div>
<div class="content"><div class='highlight'><pre>S.<span class="hljs-property">hold</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">item</span>) {
<span class="hljs-keyword">if</span> (<span class="hljs-title function_">isa_dom</span>(item)) {
<span class="hljs-keyword">if</span> (<span class="hljs-variable language_">this</span>.<span class="hljs-property">domElement</span> && <span class="hljs-variable language_">this</span>.<span class="hljs-property">hold</span>) <span class="hljs-variable language_">this</span>.<span class="hljs-property">hold</span>.<span class="hljs-title function_">removeChild</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">domElement</span>);
<span class="hljs-variable language_">this</span>.<span class="hljs-property">hold</span> = item;
<span class="hljs-keyword">if</span> (<span class="hljs-variable language_">this</span>.<span class="hljs-property">domElement</span>) <span class="hljs-variable language_">this</span>.<span class="hljs-property">hold</span>.<span class="hljs-title function_">appendChild</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">domElement</span>);
}
};</pre></div></div>
</li>
<li id="section-20">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-20">§</a>
</div>
<p>While the Scrawl-canvas anchor object keeps copies of all of its <a> DOM element’s attributes locally, they also need to be updated on that element. Most of the setter functions manage this using the <code>anchor.update()</code> helper function.</p>
<p>The artefact with which an anchor object is associated maps these attributes to itself as follows:</p>
<pre><code>anchor.<span class="hljs-property">description</span> ~~> artefact.<span class="hljs-property">anchorDescription</span>
anchor.<span class="hljs-property">type</span> ~~> artefact.<span class="hljs-property">anchorType</span>
anchor.<span class="hljs-property">target</span> ~~> artefact.<span class="hljs-property">anchorTarget</span>
anchor.<span class="hljs-property">rel</span> ~~> artefact.<span class="hljs-property">anchorRel</span>
anchor.<span class="hljs-property">referrerPolicy</span> ~~> artefact.<span class="hljs-property">anchorReferrerPolicy</span>
anchor.<span class="hljs-property">ping</span> ~~> artefact.<span class="hljs-property">anchorPing</span>
anchor.<span class="hljs-property">hreflang</span> ~~> artefact.<span class="hljs-property">anchorHreflang</span>
anchor.<span class="hljs-property">href</span> ~~> artefact.<span class="hljs-property">anchorHref</span>
anchor.<span class="hljs-property">download</span> ~~> artefact.<span class="hljs-property">anchorDownload</span>
</code></pre>
<p>One or more of these attributes can also be set (in the artefact factory argument, or when invoking artefact.set) using an ‘anchor’ attribute:</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">download</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">item</span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-property">download</span> = item;
<span class="hljs-keyword">if</span> (<span class="hljs-variable language_">this</span>.<span class="hljs-property">domElement</span>) <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">update</span>(<span class="hljs-string">'download'</span>);
};
S.<span class="hljs-property">href</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">item</span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-property">href</span> = item;
<span class="hljs-keyword">if</span> (<span class="hljs-variable language_">this</span>.<span class="hljs-property">domElement</span>) <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">update</span>(<span class="hljs-string">'href'</span>);
};
S.<span class="hljs-property">hreflang</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">item</span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-property">hreflang</span> = item;
<span class="hljs-keyword">if</span> (<span class="hljs-variable language_">this</span>.<span class="hljs-property">domElement</span>) <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">update</span>(<span class="hljs-string">'hreflang'</span>);
};
S.<span class="hljs-property">ping</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">item</span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-property">ping</span> = item;
<span class="hljs-keyword">if</span> (<span class="hljs-variable language_">this</span>.<span class="hljs-property">domElement</span>) <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">update</span>(<span class="hljs-string">'ping'</span>);
};
S.<span class="hljs-property">referrerpolicy</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">item</span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-property">referrerpolicy</span> = item;
<span class="hljs-keyword">if</span> (<span class="hljs-variable language_">this</span>.<span class="hljs-property">domElement</span>) <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">update</span>(<span class="hljs-string">'referrerpolicy'</span>);
};
S.<span class="hljs-property">rel</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">item</span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-property">rel</span> = item;
<span class="hljs-keyword">if</span> (<span class="hljs-variable language_">this</span>.<span class="hljs-property">domElement</span>) <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">update</span>(<span class="hljs-string">'rel'</span>);
};
S.<span class="hljs-property">target</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">item</span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-property">target</span> = item;
<span class="hljs-keyword">if</span> (<span class="hljs-variable language_">this</span>.<span class="hljs-property">domElement</span>) <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">update</span>(<span class="hljs-string">'target'</span>);
};
S.<span class="hljs-property">anchorType</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">item</span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-property">anchorType</span> = item;
<span class="hljs-keyword">if</span> (<span class="hljs-variable language_">this</span>.<span class="hljs-property">domElement</span>) <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">update</span>(<span class="hljs-string">'type'</span>);
};</pre></div></div>
</li>
<li id="section-21">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-21">§</a>
</div>
<p>These last setters do not follow previous behaviour because Scrawl-canvas anchor objects save the values for each under a different attribute key, compared to the DOM element’s attribute key:</p>
<ul>
<li><code>anchor.description -> a.textContent</code> - this is the text between the <a> element’s opening and closing tags</li>
<li><code>anchor.clickAction -> a.onclick</code> - a function that returns an string which is added to the DOM element’s ‘onclick’ attribute</li>
</ul>
</div>
<div class="content"><div class='highlight'><pre>S.<span class="hljs-property">description</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">item</span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-property">description</span> = item;
<span class="hljs-keyword">if</span> (<span class="hljs-variable language_">this</span>.<span class="hljs-property">domElement</span>) <span class="hljs-variable language_">this</span>.<span class="hljs-property">domElement</span>.<span class="hljs-property">textContent</span> = item;
};
S.<span class="hljs-property">clickAction</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">item</span>) {
<span class="hljs-keyword">if</span> (<span class="hljs-title function_">isa_fn</span>(item)) {
<span class="hljs-variable language_">this</span>.<span class="hljs-property">clickAction</span> = item;
<span class="hljs-keyword">if</span> (<span class="hljs-variable language_">this</span>.<span class="hljs-property">domElement</span>) <span class="hljs-variable language_">this</span>.<span class="hljs-property">domElement</span>.<span class="hljs-title function_">setAttribute</span>(<span class="hljs-string">'onclick'</span>, <span class="hljs-title function_">item</span>());
}
};</pre></div></div>
</li>
<li id="section-22">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-22">§</a>
</div>
<h4 id="prototype-functions">Prototype functions</h4>
<p>The <code>build</code> function builds 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">build</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">domElement</span> && <span class="hljs-variable language_">this</span>.<span class="hljs-property">hold</span>) <span class="hljs-variable language_">this</span>.<span class="hljs-property">hold</span>.<span class="hljs-title function_">removeChild</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">domElement</span>);
<span class="hljs-keyword">let</span> link = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">createElement</span>(<span class="hljs-string">'a'</span>);
link.<span class="hljs-property">id</span> = <span class="hljs-variable language_">this</span>.<span class="hljs-property">name</span>;
<span class="hljs-keyword">if</span> (<span class="hljs-variable language_">this</span>.<span class="hljs-property">download</span>) link.<span class="hljs-title function_">setAttribute</span>(<span class="hljs-string">'download'</span>, <span class="hljs-variable language_">this</span>.<span class="hljs-property">download</span>);
<span class="hljs-keyword">if</span> (<span class="hljs-variable language_">this</span>.<span class="hljs-property">href</span>) link.<span class="hljs-title function_">setAttribute</span>(<span class="hljs-string">'href'</span>, <span class="hljs-variable language_">this</span>.<span class="hljs-property">href</span>);
<span class="hljs-keyword">if</span> (<span class="hljs-variable language_">this</span>.<span class="hljs-property">hreflang</span>) link.<span class="hljs-title function_">setAttribute</span>(<span class="hljs-string">'hreflang'</span>, <span class="hljs-variable language_">this</span>.<span class="hljs-property">hreflang</span>);
<span class="hljs-keyword">if</span> (<span class="hljs-variable language_">this</span>.<span class="hljs-property">ping</span>) link.<span class="hljs-title function_">setAttribute</span>(<span class="hljs-string">'ping'</span>, <span class="hljs-variable language_">this</span>.<span class="hljs-property">ping</span>);
<span class="hljs-keyword">if</span> (<span class="hljs-variable language_">this</span>.<span class="hljs-property">referrerpolicy</span>) link.<span class="hljs-title function_">setAttribute</span>(<span class="hljs-string">'referrerpolicy'</span>, <span class="hljs-variable language_">this</span>.<span class="hljs-property">referrerpolicy</span>);
<span class="hljs-keyword">if</span> (<span class="hljs-variable language_">this</span>.<span class="hljs-property">rel</span>) link.<span class="hljs-title function_">setAttribute</span>(<span class="hljs-string">'rel'</span>, <span class="hljs-variable language_">this</span>.<span class="hljs-property">rel</span>);
<span class="hljs-keyword">if</span> (<span class="hljs-variable language_">this</span>.<span class="hljs-property">target</span>) link.<span class="hljs-title function_">setAttribute</span>(<span class="hljs-string">'target'</span>, <span class="hljs-variable language_">this</span>.<span class="hljs-property">target</span>);
<span class="hljs-keyword">if</span> (<span class="hljs-variable language_">this</span>.<span class="hljs-property">anchorType</span>) link.<span class="hljs-title function_">setAttribute</span>(<span class="hljs-string">'type'</span>, <span class="hljs-variable language_">this</span>.<span class="hljs-property">anchorType</span>);
<span class="hljs-keyword">if</span> (<span class="hljs-variable language_">this</span>.<span class="hljs-property">clickAction</span> && <span class="hljs-title function_">isa_fn</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">clickAction</span>)) link.<span class="hljs-title function_">setAttribute</span>(<span class="hljs-string">'onclick'</span>, <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">clickAction</span>());
<span class="hljs-keyword">if</span> (<span class="hljs-variable language_">this</span>.<span class="hljs-property">description</span>) link.<span class