97 lines
2.8 KiB
JavaScript
97 lines
2.8 KiB
JavaScript
|
|
jQuery(function(){
|
|
const $img_coloured = $('#img-coloured');
|
|
const $img_preface = $('.preface-img');
|
|
const $action_dots = $('[data-clip-mode]');
|
|
const $lifecycle_img_container = $('#lifecycle-img-container');
|
|
let current_mode = null;
|
|
|
|
const mutationObserver = new MutationObserver(function(mutations) {
|
|
mutations.forEach(mutation=>{
|
|
if(mutation.attributeName === 'class'){//class changed
|
|
// console.log(mutation);
|
|
const isActive = mutation.target.className.includes('active');
|
|
const target_image_id = mutation.target.attributes['data-img-fragment'].value;
|
|
|
|
if(target_image_id && target_image_id.length){
|
|
|
|
|
|
//dummy fix clean all opacities
|
|
$('.img-fragment-step').each(function(){
|
|
$(this).removeClass('opacity-1');
|
|
});
|
|
|
|
|
|
if(isActive){
|
|
$("#"+target_image_id).addClass('opacity-1');
|
|
}
|
|
}
|
|
|
|
|
|
if(mutation.target.id == 'multiple-navigation-1' && isActive){ //search children
|
|
|
|
const $target_nav_links = $('.sub-navigation-button');
|
|
$target_nav_links.removeClass('active');
|
|
$target_nav_links.first().addClass('active');
|
|
}
|
|
}
|
|
})
|
|
});
|
|
|
|
|
|
$(function () {
|
|
$('[data-toggle="tooltip"]').tooltip({html:true})
|
|
})
|
|
|
|
$action_dots.on('mouseenter', function(){
|
|
const mode = $(this).attr('data-clip-mode');
|
|
current_mode = mode;
|
|
|
|
$img_coloured.addClass(mode);
|
|
$img_preface.addClass('opacity-0');
|
|
|
|
$action_dots.each(function(){
|
|
if($(this).attr('data-clip-mode') != mode){
|
|
$(this).addClass('d-none');
|
|
};
|
|
});
|
|
});
|
|
$action_dots.on('mouseleave', function(){
|
|
|
|
});
|
|
|
|
|
|
$lifecycle_img_container.on('mouseleave', function(){
|
|
if(current_mode){
|
|
const mode = current_mode;
|
|
$img_coloured.removeClass(mode);
|
|
$img_preface.removeClass('opacity-0');
|
|
|
|
$action_dots.each(function(){
|
|
$(this).removeClass('d-none');
|
|
});
|
|
}
|
|
|
|
current_mode = null;
|
|
});
|
|
|
|
// $('[data-img-fragment]').each(function(){
|
|
// console.log($(this).attr('data-img-fragment'));
|
|
// })
|
|
|
|
$("[data-img-fragment]").each(function(){
|
|
const nodeElement = $(this)[0];
|
|
|
|
mutationObserver.observe(nodeElement ,{attributes:true});
|
|
})
|
|
|
|
|
|
|
|
|
|
// mutationObserver.observe($("[data-img-fragment]")[1] ,{attributes:true});
|
|
|
|
|
|
|
|
|
|
});
|