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

[Slider] Fix some issues

Browse Source
This commit is contained in:
Janis Hutz
2026-02-11 11:52:04 +01:00
parent ea5eaae6bb
commit 9c9dc32789
3 changed files with 17 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
slider/slider.css → slider/css/slider.css
View File

13
slider/js/slider.js
View File

@@ -120,6 +120,7 @@ var activateSlider = (interval, name) => {
sliderAutoAdvance(); sliderAutoAdvance();
}); });
sliderAutoAdvance(); sliderAutoAdvance();
if (name !== null)
loadImageType(name); loadImageType(name);
}; };
const sliderAutoAdvance = () => { const sliderAutoAdvance = () => {
@@ -145,13 +146,15 @@ const allowedExtensions = [
'svg', 'svg',
'png' 'png'
]; ];
let oldName = '';
/** /**
* Load type of image, can be used to load images for different platforms (i.e. mobile optimization) * 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 name - The name appended to the image filename
*/ */
var loadImageType = (name) => { var loadImageType = (name) => {
const newClass = 'slider-type' + name;
sliderElements.forEach(el => { sliderElements.forEach(el => {
const baseURL = el.dataset.imageBaseURL; const baseURL = el.dataset.imageBaseUrl;
const filetype = el.dataset.filetype; const filetype = el.dataset.filetype;
if (allowedExtensions.indexOf(filetype) === -1) { if (allowedExtensions.indexOf(filetype) === -1) {
console.warn('[ SLIDER ] Invalid filetype ' + filetype + ' for image element with id ' + el.id); console.warn('[ SLIDER ] Invalid filetype ' + filetype + ' for image element with id ' + el.id);
@@ -161,7 +164,13 @@ var loadImageType = (name) => {
console.warn('[ SLIDER ] ImageBaseURL incorrect for image element with id ' + el.id); console.warn('[ SLIDER ] ImageBaseURL incorrect for image element with id ' + el.id);
return; return;
} }
el.style.setProperty('background-image', `url(${baseURL}${name}${filetype})`); try {
el.classList.remove(oldName);
}
catch ( /* empty */_a) { /* empty */ }
el.classList.add(newClass);
oldName = newClass;
el.style.setProperty('background-image', `url(${baseURL}${name ? name : ''}.${filetype})`);
}); });
}; };
for (const el in fetchedElements) { for (const el in fetchedElements) {

8
slider/ts/slider.ts
View File

@@ -122,7 +122,7 @@ let sliderInterval = 0;
* @param name - The name of the platform (like desktop, used to load different images) * @param name - The name of the platform (like desktop, used to load different images)
*/ */
// eslint-disable-next-line @typescript-eslint/no-unused-vars // eslint-disable-next-line @typescript-eslint/no-unused-vars
var activateSlider = ( interval: number, name: string ) => { var activateSlider = ( interval: number, name: string | null ) => {
sliderAutoAdvanceInterval = interval; sliderAutoAdvanceInterval = interval;
sliderContainer.addEventListener( 'mouseenter', () => { sliderContainer.addEventListener( 'mouseenter', () => {
stopSliderAutoAdvance(); stopSliderAutoAdvance();
@@ -142,6 +142,7 @@ var activateSlider = ( interval: number, name: string ) => {
sliderAutoAdvance(); sliderAutoAdvance();
if ( name !== null )
loadImageType( name ); loadImageType( name );
}; };
@@ -171,14 +172,13 @@ const allowedExtensions = [
'png' 'png'
]; ];
/** /**
* Load type of image, can be used to load images for different platforms (i.e. mobile optimization) * 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 name - The name appended to the image filename
*/ */
var loadImageType = ( name: string ) => { var loadImageType = ( name: string ) => {
sliderElements.forEach( el => { sliderElements.forEach( el => {
const baseURL = el.dataset.imageBaseURL; const baseURL = el.dataset.imageBaseUrl;
const filetype = el.dataset.filetype; const filetype = el.dataset.filetype;
if ( allowedExtensions.indexOf( filetype ) === -1 ) { if ( allowedExtensions.indexOf( filetype ) === -1 ) {
@@ -193,7 +193,7 @@ var loadImageType = ( name: string ) => {
return; return;
} }
el.style.setProperty( 'background-image', `url(${ baseURL }${ name }${ filetype })` ); el.style.setProperty( 'background-image', `url(${ baseURL }${ name ? name : '' }.${ filetype })` );
} ); } );
}; };