- Jump To … +
  ./demo/modules/canvas-minimap.js ./demo/modules/canvas-scene-editor.js ./demo/modules/demo-m006-c1.js ./demo/modules/demo-m006-c2.js ./demo/modules/demo-m006-c3.js ./demo/modules/demo-m006-c4.js ./demo/modules/demo-m006-utils.js ./demo/modules/dom-entity-editor.js ./demo/modules/entity-copy-paste.js ./demo/modules/entity-manipulation-gui.js ./demo/modules/entity-navigation.js ./demo/modules/entity-ring-builder.js ./demo/modules/london-crime-lines.js ./demo/modules/london-crime-stacked-bars.js ./demo/modules/lottie-loader.js ./demo/modules/simple-chart-frame.js ./demo/modules/simple-graph-lines.js ./demo/modules/simple-graph-stacked-bars.js ./demo/modules/wikipedia-views-spiral-chart.js ./demo/snippets/animated-highlight-gradient-text-snippet.js ./demo/snippets/animated-hover-gradient-snippet.js ./demo/snippets/animated-word-gradient-snippet.js ./demo/snippets/before-after-slider-infographic.js ./demo/snippets/bubbles-text-snippet.js ./demo/snippets/green-box-snippet.js ./demo/snippets/jazzy-button-snippet.js ./demo/snippets/page-performance-snippet-test.js ./demo/snippets/page-performance-snippet.js ./demo/snippets/pan-image-snippet.js ./demo/snippets/placeholder-effect-snippet.js ./demo/snippets/ripple-effect-snippet.js ./demo/snippets/risograph-text-gradient-snippet.js ./demo/snippets/spotlight-text-snippet-test.js ./demo/snippets/spotlight-text-snippet.js ./demo/snippets/swirling-stripes-text-snippet.js ./demo/snippets/text-snippet-helper.js ./demo/snippets/word-highlighter-snippet.js ./demo/snippets/worley-text-gradient-snippet.js

- §

  # Demo Snippets 004

  Snippets included in the Scrawl-canvas demo/snippets folder

  Related files:

  - Snippets included in the Scrawl-canvas demo/snippets folder
  - Animated hover gradient snippet
  - Animated word gradient snippet
  - Green box snippet
  - Jazzy button snippet
  - Page performance snippet
  - Pan image snippet
  - Placeholder effect snippet
  - Ripple effect snippet
  - Spotlight text snippet
  - Word highlighter snippet
- §

  ### ‘Word highlighter text’ snippet

  Purpose: adds highlighting to specified words.

  Function input:

  - the DOM element - generally a block or inline-block element.
  - an optional key:value Object as the second argument

  Function output: a Javascript object will be returned, containing the following attributes

      {
          element     // the Scrawl-canvas wrapper for the DOM element supplied to the function
          canvas      // the Scrawl-canvas wrapper for the snippet's canvas
          animation   // the Scrawl-canvas animation object
          demolish    // remove the snippet from the Scrawl-canvas library
      }

  ##### Usage example:

      import highlightText from './relative/or/absolute/path/to/this/file.js';

      let myElements = document.querySelectorAll('.some-class');

      myElements.forEach(el => highlightText(scrawl, el));

- §

  Effects on the element:

  - no additional effects on the DOM element
  - setting any background fill on the DOM element will hide the snippet canvas, unless it is deliberately brought forward

      export default function (scrawl, el, args = {}) {

- §

  The snippet will accept an optional key:value Object as the second argument

  - highlightColor - default: `red`

          const highlightColor = args.highlightColor || 'red',
              thickness = args.thickness || 3;

- §

  Apply the snippet to the DOM element

          const snippet = scrawl.makeSnippet({
              domElement: el,
          });

          if (snippet) {

- §

  Set some convenience variables

              const canvas = snippet.canvas,
                  group = canvas.base.name,
                  wrapper = snippet.element,
                  name = wrapper.name;

              scrawl.makeBlock({
                  name: `${name}-pin1`,
                  group,
                  dimensions: [0, 0],
                  method: 'none',
                  start: ['5%', '10%'],
              }).clone({
                  name: `${name}-pin2`,
                  start: ['90%', '40%'],
              }).clone({
                  name: `${name}-pin3`,
                  start: ['10%', '70%'],
              }).clone({
                  name: `${name}-pin4`,
                  start: ['95%', '90%'],
              })

- §

  Define the block which will (sometimes) display our spotlingt gradient

              scrawl.makePolyline({
                  name: `${name}-highlight`,
                  group,
                  pins: [`${name}-pin1`, `${name}-pin2`, `${name}-pin3`, `${name}-pin4`],
                  tension: 0.4,
                  strokeStyle: highlightColor,
                  lineWidth: thickness,
                  lineCap: 'round',
                  lineJoin: 'round',
                  method: 'draw',
              });
          }

- §

  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

          return snippet;
      }