scrawl-canvas
Version:
Version 8.9.4 - 19 Nov 2022
459 lines (316 loc) • 21.7 kB
HTML
<html>
<head>
<title>Demo Snippets 004</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-004">Demo Snippets 004</h1>
<p>Snippets included in the Scrawl-canvas demo/snippets folder</p>
<p>Related files:</p>
<ul>
<li><a href="../snippets-004.html">Snippets included in the Scrawl-canvas demo/snippets folder</a></li>
<li><a href="./animated-hover-gradient-snippet.html">Animated hover gradient snippet</a></li>
<li><a href="./animated-word-gradient-snippet.html">Animated word gradient snippet</a></li>
<li><a href="./green-box-snippet.html">Green box snippet</a></li>
<li><a href="./jazzy-button-snippet.html">Jazzy button snippet</a></li>
<li><a href="./page-performance-snippet.html">Page performance snippet</a></li>
<li><a href="./pan-image-snippet.html">Pan image snippet</a></li>
<li><a href="./placeholder-effect-snippet.html">Placeholder effect snippet</a></li>
<li><a href="./ripple-effect-snippet.html">Ripple effect snippet</a></li>
<li><a href="./spotlight-text-snippet.html">Spotlight text snippet</a></li>
<li><a href="./word-highlighter-snippet.html">Word highlighter snippet</a></li>
</ul>
</div>
</li>
<li id="section-2">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-2">§</a>
</div>
<h3 id="animated-word-gradient-snippet">‘Animated word gradient’ snippet</h3>
<p><strong>Purpose:</strong> imports the element’s text and adds an animated gradient effect to it.</p>
<p><strong>Function input:</strong> </p>
<ul>
<li>the DOM element - generally a block or inline-block element.</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> wordGradient <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_">wordGradient</span>(el));
</code></pre>
</div>
</li>
<li id="section-3">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-3">§</a>
</div>
<p>Import the Scrawl-canvas object </p>
<ul>
<li>there’s various ways to do this. See <a href="../dom-001.html">Demo DOM-001</a> for more details</li>
</ul>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> scrawl <span class="hljs-keyword">from</span> <span class="hljs-string">'../../source/scrawl.js'</span>;</pre></div></div>
</li>
<li id="section-4">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-4">§</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, args = {}</span>) {</pre></div></div>
</li>
<li id="section-5">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-5">§</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,
});
<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>Set some convenience variables</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">let</span> canvas = snippet.<span class="hljs-property">canvas</span>,
group = canvas.<span class="hljs-property">base</span>.<span class="hljs-property">name</span>,
animation = snippet.<span class="hljs-property">animation</span>,
wrapper = snippet.<span class="hljs-property">element</span>,
compStyles = wrapper.<span class="hljs-property">elementComputedStyles</span>,
name = wrapper.<span class="hljs-property">name</span>;</pre></div></div>
</li>
<li id="section-7">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-7">§</a>
</div>
<p>The snippet will take details of its font family and size from the DOM element’s computed styles</p>
<ul>
<li>Note that Firefox does not supply a font string; font details are broken up into their constituent parts and need to be reconstructed. The code below will not pick up bold fonts:</li>
</ul>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">let</span> backgroundColor = compStyles.<span class="hljs-property">backgroundColor</span> || <span class="hljs-string">'#f2f2f2'</span>,
font = compStyles.<span class="hljs-property">font</span> || <span class="hljs-string">`<span class="hljs-subst">${(compStyles.fontStyle != <span class="hljs-string">'normal'</span>) ? compStyles.fontStyle + <span class="hljs-string">' '</span> : <span class="hljs-string">''</span>}</span><span class="hljs-subst">${(compStyles.fontVariant != <span class="hljs-string">'normal'</span>) ? compStyles.fontVariant + <span class="hljs-string">' '</span> : <span class="hljs-string">''</span>}</span><span class="hljs-subst">${compStyles.fontSize}</span> <span class="hljs-subst">${compStyles.fontFamily}</span>`</span> || <span class="hljs-string">'20px sans-serif'</span>;
<span class="hljs-keyword">let</span> text = el.<span class="hljs-property">innerText</span>;
canvas.<span class="hljs-title function_">set</span>({
backgroundColor,
});
el.<span class="hljs-property">style</span>.<span class="hljs-property">backgroundColor</span> = <span class="hljs-string">'transparent'</span>;
el.<span class="hljs-property">style</span>.<span class="hljs-property">color</span> = <span class="hljs-string">'transparent'</span>;
<span class="hljs-keyword">const</span> animatedGradient = scrawl.<span class="hljs-title function_">makeGradient</span>({
<span class="hljs-attr">name</span>: <span class="hljs-string">`<span class="hljs-subst">${name}</span>-gradient`</span>,
<span class="hljs-attr">start</span>: [<span class="hljs-number">0</span>, <span class="hljs-string">'-150%'</span>],
<span class="hljs-attr">end</span>: [<span class="hljs-number">0</span>, <span class="hljs-string">'250%'</span>],
<span class="hljs-attr">paletteStart</span>: <span class="hljs-number">0</span>,
<span class="hljs-attr">paletteEnd</span>: <span class="hljs-number">299</span>,
<span class="hljs-attr">delta</span>: {
<span class="hljs-attr">paletteStart</span>: -<span class="hljs-number">1</span>,
<span class="hljs-attr">paletteEnd</span>: -<span class="hljs-number">1</span>,
},
<span class="hljs-attr">cyclePalette</span>: <span class="hljs-literal">true</span>,
})
.<span class="hljs-title function_">updateColor</span>(<span class="hljs-number">0</span>, <span class="hljs-string">'orange'</span>)
.<span class="hljs-title function_">updateColor</span>(<span class="hljs-number">89</span>, <span class="hljs-string">'orange'</span>)
.<span class="hljs-title function_">updateColor</span>(<span class="hljs-number">110</span>, <span class="hljs-string">'red'</span>)
.<span class="hljs-title function_">updateColor</span>(<span class="hljs-number">289</span>, <span class="hljs-string">'red'</span>)
.<span class="hljs-title function_">updateColor</span>(<span class="hljs-number">310</span>, <span class="hljs-string">'lightblue'</span>)
.<span class="hljs-title function_">updateColor</span>(<span class="hljs-number">489</span>, <span class="hljs-string">'lightblue'</span>)
.<span class="hljs-title function_">updateColor</span>(<span class="hljs-number">510</span>, <span class="hljs-string">'gold'</span>)
.<span class="hljs-title function_">updateColor</span>(<span class="hljs-number">689</span>, <span class="hljs-string">'gold'</span>)
.<span class="hljs-title function_">updateColor</span>(<span class="hljs-number">710</span>, <span class="hljs-string">'green'</span>)
.<span class="hljs-title function_">updateColor</span>(<span class="hljs-number">889</span>, <span class="hljs-string">'green'</span>)
.<span class="hljs-title function_">updateColor</span>(<span class="hljs-number">910</span>, <span class="hljs-string">'orange'</span>)
.<span class="hljs-title function_">updateColor</span>(<span class="hljs-number">999</span>, <span class="hljs-string">'orange'</span>);
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`</span>,
group,
font,
text,
<span class="hljs-attr">fillStyle</span>: <span class="hljs-string">`<span class="hljs-subst">${name}</span>-gradient`</span>,</pre></div></div>
</li>
<li id="section-8">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-8">§</a>
</div>
<p>This is a bad fix for mis-aligned text - a better solution would be to expose startX and startY so coder could set them individually for each instance where this snippet is used, so the replacement canvas text can line up exactly with its surrounding text</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-attr">startY</span>: <span class="hljs-string">'16%'</span>,
<span class="hljs-attr">method</span>: <span class="hljs-string">'fill'</span>,</pre></div></div>
</li>
<li id="section-9">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-9">§</a>
</div>
<p>We do not want to expose this canvas text in the DOM as it already exists in the DOM (this snippet just makes it invisible by setting its color to ‘transparent’). The last thing non-visual users need is repeated text.</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-attr">exposeText</span>: <span class="hljs-literal">false</span>,
});
animation.<span class="hljs-title function_">set</span>({
<span class="hljs-attr">commence</span>: <span class="hljs-function">() =></span> animatedGradient.<span class="hljs-title function_">updateByDelta</span>(),
});
}</pre></div></div>
</li>
<li id="section-10">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-10">§</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>