TheShopCritics2/TSC2/wwwroot/js/modules/viewportdetect.js

90 lines
2.4 KiB
JavaScript

CNVS.ViewportDetect = function() {
var __core = SEMICOLON.Core;
var _setBSTheme = function(target) {
if( target.classList.contains('dark') ) {
target.setAttribute('data-bs-theme', 'dark');
} else {
target.removeAttribute('data-bs-theme');
}
};
return {
init: function(selector) {
if( __core.getSelector(selector, false, false).length < 1 ){
return true;
}
__core.initFunction({ class: 'has-plugin-viewportdetect', event: 'pluginViewportDetectReady' });
selector = __core.getSelector( selector, false );
if( selector.length < 1 ){
return true;
}
selector.forEach( function(el) {
var elDelay = el.getAttribute('data-delay') || 0;
var elClass = el.getAttribute('data-viewport-class') || "";
var elClassOut = el.getAttribute('data-viewport-class-out') || "";
var elClassTarget = el.getAttribute('data-viewport-class-target');
var elThreshold = el.getAttribute('data-viewport-threshold') || "0";
var elRootMargin = el.getAttribute('data-viewport-rootmargin') || "0px";
elClass = elClass.split(" ");
elClassOut = elClassOut.split(" ");
var hasDark = false;
if( elClass.includes('dark') || elClassOut.includes('dark') ) {
hasDark = true;
}
elClassTarget = elClassTarget ? document.querySelector(elClassTarget) : false;
var observer = new IntersectionObserver( function(el) {
el.forEach( function(entry) {
var elTarget = entry.target;
if( !elClassTarget ) {
elClassTarget = elTarget;
}
if( entry.isIntersecting ) {
setTimeout( function() {
elTarget.classList.add('is-in-viewport');
elClass.forEach( function(_class) {
_class && elClassTarget.classList.add(_class);
});
elClassOut.forEach( function(_class) {
_class && elClassTarget.classList.remove(_class);
});
hasDark && _setBSTheme(elClassTarget);
}, Number(elDelay));
} else {
elTarget.classList.remove('is-in-viewport');
elClass.forEach( function(_class) {
_class && elClassTarget.classList.remove(_class);
});
elClassOut.forEach( function(_class) {
_class && elClassTarget.classList.add(_class);
});
hasDark && _setBSTheme(elClassTarget);
}
});
}, {
threshold: parseFloat(elThreshold),
rootMargin: elRootMargin,
});
observer.observe(el);
});
}
};
}();