Update slider logic

This commit is contained in:
2026-02-11 11:52:22 +01:00
parent 3875acb579
commit b1062fcad5
9 changed files with 793 additions and 24 deletions

3
.gitignore vendored
View File

@@ -1,2 +1,3 @@
node_modules node_modules
dist dist
package-lock.json

744
eslint.config.mjs Normal file
View File

@@ -0,0 +1,744 @@
import eslint from '@eslint/js';
import globals from 'globals';
import stylistic from '@stylistic/eslint-plugin';
import tseslint from 'typescript-eslint';
import typescript from '@typescript-eslint/eslint-plugin';
import vue from 'eslint-plugin-vue';
const style = {
'plugins': {
'@stylistic': stylistic,
'@stylistic/js': stylistic,
'@stylistic/ts': stylistic
},
'files': [
'**/*.ts',
'**/*.js',
'**/*.mjs',
'**/*.cjs',
'**/*.tsx',
'**/*.jsx'
],
'rules': {
'sort-imports': [
'warn',
{
'ignoreCase': false,
'ignoreDeclarationSort': false,
'ignoreMemberSort': false,
'memberSyntaxSortOrder': [
'none',
'all',
'multiple',
'single'
],
'allowSeparatedGroups': false
}
],
// Formatting
'@stylistic/array-bracket-newline': [
'error',
{
'multiline': false,
'minItems': 2
}
],
'@stylistic/array-bracket-spacing': [
'error',
'always'
],
'@stylistic/array-element-newline': [
'error',
{
'consistent': false,
'multiline': false,
'minItems': 2
}
],
'@stylistic/arrow-parens': [
'error',
'as-needed'
],
'@stylistic/arrow-spacing': [
'error',
{
'before': true,
'after': true
}
],
'@stylistic/block-spacing': [
'error',
'always'
],
'@stylistic/brace-style': [
'error',
'1tbs',
{
'allowSingleLine': false
}
],
'@stylistic/comma-dangle': [
'error',
'never'
],
'@stylistic/comma-spacing': [
'error',
{
'before': false,
'after': true
}
],
'@stylistic/comma-style': [
'error',
'last'
],
'@stylistic/dot-location': [
'error',
'property'
],
'@stylistic/function-call-argument-newline': [
'error',
'consistent'
],
'@stylistic/function-call-spacing': [
'error',
'never'
],
'@stylistic/function-paren-newline': [
'error',
'multiline-arguments'
],
'@stylistic/implicit-arrow-linebreak': [
'error',
'beside'
],
'@stylistic/indent': [
'error',
4
],
'@stylistic/indent-binary-ops': [
'error',
4
],
'@stylistic/key-spacing': [
'error',
{
'beforeColon': false,
'afterColon': true
}
],
'@stylistic/keyword-spacing': [
'error',
{
'before': true,
'after': true
}
],
'@stylistic/lines-between-class-members': [
'error',
'always'
],
'@stylistic/max-len': [
'warn',
{
'code': 140,
'comments': 160,
'ignoreComments': false,
'ignoreUrls': true,
'ignoreStrings': true,
'ignoreTemplateLiterals': true,
'ignoreRegExpLiterals': true
}
],
'@stylistic/max-statements-per-line': [
'error',
{
'max': 1
}
],
'@stylistic/multiline-ternary': [
'error',
'always-multiline'
],
'@stylistic/new-parens': [
'error',
'always'
],
'@stylistic/newline-per-chained-call': 'error',
'@stylistic/no-confusing-arrow': 'error',
'@stylistic/no-extra-parens': [
'error',
'all',
{
'nestedBinaryExpressions': false,
'ternaryOperandBinaryExpressions': false,
'ignoreJSX': 'multi-line',
'nestedConditionalExpressions': false
}
],
'@stylistic/no-extra-semi': 'error',
'@stylistic/no-floating-decimal': 'error',
'@stylistic/no-mixed-operators': 'error',
'@stylistic/no-mixed-spaces-and-tabs': 'error',
'@stylistic/no-multi-spaces': 'error',
'@stylistic/no-multiple-empty-lines': [
'error',
{
'max': 3,
'maxEOF': 2
}
],
'@stylistic/no-tabs': 'error',
'@stylistic/no-trailing-spaces': 'error',
'@stylistic/no-whitespace-before-property': 'error',
'@stylistic/object-curly-newline': [
'error',
{
'multiline': true,
'minProperties': 1
}
],
'@stylistic/object-curly-spacing': [
'error',
'always'
],
'@stylistic/object-property-newline': 'error',
'@stylistic/one-var-declaration-per-line': 'error',
'@stylistic/operator-linebreak': [
'error',
'before'
],
'@stylistic/padded-blocks': [
'error',
{
'blocks': 'never',
'classes': 'always',
'switches': 'never'
}
],
// Padding lines. The most in-depth part of this config
'@stylistic/padding-line-between-statements': [
'error',
// Variables, Constants
{
'blankLine': 'never',
'prev': 'var',
'next': 'var'
},
{
'blankLine': 'never',
'prev': 'let',
'next': 'let'
},
{
'blankLine': 'never',
'prev': 'const',
'next': 'const'
},
{
'blankLine': 'always',
'prev': 'var',
'next': [
'block',
'block-like',
'break',
'cjs-export',
'cjs-import',
'class',
'const',
'continue',
'debugger',
'directive',
'do',
'empty',
'export',
'expression',
'for',
'function',
'if',
'iife',
'import',
'let',
'return',
'switch',
'throw',
'try',
'var',
'with'
]
},
{
'blankLine': 'always',
'prev': 'let',
'next': [
'block',
'block-like',
'break',
'cjs-export',
'cjs-import',
'class',
'const',
'continue',
'debugger',
'directive',
'do',
'empty',
'export',
'expression',
'for',
'function',
'if',
'iife',
'import',
'return',
'switch',
'throw',
'try',
'var',
'while',
'with'
]
},
{
'blankLine': 'always',
'prev': 'const',
'next': [
'block',
'block-like',
'break',
'cjs-export',
'cjs-import',
'class',
'continue',
'debugger',
'directive',
'do',
'empty',
'export',
'expression',
'for',
'function',
'if',
'iife',
'import',
'let',
'return',
'switch',
'throw',
'try',
'var',
'while',
'with'
]
},
// Import
{
'blankLine': 'never',
'prev': 'import',
'next': 'import'
},
{
'blankLine': 'never',
'prev': 'cjs-import',
'next': 'cjs-import'
},
{
'blankLine': 'always',
'prev': [
'block',
'block-like',
'break',
'cjs-export',
'class',
'const',
'continue',
'debugger',
'directive',
'do',
'empty',
'export',
'expression',
'for',
'function',
'if',
'iife',
'let',
'return',
'switch',
'throw',
'try',
'var',
'while',
'with'
],
'next': 'cjs-import'
},
{
'blankLine': 'always',
'prev': 'cjs-import',
'next': [
'block',
'block-like',
'break',
'cjs-export',
'class',
'const',
'continue',
'debugger',
'directive',
'do',
'empty',
'export',
'expression',
'for',
'function',
'if',
'iife',
'let',
'return',
'switch',
'throw',
'try',
'var',
'while',
'with'
]
},
{
'blankLine': 'always',
'prev': [
'block',
'block-like',
'break',
'cjs-export',
'class',
'const',
'continue',
'debugger',
'directive',
'do',
'empty',
'export',
'expression',
'for',
'function',
'if',
'iife',
'let',
'return',
'switch',
'throw',
'try',
'var',
'while',
'with'
],
'next': 'import'
},
{
'blankLine': 'always',
'prev': 'import',
'next': [
'block',
'block-like',
'break',
'cjs-export',
'class',
'const',
'continue',
'debugger',
'directive',
'do',
'empty',
'export',
'expression',
'for',
'function',
'if',
'iife',
'let',
'return',
'switch',
'throw',
'try',
'var',
'while',
'with'
]
},
// If
{
'blankLine': 'always',
'prev': '*',
'next': 'if'
},
{
'blankLine': 'always',
'prev': 'if',
'next': '*'
},
// For
{
'blankLine': 'always',
'prev': '*',
'next': 'for'
},
{
'blankLine': 'always',
'prev': 'for',
'next': '*'
},
// While
{
'blankLine': 'always',
'prev': '*',
'next': 'while'
},
{
'blankLine': 'always',
'prev': 'while',
'next': '*'
},
// Functions
{
'blankLine': 'always',
'prev': '*',
'next': 'function'
},
{
'blankLine': 'always',
'prev': 'function',
'next': '*'
},
// Block Statements
{
'blankLine': 'always',
'prev': '*',
'next': 'block-like'
},
{
'blankLine': 'always',
'prev': 'block-like',
'next': '*'
},
// Switch
{
'blankLine': 'always',
'prev': '*',
'next': 'switch'
},
{
'blankLine': 'always',
'prev': 'switch',
'next': '*'
},
// Try-Catch
{
'blankLine': 'always',
'prev': '*',
'next': 'try'
},
{
'blankLine': 'always',
'prev': 'try',
'next': '*'
},
// Throw
{
'blankLine': 'always',
'prev': '*',
'next': 'throw'
},
{
'blankLine': 'always',
'prev': 'throw',
'next': '*'
},
// Return
{
'blankLine': 'never',
'prev': 'return',
'next': '*'
},
{
'blankLine': 'always',
'prev': '*',
'next': 'return'
},
// Export
{
'blankLine': 'always',
'prev': '*',
'next': 'export'
},
{
'blankLine': 'always',
'prev': 'export',
'next': '*'
},
{
'blankLine': 'always',
'prev': '*',
'next': 'cjs-export'
},
{
'blankLine': 'always',
'prev': 'cjs-export',
'next': '*'
},
// Classes
{
'blankLine': 'always',
'prev': '*',
'next': 'class'
},
{
'blankLine': 'always',
'prev': 'class',
'next': '*'
}
],
'@stylistic/quote-props': [
'error',
'always'
],
'@stylistic/quotes': [
'error',
'single'
],
'@stylistic/rest-spread-spacing': [
'error',
'never'
],
'@stylistic/semi': [
'error',
'always'
],
'@stylistic/semi-spacing': [
'error',
{
'before': false,
'after': true
}
],
'@stylistic/semi-style': [
'error',
'last'
],
'@stylistic/space-before-blocks': [
'error',
'always'
],
'@stylistic/space-before-function-paren': [
'error',
'always'
],
'@stylistic/space-in-parens': [
'error',
'always'
],
'@stylistic/space-infix-ops': [
'error',
{
'int32Hint': false
}
],
'@stylistic/space-unary-ops': 'error',
'@stylistic/spaced-comment': [
'error',
'always'
],
'@stylistic/switch-colon-spacing': 'error',
'@stylistic/template-curly-spacing': [
'error',
'always'
],
'@stylistic/template-tag-spacing': [
'error',
'always'
],
'@stylistic/type-generic-spacing': 'error',
'@stylistic/type-named-tuple-spacing': 'error',
'@stylistic/wrap-iife': [
'error',
'inside'
],
'@stylistic/wrap-regex': 'error',
'@stylistic/ts/type-annotation-spacing': 'error'
}
};
/** @type {import('eslint').Linter.Config} */
export default tseslint.config(
// Base JavaScript rules
eslint.configs.recommended,
tseslint.configs.recommended,
style,
// Vue support (including TS and JSX inside SFCs)
{
'files': [ '**/*.vue' ],
'languageOptions': {
'sourceType': 'module',
'ecmaVersion': 'latest',
'globals': globals.browser,
'parserOptions': {
'parser': tseslint.parser
}
},
'plugins': {
'vue': vue,
'@stylistic': stylistic,
'@stylistic/js': stylistic,
'@stylistic/ts': stylistic,
'@typescript-eslint': typescript
},
'extends': [
eslint.configs.recommended,
...vue.configs['flat/recommended']
],
'rules': {
...typescript.configs.recommended.rules,
...style.rules,
// Vue specific rules
'@stylistic/indent': 'off',
'vue/html-indent': [
'error',
4
],
'vue/html-comment-indent': [
'error',
4
],
'vue/script-indent': [
'error',
4,
{
'baseIndent': 1,
'switchCase': 1
}
],
'vue/html-self-closing': [
'error',
{
'html': {
'void': 'never',
'normal': 'never',
'component': 'always'
},
'svg': 'always',
'math': 'never'
}
],
'vue/max-attributes-per-line': [
'error',
{
'singleline': 3,
'multiline': 1
}
]
}
}
);

