javascript Mutation Observer Snippet

Posted 2021-05-03

var observer = new MutationObserver(function(records) {
    // new reviews have been added to the widget, do something here
    records.forEach(function(r) {
        r.addedNodes.forEach(function(n) {
            // e.g. do something to the node
            n.style = 'width: 500px;';
        });
    });
});

  var reviewMainElement = document.querySelector('.js-okeReviews-reviews-main');
  observer.observe(reviewMainElement, {
      childList: true
  });

window.okeReviewsWidgetOnInit = function() {
  setupWidget();
  okeWidgetControlInit();
  observeReviewMain();

  var allReviewsObserver = new MutationObserver(function(records) {
    setupWidget();
    observeReviewMain();
  });

  var allReviewsWidget = document.querySelector('#orc-widget-snippet');
  if (allReviewsWidget) {
    allReviewsObserver.observe(allReviewsWidget, {
        childList: true
    });
  }
}

function observeReviewMain() {
  var observer = new MutationObserver(function(records) {
    setupWidget();
    console.log('changed');
  });
  var reviewMainElement = document.querySelector('.js-okeReviews-reviews-main');
  if (reviewMainElement) {
    observer.observe(reviewMainElement, {
      childList: true
    });
  }
}

window.okeReviewsWidgetOnInit = function() {
  setupWidget();
  
  var observer = new MutationObserver(function(records) {
    setupWidget();
  });

  var reviewMainElement = document.querySelector('.js-okeReviews-reviews-main');
  observer.observe(reviewMainElement, {
    childList: true
  });
}

window.okeReviewsWidgetOnInit = function() {
  setupWidget();
  
  var observer = new MutationObserver(function(records) {
    setupWidget();
  });

  var reviewMainElement = document.querySelector('.js-okeReviews-reviews-main');
  observer.observe(reviewMainElement, {
    childList: true
  });
}

function setupWidget() {
  createHolderDiv();
  moveReviewComponents();
  moveSelect();
  moveReviewButton();    
}

function createHolderDiv() {
  var existingHolderDiv = document.querySelector('.okeReviews-reviewsAggregate-controls');
  if (!existingHolderDiv) {
    var aggregateControlDiv = document.createElement("div");
    var destination = document.querySelector('.okeReviews-reviewsAggregate-primary');
    aggregateControlDiv.setAttribute('class','okeReviews-reviewsAggregate-controls');
    if (destination) {
      destination.append(aggregateControlDiv);
    }
  }
}

function moveSelect() {
  var destination = document.querySelector('.okeReviews-reviewsAggregate-controls');
  var reviewSelect = document.querySelector('.okeReviews-reviews-controls-select');
  if (destination && reviewSelect) {
    destination.prepend(reviewSelect);
  }
}

function moveReviewButton() {
  var destination = document.querySelector('.okeReviews-reviewsAggregate-controls');
  var reviewButton = document.querySelector('.js-okeReviews-writeReview');

  if (destination && reviewButton) {
    destination.prepend(reviewButton);
  }
}

function moveReviewComponents() {
  document.querySelectorAll('.okeReviews-reviews-review').forEach(function(review) {
   	var reviewRecommendation = review.querySelector('.okeReviews-review-recommendation');
    var reviewPrimary = review.querySelector('.okeReviews-review-main-content');     
    if (reviewPrimary) {
      reviewPrimary.appendChild(reviewRecommendation);      
    }
  });
}