Home > OS >  Pass in various functions and elements to a Objects method
Pass in various functions and elements to a Objects method

Time:11-19

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.)

  • Related