-
Notifications
You must be signed in to change notification settings - Fork 40
Expand file tree
/
Copy pathfullpageReactExample.js
More file actions
162 lines (132 loc) · 4.43 KB
/
fullpageReactExample.js
File metadata and controls
162 lines (132 loc) · 4.43 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
import React from 'react';
import { Fullpage, HorizontalSlider, Slide } from '../lib/index';
const { changeFullpageSlide, changeHorizontalSlide } = Fullpage;
require('./normalize.css');
require('./skeleton.css');
require('./exampleStyles.styl');
const fullPageOptions = {
// for mouse/wheel events
// represents the level of force required to generate a slide change on non-mobile, 0 is default
scrollSensitivity: 2,
// for touchStart/touchEnd/mobile scrolling
// represents the level of force required to generate a slide change on mobile, 0 is default
touchSensitivity: 2,
scrollSpeed: 500,
resetSlides: true,
hideScrollBars: true,
enableArrowKeys: true,
// optional, set the initial vertical slide
activeSlide: 0
};
const topNavStyle = {
textAlign: 'center',
position: 'fixed',
width: '100%',
cursor: 'pointer',
zIndex: 10,
backgroundColor: 'rgba(255, 255, 255, 0.4)',
top: '0px'
};
const horizontalNavStyle = {
position: 'absolute',
width: '100%',
top: '50%',
zIndex: 10
};
const horizontalSliderProps = {
name: 'horizontalSlider1',
infinite: true
};
class FullpageReact extends React.Component {
constructor(props) {
super(props);
this.state = {
active: {
Fullpage: 0,
horizontalSlider1: 0
}
};
this.onSlideChangeStart = this.onSlideChangeStart.bind(this);
this.onSlideChangeEnd = this.onSlideChangeEnd.bind(this);
}
onSlideChangeStart(name, props, state, newState) {
if (!this.horizontalNav) {
this.horizontalNav = document.getElementById('horizontal-nav');
}
if (name === 'horizontalSlider1') {
scrollNavStart(this.horizontalNav);
}
}
onSlideChangeEnd(name, props, state, newState) {
if (name === 'horizontalSlider1') {
scrollNavEnd(this.horizontalNav);
}
const oldActive = this.state.active;
const sliderState = {
[name]: newState.activeSlide
};
const updatedState = Object.assign(oldActive, sliderState);
this.setState(updatedState);
}
componentDidMount() {
}
render() {
const { active } = this.state;
const currentActive = active.Fullpage;
const prevSlide = changeFullpageSlide.bind(null, currentActive - 1);
const nextSlide = changeFullpageSlide.bind(null, currentActive + 1);
const goToTop = changeFullpageSlide.bind(null, 0);
const horizontalSliderName = horizontalSliderProps.name;
const horizontalActive = this.state.active[horizontalSliderName];
const prevHorizontalSlide = changeHorizontalSlide.bind(null, horizontalSliderName, horizontalActive - 1);
const nextHorizontalSlide = changeHorizontalSlide.bind(null, horizontalSliderName, horizontalActive + 1);
const topNav = (
<div style={topNavStyle}>
<span onClick={prevSlide}>
<button>Previous Slide</button>
</span>
<span onClick={goToTop}>
<button>Back to Top</button>
</span>
<span onClick={nextSlide}>
<button>Next Slide</button>
</span>
</div>
);
const horizontalNav = (
<div id='horizontal-nav' style={horizontalNavStyle}>
<span onClick={prevHorizontalSlide}><button>PREV</button></span>
<span style={{position: 'absolute', right: '0px'}} onClick={nextHorizontalSlide}><button>Next</button></span>
</div>
);
const horizontalSlides = [
<Slide style={{backgroundColor: 'red'}}><p>Horizontal 1</p></Slide>,
<Slide style={{backgroundColor: 'yellow'}}><p>Horizontal 2</p></Slide>,
<Slide style={{backgroundColor: 'green'}}><p>Horizontal 3</p></Slide>
];
horizontalSliderProps.slides = horizontalSlides;
const horizontalSlider = <HorizontalSlider id='horizontal-slider-1' {...horizontalSliderProps}>{horizontalNav}</HorizontalSlider>;
const verticalSlides = [
<Slide style={{backgroundColor: 'blue'}}>
<p>Slide 1</p>
</Slide>,
horizontalSlider,
<Slide style={{backgroundColor: 'pink'}}><p>Slide 3</p></Slide>
];
fullPageOptions.slides = verticalSlides;
return (
<Fullpage onSlideChangeStart={this.onSlideChangeStart} onSlideChangeEnd={this.onSlideChangeEnd} {...fullPageOptions}>
{topNav}
</Fullpage>
);
}
}
function scrollNavStart(nav) {
// make the nav fixed when we start scrolling horizontally
nav.style.position = 'fixed';
}
function scrollNavEnd(nav) {
// make the nav absolute when scroll finishes
nav.style.position = 'absolute';
}
export default FullpageReact;