import * as scrawl from '../../source/scrawl.js';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(el, {
backgroundColor: 'red',
rippleColor: 'pink',
}));
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, args = {}) {The snippet will accept an optional key:value Object as the second argument
white let backgroundColor = args.backgroundColor || false,
rippleColor = args.rippleColor || 'white';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,
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 ('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
let clickAction = (e) => {
let {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
let 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;
};
console.log(scrawl.library);