Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

optimize doc index page slide show animation and refactor related React code #104

Merged
merged 2 commits into from
Sep 30, 2021
Merged

optimize doc index page slide show animation and refactor related React code #104

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
92f7173
optimize doc index page slide show animation
XDean Sep 30, 2021
a803156
fix typo of slideshow caption and alt
XDean Sep 30, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 22 additions & 24 deletions docs/src/css/custom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -175,14 +175,30 @@ html[data-theme='dark'] .docusaurus-highlight-code-line {

.slideshow-container {
position: relative;
padding-top: 53%;
overflow: hidden;
}

.slide {
display: none;
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;

opacity: 0;
transition-property: opacity;
transition-duration: 1s;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.slide.active {
opacity: 100;
}

.slide > img {
width: 100%;
height: 100%;
}

.slide-caption {
Expand Down Expand Up @@ -217,24 +233,6 @@ html[data-theme='dark'] .docusaurus-highlight-code-line {
transition: background-color 0.6s ease;
}

.slide-active {
.slide-dot.active {
background-color: #717171;
}

@-webkit-keyframes fade {
from {
opacity: 0.4;
}
to {
opacity: 1;
}
}

@keyframes fade {
from {
opacity: 0.4;
}
to {
opacity: 1;
}
}
85 changes: 35 additions & 50 deletions docs/src/pages/slideshow.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,60 +1,45 @@
import React, { useEffect } from 'react';
import React, {useEffect, useState} from 'react';
import clsx from 'clsx'

const slides = [
{
name:'Windows',
src:'/img/Xplorer%20win.png',
alt:'Xplorer on Windows'
},
{
name:'Garuda Linux',
src:'/img/Xplorer%20linux.png',
alt:'Xplorer on Linux'
},
{
name:'macOS Catalina',
src:'/img/Xplorer%20mac.png',
alt:'Xplorer on macOS'
},
]

export default function Slideshow() {
const [index, setIndex] = useState(0)
useEffect(() => {
var slideIndex = 0;

const showSlides = () => {
var i;
var slides = document.getElementsByClassName('slide');
var dots = document.getElementsByClassName('slide-dot');
for (i = 0; i < slides.length; i++) {
slides[i].style.display = 'none';
}
slideIndex++;
if (slideIndex > slides.length) {
slideIndex = 1;
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(
' slide-active',
''
);
}
slides[slideIndex - 1].style.display = 'block';
dots[slideIndex - 1].className += ' slide-active';
setTimeout(showSlides, 2000);
};
showSlides();
}, []);
const handle = setInterval(() => setIndex(i => (i + 1) % 3), 2000)
return () => clearInterval(handle)
}, [])
return (
<>
<div className="slideshow-container">
<div className="slide">
<div className="slide-numbertext">1 / 3</div>
<img
src="/img/Xplorer%20win.png"
alt="Xplorer on Windows"
/>
<div className="slide-caption">Windows</div>
</div>
<div className="slide">
<div className="slide-numbertext">2 / 3</div>
<img
src="/img/Xplorer%20linux.png"
alt="Xplorer on Linux"
/>
<div className="slide-caption">Garuda Linux</div>
</div>
<div className="slide">
<div className="slide-numbertext">3 / 3</div>
<img src="/img/Xplorer%20mac.png" alt="Xplorer on macOS" />
<div className="slide-caption">macOS Catalina</div>
</div>
{slides.map((e, i) => (
<div key={i} className={clsx("slide", index === i && 'active')}>
<div className="slide-numbertext">{i + 1} / {slides.length}</div>
<img src={e.src} alt={e.alt}/>
<div className="slide-caption">{e.name}</div>
</div>
))}
</div>
<div className="slide-dots">
<span className="slide-dot"></span>
<span className="slide-dot"></span>
<span className="slide-dot"></span>
{[0, 1, 2].map(e => (
<span key={e} className={clsx("slide-dot", index === e && 'active')}/>
))}
</div>
</>
);
Expand Down