scrawl-canvas

<!DOCTYPE html> <html> <head> <title>Demo Snippets 005</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-005">Demo Snippets 005</h1> Create a responsive, interactive and accessible before/after slider infographic Related files: <ul> <li><a href="../snippets-005.html">Slider infographic snippet - main module</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="before-after-slider-infographic-snippet">‘Before-after slider infographic’ snippet</h3> Purpose: Turn a pair of images, alongside associated data, into a fully responsive, interactive and accessible before-after slider infographic Note that this is a highly complex snippet, which relies on recieving an element to process in a very specific format containing a number of required child elements. All elements are expected to have various specified data- attributes which are used to build the infographic. Function input: <pre><code><div id="infographic-unique name" class="some-class-name" data-label="Infographic title - required for accessibility" data-description="Infographic description - required for accessibility"> <div id="left-panel-unique-name" data-date="date of image" data-frame="left"> <img id="left-panel-image-unique-name" alt="Alternative text for image - required for accessibility" src="path/to/image/url" />  <p id="pin-unique-id" data-type="pin" data-position="59%, 21%" data-fill="blue", data-stroke="yellow", data-labelwidth="30%" data-labelposition="left" data-labelbackground="azure" data-shared>Text <span class="sc-red">appears</span> when user <strong>hovers</strong> over pin</p> </div> <div id="right-panel-unique-name" data-date="date of image" data-frame="right"> <img id="right-panel-image-unique-name" alt="Alternative text for image - required for accessibility" src="path/to/image/url" /> <p>...Pin definitions</p> </div>  <nav> <a id="link-unique-id" href="https://absolute/link/url" data-position="1%, 95%" data-width="45%" data-justify="left">Text to include in the link</a> <a id="another-link-unique-id" href="relative/link/url" data-position="99%, 95%" data-width="45%" data-background="darkblue" data-justify="right">Different text for different link</a> </nav> </div> </code></pre> </div> </li> <li id="section-3"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-3">§</a> </div> <h5 id="usage-example">Usage example:</h5> <pre><code>import slider from './relative/or/absolute/path/to/this/file.js'; let myElements = document.querySelectorAll('.some-class-name'); myElements.forEach(el => slider(el)); </code></pre> Note that this snippet has a profound effect on the element it processes, moving images inside a canvas element and deleting most of the child elements (to prevent copy repetition for screen readers) Function output: <pre><code>{ element // wrapper canvas // wrapper animation // object demolish // function } </code></pre> <h3 id="snippet-code">Snippet code</h3> Import the Scrawl-canvas object </div> <div class="content"><div class='highlight'><pre>import * as scrawl from '../../source/scrawl.js'</pre></div></div> </li> <li id="section-4"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-4">§</a> </div> Internal function to scrape data from the supplied element </div> <div class="content"><div class='highlight'><pre>const getPanelData = function (el, store, canvas) { if (!el) return false; const img = el.querySelector('img'); store.element = el; store.name = el.id; store.date = el.dataset.date; store.imageElement = img; store.pinElements = el.querySelectorAll('p'); store.pins = []; store.pinElements.forEach(p => { store.pins.push({ name: p.id, groupname: store.name, type: p.dataset.type, position: p.dataset.position, fill: p.dataset.fill || 'red', stroke: p.dataset.stroke || 'yellow', labelposition: p.dataset.labelposition, labelwidth: p.dataset.labelwidth || '25%', labelbackground: p.dataset.labelbackground || 'rgba(0,0,0,0.2)', labeltext: p.innerHTML, shared: (p.dataset.shared != null) ? true : false, }); }); canvas.domElement.appendChild(img); return store; };</pre></div></div> </li> <li id="section-5"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-5">§</a> </div> Internal function to scrape data from the supplied element </div> <div class="content"><div class='highlight'><pre>const getNavigationData = function (el, store, canvas) { if (!el) return false; store.element = el; store.links = []; const linkElements = el.querySelectorAll('a'); linkElements.forEach(a => { store.links.push({ name: a.id, href: a.href, width: a.dataset.width || '20%', position: a.dataset.position, background: a.dataset.background || 'rgba(0,0,0,0.2)', justify: a.dataset.justify || 'center', text: a.innerHTML, }); }); return store; };</pre></div></div> </li> <li id="section-6"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-6">§</a> </div> The pin factory takes all the data about pins that we scraped from the element and builds a set of interactive Scrawl-canvas entitys for each pin </div> <div class="content"><div class='highlight'><pre>const pinFactory = function (items, canvas, pinTextGroup, pinTextBackgroundGroup, colors) { let { name, groupname, position, fill, stroke, labeltext, labelposition, labelwidth, labelbackground, shared, suppressAccessibleText } = items; const coords = position.split(',');</pre></div></div> </li> <li id="section-7"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-7">§</a> </div> TODO: We don’t want to display a label if its associated pin is not currently visible to the user </div> <div class="content"><div class='highlight'><pre> const checkVisibility = function (entity) { return true; }</pre></div></div> </li> <li id="section-8"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-8">§</a> </div> Generate the visible pin </div> <div class="content"><div class='highlight'><pre> const pin = scrawl.makeWheel({ name: `${name}-pin`, group: `${groupname}-cell`, start: coords, handle: ['center', 'center'], radius: 10, fillStyle: fill, strokeStyle: stroke, lineWidth: 2, method: 'fillThenDraw', });</pre></div></div> </li> <li id="section-9"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-9">§</a> </div> The hit zone for the pin is assigned to the canvas element’s base cell, to make the user interaction (eg collision detection with the mouse cursor) code as simple as posssible </div> <div class="content"><div class='highlight'><pre> pin.clone({ name: `${name}-hitzone`, group: canvas.base.name, radius: 25, method: 'none', onEnter: function () { if (checkVisibility(pin)) {</pre></div></div> </li> <li id="section-10"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-10">§</a> </div> Increase the visible pin’s size </div> <div class="content"><div class='highlight'><pre> pin.set({ radius: 15, lineWidth: 4, });</pre></div></div> </li> <li id="section-11"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-11">§</a> </div> Display the pin’s associated label </div> <div class="content"><div class='highlight'><pre> if (pinText) { pinText.set({ visibility: true }); pinBackground.set({ visibility: true }); } } }, onLeave: function () { if (checkVisibility(pin)) {</pre></div></div> </li> <li id="section-12"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-12">§</a> </div> Decrease the visible pin’s size </div> <div class="content"><div class='highlight'><pre> pin.set({ radius: 10, lineWidth: 2, });</pre></div></div> </li> <li id="section-13"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-13">§</a> </div> Hide the pin’s associated label </div> <div class="content"><div class='highlight'><pre> if (pinText) { pinText.set({ visibility: false }); pinBackground.set({ visibility: false }); } } }, });</pre></div></div> </li> <li id="section-14"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-14">§</a> </div> Generate the label associated with each pin (assuming it’s been defined in the data) </div> <div class="content"><div class='highlight'><pre> let pinText, pinBackground; if (labeltext) {</pre></div></div> </li> <li id="section-15"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-15">§</a> </div> Labels can be positioned above, below, or to the right or left of the pin. </div> <div class="content"><div class='highlight'><pre> if (!labelposition) labelposition = 'below'; let handle = ['center', '-20%']; if ('above' === labelposition) handle = ['center', '120%']; if ('left' === labelposition) handle = ['110%', 'center']; if ('right' === labelposition) handle = ['-10%', 'center']; pinText = scrawl.makePhrase({ name: `${name}-label`, group: `${groupname}-cell`, order: 1, text: labeltext, justify: 'center', lineHeight: 1.15, width: labelwidth,</pre></div></div> </li> <li id="section-16"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-16">§</a> </div> @ts-expect-error </div> <div class="content"><div class='highlight'><pre> handle, pivot: `${name}-pin`, lockTo: 'pivot', font: '28px Arial, sans-serif', fillStyle: colors.default, exposeText: (suppressAccessibleText) ? false : true, visibility: false, }); pinTextGroup.addArtefacts(`${name}-label`); pinBackground = scrawl.makeBlock({ name: `${name}-background`, group: `${groupname}-cell`, order: 0, fillStyle: labelbackground, width: 20, height: 20, handleY: 10, mimic: `${name}-label`, lockTo: 'mimic', useMimicDimensions: true, useMimicStart: true, useMimicHandle: true, addOwnDimensionsToMimic: true, addOwnHandleToMimic: true, visibility: false, }); pinTextBackgroundGroup.addArtefacts(`${name}-background`); } };</pre></div></div> </li> <li id="section-17"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-17">§</a> </div> The link factory takes all the data about links that we scraped from the element and builds a set of interactive Scrawl-canvas entitys for each link </div> <div class="content"><div class='highlight'><pre>const linkFactory = function (items, canvas, linkTextGroup, colors) { const {name, position, href, justify, text, width, background} = items; const start = position.split(','); scrawl.makePhrase({ name: `${name}-link`, group: canvas.base.name, order: 1, text, start, width, handleX: justify, handleY: justify, justify, font: '16px Arial, sans-serif', lineHeight: 1, fillStyle: colors.link, underlinePosition: 0.8, underlineStyle: colors.linkunderline, onEnter: function () { canvas.set({ css: { cursor: 'pointer', } });</pre></div></div> </li> <li id="section-18"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-18">§</a> </div> @ts-expect-error </div> <div class="content"><div class='highlight'><pre> this.set({ text: `§UNDERLINE§${this.text}`, }); }, onLeave: function () { canvas.set({ css: { cursor: 'auto', } });</pre></div></div> </li> <li id="section-19"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-19">§</a> </div> @ts-expect-error </div> <div class="content"><div class='highlight'><pre> this.set({ text: this.text.replace('§UNDERLINE§', ''), }); }, onUp: function () {</pre></div></div> </li> <li id="section-20"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-20">§</a> </div> @ts-expect-error </div> <div class="content"><div class='highlight'><pre> this.clickAnchor(); },</pre></div></div> </li> <li id="section-21"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-21">§</a> </div> Suppress accessible text here because we’re also including an anchor, which will also add its description text to the canvas shadow DOM (as part of the navigation) </div> <div class="content"><div class='highlight'><pre> exposeText: false, anchor: { name, href, description: text, focusAction: true, blurAction: true, }, }); linkTextGroup.addArtefacts(`${name}-link`); scrawl.makeBlock({ name: `${name}-background`, group: canvas.base.name, order: 0, fillStyle: background, width: 20, height: 10, handleY: 10, mimic: `${name}-link`, lockTo: 'mimic', useMimicDimensions: true, useMimicStart: true, useMimicHandle: true, addOwnDimensionsToMimic: true, addOwnHandleToMimic: true, }) };</pre></div></div> </li> <li id="section-22"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-22">§</a> </div> <h5 id="the-exported-function">The exported function</h5> </div> <div class="content"><div class='highlight'><pre>export default function (el) {</pre></div></div> </li> <li id="section-23"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-23">§</a> </div> Apply the snippet to the DOM element </div> <div class="content"><div class='highlight'><pre> let snippet = scrawl.makeSnippet({ domElement: el, }); if (snippet) {</pre></div></div> </li> <li id="section-24"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-24">§</a> </div> 0. Convenience handle variables; basic followup housekeeping </div> <div class="content"><div class='highlight'><pre> let canvas = snippet.canvas, animation = snippet.animation, wrapper = snippet.element, element = wrapper.domElement, name = wrapper.name; canvas.set({ backgroundColor: 'white', }).render(); wrapper.set({ canvasOnTop: true, });</pre></div></div> </li> <li id="section-25"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-25">§</a> </div> 1. Get all information required from the wrapper’s panel <div> child elements </div> <div class="content"><div class='highlight'><pre> const leftPanel = getPanelData(element.querySelector('[data-frame="left"]'), {}, canvas); const rightPanel = getPanelData(element.querySelector('[data-frame="right"]'), {}, canvas);</pre></div></div> </li> <li id="section-26"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-26">§</a> </div> Snippet will fail if we don’t have both panels to build </div> <div class="content"><div class='highlight'><pre> if (leftPanel && rightPanel) {</pre></div></div> </li> <li id="se