I know this is probably a long shot, but I wanted to see if this is possible - I have the following method inside my object that I created:
function src_observer(target_node) {
let observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.attributeName === 'src') {
target_node.show();
target_node.next().remove();
}
});
observer.disconnect();
});
// Pass in the Observer target node & options
observer.observe(target_node[0], {
attributes: true,
attributeFilter: ['src']
});
}
Now I have the exact same code logic in another file, which is:
let target_node = videoWrapper.html(videoElement).children('iframe')[0];
// Set our Observer options
let config = {
attributes: true,
attributeFilter: ['src']
}
// Observe and listen for the src data attribute
let src_observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.attributeName === 'src') {
videoWrapper.parents().eq(1).children('.onetrust_container').remove();
videoWrapper.parent().show();
videoWrapper.show();
element.fadeOut(500);
cover.fadeOut(500);
}
});
src_observer.disconnect();
});
The only difference between them is the inner items inside if (mutation.attributeName === 'src')
.
Question:
Is it possible to reuse my objects function src_observer()
but pass in various functions and elements in between if (mutation.attributeName === 'src')
so that way I can reuse that method and pass it other functions and elements elsewhere.
Realistically, looking at something like this:
src_observer(target_node, { target_show_element, target_next_element, pass_in_additional_elements }
- All help will be appreciated!
CodePudding user response:
Sure, just pass in a callback:
function src_observer(target_node, callback) {
let observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.attributeName === 'src') {
// This call to `disconnect` seemed like it should be
// here rather than outside this block
observer.disconnect();
// Call the callback to do the specific work that
// should be done when the mutation is seen
callback(mutation);
}
});
});
// Pass in the Observer target node & options
observer.observe(target_node[0], {
attributes: true,
attributeFilter: ['src']
});
}
Then the first use would be:
src_observer(target_node, () => {
target_node.show();
target_node.next().remove();
});
And the second would be something like (it's harder to be sure here, because the two quoted bits of code cover different ground):
src_observer(target_node, () => {
videoWrapper.parents().eq(1).children('.onetrust_container').remove();
videoWrapper.parent().show();
videoWrapper.show();
element.fadeOut(500);
cover.fadeOut(500);
});
(You could even parameterize it more by specifying a "test" callback that determines if a given mutation record matches the condition.)