janishutz-website/old-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Slider update

Browse Source
This commit is contained in:
Admin
2025-09-28 17:22:04 +02:00
parent cf07e7d7ac
commit 7551cdff87
6 changed files with 97 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
components/slider/js/slider.js
View File

@@ -147,22 +147,26 @@ const allowedExtensions = [
];
/**
* Load type of image, can be used to load images for different platforms (i.e. mobile optimization)
* @param name - The name appended to the image filename
* @param postfix - What is appended to each image after a dash. Example: /path/to/image becomes /path/to/image-platform.jpg
* for postfix = platform
*/
var loadImageType = (name) => {
var loadImageType = (postfix) => {
sliderElements.forEach(el => {
const baseURL = el.dataset.imageBaseURL;
const baseURL = el.dataset.imageBaseUrl;
const filetype = el.dataset.filetype;
// TODO: Verification (i.e. baseURL cannot contain .something in the end, filetype may only be jpg, jpeg, webp, svg or png)
if (allowedExtensions.indexOf(filetype) === -1) {
console.warn('[ SLIDER ] Invalid filetype ' + filetype + ' for image element with id ' + el.id);
return;
}
if (baseURL.lastIndexOf('.') > baseURL.lastIndexOf('/')) {
console.warn('[ SLIDER ] ImageBaseURL incorrect for image element with id ' + el.id);
if (!baseURL) {
console.error('[ SLIDER ] ImageBaseURL undefined for element with id ' + el.id);
return;
}
el.style.setProperty('background-image', baseURL + name + filetype);
if (baseURL.lastIndexOf('.') > baseURL.lastIndexOf('/')) {
console.warn('[ SLIDER ] ImageBaseURL incorrect for element with id ' + el.id);
return;
}
el.style.backgroundImage = `url( ${baseURL}-${postfix + filetype} )`;
});
};
for (const el in fetchedElements) {

66
components/slider/ts/resize.ts Normal file
View File

@@ -0,0 +1,66 @@
/* 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 } )`;
} );
};

36
components/slider/ts/slider.ts
View File

@@ -163,42 +163,6 @@ const stopSliderAutoAdvance = () => {
};
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 name - The name appended to the image filename
*/
var loadImageType = ( name: string ) => {
sliderElements.forEach( el => {
const baseURL = el.dataset.imageBaseURL;
const filetype = el.dataset.filetype;
// TODO: Verification (i.e. baseURL cannot contain .something in the end, filetype may only be jpg, jpeg, webp, svg or png)
if ( allowedExtensions.indexOf( filetype ) === -1 ) {
console.warn( '[ SLIDER ] Invalid filetype ' + filetype + ' for image element with id ' + el.id );
return;
}
if ( baseURL.lastIndexOf( '.' ) > baseURL.lastIndexOf( '/' ) ) {
console.warn( '[ SLIDER ] ImageBaseURL incorrect for image element with id ' + el.id );
return;
}
el.style.setProperty( 'background-image', baseURL + name + filetype );
} );
};
for ( const el in fetchedElements ) {
if ( fetchedElements[ el ].className ) {
sliderElements.push( ( fetchedElements[ el ] as HTMLDivElement ) );