90 lines
2.4 KiB
JavaScript
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);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
};
|
||
|
|
}();
|