scrawl-canvas

<!DOCTYPE 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> Editable header text colorizer and animation effect snippets Related files: <ul> <li><a href="../snippets-006.html">Editable header text colorizer and animation effect snippets</a></li> <li><a href="./animated-highlight-gradient-text-snippet.html">Animated highlight gradient text snippet</a></li> <li><a href="./bubbles-text-snippet.html">Bubbles text snippet</a></li> <li><a href="./risograph-text-gradient-snippet.html">Risograph text gradient snippet</a></li> <li><a href="./swirling-stripes-text-snippet.html">Swirling stripes text snippet</a></li> <li><a href="./worley-text-gradient-snippet.html">Worley text gradient 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="text-snippet-helper-function">Text snippet helper function</h3> Purpose - Used by text snippets to handle some boilerplate and common functionality: <ul> <li>Handles most work related to matching the canvas font to the HTML element’s font</li> <li>Retrieves the <code>data-</code> attributes which handle canvas text alignment with the HTML element’s text layout</li> <li>For editable HTML elements, handles user updates to the text</li> <li>Canvas initialization, including accessibility</li> <li>Phrase entity initialisation, and updates - including adapting the HTML element to accommodate the phrase’s dimensions</li> <li>Animation boilerplate code, including animation accessibility - create and manage the <code>play|pause</code> <code>button</code> element created and added to the HTML element</li> </ul> Function input - The Scrawl-canvas snippet object, alongside the SC object (both arguments required). Function output - A Javascript object with the following <code>key:value</code> attributes: <ul> <li><code>canvas</code> - SC snippet’s Canvas wrapper </li> <li><code>group</code> - (string) Canvas wrapper’s base Cell’s name value </li> <li><code>animation</code> - SC snippet’s animation object </li> <li><code>wrapper</code> - SC snippet’s Element artefact wrapper </li> <li><code>dataset</code> - HTML element’s <code>dataset</code> object </li> <li><code>compStyles</code> - HTML element’s <code>elementComputedStyles</code> object </li> <li><code>name</code> - (string) SC snippet’s Element artefact wrapper’s name value </li> <li><code>width</code> - (number px) initial HTML element width value </li> <li><code>height</code> - (number px) initial HTML element height value </li> <li><code>lineHeight</code> - (number px) initial HTML element line height value </li> <li><code>fontSize</code> - (number px) initial HTML element font size value </li> <li><code>yOffset</code> - user-defined canvas font vertical positioning correction value </li> <li><code>textGroup</code> - the non-cell group used to manage and update the two Phrase entitys </li> <li><code>initCanvas</code> - function to invoke to initialize the Canvas wrapper </li> <li><code>initPhrase</code> - function to invoke to initialize the Phrase entitys </li> <li><code>processText</code> - function to handle <code>contenteditable</code> element text updates </li> <li><code>responsiveFunctions</code> - Array to hold snippet-specific functions relating to responsiveness </li> <li><code>animationFunctions</code> - Array to hold snippet-specific functions relating to running animations </li> <li><code>animationStartFunctions</code> - Array to hold snippet-specific functions relating to <code>animation.run()</code> </li> <li><code>animationEndFunctions</code> - Array to hold snippet-specific functions relating to <code>animation.halt()</code> </li> <li><code>contrastMoreActions</code> - Array to hold a <code>prefers-contrast</code> accessibility change function </li> <li><code>contrastOtherActions</code> - Array to hold a <code>prefers-contrast</code> accessibility change function </li> <li><code>colorSchemeDarkActions</code> - Array to hold a <code>prefers-color-scheme</code> accessibility change function </li> <li><code>colorSchemeLightActions</code> - Array to hold a <code>prefers-color-scheme</code> accessibility change function </li> <li><code>eternalTweens</code> - Array to hold sets of continuously-running tweens created by the snippet </li> <li><code>additionalDemolishActions</code> - Array to hold snippet-specific functions relating to snippet demolition </li> </ul> </div> <div class="content"><div class='highlight'><pre>export const getSnippetData = (snippet, scrawl) => { const canvas = snippet.canvas, group = canvas.base.name, animation = snippet.animation, wrapper = snippet.element, demolishAction = snippet.demolish, el = wrapper.domElement, compStyles = wrapper.elementComputedStyles, name = wrapper.name, dataset = el.dataset; const {fontStyle, fontVariant, fontWeight, fontSize, fontFamily, lineHeight, color, width, height, backgroundColor, textAlign, letterSpacing} = compStyles; let yOffset = 0, lineheightAdjuster = 1, underlinePosition = 0.8, underlineWidth = 0.05, noUnderlineGlyphs = '', isAnimated = false; if (dataset.yOffset) yOffset = parseFloat(dataset.yOffset); else { const s = compStyles.getPropertyValue('--data-y-offset'); if (s) yOffset = parseFloat(s); } if (dataset.lineheightAdjuster) lineheightAdjuster = parseFloat(dataset.lineheightAdjuster); else { const s = compStyles.getPropertyValue('--data-lineheight-adjuster'); if (s) lineheightAdjuster = parseFloat(s); } if (dataset.underlinePosition) underlinePosition = parseFloat(dataset.underlinePosition); else { const s = compStyles.getPropertyValue('--data-underline-position'); if (s) underlinePosition = parseFloat(s); } if (dataset.underlineWidth) underlineWidth = parseFloat(dataset.underlineWidth); else { const s = compStyles.getPropertyValue('--data-underline-width'); if (s) underlineWidth = parseFloat(s); } if (dataset.noUnderlineGlyphs) noUnderlineGlyphs = dataset.noUnderlineGlyphs; else { const s = compStyles.getPropertyValue('--data-no-underline-glyphs'); if (s) noUnderlineGlyphs = s; } if (dataset.isAnimated) isAnimated = dataset.isAnimated; else { const s = compStyles.getPropertyValue('--data-is-animated'); if (s) isAnimated = s; } const additionalDemolishActions = []; const responsiveFunctions = []; const animationFunctions = []; const animationStartFunctions = []; const animationEndFunctions = []; const contrastMoreActions = []; const contrastOtherActions = []; const colorSchemeDarkActions = []; const colorSchemeLightActions = []; const eternalTweens = []; const initCanvas = () => { el.style.color = 'transparent'; el.style.overflow = 'hidden'; canvas.setColorSchemeDarkAction(() => colorSchemeDarkActions.forEach(a => a(compStyles))); canvas.setColorSchemeLightAction(() => colorSchemeLightActions.forEach(a => a(compStyles))); canvas.setMoreContrastAction(() => contrastMoreActions.forEach(a => a(compStyles))); canvas.setOtherContrastAction(() => contrastOtherActions.forEach(a => a(compStyles))); }; const addTextNode = () => { const shy = document.createTextNode('!'); el.appendChild(shy); }; const processText = t => { t = t.replace(/<canvas.*<\/canvas>/gi, ''); t = t.replace(/<button.*<\/button>/gi, ''); if (!t.length) { addTextNode(); t = '!'; } return t; } if (el.getAttribute('contenteditable')) { const updateText = (e) => { textGroup.setArtefacts({ text: processText(el.innerHTML) }); } const focusText = (e) => { el.style.color = 'gray'; } const blurText = (e) => { el.style.color = 'transparent'; } scrawl.addNativeListener('input', updateText, el); scrawl.addNativeListener('focus', focusText, el); scrawl.addNativeListener('blur', blurText, el); additionalDemolishActions.push(() => { scrawl.removeNativeListener('input', updateText, el); scrawl.removeNativeListener('focus', focusText, el); scrawl.removeNativeListener('blur', blurText, el); }); } const initPhrase = (phrase) => { const localLineHeight = parseFloat(lineHeight), localFontSize = parseFloat(fontSize); phrase.set({ style: fontStyle, variant: fontVariant, weight: fontWeight, size: fontSize, family: fontFamily, lineHeight: (localLineHeight / localFontSize) * lineheightAdjuster, width: '100%', text: processText(el.innerHTML), startY: Math.round(localFontSize * yOffset), underlinePosition, underlineWidth: Math.round(localFontSize * underlineWidth) || 1, noUnderlineGlyphs, underlineStyle: 'black', justify: textAlign || 'left', letterSpacing: letterSpacing || 0, exposeText: false, }); };</pre></div></div> </li> <li id="section-3"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-3">§</a> </div> This is a specific fix to handle cases where, because of differences in the way SC and the browser calculate how to fit words on a line, SC phrases may break the text onto an additional line not required by the DOM element </div> <div class="content"><div class='highlight'><pre> let localWidth = width; let localHeight = parseFloat(height); const textHeightAction = () => { if (textGroup.artefacts.length) { const art = textGroup.getArtefact(textGroup.artefacts[0]); const headerHeight = art.get('height'); if (headerHeight !== localHeight) { el.style.height = `${headerHeight}px`; localHeight = headerHeight; } } }; const updatePhrase = () => { if (textGroup.artefacts.length && compStyles.width !== localWidth) { localWidth = compStyles.width; const {fontStyle, fontVariant, fontWeight, fontSize, fontFamily, lineHeight, textAlign, letterSpacing} = compStyles; const localLineHeight = parseFloat(lineHeight), localFontSize = parseFloat(fontSize); textGroup.setArtefacts({ style: fontStyle, variant: fontVariant, weight: fontWeight, size: fontSize, family: fontFamily, lineHeight: (localLineHeight / localFontSize) * lineheightAdjuster, startY: Math.round(localFontSize * yOffset), underlineWidth: Math.round(localFontSize * underlineWidth) || 1, justify: textAlign || 'left', letterSpacing: letterSpacing || 0, }); responsiveFunctions.forEach(r => r(compStyles)); } }; const textGroup = scrawl.makeGroup({ name: `${name}-text-group`, }); let doAnimation = false; const commenceActions = () => { updatePhrase(); textHeightAction(); if (doAnimation) { animationFunctions.forEach(f => f(compStyles)); } } animation.set({ commence: commenceActions, }); if (isAnimated) { doAnimation = true; if ('static' === compStyles.position) el.style.position = 'relative'; const control = document.createElement('button'); control.style.position = 'absolute'; control.style.fontSize = '12px'; control.style.display = 'block'; control.style.top = '0'; control.style.right = '0'; control.textContent = 'Halt'; control.setAttribute('contenteditable', 'false'); const controlClick = (e) => { doAnimation = !doAnimation; if (doAnimation) { control.textContent = 'Halt'; animationStartFunctions.forEach(a => a()); eternalTweens.forEach(t => t.resume()); } else { control.textContent = 'Play'; animationEndFunctions.forEach(a => a()); eternalTweens.forEach(t => t.halt()); } }; scrawl.addNativeListener('click', controlClick, control); el.appendChild(control); canvas.setReduceMotionAction(() => { if (doAnimation) { doAnimation = false; control.textContent = 'Play'; animationEndFunctions.forEach(a => a()); eternalTweens.forEach(t => t.halt()); } }); canvas.setNoPreferenceMotionAction(() => { if (!doAnimation) { doAnimation = true; control.textContent = 'Halt'; animationStartFunctions.forEach(a => a()); eternalTweens.forEach(t => t.resume()); } }); additionalDemolishActions.push(() => { scrawl.removeNativeListener('click', controlClick, control); }); } snippet.demolish = () => { eternalTweens.forEach(t => t.kill()); textGroup.kill(); additionalDemolishActions.forEach(f => f()); demolishAction(); }; return { canvas, group, animation, wrapper, dataset, compStyles, name, width: parseFloat(width), height: localHeight, lineHeight: parseFloat(lineHeight), fontSize: parseFloat(fontSize), yOffset, textGroup, initCanvas, initPhrase, processText, responsiveFunctions, animationFunctions, animationStartFunctions, animationEndFunctions, contrastMoreActions, contrastOtherActions, colorSchemeDarkActions, colorSchemeLightActions, eternalTweens, additionalDemolishActions, }; }</pre></div></div> </li> </ul> </div> </body> </html>