View File

@@ -7,5 +7,11 @@
}, },
"author": "Janis Hutz", "author": "Janis Hutz",
"license": "ISC", "license": "ISC",
"description": "" "description": "",
"devDependencies": {
"@eslint/js": "^9.0.1",
"@stylistic/eslint-plugin": "^5.8.0",
"eslint-plugin-vue": "^10.7.0",
"typescript-eslint": "^8.55.0"
}
} }

View File

@@ -61,6 +61,7 @@ nav a:hover {
z-index: 100; z-index: 100;
background-color: var(--color-background-accent); background-color: var(--color-background-accent);
transition: left 0.5s, top 0.5s; transition: left 0.5s, top 0.5s;
overflow-y: scroll;
} }
.nav-top-bar { .nav-top-bar {
@@ -196,6 +197,7 @@ nav a:hover {
top: 0; top: 0;
left: 0; left: 0;
border-bottom: var(--color-text-primary) 1px solid; border-bottom: var(--color-text-primary) 1px solid;
overflow: unset;
} }
.nav-menu.slide-up { .nav-menu.slide-up {

View File

@@ -119,7 +119,7 @@ a {
.slider { .slider {
width: 100vw; width: 100vw;
height: calc(100vw / 16 * 11); height: 70vh;
} }
.slider-element { .slider-element {
@@ -138,8 +138,8 @@ a {
} }
.slider-controls { .slider-controls {
font-size: 2.6rem; font-size: 2rem;
padding: 0.25rem 0.5rem; padding: 0.15rem 0.25rem;
} }
.slider-control-left { .slider-control-left {

View File

@@ -45,9 +45,9 @@
<div id="matomo-opt-out"> <div id="matomo-opt-out">
Loading... Loading...
</div> </div>
<script src="https://analytics.janishutz.com/index.php?module=CoreAdminHome&action=optOutJS&divId=matomo-opt-out&language=auto&fontColor=000000&fontSize=12px&fontFamily=monospace&showIntro=1"></script> <script defer src="https://analytics.janishutz.com/index.php?module=CoreAdminHome&action=optOutJS&divId=matomo-opt-out&language=auto&fontColor=000000&fontSize=12px&fontFamily=monospace&showIntro=1"></script>
<!-- Matomo Image Tracker--> <!-- Matomo Image Tracker-->
<img referrerpolicy="no-referrer-when-downgrade" src="https://analytics.janishutz.com/matomo.php?idsite=2&amp;rec=1" style="border:0" alt="" /> <img referrerpolicy="no-referrer-when-downgrade" src="https://analytics.janishutz.com/matomo.php?idsite=2&amp;rec=1" style="border:0" alt="" loading="lazy" />
<!-- End Matomo --> <!-- End Matomo -->
<button class="analytics-button" onclick="closeAnalytics()"><span class="material-symbols-outlined">close</span></button> <button class="analytics-button" onclick="closeAnalytics()"><span class="material-symbols-outlined">close</span></button>

View File

@@ -3,7 +3,8 @@
<head> <head>
<!-- CSS --> <!-- CSS -->
<link rel="stylesheet" href="https://static.janishutz.com/css/slider.css"> <!-- <link rel="stylesheet" href="https://static.janishutz.com/css/slider.css"> -->
<link rel="stylesheet" href="http://localhost:8081/css/slider.css">
<link rel="stylesheet" href="/css/style.css"> <link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="/css/side-by-side.css"> <link rel="stylesheet" href="/css/side-by-side.css">
@@ -13,9 +14,11 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=7" /> <meta http-equiv="X-UA-Compatible" content="IE=7" />
<meta name="keywords" content="software store, custom software, foss" /> <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: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:image" content="https://static.janishutz.com/logo.jpg" />
<meta name="og:type" content="website" /> <meta name="og:type" content="website" />
<meta name="og:url" content="https://janishutz.com" /> <meta name="og:url" content="https://janishutz.com" />
@@ -26,35 +29,36 @@
<body> <body>
<nav></nav> <nav></nav>
<!-- <video src="https://static.janishutz.com/assets/video-home.mp4" autoplay class="title-video"></video> -->
<div class="slider"> <div class="slider">
<div class="slider-container"> <div class="slider-container">
<div class="slider-element current" <div class="slider-element current" data-image-base-url="https://static.janishutz.com/assets/home/store"
style="background-image: url( 'https://static.janishutz.com/assets/home/store.jpg' );"> data-filetype="jpg">
<div class="slider-info"> <div class="slider-info">
<h2>Software for your needs</h2> <h2>Software for your needs</h2>
<p>Professional-Grade Software</p> <p>Professional-Grade Software</p>
<a href="https://store.janishutz.com" class="button" target="_blank">Store</a> <a href="https://store.janishutz.com" class="button" target="_blank">Store</a>
</div> </div>
</div> </div>
<div class="slider-element" <div class="slider-element" data-image-base-url="https://static.janishutz.com/assets/home/conductorcalc"
style="background-image: url( 'https://static.janishutz.com/assets/home/conductorcalc.jpg' );"> data-filetype="jpg">
<div class="slider-info"> <div class="slider-info">
<h2>ConductorCalc</h2> <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> <a href="https://conductorcalc.com" class="button" target="_blank">Check it out</a>
</div> </div>
</div> </div>
<div class="slider-element" <div class="slider-element"
style="background-image: url( 'https://static.janishutz.com/assets/projects/musicplayer-title.jpg' );"> data-image-base-url="https://static.janishutz.com/assets/projects/musicplayer-title"
data-filetype="jpg">
<div class="slider-info"> <div class="slider-info">
<h2>MusicPlayer</h2> <h2>MusicPlayer</h2>
<p>Your one-stop solution for music at your next party</p> <p>Your one-stop solution for music at your next party</p>
<a href="/projects/musicplayer" class="button">Check it out</a> <a href="/projects/musicplayer" class="button">Check it out</a>
</div> </div>
</div> </div>
<div class="slider-element" <div class="slider-element" data-image-base-url="https://static.janishutz.com/assets/home/foss"
style="background-image: url( 'https://static.janishutz.com/assets/home/foss.jpg' );"> data-filetype="jpg">
<div class="slider-info"> <div class="slider-info">
<h2>Open Source Projects</h2> <h2>Open Source Projects</h2>
<p>Free Software, developed by Janis Hutz & the community</p> <p>Free Software, developed by Janis Hutz & the community</p>
@@ -68,6 +72,11 @@
onclick="sliderControl( 'next' )">arrow_forward</span> onclick="sliderControl( 'next' )">arrow_forward</span>
</div> </div>
<!-- <script src="https://static.janishutz.com/js/slider.js"></script> -->
<script src="http://localhost:8081/js/slider.js"></script>
<script src="/slider-rwd.js"></script>
<script>activateSlider(7500, null)</script>
<div class="content"> <div class="content">
<hr class="divider"> <hr class="divider">
<h1>My work</h1> <h1>My work</h1>
@@ -114,11 +123,7 @@
</div> </div>
</div> </div>
<footer></footer> <footer></footer>
<script src="https://static.janishutz.com/js/slider.js"></script>
<script>activateSlider(7500)</script>
</body> </body>
</html> </html>

View File

@@ -37,7 +37,7 @@
<div class="nav-top-bar"> <div class="nav-top-bar">
<a href="/" class="logo-wrapper"> <a href="/" class="logo-wrapper">
<img src="https://static.janishutz.com/logo.jpg" alt="janishutz.com logo" class="logo"> <img src="https://static.janishutz.com/logo.jpg" alt="janishutz.com logo" class="logo" loading="lazy">
</a> </a>
<!-- <img src="https://static.janishutz.com/logo.jpg" alt="janishutz.com logo" class="logo"> --> <!-- <img src="https://static.janishutz.com/logo.jpg" alt="janishutz.com logo" class="logo"> -->
<div class="nav-toggle" onclick="openMenu( 'toggle' )"> <div class="nav-toggle" onclick="openMenu( 'toggle' )">

11
src/slider-rwd.js Normal file
View File

@@ -0,0 +1,11 @@
/* eslint-disable no-undef */
const loadImageByScreenSize = () => {
if ( window.innerHeight / window.innerWidth >= 1 ) {
loadImageType( '-mobile' );
} else {
loadImageType( '' );
}
};
window.addEventListener( 'resize', loadImageByScreenSize );
loadImageByScreenSize();