Intro - Bugfixes and Feature
Added scroll wheel support for intro Hides visible arrow keys when at first or last item fixed css bug where next is slightly visible
This commit is contained in:
parent
0237f76b69
commit
b07d288a84
|
|
@ -5,164 +5,177 @@ import Topic from './subcomponents/Topic';
|
|||
import { ChevronDoubleUp, ChevronDoubleDown } from 'react-bootstrap-icons';
|
||||
|
||||
class Intro extends React.Component {
|
||||
constructor() {
|
||||
super();
|
||||
constructor() {
|
||||
super();
|
||||
|
||||
// Defaults for the state
|
||||
this.state = {
|
||||
start: false,
|
||||
prev: 'previous',
|
||||
curr: 'current',
|
||||
next: 'next',
|
||||
prevLoc: -1,
|
||||
currLoc: 0,
|
||||
nextLoc: 1,
|
||||
moving: false,
|
||||
// Defaults for the state
|
||||
this.state = {
|
||||
start: false,
|
||||
prev: 'previous',
|
||||
curr: 'current',
|
||||
next: 'next',
|
||||
prevLoc: -1,
|
||||
currLoc: 0,
|
||||
nextLoc: 1,
|
||||
moving: false,
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
// Topics to display in intro
|
||||
// DISCLAIMER: Please add content to the topic or bugs may occur...
|
||||
topics = [
|
||||
<Topic link="/about" title="Welcome to My Portfolio" background="/img/background.webp">
|
||||
<div>
|
||||
This website helps you access the projects that I've worked on. You can navigate
|
||||
at the top to different locations in the site. Within you can find information about me,
|
||||
my github repositories, and articles I've posted. This website is coded with
|
||||
React/Redux and hosted over Vercel. You can email me at <a href="mailto:cam@camscode.com">cam@camscode.com</a>.
|
||||
</div>
|
||||
</Topic>,
|
||||
<Topic link="/github" title="Github" background="img/space.webp">
|
||||
View a list of projects I've done right on this website. You can easily direct to github
|
||||
where you can see the project code itself.
|
||||
</Topic>,
|
||||
<Topic link="/articles" title="Articles" background="/img/sunset.webp">
|
||||
Read through some homemade articles that go over interesting topics and may teach you some skills in tech.
|
||||
</Topic>
|
||||
];
|
||||
|
||||
handleKey = (e) => {
|
||||
/**
|
||||
* handleKey - Handle key events and hand off to handleInput
|
||||
*/
|
||||
switch (e.key) {
|
||||
case "ArrowUp": // If received an up Arrow
|
||||
this.handleInput('up');
|
||||
break;
|
||||
case "ArrowDown": // If received a down Arrow
|
||||
this.handleInput('down')
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
handleInput = (input) => {
|
||||
/**
|
||||
* handleInput - handle input events. A majority of the functionality is to scroll through Intro topics
|
||||
*/
|
||||
|
||||
// Up Arrow
|
||||
if (input === "up" && !this.state.moving && this.state.currLoc > 0) {
|
||||
|
||||
// Activate animation going to next topic
|
||||
this.setState({
|
||||
prev: 'current top',
|
||||
moving: true
|
||||
});
|
||||
|
||||
// Wait 900 ms until the transition is finished
|
||||
setTimeout(() => {
|
||||
// Once timeout finishes, place topics in correct location without transition
|
||||
let prevloc = this.state.prevLoc - 1;
|
||||
let currloc = this.state.currLoc - 1;
|
||||
let nextloc = this.state.nextLoc - 1;
|
||||
this.setState({
|
||||
prev: 'previous notrans',
|
||||
currLoc: currloc,
|
||||
nextLoc: nextloc,
|
||||
});
|
||||
|
||||
// wait another 75 ms to
|
||||
setTimeout(() => {
|
||||
this.setState({ // remove notrans from each div
|
||||
prev: 'previous',
|
||||
prevLoc: prevloc,
|
||||
moving: false,
|
||||
});
|
||||
|
||||
}, 75);
|
||||
|
||||
}, 900);
|
||||
} else if (input === "down" && !this.state.moving && this.state.nextLoc < this.topics.length) {
|
||||
// Activate transition going to previous topic
|
||||
this.setState({
|
||||
//curr: 'previous',
|
||||
next: 'current',
|
||||
moving: true,
|
||||
});
|
||||
|
||||
// wait 900 ms before placing all topics into correct divs
|
||||
setTimeout(() => {
|
||||
// move all topics into correct divs
|
||||
let prevloc = this.state.prevLoc + 1;
|
||||
let currloc = this.state.currLoc + 1;
|
||||
let nextloc = this.state.nextLoc + 1;
|
||||
this.setState({
|
||||
next: 'next notrans',
|
||||
prevLoc: prevloc,
|
||||
currLoc: currloc,
|
||||
});
|
||||
|
||||
// wait 20ms and remove notrans
|
||||
setTimeout(() => {
|
||||
this.setState({
|
||||
next: 'next',
|
||||
nextLoc: nextloc,
|
||||
moving: false,
|
||||
});
|
||||
}, 75);
|
||||
}, 900);
|
||||
|
||||
} else if (input === "down" && this.state.nextLoc >= this.topics.length) {
|
||||
// Set something to happen when you reach the end
|
||||
}
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
handleKey = (e) => {
|
||||
/**
|
||||
* handleKey - Handle key events and hand off to handleInput
|
||||
*/
|
||||
switch(e.key) {
|
||||
case "ArrowUp": // If received an up Arrow
|
||||
onWheel(event) {
|
||||
/**
|
||||
* onScroll: Handle wheel event and moves intro up or down based on wheel scroll direction
|
||||
*/
|
||||
if (event.deltaY < 0) {
|
||||
this.handleInput('up');
|
||||
break;
|
||||
case "ArrowDown": // If received a down Arrow
|
||||
this.handleInput('down')
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
if (event.deltaY > 0) {
|
||||
this.handleInput('down');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
handleInput = (input) => {
|
||||
/**
|
||||
* handleInput - handle input events. A majority of the functionality is to scroll through Intro topics
|
||||
*/
|
||||
|
||||
// Up Arrow
|
||||
if (input === "up" && !this.state.moving && this.state.currLoc > 0 ) {
|
||||
|
||||
// Activate animation going to next topic
|
||||
this.setState({
|
||||
prev: 'current top',
|
||||
moving: true
|
||||
});
|
||||
|
||||
// Wait 900 ms until the transition is finished
|
||||
setTimeout(()=>{
|
||||
// Once timeout finishes, place topics in correct location without transition
|
||||
let prevloc = this.state.prevLoc-1;
|
||||
let currloc = this.state.currLoc-1;
|
||||
let nextloc = this.state.nextLoc-1;
|
||||
componentDidMount() {
|
||||
setTimeout(() => { // At the start, wait 100ms and enable intro
|
||||
this.setState({
|
||||
prev: 'previous notrans',
|
||||
currLoc: currloc,
|
||||
nextLoc: nextloc,
|
||||
start: true,
|
||||
});
|
||||
}, 100);
|
||||
|
||||
// wait another 75 ms to
|
||||
setTimeout(()=>{
|
||||
this.setState({ // remove notrans from each div
|
||||
prev: 'previous',
|
||||
prevLoc: prevloc,
|
||||
moving: false,
|
||||
});
|
||||
document.title = "HomePage"; // Set document title
|
||||
|
||||
}, 75);
|
||||
|
||||
}, 900);
|
||||
} else if (input === "down" && !this.state.moving && this.state.nextLoc < this.topics.length) {
|
||||
// Activate transition going to previous topic
|
||||
this.setState({
|
||||
//curr: 'previous',
|
||||
next: 'current',
|
||||
moving: true,
|
||||
});
|
||||
|
||||
// wait 900 ms before placing all topics into correct divs
|
||||
setTimeout(()=>{
|
||||
// move all topics into correct divs
|
||||
let prevloc = this.state.prevLoc+1;
|
||||
let currloc = this.state.currLoc+1;
|
||||
let nextloc = this.state.nextLoc+1;
|
||||
this.setState({
|
||||
next: 'next notrans',
|
||||
prevLoc: prevloc,
|
||||
currLoc: currloc,
|
||||
});
|
||||
|
||||
// wait 20ms and remove notrans
|
||||
setTimeout(()=>{
|
||||
this.setState({
|
||||
next: 'next',
|
||||
nextLoc: nextloc,
|
||||
moving: false,
|
||||
});
|
||||
}, 75);
|
||||
}, 900);
|
||||
|
||||
} else if (input === "down" && this.state.nextLoc >= this.topics.length) {
|
||||
// Set something to happen when you reach the end
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
setTimeout(()=>{ // At the start, wait 100ms and enable intro
|
||||
this.setState({
|
||||
start: true,
|
||||
});
|
||||
}, 100);
|
||||
render() {
|
||||
|
||||
document.title = "HomePage"; // Set document title
|
||||
// TODO: Fix bug where scrolling too fast will allow one to exit expected topic range
|
||||
|
||||
}
|
||||
|
||||
// Topics to display in intro
|
||||
// DISCLAIMER: Please add content to the topic or bugs may occur...
|
||||
topics = [
|
||||
<Topic link="/about" title="Welcome to My Portfolio" background="/img/background.webp">
|
||||
<div>
|
||||
This website helps you access the projects that I've worked on. You can navigate
|
||||
at the top to different locations in the site. Within you can find information about me,
|
||||
my github repositories, and articles I've posted. This website is coded with
|
||||
React/Redux and hosted over Vercel. You can email me at <a href="mailto:cam@camscode.com">cam@camscode.com</a>.
|
||||
</div>
|
||||
</Topic>,
|
||||
<Topic link="/github" title="Github" background="img/space.webp">
|
||||
View a list of projects I've done right on this website. You can easily direct to github
|
||||
where you can see the project code itself.
|
||||
</Topic>,
|
||||
<Topic link="/articles" title="Articles" background="/img/sunset.webp">
|
||||
Read through some homemade articles that go over interesting topics and may teach you some skills in tech.
|
||||
</Topic>
|
||||
];
|
||||
|
||||
render() {
|
||||
|
||||
// TODO: Fix bug where scrolling too fast will allow one to exit expected topic range
|
||||
|
||||
// Render page
|
||||
return (
|
||||
<div onKeyDown={this.handleKey} tabIndex="0" className={this.state.start ? 'intro start':'intro'}>
|
||||
<div className='navbutton top' onClick={()=>{this.handleInput('up')}}><ChevronDoubleUp/></div>
|
||||
<div id="previous" className={this.state.prev}>
|
||||
{this.topics[this.state.prevLoc]}
|
||||
// Render page
|
||||
return (
|
||||
<div onKeyDown={this.handleKey} tabIndex="0" className={this.state.start ? 'intro start' : 'intro'} onWheel={(event) => { this.onWheel(event) }}>
|
||||
<div className={'navbutton top' + (this.state.currLoc > 0 ? "" : " hidden")} onClick={() => { this.handleInput('up') }}><ChevronDoubleUp /></div>
|
||||
<div id="previous" className={this.state.prev}>
|
||||
{this.topics[this.state.prevLoc]}
|
||||
</div>
|
||||
<div id="current" className={this.state.curr}>
|
||||
{this.topics[this.state.currLoc]}
|
||||
</div>
|
||||
<div id="next" className={this.state.next}>
|
||||
{this.topics[this.state.nextLoc]}
|
||||
</div>
|
||||
<div className={'navbutton bottom' + (this.state.currLoc < this.topics.length - 1 ? "" : " hidden")} onClick={() => { this.handleInput('down') }}><ChevronDoubleDown /></div>
|
||||
</div>
|
||||
<div id="current" className={this.state.curr}>
|
||||
{this.topics[this.state.currLoc]}
|
||||
</div>
|
||||
<div id="next" className={this.state.next}>
|
||||
{this.topics[this.state.nextLoc]}
|
||||
</div>
|
||||
<div className='navbutton bottom' onClick={()=>{this.handleInput('down')}}><ChevronDoubleDown/></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const mapStateToProps = (state) => {
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
display: flex;
|
||||
position:fixed;
|
||||
transition: opacity 750ms ease-out, top 750ms ease-out;
|
||||
top:-99%;
|
||||
top:-100%;
|
||||
left:0;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
|
@ -49,7 +49,7 @@
|
|||
display: flex;
|
||||
position:fixed;
|
||||
transition: opacity 750ms ease-out, top 750ms ease-out;
|
||||
top:99%;
|
||||
top:100%;
|
||||
left:0;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
|
@ -81,6 +81,19 @@
|
|||
color: #C4C4C4
|
||||
}
|
||||
|
||||
.intro .navbutton.hidden {
|
||||
opacity: 0;
|
||||
|
||||
}
|
||||
|
||||
.intro .navbutton.bottom {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.intro .navbutton.top {
|
||||
z-index: 14;
|
||||
}
|
||||
|
||||
.intro .navbutton {
|
||||
z-index: 14;
|
||||
font-size: 48px;
|
||||
|
|
@ -92,12 +105,7 @@
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
}
|
||||
|
||||
.intro .navbutton.bottom {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.intro .navbutton.top {
|
||||
z-index: 14;
|
||||
opacity: 1;
|
||||
animation:none !important;
|
||||
transition: opacity ease 0.25s;
|
||||
}
|
||||
Loading…
Reference in New Issue