import * as scrawl from '../../source/scrawl.js';Snippets included in the Scrawl-canvas demo/snippets folder
Related files:
Purpose: Place a large X across the DOM element to indicate that it is a placeholder for something else
Function input:
data- attributes on the DOM elementFunction output:
{
element // wrapper
canvas // wrapper
animation // object
demolish // function
}
import placeholder from './relative/or/absolute/path/to/this/file.js';
let myElements = document.querySelectorAll('.some-class');
myElements.forEach(el => placeholder(el));
Import the Scrawl-canvas object
import * as scrawl from '../../source/scrawl.js';Effects on the element:
transparent - any background image, gradient, etc will be hidden by the snippet effectexport default function (el) {Apply the snippet to the DOM element
let snippet = scrawl.makeSnippet({
domElement: el,
});
if (snippet) {Set some convenience variables
let canvas = snippet.canvas,
wrapper = snippet.element,
name = wrapper.name;Data can be passed to the snippet via data- attributes on the DOM element:
let lineWidth = el.dataset.lineWidth || '4',
lineColor = el.dataset.lineColor || 'black';
lineWidth = parseFloat(lineWidth);Transfer the DOM element’s current background-color style over to the canvas
let backgroundColor = wrapper.elementComputedStyles.backgroundColor || false;
if (backgroundColor) {
canvas.set({
backgroundColor,
})
wrapper.domElement.style.backgroundColor = 'transparent';
}Generate the Scrawl-canvas artefacts that display the effect
scrawl.makeLine({
name: `${name}-line-1`,
group: canvas.base.name,
start: ['0%', '1%'],
end: ['100%', '99%'],
lineWidth,
strokeStyle: lineColor,
method: 'draw',
}).clone({
name: `${name}-line-2`,
start: ['0%', '99%'],
end: ['100%', '1%'],
});
scrawl.makeBlock({
name: `${name}-block`,
group: canvas.base.name,
lineWidth: lineWidth * 2,
dimensions: ['100%', '100%'],
strokeStyle: lineColor,
method: 'draw',
})
}
return snippet;
};