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

5
components/slider/slider.css
View File

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

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

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