scrawl-canvas
Version:
Version 8.9.4 - 19 Nov 2022
596 lines (412 loc) • 27.3 kB
HTML
<html>
<head>
<title>Demo Snippets 001</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-001">Demo Snippets 001</h1>
<p>Scrawl-canvas DOM element snippets</p>
<p>Related files:</p>
<ul>
<li><a href="../snippets-001.html">DOM element snippets - main module</a></li>
<li><a href="./spotlight-text-snippet.html">Spotlight text 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>
</ul>
<h3 id="jazzy-button-snippet">‘Jazzy button’ snippet</h3>
<p><strong>Purpose:</strong> display the number of times a user has clicked on a button element; animate the text and its line when the user clicks on the button.</p>
<p><strong>Function input:</strong> a <button> element, or any other block-displayed DOM element containing no child elements.</p>
<p><strong>Function output:</strong> </p>
<pre><code>{
element <span class="hljs-comment">// wrapper</span>
canvas <span class="hljs-comment">// wrapper</span>
animation <span class="hljs-comment">// object</span>
demolish <span class="hljs-comment">// function</span>
artefacts {
trackLine <span class="hljs-comment">// Shape entity</span>
label <span class="hljs-comment">// Phrase entity</span>
}
assets {
lineGradient <span class="hljs-comment">// Gradient wrapper</span>
}
functions {
setClickText <span class="hljs-comment">// increase the number of clicks recorded on the button</span>
textTween <span class="hljs-comment">// Tween animation function</span>
gradientTween <span class="hljs-comment">// Tween animation function</span>
}
}
</code></pre>
<h5 id="usage-example">Usage example:</h5>
<pre><code><span class="hljs-keyword">import</span> jazzyButton <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_">jazzyButton</span>(el));
</code></pre>
</div>
</li>
<li id="section-2">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-2">§</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-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>The DOM element will appear to have a light gray background</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</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,
});
<span class="hljs-keyword">if</span> (snippet) {</pre></div></div>
</li>
<li id="section-5">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-5">§</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>;
canvas.<span class="hljs-title function_">setAsCurrentCanvas</span>();
<span class="hljs-keyword">let</span> wrapper = snippet.<span class="hljs-property">element</span>,
name = wrapper.<span class="hljs-property">name</span>,
styles = wrapper.<span class="hljs-property">elementComputedStyles</span>;</pre></div></div>
</li>
<li id="section-6">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-6">§</a>
</div>
<p>The snippet will take details of its font family, size and color 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> color = styles.<span class="hljs-property">color</span> || <span class="hljs-string">'black'</span>,
font = styles.<span class="hljs-property">font</span> || <span class="hljs-string">`<span class="hljs-subst">${(styles.fontStyle != <span class="hljs-string">'normal'</span>) ? styles.fontStyle + <span class="hljs-string">' '</span> : <span class="hljs-string">''</span>}</span><span class="hljs-subst">${(styles.fontVariant != <span class="hljs-string">'normal'</span>) ? styles.fontVariant + <span class="hljs-string">' '</span> : <span class="hljs-string">''</span>}</span><span class="hljs-subst">${styles.fontSize}</span> <span class="hljs-subst">${styles.fontFamily}</span>`</span> || <span class="hljs-string">'20px sans-serif'</span>;
canvas.<span class="hljs-title function_">set</span>({
<span class="hljs-attr">backgroundColor</span>: <span class="hljs-string">'#f2f2f2'</span>,
})</pre></div></div>
</li>
<li id="section-7">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-7">§</a>
</div>
<p>define the text we’ll be displaying in the button</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">let</span> counter = <span class="hljs-number">0</span>;
<span class="hljs-keyword">let</span> <span class="hljs-title function_">setClickText</span> = (<span class="hljs-params"></span>) => (counter === <span class="hljs-number">1</span>) ? <span class="hljs-string">`<span class="hljs-subst">${counter}</span> click`</span> : <span class="hljs-string">`<span class="hljs-subst">${counter}</span> clicks`</span>;</pre></div></div>
</li>
<li id="section-8">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-8">§</a>
</div>
<p>A path for the text to animate along, together with a gradient for its strokeStyle</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">let</span> lineGradient = 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">endX</span>: <span class="hljs-string">'100%'</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">'blue'</span>)
.<span class="hljs-title function_">updateColor</span>(<span class="hljs-number">650</span>, <span class="hljs-string">'green'</span>)
.<span class="hljs-title function_">updateColor</span>(<span class="hljs-number">700</span>, <span class="hljs-string">'gold'</span>)
.<span class="hljs-title function_">updateColor</span>(<span class="hljs-number">750</span>, <span class="hljs-string">'green'</span>)
.<span class="hljs-title function_">updateColor</span>(<span class="hljs-number">999</span>, <span class="hljs-string">'blue'</span>);
<span class="hljs-keyword">let</span> trackLine = scrawl.<span class="hljs-title function_">makeLine</span>({
<span class="hljs-attr">name</span>: <span class="hljs-string">`<span class="hljs-subst">${name}</span>-line`</span>,
<span class="hljs-attr">startX</span>: <span class="hljs-number">20</span>,
<span class="hljs-attr">endX</span>: <span class="hljs-string">'95%'</span>,
<span class="hljs-attr">startY</span>: <span class="hljs-string">'70%'</span>,
<span class="hljs-attr">endY</span>: <span class="hljs-string">'70%'</span>,
<span class="hljs-attr">lineWidth</span>: <span class="hljs-number">6</span>,
<span class="hljs-attr">lineCap</span>: <span class="hljs-string">'round'</span>,
<span class="hljs-attr">method</span>: <span class="hljs-string">'draw'</span>,
<span class="hljs-attr">strokeStyle</span>: lineGradient,
<span class="hljs-attr">lockStrokeStyleToEntity</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">globalAlpha</span>: <span class="hljs-number">0.5</span>,
<span class="hljs-attr">useAsPath</span>: <span class="hljs-literal">true</span>,
});</pre></div></div>
</li>
<li id="section-9">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-9">§</a>
</div>
<p>The phrase entity that will display the text</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">let</span> label = scrawl.<span class="hljs-title function_">makePhrase</span>({
<span class="hljs-attr">name</span>: <span class="hljs-string">`<span class="hljs-subst">${wrapper.name}</span>-label`</span>,
<span class="hljs-attr">text</span>: <span class="hljs-string">`Hello - <span class="hljs-subst">${setClickText()}</span>`</span>,</pre></div></div>
</li>
<li id="section-10">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-10">§</a>
</div>
<p>Use the font set on the DOM element via CSS</p>
</div>
<div class="content"><div class='highlight'><pre> font,
<span class="hljs-attr">fillStyle</span>: color,
<span class="hljs-attr">handleY</span>: <span class="hljs-string">'68%'</span>,
<span class="hljs-attr">textPath</span>: <span class="hljs-string">`<span class="hljs-subst">${name}</span>-line`</span>,
<span class="hljs-attr">textPathPosition</span>: <span class="hljs-number">0</span>,
<span class="hljs-attr">textPathLoop</span>: <span class="hljs-literal">false</span>,
});</pre></div></div>
</li>
<li id="section-11">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-11">§</a>
</div>
<p>Animate the phrase entity along the line when button element is clicked</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">let</span> textTween = scrawl.<span class="hljs-title function_">makeTween</span>({
<span class="hljs-attr">name</span>: <span class="hljs-string">`<span class="hljs-subst">${name}</span>-textTween`</span>,
<span class="hljs-attr">duration</span>: <span class="hljs-number">2500</span>,
<span class="hljs-attr">targets</span>: label,
<span class="hljs-attr">definitions</span>: [
{
<span class="hljs-attr">attribute</span>: <span class="hljs-string">'textPathPosition'</span>,
<span class="hljs-attr">start</span>: <span class="hljs-number">1</span>,
<span class="hljs-attr">end</span>: <span class="hljs-number">0</span>,
<span class="hljs-attr">engine</span>: <span class="hljs-string">'easeIn'</span>
},
{
<span class="hljs-attr">attribute</span>: <span class="hljs-string">'globalAlpha'</span>,
<span class="hljs-attr">start</span>: <span class="hljs-number">0</span>,
<span class="hljs-attr">end</span>: <span class="hljs-number">1</span>,
<span class="hljs-attr">engine</span>: <span class="hljs-string">'easeIn'</span>
}
]
});</pre></div></div>
</li>
<li id="section-12">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-12">§</a>
</div>
<p>Animate the gradient for the Line the text moves along</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">let</span> gradientTween = scrawl.<span class="hljs-title function_">makeTween</span>({
<span class="hljs-attr">name</span>: <span class="hljs-string">`<span class="hljs-subst">${name}</span>-gradientTween`</span>,
<span class="hljs-attr">targets</span>: lineGradient,
<span class="hljs-attr">duration</span>: <span class="hljs-number">2500</span>,
<span class="hljs-attr">definitions</span>: [
{
<span class="hljs-attr">attribute</span>: <span class="hljs-string">'paletteStart'</span>,
<span class="hljs-attr">integer</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">start</span>: <span class="hljs-number">699</span>,
<span class="hljs-attr">end</span>: <span class="hljs-number">0</span>,
<span class="hljs-attr">engine</span>: <span class="hljs-string">'easeOut'</span>
}, {
<span class="hljs-attr">attribute</span>: <span class="hljs-string">'paletteEnd'</span>,
<span class="hljs-attr">integer</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">start</span>: <span class="hljs-number">700</span>,
<span class="hljs-attr">end</span>: <span class="hljs-number">999</span>,
<span class="hljs-attr">engine</span>: <span class="hljs-string">'easeOut'</span>
}
]
});
<span class="hljs-keyword">let</span> <span class="hljs-title function_">clickAction</span> = (<span class="hljs-params">e</span>) => {</pre></div></div>
</li>
<li id="section-13">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-13">§</a>
</div>
<p>Increase the local counter; update the Phrase entity with new text</p>
</div>
<div class="content"><div class='highlight'><pre> counter++;
label.<span class="hljs-title function_">set</span>({
<span class="hljs-attr">text</span>: <span class="hljs-string">`Hello - <span class="hljs-subst">${setClickText()}</span>`</span>,
});</pre></div></div>
</li>
<li id="section-14">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-14">§</a>
</div>
<p>Both tweens need to halt and restart if user clicks on them while they are running</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> (textTween.<span class="hljs-title function_">isRunning</span>()) {
textTween.<span class="hljs-title function_">halt</span>();
textTween.<span class="hljs-title function_">seekTo</span>(<span class="hljs-number">0</span>);
}
textTween.<span class="hljs-title function_">run</span>();
<span class="hljs-keyword">if</span> (gradientTween.<span class="hljs-title function_">isRunning</span>()) {
gradientTween.<span class="hljs-title function_">halt</span>();
gradientTween.<span class="hljs-title function_">seekTo</span>(<span class="hljs-number">0</span>);
}
gradientTween.<span class="hljs-title function_">run</span>();
}
scrawl.<span class="hljs-title function_">addNativeListener</span>(<span class="hljs-string">'click'</span>, clickAction, el);
snippet.<span class="hljs-property">artefacts</span> = {
<span class="hljs-attr">trackLine</span>: trackLine,
<span class="hljs-attr">label</span>: label,
};
snippet.<span class="hljs-property">assets</span> = {
<span class="hljs-attr">lineGradient</span>: lineGradient,
};
snippet.<span class="hljs-property">functions</span> = {
<span class="hljs-attr">setClickText</span>: setClickText,
<span class="hljs-attr">textTween</span>: textTween,
<span class="hljs-attr">gradientTween</span>: gradientTween,
};
}
<span class="hljs-keyword">return</span> snippet;
};</pre></div></div>
</li>
</ul>
</div>
</body>
</html>