MutationObserver на динамическом c дочернем контенте - PullRequest
Новая
       92

MutationObserver на динамическом c дочернем контенте

0 голосов
/ 29 мая 2020

Я работаю над проектом сайта Prestashop с особенно неудобной настройкой мегаменю.

MutationObserver отлично справляется с перемещением меню назад при открытом оверлее корзины, но проблема в том, что меню динамически втягивается другой библиотекой JavaScript, которая запутывается безо всякого спасения, и поэтому MutationObserver каждый раз отключается от узла, в результате чего все отображается неправильно, если что-то добавляется в корзину после загрузки страницы.

MutationObserver в настоящее время связан напрямую с объектом контейнера главной страницы (category). 

//  CREATE A MUTATION OBSERVER OBJECT TO MONITOR ANY STATE CHANGES ON THE JS NODE
    let observer = new MutationObserver(blockCartOpened);

    function blockCartOpened(mutationRecords) {
    //  PROCESS THE LIST OF MUTATION THAT HAVE OCCURED
        mutationRecords.forEach (function (mutation) {
        //  GET THE MUTATION TARGET AND SEE IF THE DISPLAY STYLE ATTRIBUTE IS SET OR NOT
        //  AND REACT ACCORDINGLY
            var target = $(mutation.target);
            if(target.hasClass("cart_block")) {
                if(target.css("display") == "block") {
                    $(".ets_mm_megamenu").css("z-index", "-1");
                } else {
                    $(".ets_mm_megamenu").css("z-index", "2");
                }
            }
            mutation.addedNodes.forEach(function(node) {
            //  Nothing to be here yet...
            });
        });
    }

//  SET THE TARGETNODE AS WELL AS THE SETTINGS FOR WHAT TO TRIGGER THE OBSERVER ON, IN THIS CASE
//  TRIGGER THE OBSERVER ON ANY CHANGES TO THE STYLE ATTRIBURES OF THE NODE
    var targetNodes = document.getElementById("category");
    var observerOptions = {
        childList: true,
        subtree: true,
        attributes: true,
        attributeFilter: ["style"]
    }

//  SINCE THIS IS A CLASS, A EACH LOOP IS REQUIRED EVEN IF THERE IS ONLY ONE RESULT
    observer.observe(targetNodes, observerOptions);

Есть ли способ отслеживать изменения атрибутов на созданных дочерних узлах внутри родитель, или это просто несбыточная мечта?

1 Ответ

0 голосов
/ 01 июня 2020

Что ж, в конце концов мне не пришлось использовать MutationObserver, поскольку проблема оказалась неподходящей для такого рода решения. Поэтому я пошел по пути наименьшего сопротивления, т.е. решение не изящно, но работает ИДЕАЛЬНО: 

//  BPK: CODE ADDITIONS
    $(document).on("click", function(event) {
        var target = $(".blockcart-header");
        if(target.hasClass("open")) {
            $(".ets_mm_megamenu").css("z-index", "-1");
        } else {
            $(".ets_mm_megamenu").css("z-index", "2");
        }
    });

    $(document).on("click", ".blockcart-header a", function(event) {
        var target = $(".blockcart-header");
        if(target.hasClass("open")) {
            $(".ets_mm_megamenu").css("z-index", "-1");
        } else {
            $(".ets_mm_megamenu").css("z-index", "2");
        }
    });
//  END BPK

Использование события щелчка по всему документу для отслеживания «закрывающих» щелчков и события щелчка на триггере кнопка для отображения корзины, чтобы быть уверенным, что проблема решена для меня.

Урок: не пытайтесь go слишком сложно решить проблему ...

...