scrawl-canvas
Version:
Version 8.9.4 - 19 Nov 2022
689 lines (499 loc) • 36.8 kB
HTML
<html>
<head>
<title>Demo Snippets 006</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="../modules/canvas-minimap.html">
./demo/modules/canvas-minimap.js
</a>
<a class="source" href="../modules/canvas-scene-editor.html">
./demo/modules/canvas-scene-editor.js
</a>
<a class="source" href="../modules/dom-entity-editor.html">
./demo/modules/dom-entity-editor.js
</a>
<a class="source" href="../modules/entity-copy-paste.html">
./demo/modules/entity-copy-paste.js
</a>
<a class="source" href="../modules/entity-manipulation-gui.html">
./demo/modules/entity-manipulation-gui.js
</a>
<a class="source" href="../modules/entity-navigation.html">
./demo/modules/entity-navigation.js
</a>
<a class="source" href="../modules/entity-ring-builder.html">
./demo/modules/entity-ring-builder.js
</a>
<a class="source" href="../modules/london-crime-graphic.html">
./demo/modules/london-crime-graphic.js
</a>
<a class="source" href="../modules/london-crime-lines.html">
./demo/modules/london-crime-lines.js
</a>
<a class="source" href="../modules/london-crime-stacked-bars.html">
./demo/modules/london-crime-stacked-bars.js
</a>
<a class="source" href="../modules/lottie-loader.html">
./demo/modules/lottie-loader.js
</a>
<a class="source" href="../modules/simple-chart-frame-tests.html">
./demo/modules/simple-chart-frame-tests.js
</a>
<a class="source" href="../modules/simple-chart-frame.html">
./demo/modules/simple-chart-frame.js
</a>
<a class="source" href="../modules/simple-graph-lines.html">
./demo/modules/simple-graph-lines.js
</a>
<a class="source" href="../modules/simple-graph-stacked-bars.html">
./demo/modules/simple-graph-stacked-bars.js
</a>
<a class="source" href="../modules/wikipedia-views-spiral-chart.html">
./demo/modules/wikipedia-views-spiral-chart.js
</a>
<a class="source" href="animated-highlight-gradient-text-snippet.html">
./demo/snippets/animated-highlight-gradient-text-snippet.js
</a>
<a class="source" href="animated-hover-gradient-snippet.html">
./demo/snippets/animated-hover-gradient-snippet.js
</a>
<a class="source" href="animated-word-gradient-snippet.html">
./demo/snippets/animated-word-gradient-snippet.js
</a>
<a class="source" href="before-after-slider-infographic.html">
./demo/snippets/before-after-slider-infographic.js
</a>
<a class="source" href="bubbles-text-snippet.html">
./demo/snippets/bubbles-text-snippet.js
</a>
<a class="source" href="green-box-snippet.html">
./demo/snippets/green-box-snippet.js
</a>
<a class="source" href="jazzy-button-snippet.html">
./demo/snippets/jazzy-button-snippet.js
</a>
<a class="source" href="page-performance-snippet-test.html">
./demo/snippets/page-performance-snippet-test.js
</a>
<a class="source" href="page-performance-snippet.html">
./demo/snippets/page-performance-snippet.js
</a>
<a class="source" href="pan-image-snippet.html">
./demo/snippets/pan-image-snippet.js
</a>
<a class="source" href="placeholder-effect-snippet.html">
./demo/snippets/placeholder-effect-snippet.js
</a>
<a class="source" href="ripple-effect-snippet.html">
./demo/snippets/ripple-effect-snippet.js
</a>
<a class="source" href="risograph-text-gradient-snippet.html">
./demo/snippets/risograph-text-gradient-snippet.js
</a>
<a class="source" href="spotlight-text-snippet-test.html">
./demo/snippets/spotlight-text-snippet-test.js
</a>
<a class="source" href="spotlight-text-snippet.html">
./demo/snippets/spotlight-text-snippet.js
</a>
<a class="source" href="swirling-stripes-text-snippet.html">
./demo/snippets/swirling-stripes-text-snippet.js
</a>
<a class="source" href="text-snippet-helper.html">
./demo/snippets/text-snippet-helper.js
</a>
<a class="source" href="word-highlighter-snippet.html">
./demo/snippets/word-highlighter-snippet.js
</a>
<a class="source" href="worley-text-gradient-snippet.html">
./demo/snippets/worley-text-gradient-snippet.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="demo-snippets-006">Demo Snippets 006</h1>
<p>Editable header text colorizer and animation effect snippets</p>
<p>Related files:</p>
<ul>
<li><a href="../snippets-006.html">Editable header text colorizer and animation effect snippets</a></li>
<li><a href="./text-snippet-helper.html">Text snippet helper</a></li>
</ul>
<h3 id="worley-noise-used-to-color-text-snippet">‘Worley noise used to color text’ snippet</h3>
<p><strong>Purpose:</strong> Worley noise is a form of procedural texture which can be generated and used to simulate textures which look (a bit) like stone, water or biological cells.</p>
<ul>
<li>This snippet supports dark-mode alternative colors</li>
<li>This snippet supports high contrast alternative colors</li>
<li>This snippet is not animated</li>
</ul>
<p><strong>Function input:</strong> </p>
<ul>
<li>the DOM element - generally a block or inline-block element.</li>
</ul>
<p><strong>Customisation:</strong> The snippet can be customised using the following data- attributes applied using CSS variables, or directly to the HTML header element:</p>
<ul>
<li><code>data-base-color</code> - any CSS color string</li>
<li><code>data-dark-base-color</code> - any CSS color string</li>
<li><code>data-highlight-color</code> - any CSS color string</li>
<li><code>data-dark-highlight-color</code> - any CSS color string</li>
<li><code>data-noise-sum-function</code> - permitted values include: <code>none</code>, <code>sine-x</code>, <code>sine-y</code>, <code>sine</code>, <code>modular</code>, <code>random</code></li>
<li><code>data-noise-scale</code> - (+number) a form of zoom level</li>
<li><code>data-noise-output</code> - permitted values include: <code>X</code>, <code>YminusX</code>, <code>ZminusX</code>, etc</li></li>
<li><code>data-shadow-color</code> - any CSS color string, for the text shadow</li>
<li><code>data-dark-shadow-color</code> - any CSS color string, for the text shadow</li>
<li><code>data-shadow-offset-x</code> - (unit % of font size) percentage of the font size to offset the text shadow horizontally</li>
<li><code>data-shadow-offset-y</code> - (unit % of font size) percentage of the font size to offset the text shadow vertically</li>
<li><code>data-shadow-blur</code> - (unit % of font size) percentage of the font size to blur the shadow</li>
<li><code>data-contrast-color</code> - any CSS color string, used when user has set <code>prefers-contrast: more</code></li>
<li><code>data-dark-contrast-color</code> - any CSS color string, used when user has set <code>prefers-contrast: more</code></li>
</ul>
<p><strong>Function output:</strong> a Javascript object will be returned, containing the following attributes</p>
<pre><code>{
element <span class="hljs-comment">// the Scrawl-canvas wrapper for the DOM element supplied to the function</span>
canvas <span class="hljs-comment">// the Scrawl-canvas wrapper for the snippet's canvas</span>
animation <span class="hljs-comment">// the Scrawl-canvas animation object</span>
demolish <span class="hljs-comment">// remove the snippet from the Scrawl-canvas library</span>
}
</code></pre>
<h5 id="usage-example">Usage example:</h5>
<pre><code><span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> scrawl <span class="hljs-keyword">from</span> <span class="hljs-string">'path/to/scrawl-canvas/library'</span>;
<span class="hljs-keyword">import</span> mySnippet <span class="hljs-keyword">from</span> <span class="hljs-string">'./relative/or/absolute/path/to/this/file.js'</span>;
<span class="hljs-keyword">let</span> myElements = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelectorAll</span>(<span class="hljs-string">'.some-class'</span>);
myElements.<span class="hljs-title function_">forEach</span>(<span class="hljs-function"><span class="hljs-params">el</span> =></span> <span class="hljs-title function_">mySnippet</span>(el, scrawl));
</code></pre>
</div>
</li>
<li id="section-2">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-2">§</a>
</div>
<p>Additional font-specific customisation can be added courtesy of the Text Snippet Helper module</p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">import</span> { getSnippetData } <span class="hljs-keyword">from</span> <span class="hljs-string">'./text-snippet-helper.js'</span>;</pre></div></div>
</li>
<li id="section-3">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-3">§</a>
</div>
<p><strong>Effects on the element:</strong> </p>
<ul>
<li>Imports the element’s background color, and sets the element background to <code>transparent</code></li>
<li>Imports the element’s text node text, and sets the text color to <code>transparent</code></li>
<li><em><strong>Note that canvas text will NEVER be as good as DOM text!</strong></em></li>
</ul>
</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">el, scrawl</span>) {</pre></div></div>
</li>
<li id="section-4">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-4">§</a>
</div>
<p>Apply the snippet to the DOM element</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">let</span> snippet = scrawl.<span class="hljs-title function_">makeSnippet</span>({
<span class="hljs-attr">domElement</span>: el,
});</pre></div></div>
</li>
<li id="section-5">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-5">§</a>
</div>
<p>Only proceed if the snippet is successfully generated</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> (snippet) {</pre></div></div>
</li>
<li id="section-6">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-6">§</a>
</div>
<p>Import data and functionality from the Text Snippet Helper module</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">let</span> { canvas, group, dataset, compStyles, name, width, height, fontSize, yOffset, initCanvas, initPhrase, textGroup, responsiveFunctions, contrastMoreActions, contrastOtherActions, colorSchemeDarkActions, colorSchemeLightActions, additionalDemolishActions } = <span class="hljs-title function_">getSnippetData</span>(snippet, scrawl);</pre></div></div>
</li>
<li id="section-7">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-7">§</a>
</div>
<p>Initialise the canvas</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-title function_">initCanvas</span>();
canvas.<span class="hljs-property">base</span>.<span class="hljs-title function_">set</span>({
<span class="hljs-attr">compileOrder</span>: <span class="hljs-number">1</span>,
});</pre></div></div>
</li>
<li id="section-8">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-8">§</a>
</div>
<p>Initialize and collect developer-supplied data</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">let</span> baseColor = <span class="hljs-string">'black'</span>,
darkBaseColor = <span class="hljs-string">'white'</span>,
highlightColor = <span class="hljs-string">'orange'</span>,
darkHighlightColor = <span class="hljs-string">'orange'</span>,
noiseSumFunction = <span class="hljs-string">'random'</span>,
noiseOutput = <span class="hljs-string">'X'</span>,
noiseScale = <span class="hljs-number">50</span>,
shadowColor = <span class="hljs-string">'black'</span>,
darkShadowColor = <span class="hljs-string">'white'</span>,
shadowOffsetX = <span class="hljs-number">0</span>,
shadowOffsetY = <span class="hljs-number">0</span>,
shadowBlur = <span class="hljs-number">0</span>,
contrastColor = <span class="hljs-string">'black'</span>,
darkContrastColor = <span class="hljs-string">'white'</span>;
<span class="hljs-keyword">if</span> (dataset.<span class="hljs-property">baseColor</span>) baseColor = dataset.<span class="hljs-property">baseColor</span>;
<span class="hljs-keyword">else</span> {
<span class="hljs-keyword">const</span> s = compStyles.<span class="hljs-title function_">getPropertyValue</span>(<span class="hljs-string">'--data-base-color'</span>);
<span class="hljs-keyword">if</span> (s) baseColor = s;
}
<span class="hljs-keyword">if</span> (dataset.<span class="hljs-property">darkBaseColor</span>) darkBaseColor = dataset.<span class="hljs-property">darkBaseColor</span>;
<span class="hljs-keyword">else</span> {
<span class="hljs-keyword">const</span> s = compStyles.<span class="hljs-title function_">getPropertyValue</span>(<span class="hljs-string">'--data-dark-base-color'</span>);
<span class="hljs-keyword">if</span> (s) darkBaseColor = s;
}
<span class="hljs-keyword">if</span> (dataset.<span class="hljs-property">highlightColor</span>) highlightColor = dataset.<span class="hljs-property">highlightColor</span>;
<span class="hljs-keyword">else</span> {
<span class="hljs-keyword">const</span> s = compStyles.<span class="hljs-title function_">getPropertyValue</span>(<span class="hljs-string">'--data-highlight-color'</span>);
<span class="hljs-keyword">if</span> (s) highlightColor = s;
}
<span class="hljs-keyword">if</span> (dataset.<span class="hljs-property">darkHighlightColor</span>) darkHighlightColor = dataset.<span class="hljs-property">darkHighlightColor</span>;
<span class="hljs-keyword">else</span> {
<span class="hljs-keyword">const</span> s = compStyles.<span class="hljs-title function_">getPropertyValue</span>(<span class="hljs-string">'--data-dark-highlight-color'</span>);
<span class="hljs-keyword">if</span> (s) darkHighlightColor = s;
}
<span class="hljs-keyword">if</span> (dataset.<span class="hljs-property">noiseSumFunction</span>) noiseSumFunction = dataset.<span class="hljs-property">noiseSumFunction</span>;
<span class="hljs-keyword">else</span> {
<span class="hljs-keyword">const</span> s = compStyles.<span class="hljs-title function_">getPropertyValue</span>(<span class="hljs-string">'--data-noise-sum-function'</span>);
<span class="hljs-keyword">if</span> (s) noiseSumFunction = s;
}
<span class="hljs-keyword">if</span> (dataset.<span class="hljs-property">noiseOutput</span>) noiseOutput = dataset.<span class="hljs-property">noiseOutput</span>;
<span class="hljs-keyword">else</span> {
<span class="hljs-keyword">const</span> s = compStyles.<span class="hljs-title function_">getPropertyValue</span>(<span class="hljs-string">'--data-noise-output'</span>);
<span class="hljs-keyword">if</span> (s) noiseOutput = s;
}
<span class="hljs-keyword">if</span> (dataset.<span class="hljs-property">noiseScale</span>) noiseScale = <span class="hljs-built_in">parseFloat</span>(dataset.<span class="hljs-property">noiseScale</span>);
<span class="hljs-keyword">else</span> {
<span class="hljs-keyword">const</span> s = compStyles.<span class="hljs-title function_">getPropertyValue</span>(<span class="hljs-string">'--data-noise-scale'</span>);
<span class="hljs-keyword">if</span> (s) noiseScale = <span class="hljs-built_in">parseFloat</span>(s);
}
<span class="hljs-keyword">if</span> (dataset.<span class="hljs-property">shadowColor</span>) shadowColor = dataset.<span class="hljs-property">shadowColor</span>;
<span class="hljs-keyword">else</span> {
<span class="hljs-keyword">const</span> s = compStyles.<span class="hljs-title function_">getPropertyValue</span>(<span class="hljs-string">'--data-shadow-color'</span>);
<span class="hljs-keyword">if</span> (s) shadowColor = s;
}
<span class="hljs-keyword">if</span> (dataset.<span class="hljs-property">darkShadowColor</span>) darkShadowColor = dataset.<span class="hljs-property">darkShadowColor</span>;
<span class="hljs-keyword">else</span> {
<span class="hljs-keyword">const</span> s = compStyles.<span class="hljs-title function_">getPropertyValue</span>(<span class="hljs-string">'--data-dark-shadow-color'</span>);
<span class="hljs-keyword">if</span> (s) darkShadowColor = s;
}
<span class="hljs-keyword">if</span> (dataset.<span class="hljs-property">shadowOffsetX</span>) shadowOffsetX = <span class="hljs-built_in">parseFloat</span>(dataset.<span class="hljs-property">shadowOffsetX</span>);
<span class="hljs-keyword">else</span> {
<span class="hljs-keyword">const</span> s = compStyles.<span class="hljs-title function_">getPropertyValue</span>(<span class="hljs-string">'--data-shadow-offset-x'</span>);
<span class="hljs-keyword">if</span> (s) shadowOffsetX = <span class="hljs-built_in">parseFloat</span>(s);
}
<span class="hljs-keyword">if</span> (dataset.<span class="hljs-property">shadowOffsetY</span>) shadowOffsetY = <span class="hljs-built_in">parseFloat</span>(dataset.<span class="hljs-property">shadowOffsetY</span>);
<span class="hljs-keyword">else</span> {
<span class="hljs-keyword">const</span> s = compStyles.<span class="hljs-title function_">getPropertyValue</span>(<span class="hljs-string">'--data-shadow-offset-y'</span>);
<span class="hljs-keyword">if</span> (s) shadowOffsetY = <span class="hljs-built_in">parseFloat</span>(s);
}
<span class="hljs-keyword">if</span> (dataset.<span class="hljs-property">shadowBlur</span>) shadowBlur = <span class="hljs-built_in">parseFloat</span>(dataset.<span class="hljs-property">shadowBlur</span>);
<span class="hljs-keyword">else</span> {
<span class="hljs-keyword">const</span> s = compStyles.<span class="hljs-title function_">getPropertyValue</span>(<span class="hljs-string">'--data-shadow-blur'</span>);
<span class="hljs-keyword">if</span> (s) shadowBlur = <span class="hljs-built_in">parseFloat</span>(s);
}
<span class="hljs-keyword">if</span> (dataset.<span class="hljs-property">contrastColor</span>) contrastColor = dataset.<span class="hljs-property">contrastColor</span>;
<span class="hljs-keyword">else</span> {
<span class="hljs-keyword">const</span> s = compStyles.<span class="hljs-title function_">getPropertyValue</span>(<span class="hljs-string">'--data-contrast-color'</span>);
<span class="hljs-keyword">if</span> (s) contrastColor = s;
}
<span class="hljs-keyword">if</span> (dataset.<span class="hljs-property">darkContrastColor</span>) darkContrastColor = dataset.<span class="hljs-property">darkContrastColor</span>;
<span class="hljs-keyword">else</span> {
<span class="hljs-keyword">const</span> s = compStyles.<span class="hljs-title function_">getPropertyValue</span>(<span class="hljs-string">'--data-dark-contrast-color'</span>);
<span class="hljs-keyword">if</span> (s) darkContrastColor = s;
}</pre></div></div>
</li>
<li id="section-9">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-9">§</a>
</div>
<p>Build the text effect</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">const</span> worley = scrawl.<span class="hljs-title function_">makeNoiseAsset</span>({
<span class="hljs-attr">name</span>: <span class="hljs-string">`<span class="hljs-subst">${name}</span>-noise-generator`</span>,
<span class="hljs-attr">colors</span>: [
[<span class="hljs-number">0</span>, highlightColor],
[<span class="hljs-number">999</span>, baseColor],
],
<span class="hljs-attr">colorSpace</span>: <span class="hljs-string">'LAB'</span>,
<span class="hljs-attr">noiseEngine</span>: <span class="hljs-string">'worley-euclidean'</span>,
<span class="hljs-attr">sumFunction</span>: noiseSumFunction,
<span class="hljs-attr">scale</span>: noiseScale,
<span class="hljs-attr">worleyOutput</span>: noiseOutput,
<span class="hljs-attr">width</span>: <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">ceil</span>(width),
<span class="hljs-attr">height</span>: <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">ceil</span>(height),
});
<span class="hljs-keyword">const</span> p1 = scrawl.<span class="hljs-title function_">makePattern</span>({
<span class="hljs-attr">name</span>: <span class="hljs-string">`<span class="hljs-subst">${name}</span>-noise-pattern`</span>,
<span class="hljs-attr">asset</span>: <span class="hljs-string">`<span class="hljs-subst">${name}</span>-noise-generator`</span>,
});
<span class="hljs-keyword">const</span> f1 = scrawl.<span class="hljs-title function_">makeFilter</span>({
<span class="hljs-attr">name</span>: <span class="hljs-string">`<span class="hljs-subst">${name}</span>-blur-filter`</span>,
<span class="hljs-attr">method</span>: <span class="hljs-string">'gaussianBlur'</span>,
<span class="hljs-attr">radius</span>: <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">round</span>(fontSize * shadowBlur),
});
<span class="hljs-keyword">const</span> textFill = scrawl.<span class="hljs-title function_">makePhrase</span>({
<span class="hljs-attr">name</span>: <span class="hljs-string">`<span class="hljs-subst">${name}</span>-text-stencil`</span>,
group,
<span class="hljs-attr">order</span>: <span class="hljs-number">0</span>,
});
<span class="hljs-title function_">initPhrase</span>(textFill);
<span class="hljs-keyword">const</span> textStroke = textFill.<span class="hljs-title function_">clone</span>({
<span class="hljs-attr">name</span>: <span class="hljs-string">`<span class="hljs-subst">${name}</span>-text-outline`</span>,
<span class="hljs-attr">order</span>: <span class="hljs-number">2</span>,
<span class="hljs-attr">startX</span>: <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">round</span>(fontSize * shadowOffsetY),
<span class="hljs-attr">startY</span>: <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">round</span>((fontSize * yOffset) + (fontSize * shadowOffsetY)),
<span class="hljs-attr">fillStyle</span>: shadowColor,
<span class="hljs-attr">filters</span>: shadowBlur ? [<span class="hljs-string">`<span class="hljs-subst">${name}</span>-blur-filter`</span>] : [],
<span class="hljs-attr">memoizeFilterOutput</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">globalCompositeOperation</span>: <span class="hljs-string">'destination-over'</span>,
});
textGroup.<span class="hljs-title function_">addArtefacts</span>(textFill, textStroke);
scrawl.<span class="hljs-title function_">makeBlock</span>({
<span class="hljs-attr">name</span>: <span class="hljs-string">`<span class="hljs-subst">${name}</span>-text-fill`</span>,
group,
<span class="hljs-attr">order</span>: <span class="hljs-number">1</span>,
<span class="hljs-attr">width</span>: <span class="hljs-string">'100%'</span>,
<span class="hljs-attr">height</span>: <span class="hljs-string">'100%'</span>,
<span class="hljs-attr">fillStyle</span>: <span class="hljs-string">`<span class="hljs-subst">${name}</span>-noise-pattern`</span>,
<span class="hljs-attr">globalCompositeOperation</span>: <span class="hljs-string">'source-in'</span>,
});</pre></div></div>
</li>
<li id="section-10">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-10">§</a>
</div>
<p>Accessibility</p>
</div>
<div class="content"><div class='highlight'><pre> colorSchemeLightActions.<span class="hljs-title function_">push</span>(<span class="hljs-function">(<span class="hljs-params">items = {}</span>) =></span> {
<span class="hljs-keyword">const</span> localWidth = <span class="hljs-built_in">parseFloat</span>(items.<span class="hljs-property">width</span>),
localHeight = <span class="hljs-built_in">parseFloat</span>(items.<span class="hljs-property">height</span>);
worley.<span class="hljs-title function_">set</span>({
<span class="hljs-attr">colors</span>: [
[<span class="hljs-number">0</span>, highlightColor],
[<span class="hljs-number">999</span>, baseColor],
],
<span class="hljs-attr">width</span>: localWidth,
<span class="hljs-attr">height</span>: localHeight,
});
textStroke.<span class="hljs-title function_">set</span>({
<span class="hljs-attr">fillStyle</span>: shadowColor,
});
});
colorSchemeDarkActions.<span class="hljs-title function_">push</span>(<span class="hljs-function">(<span class="hljs-params">items = {}</span>) =></span> {
<span class="hljs-keyword">const</span> localWidth = <span class="hljs-built_in">parseFloat</span>(items.<span class="hljs-property">width</span>),
localHeight = <span class="hljs-built_in">parseFloat</span>(items.<span class="hljs-property">height</span>);
worley.<span class="hljs-title function_">set</span>({
<span class="hljs-attr">colors</span>: [
[<span class="hljs-number">0</span>, darkHighlightColor],
[<span class="hljs-number">999</span>, darkBaseColor],
],
<span class="hljs-attr">width</span>: localWidth,
<span class="hljs-attr">height</span>: localHeight,
});
textStroke.<span class="hljs-title function_">set</span>({
<span class="hljs-attr">fillStyle</span>: darkShadowColor,
});
});
contrastMoreActions.<span class="hljs-title function_">push</span>(<span class="hljs-function">() =></span> {
el.<span class="hljs-property">style</span>.<span class="hljs-property">color</span> = (canvas.<span class="hljs-property">here</span>.<span class="hljs-property">prefersDarkColorScheme</span>) ? darkContrastColor : contrastColor;
textGroup.<span class="hljs-title function_">setArtefacts</span>({
<span class="hljs-attr">visibility</span>: <span class="hljs-literal">false</span>,
});
});
contrastOtherActions.<span class="hljs-title function_">push</span>(<span class="hljs-function">() =></span> {
el.<span class="hljs-property">style</span>.<span class="hljs-property">color</span> = <span class="hljs-string">'transparent'</span>;
textGroup.<span class="hljs-title function_">setArtefacts</span>({
<span class="hljs-attr">visibility</span>: <span class="hljs-literal">true</span>,
});
});</pre></div></div>
</li>
<li id="section-11">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-11">§</a>
</div>
<p>Responsiveness</p>
</div>
<div class="content"><div class='highlight'><pre> responsiveFunctions.<span class="hljs-title function_">push</span>(<span class="hljs-function">(<span class="hljs-params">items = {}</span>) =></span> {
<span class="hljs-keyword">const</span> localFontSize = <span class="hljs-built_in">parseFloat</span>(items.<span class="hljs-property">fontSize</span>),
localWidth = <span class="hljs-built_in">parseFloat</span>(items.<span class="hljs-property">width</span>),
localHeight = <span class="hljs-built_in">parseFloat</span>(items.<span class="hljs-property">height</span>);
worley.<span class="hljs-title function_">set</span>({
<span class="hljs-attr">width</span>: localWidth,
<span class="hljs-attr">height</span>: localHeight,
});
f1.<span class="hljs-title function_">set</span>({
<span class="hljs-attr">radius</span>: <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">round</span>(localFontSize * shadowBlur),
});
textStroke.<span class="hljs-title function_">set</span>({
<span class="hljs-attr">startX</span>: <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">round</span>(localFontSize * shadowOffsetY),
<span class="hljs-attr">startY</span>: <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">round</span>((localFontSize * yOffset) + (localFontSize * shadowOffsetY)),
});
});</pre></div></div>
</li>
<li id="section-12">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-12">§</a>
</div>
<p>Cleanup</p>
</div>
<div class="content"><div class='highlight'><pre> additionalDemolishActions.<span class="hljs-title function_">push</span>(<span class="hljs-function">() =></span> {
f1.<span class="hljs-title function_">kill</span>();
p1.<span class="hljs-title function_">kill</span>();
worley.<span class="hljs-title function_">kill</span>();
});
}</pre></div></div>
</li>
<li id="section-13">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-13">§</a>
</div>
<p>Return the snippet, so coders can access the snippet’s parts - in case they need to tweak the output to meet the web page’s specific requirements</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">return</span> snippet;
};</pre></div></div>
</li>
</ul>
</div>
</body>
</html>