Slider update

2025-09-28 17:22:04 +02:00
parent cf07e7d7ac
commit 7551cdff87
6 changed files with 97 additions and 61 deletions
--- a/components/slider/js/slider.js
+++ b/components/slider/js/slider.js
@@ -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) {
--- a/components/slider/ts/resize.ts
+++ b/components/slider/ts/resize.ts
@@ -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 } )`;
+    } );
+};
--- a/components/slider/ts/slider.ts
+++ b/components/slider/ts/slider.ts
@@ -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 ) );
--- a/site/src/css/nav.css
+++ b/site/src/css/nav.css
@@ -61,6 +61,7 @@ nav a:hover {
    z-index: 100;
    background-color: var(--color-background-accent);
    transition: left 0.5s, top 0.5s;
+    overflow-y: scroll;
 }

 .nav-top-bar {
--- a/site/src/css/style.css
+++ b/site/src/css/style.css
@@ -119,7 +119,7 @@ a {

 .slider {
    width: 100vw;
-    height: calc(100vw / 16 * 11);
+    height: 80vh;
 }

 .slider-element {
@@ -262,11 +262,6 @@ a {
 }

@media only screen and (min-width: 800px) {
-    .slider {
-        width: 100vw;
-        height: 80vh;
-    }
-
    .slider-controls {
        font-size: 3rem;
    }
--- a/site/src/index.html
+++ b/site/src/index.html
@@ -13,9 +13,11 @@
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=7" />
    <meta name="keywords" content="software store, custom software, foss" />
-    <meta name="description" content="Discover amazing software projects like ConductorCalc, libreevent, a secure and reliable authentication system and much more and get support for it all" />
+    <meta name="description"
+        content="Discover amazing software projects like ConductorCalc, libreevent, a secure and reliable authentication system and much more and get support for it all" />
    <meta name="og:title" content="janishutz.com - software to make your life easier" />
-    <meta name="og:description" content="Discover projects, services and more developed by Janis Hutz, get support and more!" />
+    <meta name="og:description"
+        content="Discover projects, services and more developed by Janis Hutz, get support and more!" />
    <meta name="og:image" content="https://static.janishutz.com/logo.jpg" />
    <meta name="og:type" content="website" />
    <meta name="og:url" content="https://janishutz.com" />
@@ -29,32 +31,33 @@
    <!-- <video src="https://static.janishutz.com/assets/video-home.mp4" autoplay class="title-video"></video> -->
    <div class="slider">
        <div class="slider-container">
-            <div class="slider-element current"
-                style="background-image: url( 'https://static.janishutz.com/assets/home/conductorcalc.jpg' );">
+            <div id="conductorcalc" class="slider-element current"
+                data-image-base-url="https://static.janishutz.com/assets/home/conductorcalc" data-filetype="jpg">
                <div class="slider-info">
                    <h2>ConductorCalc</h2>
-                    <p>The perfect tool to aid you in the complex calculations necessary when building high voltage lines</p>
+                    <p>The perfect tool to aid you in the complex calculations necessary when building high voltage
+                        lines</p>
                    <a href="https://conductorcalc.com" class="button" target="_blank">Check it out</a>
                </div>
            </div>
-            <div class="slider-element"
-                style="background-image: url( 'https://static.janishutz.com/assets/projects/musicplayer-title.jpg' );">
+            <div id="musicplayer" class="slider-element"
+                data-image-base-url="https://static.janishutz.com/assets/projects/musicplayer" data-filetype="jpg">
                <div class="slider-info">
                    <h2>MusicPlayer</h2>
                    <p>Your one-stop solution for music at your next party</p>
                    <a href="/projects/musicplayer" class="button">Check it out</a>
                </div>
            </div>
-            <div class="slider-element"
-                style="background-image: url( 'https://store-cdn.janishutz.com/assets/libreevent/libreevent-title.jpg' );">
+            <div id="libreevent" class="slider-element"
+                data-image-base-url="https://static.janishutz.com/assets/projects/libreevent" data-filetype="jpg">
                <div class="slider-info">
                    <h2>libreǝvent</h2>
                    <p>The all-in-one solution for your next event!</p>
                    <a href="https://libreevent.janishutz.com" class="button" target="_blank">Check it out</a>
                </div>
            </div>
-            <div class="slider-element"
-                style="background-image: url( 'https://static.janishutz.com/assets/home/foss.jpg' );">
+            <div id="foss" data-image-base-url="https://static.janishutz.com/assets/home/foss" data-filetype="jpg"
+                class="slider-element">
                <div class="slider-info">
                    <h2>Open Source Projects</h2>
                    <p>Free Software, developed by Janis Hutz & the community</p>
@@ -118,7 +121,10 @@
    <footer></footer>

    <script src="https://static.janishutz.com/js/slider.js"></script>
-    <script>activateSlider(7500)</script>
+    <script>
+        activateSlider(7500);
+        loadImageType('desktop');
+    </script>
 </body>

 </html>