export default function (scrawl, el, args = {}) {DOM element snippet - test canvas adaption to local element variations
Related files:
Purpose: replicate the Material design ‘ripple effect’ when user clicks on an element decorated with this snippet. Function input:
Function output:
{
element // wrapper
canvas // wrapper
animation // object
demolish // function
}
import ripples from './relative/or/absolute/path/to/this/file.js';
let myElements = document.querySelectorAll('.some-class');
myElements.forEach(el => ripples(scrawl, el, {
backgroundColor: 'red',
rippleColor: 'pink',
}));
Effects on the element:
transparent - any background image, gradient, etc will be hidden by the snippet effectexport default function (scrawl, el, args = {}) {The snippet will accept an optional key:value Object as the second argument
white let backgroundColor = args.backgroundColor || false;
const rippleColor = args.rippleColor || 'white';Apply the snippet to the DOM element
const snippet = scrawl.makeSnippet({
domElement: el,
});
if (snippet) {Set some convenience variables
const canvas = snippet.canvas,
wrapper = snippet.element,
styles = wrapper.elementComputedStyles,
name = wrapper.name;Transfer the DOM element’s current background-color style over to the canvas
if (!backgroundColor) backgroundColor = styles.backgroundColor;We don’t want a transparent background - default to beige!
if (
'rgb(0 0 0 / 0)' === backgroundColor ||
'rgba(0 0 0 / 0)' === backgroundColor ||
'rgba(0, 0, 0, 0)' === backgroundColor ||
'rgba(0,0,0,0)' === backgroundColor ||
'transparent' === backgroundColor ||
'#00000000' === backgroundColor ||
'#0000' === backgroundColor
) {
backgroundColor = 'beige';
}
canvas.set({
backgroundColor,
})
wrapper.domElement.style.backgroundColor = 'transparent';We add an event listener to the DOM element
const clickAction = () => {
const {x, y, active} = canvas.here;
if (active) {Implement the ripple effect using a run-once-and-die tween operating on a create-and-destroy Wheel entity
const r = scrawl.makeWheel({
name: `${name}-ripple`,
start: [x, y],
group: canvas.base.name,
handle: ['center', 'center'],
radius: '100%',
fillStyle: rippleColor,
});
scrawl.makeTween({
name: `${name}-tween`,
targets: r,
duration: 1000,
completeAction: () => r.kill(),
killOnComplete: true,
definitions: [
{
attribute: 'scale',
start: 0,
end: 1,
}, {
attribute: 'globalAlpha',
start: 1,
end: 0,
}
],
}).run();
}
};
scrawl.addNativeListener(['click', 'touchend'], clickAction, el);
}
return snippet;
}