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
|
|
@ -22,106 +22,6 @@ class Intro extends React.Component {
|
|||
};
|
||||
}
|
||||
|
||||
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
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
setTimeout(()=>{ // At the start, wait 100ms and enable intro
|
||||
this.setState({
|
||||
start: true,
|
||||
});
|
||||
}, 100);
|
||||
|
||||
document.title = "HomePage"; // Set document title
|
||||
|
||||
}
|
||||
|
||||
// Topics to display in intro
|
||||
// DISCLAIMER: Please add content to the topic or bugs may occur...
|
||||
topics = [
|
||||
|
|
@ -142,14 +42,127 @@ class Intro extends React.Component {
|
|||
</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
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
onWheel(event) {
|
||||
/**
|
||||
* onScroll: Handle wheel event and moves intro up or down based on wheel scroll direction
|
||||
*/
|
||||
if (event.deltaY < 0) {
|
||||
this.handleInput('up');
|
||||
}
|
||||
|
||||
if (event.deltaY > 0) {
|
||||
this.handleInput('down');
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
setTimeout(() => { // At the start, wait 100ms and enable intro
|
||||
this.setState({
|
||||
start: true,
|
||||
});
|
||||
}, 100);
|
||||
|
||||
document.title = "HomePage"; // Set document title
|
||||
|
||||
}
|
||||
|
||||
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 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>
|
||||
|
|
@ -159,7 +172,7 @@ class Intro extends React.Component {
|
|||
<div id="next" className={this.state.next}>
|
||||
{this.topics[this.state.nextLoc]}
|
||||
</div>
|
||||
<div className='navbutton bottom' onClick={()=>{this.handleInput('down')}}><ChevronDoubleDown/></div>
|
||||
<div className={'navbutton bottom' + (this.state.currLoc < this.topics.length - 1 ? "" : " hidden")} onClick={() => { this.handleInput('down') }}><ChevronDoubleDown /></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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