uix-kit
Version:
A free web kits for fast web design and development, compatible with Bootstrap v5.
228 lines (158 loc) • 7.8 kB
JavaScript
/*
*************************************
* <!-- Specify a background image -->
*************************************
*/
import {
UixModuleInstance,
UixDebounce,
} from '@uixkit/core/_global/js';
import UixParallax from '@uixkit/core/_global/js/fn/UixParallax';
export const SET_BG = ( ( module, $, window, document ) => {
if ( window.SET_BG === null ) return false;
module.SET_BG = module.SET_BG || {};
module.SET_BG.version = '0.0.8';
module.SET_BG.documentReady = function( $ ) {
let windowWidth = window.innerWidth,
windowHeight = window.innerHeight;
// Initialize
setBGInit();
function windowUpdate() {
// Check window width has actually changed and it's not just iOS triggering a resize event on scroll
if ( window.innerWidth != windowWidth ) {
// Update the window width for next time
windowWidth = window.innerWidth;
// Do stuff here
setBGInit();
}
}
// Add function to the window that should be resized
const debounceFuncWindow = UixDebounce(windowUpdate, 50);
window.removeEventListener('resize', debounceFuncWindow);
window.addEventListener('resize', debounceFuncWindow);
/*
* Initialize background using "data-bg" attribute.
*
* @return {Void}
*/
function setBGInit() {
$( '[data-bg]' ).each( function() {
const $this = $( this );
let config = $this.data( 'bg' );
if ( typeof config === typeof undefined ) {
config = {
"src" : "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",
"position" : "top left",
"size" : "cover",
"repeat" : "no-repeat",
"offsetTop" : 0,
"fill" : false,
"parallax" : 0,
"transition" : "none 0s ease 0s",
"move" : false // {"dir":"left","duration":"10s","easing":"linear","loop":true}
};
}
if ( config ) {
let dataImg = config.src,
dataPos = config.position,
dataSize = config.size,
dataRepeat = config.repeat,
dataEasing = config.transition,
dataOffsetTop = config.offsetTop,
dataParallax = config.parallax,
dataMove = config.move;
if ( typeof dataPos === typeof undefined ) dataPos = 'top left';
if ( typeof dataSize === typeof undefined ) dataSize = 'cover';
if ( typeof dataRepeat === typeof undefined ) dataRepeat = 'no-repeat';
if ( typeof dataOffsetTop === typeof undefined ) dataOffsetTop = 0;
if ( typeof dataEasing === typeof undefined ) dataEasing = 'none 0s ease 0s';
if ( typeof dataMove === typeof undefined ) dataMove = false;
//Using parallax
if ( dataParallax && typeof dataParallax != typeof undefined && dataParallax != 0 ) {
dataPos = dataPos.replace( 'top', '50%' );
}
//background animation
let moveAnim = 'none',
moveAnimLoop = 'infinite',
moveEasing = 'linear',
moveKeyframesTop = '@keyframes js-uix-cssanim--move-t{from{background-position:0 0;}to{background-position:0 -19999px;}',
moveKeyframesBottom = '@keyframes js-uix-cssanim--move-b{from{background-position:0 0;}to{background-position:0 19999px;}',
moveKeyframesLeft = '@keyframes js-uix-cssanim--move-l{from{background-position:0 0;}to{background-position:-19999px 0;}',
moveKeyframesRight = '@keyframes js-uix-cssanim--move-r{from{background-position:0 0;}to{background-position:19999px 0;}';
if ( dataMove && Object.prototype.toString.call( dataMove )=='[object Object]' ) {
if ( ! dataMove.loop ) moveAnimLoop = '1 forwards';
dataPos = '0 0';
switch (dataMove.dir) {
case 'top':
moveAnim = 'js-uix-cssanim--move-t '+parseInt(dataMove.speed)+'s '+moveEasing+' '+ moveAnimLoop;
break;
case 'bottom':
moveAnim = 'js-uix-cssanim--move-b '+parseInt(dataMove.speed)+'s '+moveEasing+' '+ moveAnimLoop;
break;
case 'left':
moveAnim = 'js-uix-cssanim--move-l '+parseInt(dataMove.speed)+'s '+moveEasing+' '+ moveAnimLoop;
break;
case 'right':
moveAnim = 'js-uix-cssanim--move-r '+parseInt(dataMove.speed)+'s '+moveEasing+' '+ moveAnimLoop;
break;
}
// CSS3 animation keyframe attributes inline
if ( $( '#js-uix-cssanim--move-t' ).length == 0 ) {
$( '<style id="js-uix-cssanim--move-t">' )
.text( moveKeyframesTop )
.appendTo( 'head' );
}
if ( $( '#js-uix-cssanim--move-b' ).length == 0 ) {
$( '<style id="js-uix-cssanim--move-b">' )
.text( moveKeyframesBottom )
.appendTo( 'head' );
}
if ( $( '#js-uix-cssanim--move-l' ).length == 0 ) {
$( '<style id="js-uix-cssanim--move-l">' )
.text( moveKeyframesLeft )
.appendTo( 'head' );
}
if ( $( '#js-uix-cssanim--move-r' ).length == 0 ) {
$( '<style id="js-uix-cssanim--move-r">' )
.text( moveKeyframesRight )
.appendTo( 'head' );
}
}
//-----
if ( typeof dataImg != typeof undefined && dataImg != '' ) {
if ( config.fill ) {
//Show Image Under Text
if ( Modernizr.cssanimations ) {
$this.css( {
'background' : 'url('+dataImg+') '+dataRepeat+'',
'background-size' : dataSize,
'-webkit-background-clip' : 'text',
'-webkit-text-fill-color' : 'transparent',
'animation' : moveAnim
} );
}
} else {
$this.css( {
'background-image' : 'url('+dataImg+')',
'background-position' : dataPos,
'background-size' : dataSize,
'background-repeat' : dataRepeat,
'animation' : moveAnim
} );
}
//Using parallax
if ( dataParallax && typeof dataParallax != typeof undefined && dataParallax != 0 ) {
$this.UixParallax( { 'speed': dataParallax, 'transition' : dataEasing, 'offsetTop': dataOffsetTop, 'bg': { enable: true, xPos: '50%' } } );
}
}
}
});
}
};
module.components.documentReady.push( module.SET_BG.documentReady );
return class SET_BG {
constructor() {
this.module = module;
}
};
})( UixModuleInstance, jQuery, window, document );