import * as scrawl from '../source/scrawl.js';
Scrawl-canvas DOM element snippets
Related files:
Import the Scrawl-canvas object
import * as scrawl from '../source/scrawl.js';
Import snippets
import spotlightText from './snippets/spotlight-text-snippet-test.js';
import jazzyButton from './snippets/jazzy-button-snippet.js';
import pagePerformance from './snippets/page-performance-snippet-test.js';
Get the relevant Scrawl-canvas stack elements that need snippet skinning
const spotlightElements = document.querySelectorAll('.spotlight-text');
const jazzyElements = document.querySelectorAll('.jazzy-button');
const pageReport = document.querySelectorAll('#reportmessage');
… And then skin them using the snippet code we imported
spotlightElements.forEach(el => spotlightText(scrawl, el));
const myJazzy = [];
jazzyElements.forEach(el => myJazzy.push(jazzyButton(scrawl, el)));
make the third jazzy button (in the middle of the grid element) display its canvas over the button
myJazzy[2].element.set({
canvasOnTop: true,
});
pageReport.forEach(el => pagePerformance(scrawl, el));