67 lines
1.7 KiB
TypeScript
67 lines
1.7 KiB
TypeScript
/* eslint-disable no-var */
|
|
interface SizeConfig {
|
|
[name: string]: {
|
|
'min-width': number;
|
|
'max-width': number;
|
|
}
|
|
}
|
|
let sizeConfig: SizeConfig = {};
|
|
|
|
|
|
var resizeConfigure = ( config: SizeConfig ) => {
|
|
sizeConfig = config;
|
|
};
|
|
|
|
|
|
const handleResize = () => {
|
|
const sizes = Object.keys( sizeConfig );
|
|
|
|
for ( let i = 0; i < sizes.length; i++ ) {
|
|
const size = sizes[i];
|
|
|
|
if (
|
|
window.innerWidth < sizeConfig[ size ][ 'max-width' ]
|
|
&& window.innerWidth > sizeConfig[ size ][ 'min-width' ] ) {}
|
|
}
|
|
};
|
|
|
|
const allowedExtensions = [
|
|
'webp',
|
|
'jpg',
|
|
'jpeg',
|
|
'svg',
|
|
'png'
|
|
];
|
|
|
|
/**
|
|
* Load type of image, can be used to load images for different platforms (i.e. mobile optimization)
|
|
* @param postfix - What is appended to each image after a dash. Example: /path/to/image becomes /path/to/image-platform.jpg
|
|
* for postfix = platform
|
|
*/
|
|
const loadImageType = ( postfix: string ) => {
|
|
sliderElements.forEach( el => {
|
|
const baseURL = el.dataset.imageBaseUrl;
|
|
const filetype = el.dataset.filetype;
|
|
|
|
if ( allowedExtensions.indexOf( filetype ) === -1 ) {
|
|
console.warn( '[ SLIDER ] Invalid filetype ' + filetype + ' for image element with id ' + el.id );
|
|
|
|
return;
|
|
}
|
|
|
|
if ( !baseURL ) {
|
|
console.error( '[ SLIDER ] ImageBaseURL undefined for element with id ' + el.id );
|
|
|
|
return;
|
|
}
|
|
|
|
if ( baseURL.lastIndexOf( '.' ) > baseURL.lastIndexOf( '/' ) ) {
|
|
console.warn( '[ SLIDER ] ImageBaseURL incorrect for element with id ' + el.id );
|
|
|
|
return;
|
|
}
|
|
|
|
el.style.backgroundImage = `url( ${ baseURL }-${ postfix + filetype } )`;
|
|
} );
|
|
};
|