From 242ec159a27f92264d48c320dd5eb7552910cfbd Mon Sep 17 00:00:00 2001 From: Janis Hutz Date: Fri, 30 Aug 2024 11:22:06 +0200 Subject: [PATCH] youtube embed component, libreevent page --- components/slider/js/slider.js | 21 ++++- components/slider/slider.css | 5 + components/slider/ts/slider.ts | 18 +++- components/yt-embed/yt-embed.css | 25 +++++ components/yt-embed/yt-embed.js | 22 +++++ site/src/css/nav.css | 2 + site/src/css/slider.css | 72 --------------- site/src/index.html | 7 +- site/src/js/slider.js | 118 ------------------------ site/src/projects/index.html | 35 ------- site/src/projects/libreevent/index.html | 82 ++++++++++++++++ 11 files changed, 175 insertions(+), 232 deletions(-) create mode 100644 components/yt-embed/yt-embed.css create mode 100644 components/yt-embed/yt-embed.js delete mode 100644 site/src/css/slider.css delete mode 100644 site/src/js/slider.js delete mode 100644 site/src/projects/index.html create mode 100644 site/src/projects/libreevent/index.html diff --git a/components/slider/js/slider.js b/components/slider/js/slider.js index f7ea70e..878ab68 100644 --- a/components/slider/js/slider.js +++ b/components/slider/js/slider.js @@ -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) { diff --git a/components/slider/slider.css b/components/slider/slider.css index 6f78bda..8c6f688 100644 --- a/components/slider/slider.css +++ b/components/slider/slider.css @@ -52,6 +52,11 @@ } .slider-element.past { + z-index: 2; + left: 0; +} + +.slider-element.last { z-index: 3; left: 0; } diff --git a/components/slider/ts/slider.ts b/components/slider/ts/slider.ts index 9801093..108b650 100644 --- a/components/slider/ts/slider.ts +++ b/components/slider/ts/slider.ts @@ -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( () => { diff --git a/components/yt-embed/yt-embed.css b/components/yt-embed/yt-embed.css new file mode 100644 index 0000000..c175975 --- /dev/null +++ b/components/yt-embed/yt-embed.css @@ -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; +} \ No newline at end of file diff --git a/components/yt-embed/yt-embed.js b/components/yt-embed/yt-embed.js new file mode 100644 index 0000000..2b1aef2 --- /dev/null +++ b/components/yt-embed/yt-embed.js @@ -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 = `

YouTube Video was not loaded automatically to preserve your privacy. If you wish to load it here, click the button below!

+
View on YouTube
`; +} + + +function activateYTEmbed ( elementBindID, videoID ) { + document.getElementById( elementBindID ).innerHTML = ``; +} \ No newline at end of file diff --git a/site/src/css/nav.css b/site/src/css/nav.css index 6bd81fb..eae1e77 100644 --- a/site/src/css/nav.css +++ b/site/src/css/nav.css @@ -60,6 +60,7 @@ nav a { display: flex; align-items: center; z-index: 100; + border-bottom: black 1px solid; } .nav-top-bar .logo { @@ -158,6 +159,7 @@ nav a { flex-direction: row; top: 0; left: 0; + border-bottom: black 1px solid; } .nav-link-dropdown { diff --git a/site/src/css/slider.css b/site/src/css/slider.css deleted file mode 100644 index 6f78bda..0000000 --- a/site/src/css/slider.css +++ /dev/null @@ -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%; -} \ No newline at end of file diff --git a/site/src/index.html b/site/src/index.html index c1328d5..7a1560b 100644 --- a/site/src/index.html +++ b/site/src/index.html @@ -2,7 +2,7 @@ - + @@ -56,8 +56,7 @@ - - - + + \ No newline at end of file diff --git a/site/src/js/slider.js b/site/src/js/slider.js deleted file mode 100644 index 890c8a2..0000000 --- a/site/src/js/slider.js +++ /dev/null @@ -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); diff --git a/site/src/projects/index.html b/site/src/projects/index.html deleted file mode 100644 index eb72754..0000000 --- a/site/src/projects/index.html +++ /dev/null @@ -1,35 +0,0 @@ - - - - - - - - - libreevent - free and open source event management solution | janishutz.com - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/site/src/projects/libreevent/index.html b/site/src/projects/libreevent/index.html new file mode 100644 index 0000000..634a25d --- /dev/null +++ b/site/src/projects/libreevent/index.html @@ -0,0 +1,82 @@ + + + + + + + + + libreevent - free and open source event management solution | janishutz.com + + + + + + + + + + + + + + + + + + + +
+
+
+ Project Website +
+
+

Create Events with Ease

+

Using the libreevent's powerful admin panel

+ Docs +
+
+

Create seat plans

+

libreevent's seat plan editor is designed to make this as easy as possible

+ Docs +
+
+

Order Tickets

+

on this page and give users all important data

+ Install today +
+
+

User Accounts

+

Your customers can do everything in self-service!

+ Install today +
+
+

Open Source Project

+

Free Software, developed by Janis Hutz & the community

+ Learn more about libreevent +
+
+
⮜
+
⮞
+
+ +
+ + + + + + + + + + \ No newline at end of file