2024-11-06 23:51:08 +00:00
|
|
|
/**
|
|
|
|
* Create an observer for showing/hiding feature and for firing scroll event hooks.
|
|
|
|
*
|
|
|
|
* @param {Function} onResize functionality for when the element during resize
|
2024-11-08 01:33:56 +00:00
|
|
|
* @param {Function} onResizeStart functionality for when the element at the start of resize
|
2024-11-06 23:51:08 +00:00
|
|
|
* @param {Function} onResizeEnd functionality for when the element at the end of resize
|
|
|
|
* @return {ResizeObserver}
|
|
|
|
*/
|
2024-11-08 01:33:56 +00:00
|
|
|
function initResizeObserver( onResize, onResizeStart, onResizeEnd ) {
|
|
|
|
let resizeStarted = false;
|
|
|
|
|
2024-11-06 23:51:08 +00:00
|
|
|
/* eslint-disable-next-line compat/compat */
|
2024-11-09 02:24:56 +00:00
|
|
|
return new ResizeObserver( ( entries ) => {
|
2024-11-08 01:33:56 +00:00
|
|
|
if ( onResizeStart && !resizeStarted ) {
|
2024-11-09 02:24:56 +00:00
|
|
|
onResizeStart( entries[ 0 ] );
|
2024-11-08 01:33:56 +00:00
|
|
|
resizeStarted = true;
|
|
|
|
}
|
|
|
|
|
2024-11-09 02:24:56 +00:00
|
|
|
onResize( entries[ 0 ] );
|
2024-11-08 01:33:56 +00:00
|
|
|
|
2024-11-06 23:51:08 +00:00
|
|
|
if ( onResizeEnd ) {
|
|
|
|
clearTimeout( window.resizedFinished );
|
|
|
|
window.resizedFinished = setTimeout( () => {
|
2024-11-09 02:24:56 +00:00
|
|
|
onResizeEnd( entries[ 0 ] );
|
2024-11-08 01:33:56 +00:00
|
|
|
resizeStarted = false;
|
2024-11-06 23:51:08 +00:00
|
|
|
}, 250 );
|
|
|
|
}
|
|
|
|
} );
|
|
|
|
}
|
|
|
|
|
|
|
|
module.exports = {
|
|
|
|
initResizeObserver
|
|
|
|
};
|