Trouble with Mutation Observer
Hello. This is my first post. I am trying to observe changes made to my 'ItemList' using Mutation Observer. I'm injecting my code in Custom Code section of VEC. The observers are getting inititalized and my code works during edit Activity. But in the Activity preview it doesn't work and I am confused about this behavior. If you need any logs to further examine this, feel free to ask.
Here is my custom code:
<script>
(function(){
var id;
window.MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
function events(){
var content, bookBtns;
if((content = document.querySelector('.booking-wrapper')) !== undefined){
content.style.opacity = "0";
//console.debug("set opacity to 0");
}
if(document.querySelector('.book-room-btn') !== undefined){
bookBtns = document.getElementsByClassName('book-room-btn');
//console.debug("changing text");
var i;
for(i=0;i<bookBtns.length;i++){
var bookBtn = bookBtns[i];
bookBtn.textContent = "Book";
}
if(i == bookBtns.length){
content.style.opacity = "1";
//console.debug("set opacity to 1");
window.clearInterval(id);
//console.debug("cleaned up");
}
}
};
//id1 = window.setInterval(events, 50);
window.addEventListener('hashchange', function(event){
console.debug("hash changed!!!");
if(window.location.hash.substr(1).split('&')[0] == "/step2"){
document.querySelector('.booking-wrapper').style.opacity = "0";
window.setTimeout(function(){
id = window.setInterval(events, 100);
}, 1500);
}
});
document.addEventListener('DOMContentLoaded', function(event){
var target = document.querySelector('#room-choices'),
observer = new MutationObserver(function(mutations){
console.debug("mutation detected");
document.querySelector('.booking-wrapper').style.opacity = "0";
//console.debug(mutations.length);
mutations.forEach(function(){
events();
//event.stopPropagation();
});
}),
config = {childList:true, subtree:true};
if(observer)
observer.observe(target, config);
//Mutation Observer Polyfill for IE 10
else{
target.addEventListener('DOMNodeInserted', function(){
console.debug("Node mutation detected");
document.querySelector('.booking-wrapper').style.opacity = "0";
events();
});
target.addEventListener('DOMSubtreeModified', function(){
console.debug("subtree mutation detected");
document.querySelector('.booking-wrapper').style.opacity = "0";
events();
});
}
});
})();
</script>
