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

youtube embed component, libreevent page

Browse Source
This commit is contained in:
Janis Hutz
2024-08-30 11:22:06 +02:00
parent f70b846a40
commit 242ec159a2
11 changed files with 175 additions and 232 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
components/slider/js/slider.js
View File

@@ -10,6 +10,7 @@ function sliderGoToIndex(index) {
// Determine next and previous elements // Determine next and previous elements
let previousElement = 0; let previousElement = 0;
let nextElement = 0; let nextElement = 0;
let beforePreviousElement = 0;
if (index < sliderElements.length - 1) { if (index < sliderElements.length - 1) {
nextElement = index + 1; nextElement = index + 1;
} }
@@ -22,6 +23,15 @@ function sliderGoToIndex(index) {
else { else {
previousElement = index - 1; previousElement = index - 1;
} }
if (index === 0) {
beforePreviousElement = sliderElements.length - 2;
}
else if (index === 1) {
beforePreviousElement = sliderElements.length - 1;
}
else {
beforePreviousElement = index - 2;
}
// Determine move direction: // Determine move direction:
// true = next, false = previous // true = next, false = previous
let moveDirection = true; let moveDirection = true;
@@ -34,6 +44,7 @@ function sliderGoToIndex(index) {
// New current element // New current element
sliderElements[index].classList.add('current'); sliderElements[index].classList.add('current');
sliderElements[index].classList.remove('next'); sliderElements[index].classList.remove('next');
sliderElements[index].classList.remove('last');
sliderElements[index].classList.remove('past'); sliderElements[index].classList.remove('past');
// New next element // New next element
if (moveDirection) { if (moveDirection) {
@@ -44,10 +55,16 @@ function sliderGoToIndex(index) {
} }
sliderElements[nextElement].classList.remove('current'); sliderElements[nextElement].classList.remove('current');
sliderElements[nextElement].classList.remove('past'); sliderElements[nextElement].classList.remove('past');
sliderElements[nextElement].classList.remove('last');
// new past element // new past element
sliderElements[previousElement].classList.add('past'); sliderElements[previousElement].classList.add('last');
sliderElements[previousElement].classList.remove('current'); sliderElements[previousElement].classList.remove('current');
sliderElements[previousElement].classList.remove('past');
sliderElements[previousElement].classList.remove('next'); sliderElements[previousElement].classList.remove('next');
sliderElements[beforePreviousElement].classList.add('past');
sliderElements[beforePreviousElement].classList.remove('last');
sliderElements[beforePreviousElement].classList.remove('next');
sliderElements[beforePreviousElement].classList.remove('current');
// Glitch fixes // Glitch fixes
setTimeout(() => { setTimeout(() => {
if (moveDirection) { if (moveDirection) {
@@ -57,7 +74,7 @@ function sliderGoToIndex(index) {
currentSlideIndex = index; currentSlideIndex = index;
setTimeout(() => { setTimeout(() => {
okToMove = true; okToMove = true;
}, 750); }, 500);
}, 1000); }, 1000);
} }
else if (index < 0) { else if (index < 0) {

5
components/slider/slider.css
View File

@@ -52,6 +52,11 @@
} }
.slider-element.past { .slider-element.past {
z-index: 2;
left: 0;
}
.slider-element.last {
z-index: 3; z-index: 3;
left: 0; left: 0;
} }

18
components/slider/ts/slider.ts
View File

@@ -11,6 +11,7 @@ function sliderGoToIndex ( index: number ) {
// Determine next and previous elements // Determine next and previous elements
let previousElement = 0; let previousElement = 0;
let nextElement = 0; let nextElement = 0;
let beforePreviousElement = 0;
if ( index < sliderElements.length - 1 ) { if ( index < sliderElements.length - 1 ) {
nextElement = index + 1; nextElement = index + 1;
} else { } else {
@@ -23,6 +24,14 @@ function sliderGoToIndex ( index: number ) {
previousElement = index - 1; previousElement = index - 1;
} }
if ( index === 0 ) {
beforePreviousElement = sliderElements.length - 2;
} else if ( index === 1 ) {
beforePreviousElement = sliderElements.length - 1;
} else {
beforePreviousElement = index - 2;
}
// Determine move direction: // Determine move direction:
// true = next, false = previous // true = next, false = previous
let moveDirection = true; let moveDirection = true;
@@ -37,6 +46,7 @@ function sliderGoToIndex ( index: number ) {
// New current element // New current element
sliderElements[ index ].classList.add( 'current' ); sliderElements[ index ].classList.add( 'current' );
sliderElements[ index ].classList.remove( 'next' ); sliderElements[ index ].classList.remove( 'next' );
sliderElements[ index ].classList.remove( 'last' );
sliderElements[ index ].classList.remove( 'past' ); sliderElements[ index ].classList.remove( 'past' );
// New next element // New next element
@@ -47,11 +57,17 @@ function sliderGoToIndex ( index: number ) {
} }
sliderElements[ nextElement ].classList.remove( 'current' ); sliderElements[ nextElement ].classList.remove( 'current' );
sliderElements[ nextElement ].classList.remove( 'past' ); sliderElements[ nextElement ].classList.remove( 'past' );
sliderElements[ nextElement ].classList.remove( 'last' );
// new past element // new past element
sliderElements[ previousElement ].classList.add( 'past' ); sliderElements[ previousElement ].classList.add( 'last' );
sliderElements[ previousElement ].classList.remove( 'current' ); sliderElements[ previousElement ].classList.remove( 'current' );
sliderElements[ previousElement ].classList.remove( 'past' );
sliderElements[ previousElement ].classList.remove( 'next' ); sliderElements[ previousElement ].classList.remove( 'next' );
sliderElements[ beforePreviousElement ].classList.add( 'past' );
sliderElements[ beforePreviousElement ].classList.remove( 'last' );
sliderElements[ beforePreviousElement ].classList.remove( 'next' );
sliderElements[ beforePreviousElement ].classList.remove( 'current' );
// Glitch fixes // Glitch fixes
setTimeout( () => { setTimeout( () => {

25
components/yt-embed/yt-embed.css Normal file
View File

@@ -0,0 +1,25 @@
.yt-embed {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background-color: rgb(173, 173, 173);
}
.yt-embed-desc {
text-align: center;
}
.yt-embed-button {
padding: 20px;
margin: 5px;
background-color: red;
color: white;
border-radius: 10px;
border: none;
text-decoration: none;
font-size: 1rem;
cursor: pointer;
}

22
components/yt-embed/yt-embed.js Normal file
View File

@@ -0,0 +1,22 @@
let isPrep = false;
function YTEmbed ( elementBindID, videoID ) {
if ( !isPrep ) {
console.log( '[ YT-Embed ] Preparing...' );
isPrep = true;
const css = document.createElement( 'link' );
css.rel = 'stylesheet';
css.href = 'https://static.janishutz.com/css/yt-embed.css';
// css.href = 'http://localhost:8081/yt-embed.css';
document.head.appendChild( css );
}
const el = document.getElementById( elementBindID );
el.innerHTML = `<div class="yt-embed"><p class="yt-embed-desc">YouTube Video was not loaded automatically to preserve your privacy. If you wish to load it here, click the button below!</p>
<div><button class="yt-embed-button" onclick="activateYTEmbed( '${ elementBindID }', '${ videoID }' )">Load video</button><a href="https://youtube.com/watch?v=${ videoID }" class="yt-embed-button" target="_blank">View on YouTube</a></div></div>`;
}
function activateYTEmbed ( elementBindID, videoID ) {
document.getElementById( elementBindID ).innerHTML = `<iframe width="420" height="315"src="https://www.youtube.com/embed/${ videoID }" class="yt-embed"></iframe>`;
}

2
site/src/css/nav.css
View File

@@ -60,6 +60,7 @@ nav a {
display: flex; display: flex;
align-items: center; align-items: center;
z-index: 100; z-index: 100;
border-bottom: black 1px solid;
} }
.nav-top-bar .logo { .nav-top-bar .logo {
@@ -158,6 +159,7 @@ nav a {
flex-direction: row; flex-direction: row;
top: 0; top: 0;
left: 0; left: 0;
border-bottom: black 1px solid;
} }
.nav-link-dropdown { .nav-link-dropdown {

72
site/src/css/slider.css
View File

@@ -1,72 +0,0 @@
.slider {
overflow: hidden;
position: relative;
}
.slider-container {
width: 100%;
height: 100%;
position: relative;
}
.slider-controls {
position: absolute;
font-size: 3rem;
top: calc( 50% - 1.5rem );
cursor: pointer;
user-select: none;
padding: 0.5rem 1rem;
background-color: white;
text-align: center;
text-indent: 0;
line-height: 1;
transform: scale( 1 );
transition: all 0.5s;
z-index: 10;
}
.slider-controls:hover {
transform: scale( 1.1 );
}
.slider-control-left {
left: 0;
}
.slider-control-right {
right: 0;
}
.slider-element {
width: 100%;
height: 100%;
position: absolute;
top: 0;
background-size: cover;
background-position: center;
transition: left 1s;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.slider-element.past {
z-index: 3;
left: 0;
}
.slider-element.current {
z-index: 4;
left: 0;
}
.slider-element.future {
z-index: -1;
left: 110%;
}
.slider-element.next {
z-index: 5;
left: 150%;
}

5
site/src/index.html
View File

@@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<!-- CSS --> <!-- CSS -->
<link rel="stylesheet" href="/css/slider.css"> <link rel="stylesheet" href="https://static.janishutz.com/css/slider.css">
<link rel="stylesheet" href="/css/style.css"> <link rel="stylesheet" href="/css/style.css">
<!-- SEO --> <!-- SEO -->
@@ -56,8 +56,7 @@
<footer></footer> <footer></footer>
<script src="https://static.janishutz.com/js/slider.js"></script>
<script src="/js/slider.js"></script>
<script>activateSlider( 7500 )</script> <script>activateSlider( 7500 )</script>
</body> </body>
</html> </html>

118
site/src/js/slider.js
View File

@@ -1,118 +0,0 @@
const fetchedElements = document.getElementsByClassName('slider-element');
const sliderElements = [];
let okToMove = true;
let currentSlideIndex = 0;
const sliderContainer = document.getElementsByClassName('slider-container')[0];
function sliderGoToIndex(index) {
if (okToMove) {
if (index < sliderElements.length && index >= 0) {
okToMove = false;
// Determine next and previous elements
let previousElement = 0;
let nextElement = 0;
if (index < sliderElements.length - 1) {
nextElement = index + 1;
}
else {
nextElement = 0;
}
if (index === 0) {
previousElement = sliderElements.length - 1;
}
else {
previousElement = index - 1;
}
// Determine move direction:
// true = next, false = previous
let moveDirection = true;
if ((index < currentSlideIndex || (index === sliderElements.length - 1 && currentSlideIndex === 0)) && !(index === 0 && currentSlideIndex === sliderElements.length - 1)) {
moveDirection = false;
}
/*
Add correct classes to all elements
*/
// New current element
sliderElements[index].classList.add('current');
sliderElements[index].classList.remove('next');
sliderElements[index].classList.remove('past');
// New next element
if (moveDirection) {
sliderElements[nextElement].classList.add('future');
}
else {
sliderElements[nextElement].classList.add('next');
}
sliderElements[nextElement].classList.remove('current');
sliderElements[nextElement].classList.remove('past');
// new past element
sliderElements[previousElement].classList.add('past');
sliderElements[previousElement].classList.remove('current');
sliderElements[previousElement].classList.remove('next');
// Glitch fixes
setTimeout(() => {
if (moveDirection) {
sliderElements[nextElement].classList.add('next');
sliderElements[nextElement].classList.remove('future');
}
currentSlideIndex = index;
setTimeout(() => {
okToMove = true;
}, 500);
}, 1000);
}
else if (index < 0) {
sliderGoToIndex(sliderElements.length - 1);
}
else {
sliderGoToIndex(0);
}
}
}
function sliderControl(action) {
if (action === 'next') {
sliderGoToIndex(currentSlideIndex + 1);
}
else if (action === 'previous') {
sliderGoToIndex(currentSlideIndex - 1);
}
sliderAutoAdvance();
}
let sliderAutoAdvanceInterval = 0;
let sliderInterval = 0;
function activateSlider(interval) {
sliderAutoAdvanceInterval = interval;
sliderContainer.addEventListener('mouseenter', () => {
stopSliderAutoAdvance();
});
sliderContainer.addEventListener('mouseleave', () => {
sliderAutoAdvance();
});
document.addEventListener('blur', () => {
stopSliderAutoAdvance();
});
window.addEventListener('focus', () => {
sliderAutoAdvance();
});
sliderAutoAdvance();
}
const sliderAutoAdvance = () => {
if (sliderAutoAdvanceInterval > 0) {
stopSliderAutoAdvance();
sliderInterval = setInterval(() => {
sliderGoToIndex(currentSlideIndex + 1);
}, sliderAutoAdvanceInterval);
}
};
const stopSliderAutoAdvance = () => {
try {
clearInterval(sliderInterval);
}
catch (e) { }
;
};
for (let el in fetchedElements) {
if (fetchedElements[el].className) {
sliderElements.push(fetchedElements[el]);
}
}
sliderGoToIndex(0);

35
site/src/projects/index.html
View File

@@ -1,35 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!-- CSS -->
<link rel="stylesheet" href="/css/slider.css">
<link rel="stylesheet" href="/css/style.css">
<!-- SEO -->
<title>libreevent - free and open source event management solution | janishutz.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="og:title" content="" />
<meta name="og:description" content="" />
<meta name="og:image" content="https://static.janishutz.com/seo/home-card.jpg" />
<meta name="og:type" content="website" />
<meta name="og:url" content="https://janishutz.com" />
<meta name="og:locale" content="en_GB" />
<meta property="twitter:card" content="summary_large_image">
<meta name="theme-color" content="#152b5c">
</head>
<body>
<nav></nav>
<iframe width="420" height="315"src="https://www.youtube.com/embed/UYMa-xTyZYo"></iframe>
<footer></footer>
<script src="/js/slider.js"></script>
<script>activateSlider( 7500 )</script>
</body>
</html>

82
site/src/projects/libreevent/index.html Normal file
View File

@@ -0,0 +1,82 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!-- CSS -->
<link rel="stylesheet" href="https://static.janishutz.com/css/slider.css">
<link rel="stylesheet" href="/css/style.css">
<!-- SEO -->
<title>libreevent - free and open source event management solution | janishutz.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="og:title" content="" />
<meta name="og:description" content="" />
<meta name="og:image" content="https://static.janishutz.com/seo/home-card.jpg" />
<meta name="og:type" content="website" />
<meta name="og:url" content="https://janishutz.com" />
<meta name="og:locale" content="en_GB" />
<meta property="twitter:card" content="summary_large_image">
<meta name="theme-color" content="#152b5c">
<style>
#yt-embed {
width: 70vw;
height: 40vw;
}
</style>
</head>
<body>
<nav></nav>
<div class="slider" style="width: 100vw; height: 80vh;">
<div class="slider-container">
<div class="slider-element" style="background-image: url( 'https://store-cdn.janishutz.com/assets/libreevent/libreevent-title.jpg' );">
<a href="https://libreevent.janishutz.com" class="button" style="margin-top: 30%;">Project Website</a>
</div>
<div class="slider-element" style="background-image: url( 'https://store-cdn.janishutz.com/assets/libreevent/libreevent-admin-eventsettings.jpg' );">
<h1>Create Events with Ease</h1>
<p>Using the libreevent's powerful admin panel</p>
<a href="https://libreevent.janishutz.com/docs/admin-panel/" class="button">Docs</a>
</div>
<div class="slider-element" style="background-image: url( 'https://store-cdn.janishutz.com/assets/libreevent/libreevent-admin-seatplan-editor.jpg' );">
<h1>Create seat plans</h1>
<p>libreevent's seat plan editor is designed to make this as easy as possible</p>
<a href="https://libreevent.janishutz.com/docs/admin-panel/seatplan-editor" class="button">Docs</a>
</div>
<div class="slider-element" style="background-image: url( 'https://store-cdn.janishutz.com/assets/libreevent/libreevent-all-events.jpg' );">
<h1>Order Tickets</h1>
<p>on this page and give users all important data</p>
<a href="https://libreevent.janishutz.com/download" class="button">Install today</a>
</div>
<div class="slider-element" style="background-image: url( 'https://store-cdn.janishutz.com/assets/libreevent/libreevent-login.jpg' );">
<h1>User Accounts</h1>
<p>Your customers can do everything in self-service!</p>
<a href="https://libreevent.janishutz.com/download" class="button">Install today</a>
</div>
<div class="slider-element" style="background-image: url( 'https://store-cdn.janishutz.com/assets/libreevent/libreevent-ticket-sel.jpg' );">
<h1>Open Source Project</h1>
<p>Free Software, developed by Janis Hutz & the community</p>
<a href="https://libreevent.janishutz.com" class="button">Learn more about libreevent</a>
</div>
</div>
<div class="slider-controls slider-control-left" onclick="sliderControl( 'previous' )">&#11164;</div>
<div class="slider-controls slider-control-right" onclick="sliderControl( 'next' )">&#11166;</div>
</div>
<div id="yt-embed"></div>
<footer></footer>
<script src="https://static.janishutz.com/js/yt-embed.js"></script>
<script src="https://static.janishutz.com/js/slider.js"></script>
<script>
YTEmbed( 'yt-embed', 'UYMa-xTyZYo' );
activateSlider( 7500 );
</script>
</body>
</html>