├── .babelrc
├── .gitignore
├── .jshintrc
├── README.md
├── dist
├── Footer.js
├── Header.js
├── ScrollToTopOnMount.js
├── Section.js
└── SectionsContainer.js
├── example
├── bundle.js
├── demo.css
├── demo.js
├── index.html
├── server.js
└── webpack.config.js
├── index.js
├── package.json
├── src
├── Footer.js
├── Header.js
├── ScrollToTopOnMount.js
├── Section.js
└── SectionsContainer.js
└── yarn.lock
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": ["es2015", "react", "stage-2"]
3 | }
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 |
6 | # Runtime data
7 | pids
8 | *.pid
9 | *.seed
10 |
11 | # Directory for instrumented libs generated by jscoverage/JSCover
12 | lib-cov
13 |
14 | # Coverage directory used by tools like istanbul
15 | coverage
16 |
17 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
18 | .grunt
19 |
20 | # node-waf configuration
21 | .lock-wscript
22 |
23 | # Compiled binary addons (http://nodejs.org/api/addons.html)
24 | build/Release
25 |
26 | # Dependency directory
27 | # https://docs.npmjs.com/misc/faq#should-i-check-my-node-modules-folder-into-git
28 | node_modules
29 |
30 | # Custom
31 | .DS_Store
32 | build
33 |
--------------------------------------------------------------------------------
/.jshintrc:
--------------------------------------------------------------------------------
1 | {
2 |
3 | // Environments:
4 | "browser" : true,
5 | "node" : true,
6 | "esnext": true,
7 |
8 | // Enforcing options:
9 | "bitwise": true,
10 | "camelcase": false,
11 | "curly": true,
12 | "eqeqeq": true,
13 | "latedef": true,
14 | "newcap": true,
15 | "noarg": true,
16 | "noempty": true,
17 | "nonew": true,
18 | "quotmark": "single",
19 | "regexp": true,
20 | "strict": false,
21 | "trailing": true,
22 | "undef": true,
23 | "unused": true
24 |
25 | }
26 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | ## Help wanted
2 |
3 | Hey, because I am very limited with my time, I am unable to keep maitaining this project, so I am hoping to organize a group of collaborators to help me turn this into a great project.
4 |
5 | So everyone who wants to join, please send me an email at **mihail[@]subtirelu.info** and I will get back to you asap.
6 |
7 | ## React Full Page
8 |
9 | This is an implementation of [fullpage.js](https://github.com/alvarotrigo/fullPage.js) in react.
10 | For the moment this is still in development and a lot of things can change.
11 |
12 | ## Install
13 |
14 | ```
15 | npm install --save react-fullpage
16 | ```
17 |
18 | ## Usage
19 | ### A basic usage
20 | ```javascript
21 | import React from 'react';
22 | import {SectionsContainer, Section} from 'react-fullpage';
23 |
24 | let options = {
25 | ...
26 | };
27 |
28 | // => in the render() method of your app
29 | return (
30 |
31 |
32 |
33 |
34 |
35 | );
36 |
37 | ```
38 |
39 | ### Fixed header and footer
40 |
41 | In case you need a fixed header and footer you can also include the `Header` or `Footer` component
42 |
43 | ```javascript
44 |
45 | import {SectionsContainer, Section, Header, Footer} from 'react-fullpage';
46 |
47 | // => in the render() method of your app
48 | return (
49 |
54 |
59 |
60 |
61 |
62 |
63 |
64 | );
65 |
66 | ```
67 |
68 | ## Default Props
69 | Some of this props can be referenced with the [fullpage.js options](https://github.com/alvarotrigo/fullPage.js#options)
70 | ```javascript
71 | let options = {
72 | activeClass: 'active', // the class that is appended to the sections links
73 | anchors: [], // the anchors for each sections
74 | arrowNavigation: true, // use arrow keys
75 | className: 'SectionContainer', // the class name for the section container
76 | delay: 1000, // the scroll animation speed
77 | navigation: true, // use dots navigatio
78 | scrollBar: false, // use the browser default scrollbar
79 | sectionClassName: 'Section', // the section class name
80 | sectionPaddingTop: '0', // the section top padding
81 | sectionPaddingBottom: '0', // the section bottom padding
82 | verticalAlign: false // align the content of each section vertical
83 | };
84 | ```
85 |
86 | ## Full example
87 | You can find the full example [here](https://github.com/subtirelumihail/react15-fullpage/tree/master/example)
88 |
89 | ````javascript
90 | import React from 'react';
91 | import ReactDOM from 'react-dom';
92 |
93 | import {SectionsContainer, Section, Header, Footer} from '../index';
94 |
95 | const app = document.querySelector('#app');
96 |
97 | const Example = React.createClass({
98 | render() {
99 | let options = {
100 | sectionClassName: 'section',
101 | anchors: ['sectionOne', 'sectionTwo', 'sectionThree'],
102 | scrollBar: false,
103 | navigation: true,
104 | verticalAlign: false,
105 | sectionPaddingTop: '50px',
106 | sectionPaddingBottom: '50px',
107 | arrowNavigation: true
108 | };
109 |
110 | return (
111 |
112 |
117 |
122 |
123 |
124 |
125 |
126 |
127 |
150 |
151 |
152 |
153 |
154 |
155 |
156 |
157 | );
158 | }
159 | };
160 |
161 | ````
162 |
--------------------------------------------------------------------------------
/dist/Footer.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | Object.defineProperty(exports, "__esModule", {
4 | value: true
5 | });
6 |
7 | var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
8 |
9 | var _react = require('react');
10 |
11 | var _react2 = _interopRequireDefault(_react);
12 |
13 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
14 |
15 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
16 |
17 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
18 |
19 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
20 |
21 | var Footer = function (_Component) {
22 | _inherits(Footer, _Component);
23 |
24 | function Footer() {
25 | _classCallCheck(this, Footer);
26 |
27 | return _possibleConstructorReturn(this, (Footer.__proto__ || Object.getPrototypeOf(Footer)).apply(this, arguments));
28 | }
29 |
30 | _createClass(Footer, [{
31 | key: 'render',
32 | value: function render() {
33 | var footerStyle = {
34 | position: 'fixed',
35 | width: '100%',
36 | zIndex: '1',
37 | bottom: '0'
38 | };
39 |
40 | return _react2.default.createElement(
41 | 'footer',
42 | { style: footerStyle },
43 | this.props.children
44 | );
45 | }
46 | }]);
47 |
48 | return Footer;
49 | }(_react.Component);
50 |
51 | exports.default = Footer;
--------------------------------------------------------------------------------
/dist/Header.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | Object.defineProperty(exports, "__esModule", {
4 | value: true
5 | });
6 |
7 | var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
8 |
9 | var _react = require('react');
10 |
11 | var _react2 = _interopRequireDefault(_react);
12 |
13 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
14 |
15 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
16 |
17 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
18 |
19 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
20 |
21 | var Header = function (_Component) {
22 | _inherits(Header, _Component);
23 |
24 | function Header() {
25 | _classCallCheck(this, Header);
26 |
27 | return _possibleConstructorReturn(this, (Header.__proto__ || Object.getPrototypeOf(Header)).apply(this, arguments));
28 | }
29 |
30 | _createClass(Header, [{
31 | key: 'render',
32 | value: function render() {
33 | var headerStyle = {
34 | position: 'fixed',
35 | width: '100%',
36 | zIndex: '1',
37 | top: '0'
38 | };
39 |
40 | return _react2.default.createElement(
41 | 'header',
42 | { style: headerStyle },
43 | this.props.children
44 | );
45 | }
46 | }]);
47 |
48 | return Header;
49 | }(_react.Component);
50 |
51 | exports.default = Header;
--------------------------------------------------------------------------------
/dist/ScrollToTopOnMount.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | Object.defineProperty(exports, "__esModule", {
4 | value: true
5 | });
6 |
7 | var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
8 |
9 | var _react = require('react');
10 |
11 | var _react2 = _interopRequireDefault(_react);
12 |
13 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
14 |
15 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
16 |
17 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
18 |
19 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
20 |
21 | var ScrollToTopOnMount = function (_Component) {
22 | _inherits(ScrollToTopOnMount, _Component);
23 |
24 | function ScrollToTopOnMount() {
25 | _classCallCheck(this, ScrollToTopOnMount);
26 |
27 | return _possibleConstructorReturn(this, (ScrollToTopOnMount.__proto__ || Object.getPrototypeOf(ScrollToTopOnMount)).apply(this, arguments));
28 | }
29 |
30 | _createClass(ScrollToTopOnMount, [{
31 | key: 'componentDidMount',
32 | value: function componentDidMount() {
33 | window.scrollTo(0, 0);
34 | }
35 | }, {
36 | key: 'render',
37 | value: function render() {
38 | return null;
39 | }
40 | }]);
41 |
42 | return ScrollToTopOnMount;
43 | }(_react.Component);
44 |
45 | exports.default = ScrollToTopOnMount;
--------------------------------------------------------------------------------
/dist/Section.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | Object.defineProperty(exports, "__esModule", {
4 | value: true
5 | });
6 |
7 | var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
8 |
9 | var _react = require('react');
10 |
11 | var _react2 = _interopRequireDefault(_react);
12 |
13 | var _propTypes = require('prop-types');
14 |
15 | var _propTypes2 = _interopRequireDefault(_propTypes);
16 |
17 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
18 |
19 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
20 |
21 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
22 |
23 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
24 |
25 | var Section = function (_Component) {
26 | _inherits(Section, _Component);
27 |
28 | function Section() {
29 | var _ref;
30 |
31 | var _temp, _this, _ret;
32 |
33 | _classCallCheck(this, Section);
34 |
35 | for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
36 | args[_key] = arguments[_key];
37 | }
38 |
39 | return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Section.__proto__ || Object.getPrototypeOf(Section)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
40 | windowHeight: 0
41 | }, _this.renderVerticalAlign = function () {
42 | var verticalAlignStyle = {
43 | display: 'table-cell',
44 | verticalAlign: 'middle',
45 | width: '100%'
46 | };
47 |
48 | return _react2.default.createElement(
49 | 'div',
50 | { style: verticalAlignStyle },
51 | _this.props.children
52 | );
53 | }, _temp), _possibleConstructorReturn(_this, _ret);
54 | }
55 |
56 | _createClass(Section, [{
57 | key: 'handleResize',
58 | value: function handleResize() {
59 | this.setState({
60 | windowHeight: window.innerHeight
61 | });
62 | }
63 | }, {
64 | key: 'componentDidMount',
65 | value: function componentDidMount() {
66 | var _this2 = this;
67 |
68 | this.handleResize();
69 | window.addEventListener('resize', function () {
70 | return _this2.handleResize();
71 | });
72 | }
73 | }, {
74 | key: 'componentWillUnmount',
75 | value: function componentWillUnmount() {
76 | var _this3 = this;
77 |
78 | window.removeEventListener('resize', function () {
79 | return _this3.handleResize();
80 | });
81 | }
82 | }, {
83 | key: 'render',
84 | value: function render() {
85 | var alignVertical = this.props.verticalAlign || this.context.verticalAlign;
86 |
87 | var sectionStyle = {
88 | width: '100%',
89 | display: alignVertical ? 'table' : 'block',
90 | height: this.state.windowHeight,
91 | maxHeight: this.state.windowHeight,
92 | overflow: 'auto',
93 | backgroundColor: this.props.color,
94 | paddingTop: this.context.sectionPaddingTop,
95 | paddingBottom: this.context.sectionPaddingBottom
96 | };
97 |
98 | return _react2.default.createElement(
99 | 'div',
100 | {
101 | className: this.context.sectionClassName + (this.props.className ? ' ' + this.props.className : ''),
102 | id: this.props.id,
103 | style: sectionStyle },
104 | alignVertical ? this.renderVerticalAlign() : this.props.children
105 | );
106 | }
107 | }]);
108 |
109 | return Section;
110 | }(_react.Component);
111 |
112 | Section.propTypes = {
113 | color: _propTypes2.default.string
114 | };
115 |
116 | Section.contextTypes = {
117 | verticalAlign: _propTypes2.default.bool,
118 | sectionClassName: _propTypes2.default.string,
119 | sectionPaddingTop: _propTypes2.default.string,
120 | sectionPaddingBottom: _propTypes2.default.string
121 | };
122 |
123 | exports.default = Section;
--------------------------------------------------------------------------------
/dist/SectionsContainer.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | Object.defineProperty(exports, "__esModule", {
4 | value: true
5 | });
6 |
7 | var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
8 |
9 | var _react = require('react');
10 |
11 | var _react2 = _interopRequireDefault(_react);
12 |
13 | var _propTypes = require('prop-types');
14 |
15 | var _propTypes2 = _interopRequireDefault(_propTypes);
16 |
17 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
18 |
19 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
20 |
21 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
22 |
23 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
24 |
25 | var SectionsContainer = function (_Component) {
26 | _inherits(SectionsContainer, _Component);
27 |
28 | function SectionsContainer() {
29 | var _ref;
30 |
31 | var _temp, _this, _ret;
32 |
33 | _classCallCheck(this, SectionsContainer);
34 |
35 | for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
36 | args[_key] = arguments[_key];
37 | }
38 |
39 | return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = SectionsContainer.__proto__ || Object.getPrototypeOf(SectionsContainer)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
40 | activeSection: _this.props.activeSection,
41 | scrollingStarted: false,
42 | sectionScrolledPosition: 0,
43 | windowHeight: 0
44 | }, _this.removeDefaultEventListeners = function () {
45 | window.removeEventListener('resize', _this.handleResize);
46 | window.removeEventListener('hashchange', _this.handleAnchor);
47 |
48 | if (_this.props.arrowNavigation) {
49 | window.removeEventListener('keydown', _this.handleArrowKeys);
50 | }
51 | }, _this.addCSS3Scroll = function () {
52 | _this.addOverflowToBody();
53 | _this.addMouseWheelEventHandlers();
54 | }, _this.addActiveClass = function () {
55 | _this.removeActiveClass();
56 |
57 | var hash = window.location.hash.substring(1);
58 | var activeLinks = document.querySelectorAll('a[href="#' + hash + '"]');
59 |
60 | for (var i = 0; i < activeLinks.length; i++) {
61 | activeLinks[i].className = activeLinks[i].className + (activeLinks[i].className.length > 0 ? ' ' : '') + ('' + _this.props.activeClass);
62 | }
63 | }, _this.removeActiveClass = function () {
64 | var activeLinks = document.querySelectorAll('a:not([href="#' + _this.props.anchors[_this.state.activeSection] + '"])');
65 |
66 | for (var i = 0; i < activeLinks.length; i++) {
67 | activeLinks[i].className = activeLinks[i].className.replace(/\b ?active/g, '');
68 | }
69 | }, _this.addChildrenWithAnchorId = function () {
70 | var index = 0;
71 |
72 | return _react.Children.map(_this.props.children, function (child) {
73 | var id = _this.props.anchors[index];
74 |
75 | index++;
76 |
77 | if (id) {
78 | return (0, _react.cloneElement)(child, {
79 | id: id
80 | });
81 | } else {
82 | return child;
83 | }
84 | });
85 | }, _this.addOverflowToBody = function () {
86 | document.querySelector('body').style.overflow = 'hidden';
87 | }, _this.removeOverflowFromBody = function () {
88 | document.querySelector('body').style.overflow = 'initial';
89 | }, _this.addMouseWheelEventHandlers = function () {
90 | window.addEventListener('mousewheel', _this.handleMouseWheel, false);
91 | window.addEventListener('DOMMouseScroll', _this.handleMouseWheel, false);
92 | }, _this.removeMouseWheelEventHandlers = function () {
93 | window.removeEventListener('mousewheel', _this.handleMouseWheel);
94 | window.removeEventListener('DOMMouseScroll', _this.handleMouseWheel);
95 | }, _this.handleMouseWheel = function (event) {
96 | var e = window.event || event;
97 | var delta = Math.max(-1, Math.min(1, e.wheelDelta || -e.detail));
98 | var activeSection = _this.state.activeSection - delta;
99 |
100 | if (_this.state.scrollingStarted || activeSection < 0 || _this.childrenLength === activeSection) {
101 | return false;
102 | }
103 |
104 | _this.setAnchor(activeSection);
105 | _this.handleSectionTransition(activeSection);
106 | _this.addActiveClass();
107 | }, _this.handleResize = function () {
108 | var position = 0 - _this.state.activeSection * window.innerHeight;
109 |
110 | _this.setState({
111 | scrollingStarted: true,
112 | windowHeight: window.innerHeight,
113 | sectionScrolledPosition: position
114 | });
115 |
116 | _this.resetScroll();
117 | }, _this.handleSectionTransition = function (index) {
118 | var position = 0 - index * _this.state.windowHeight;
119 |
120 | if (!_this.props.anchors.length || index === -1 || index >= _this.props.anchors.length) {
121 | return false;
122 | }
123 |
124 | _this.setState({
125 | scrollingStarted: true,
126 | activeSection: index,
127 | sectionScrolledPosition: position
128 | });
129 |
130 | _this.resetScroll();
131 | _this.handleScrollCallback();
132 | }, _this.handleArrowKeys = function (e) {
133 |
134 | var event = window.event ? window.event : e;
135 | var activeSection = event.keyCode === 38 || event.keyCode === 37 ? _this.state.activeSection - 1 : event.keyCode === 40 || event.keyCode === 39 ? _this.state.activeSection + 1 : -1;
136 |
137 | if (_this.state.scrollingStarted || activeSection < 0 || _this.childrenLength === activeSection) {
138 | return false;
139 | }
140 |
141 | _this.setAnchor(activeSection);
142 | _this.handleSectionTransition(activeSection);
143 | _this.addActiveClass();
144 | }, _this.handleTouchNav = function () {
145 | var that = _this;
146 |
147 | var touchsurface = document.querySelector('.' + _this.props.className),
148 | swipedir = void 0,
149 | startX = void 0,
150 | startY = void 0,
151 | dist = void 0,
152 | distX = void 0,
153 | distY = void 0,
154 | threshold = 50,
155 | restraint = 100,
156 | allowedTime = 1000,
157 | elapsedTime = void 0,
158 | startTime = void 0,
159 | handleswipe = function handleswipe(swipedir) {
160 | console.log(swipedir);
161 | };
162 |
163 | touchsurface.addEventListener('touchstart', function (e) {
164 | var touchobj = e.changedTouches[0];
165 | swipedir = 'none';
166 | dist = 0;
167 | startX = touchobj.pageX;
168 | startY = touchobj.pageY;
169 | startTime = new Date().getTime();
170 | }, false);
171 |
172 | touchsurface.addEventListener('touchmove', function (e) {
173 | e.preventDefault();
174 | }, false);
175 |
176 | touchsurface.addEventListener('touchend', function (e) {
177 | var touchobj = e.changedTouches[0];
178 | distX = touchobj.pageX - startX;
179 | distY = touchobj.pageY - startY;
180 | elapsedTime = new Date().getTime() - startTime;
181 | if (elapsedTime <= allowedTime) {
182 |
183 | if (Math.abs(distY) >= threshold && Math.abs(distX) <= restraint) {
184 |
185 | swipedir = distY < 0 ? 'up' : 'down';
186 | var direction = swipedir === 'down' ? that.state.activeSection - 1 : swipedir === 'up' ? that.state.activeSection + 1 : -1;
187 | var hash = that.props.anchors[direction];
188 |
189 | if (!that.props.anchors.length || hash) {
190 | window.location.hash = '#' + hash;
191 | }
192 |
193 | that.handleSectionTransition(direction);
194 | }
195 | }
196 | handleswipe(swipedir);
197 | }, false);
198 | }, _this.handleAnchor = function () {
199 | var hash = window.location.hash.substring(1);
200 | var activeSection = _this.props.anchors.indexOf(hash);
201 |
202 | if (_this.state.activeSection !== activeSection) {
203 | _this.handleSectionTransition(activeSection);
204 | _this.addActiveClass();
205 | }
206 | }, _this.setAnchor = function (index) {
207 | var hash = _this.props.anchors[index];
208 |
209 | if (!_this.props.anchors.length || hash) {
210 | window.location.hash = '#' + hash;
211 | }
212 | }, _this.handleScrollCallback = function () {
213 | if (_this.props.scrollCallback) {
214 | setTimeout(function () {
215 | return _this.props.scrollCallback(_this.state);
216 | }, 0);
217 | }
218 | }, _this.resetScroll = function () {
219 | _this.clearResetScrollTimer();
220 |
221 | _this.resetScrollTimer = setTimeout(function () {
222 | _this.setState({
223 | scrollingStarted: false
224 | });
225 | }, _this.props.delay + 300);
226 | }, _this.clearResetScrollTimer = function () {
227 | if (_this.resetScrollTimer) {
228 | clearTimeout(_this.resetScrollTimer);
229 | }
230 | }, _this.renderNavigation = function () {
231 | var navigationStyle = {
232 | position: 'fixed',
233 | zIndex: '10',
234 | right: '20px',
235 | top: '50%',
236 | transform: 'translate(-50%, -50%)'
237 | };
238 |
239 | var anchors = _this.props.anchors.map(function (link, index) {
240 | var anchorStyle = {
241 | display: 'block',
242 | margin: '10px',
243 | borderRadius: '100%',
244 | backgroundColor: '#556270',
245 | padding: '5px',
246 | transition: 'all 0.2s',
247 | transform: _this.state.activeSection === index ? 'scale(1.3)' : 'none'
248 | };
249 |
250 | return _react2.default.createElement('a', {
251 | href: '#' + link,
252 | key: index,
253 | className: _this.props.navigationAnchorClass || 'Navigation-Anchor',
254 | style: _this.props.navigationAnchorClass ? null : anchorStyle
255 | });
256 | });
257 |
258 | return _react2.default.createElement(
259 | 'div',
260 | {
261 | className: _this.props.navigationClass || 'Navigation',
262 | style: _this.props.navigationClass ? null : navigationStyle },
263 | anchors
264 | );
265 | }, _temp), _possibleConstructorReturn(_this, _ret);
266 | }
267 |
268 | _createClass(SectionsContainer, [{
269 | key: 'getChildContext',
270 | value: function getChildContext() {
271 | return {
272 | verticalAlign: this.props.verticalAlign,
273 | sectionClassName: this.props.sectionClassName,
274 | sectionPaddingTop: this.props.sectionPaddingTop,
275 | sectionPaddingBottom: this.props.sectionPaddingBottom
276 | };
277 | }
278 | }, {
279 | key: 'componentWillUnmount',
280 | value: function componentWillUnmount() {
281 | this.clearResetScrollTimer();
282 | this.removeDefaultEventListeners();
283 | this.removeMouseWheelEventHandlers();
284 | this.removeOverflowFromBody();
285 | }
286 | }, {
287 | key: 'componentDidMount',
288 | value: function componentDidMount() {
289 | this.childrenLength = this.props.children.length;
290 |
291 | this.handleResize();
292 | window.addEventListener('resize', this.handleResize);
293 |
294 | if (!this.props.scrollBar) {
295 | this.addCSS3Scroll();
296 | this.handleAnchor();
297 |
298 | window.addEventListener('hashchange', this.handleAnchor, false);
299 |
300 | if (this.props.arrowNavigation) {
301 | window.addEventListener('keydown', this.handleArrowKeys);
302 | }
303 |
304 | if (this.props.touchNavigation) {
305 | this.handleTouchNav();
306 | }
307 | }
308 | }
309 | }, {
310 | key: 'componentWillReceiveProps',
311 | value: function componentWillReceiveProps(nextProps) {
312 | if (this.props.activeSection !== nextProps.activeSection) {
313 | this.setState({ activeSection: nextProps.activeSection });
314 | this.setAnchor(nextProps.activeSection);
315 | this.handleSectionTransition(nextProps.activeSection);
316 | this.addActiveClass();
317 | }
318 | }
319 | }, {
320 | key: 'render',
321 | value: function render() {
322 | var containerStyle = {
323 | height: '100%',
324 | width: '100%',
325 | position: 'relative',
326 | transform: 'translate3d(0px, ' + this.state.sectionScrolledPosition + 'px, 0px)',
327 | transition: 'all ' + this.props.delay + 'ms ease'
328 | };
329 | return _react2.default.createElement(
330 | 'div',
331 | null,
332 | _react2.default.createElement(
333 | 'div',
334 | { className: this.props.className, style: containerStyle },
335 | this.props.scrollBar ? this.addChildrenWithAnchorId() : this.props.children
336 | ),
337 | this.props.navigation && !this.props.scrollBar ? this.renderNavigation() : null
338 | );
339 | }
340 | }]);
341 |
342 | return SectionsContainer;
343 | }(_react.Component);
344 |
345 | SectionsContainer.defaultProps = {
346 | scrollCallback: null,
347 | delay: 1000,
348 | verticalAlign: false,
349 | scrollBar: false,
350 | navigation: true,
351 | className: 'SectionContainer',
352 | sectionClassName: 'Section',
353 | anchors: [],
354 | activeClass: 'active',
355 | sectionPaddingTop: '0',
356 | sectionPaddingBottom: '0',
357 | arrowNavigation: true,
358 | activeSection: 0,
359 | touchNavigation: true
360 | };
361 |
362 | SectionsContainer.propTypes = {
363 | scrollCallback: _propTypes2.default.func,
364 | delay: _propTypes2.default.number,
365 | verticalAlign: _propTypes2.default.bool,
366 | scrollBar: _propTypes2.default.bool,
367 | navigation: _propTypes2.default.bool,
368 | className: _propTypes2.default.string,
369 | sectionClassName: _propTypes2.default.string,
370 | navigationClass: _propTypes2.default.string,
371 | navigationAnchorClass: _propTypes2.default.string,
372 | activeClass: _propTypes2.default.string,
373 | sectionPaddingTop: _propTypes2.default.string,
374 | sectionPaddingBottom: _propTypes2.default.string,
375 | arrowNavigation: _propTypes2.default.bool,
376 | activeSection: _propTypes2.default.number,
377 | touchNavigation: _propTypes2.default.bool
378 | };
379 |
380 | SectionsContainer.childContextTypes = {
381 | verticalAlign: _propTypes2.default.bool,
382 | sectionClassName: _propTypes2.default.string,
383 | sectionPaddingTop: _propTypes2.default.string,
384 | sectionPaddingBottom: _propTypes2.default.string
385 | };
386 |
387 | exports.default = SectionsContainer;
--------------------------------------------------------------------------------
/example/demo.css:
--------------------------------------------------------------------------------
1 | html,
2 | body {
3 | margin: 0;
4 | font-family: arial,helvetica;
5 | }
6 |
7 | html {
8 | box-sizing: border-box;
9 | }
10 | *, *:before, *:after {
11 | box-sizing: inherit;
12 | }
13 |
14 | footer,
15 | header {
16 | color: #fff;
17 | text-align: center;
18 | padding: 10px;
19 | }
20 |
21 | header {
22 | background-color:rgba(0, 0, 0, 0.3);
23 | border-bottom: 1px solid #556270;
24 | }
25 |
26 | footer {
27 | color: #000;
28 | }
29 |
30 | a {
31 | display: inline-block;
32 | color: inherit;
33 | text-decoration: none;
34 | margin: 0px 25px;
35 |
36 | -webkit-transition: all 0.2s;
37 | -o-transition: all 0.2s;
38 | transition: all 0.2s;
39 | }
40 |
41 | a.active,
42 | a:hover {
43 | color: #C44D58;
44 | }
45 |
46 | button {
47 | width: 50px;
48 | padding: 8px;
49 | }
50 |
51 | .btnGroup {
52 | position: absolute;
53 | bottom: 20px;
54 | right: 20px;
55 | z-index: 9;
56 | }
--------------------------------------------------------------------------------
/example/demo.js:
--------------------------------------------------------------------------------
1 | import './demo.css';
2 |
3 | import * as React from 'react';
4 | import ReactDOM from 'react-dom';
5 |
6 | import { SectionsContainer, Section, Header, Footer } from '../index';
7 |
8 | const app = document.querySelector('#app');
9 |
10 | class Example extends React.Component {
11 | constructor(props) {
12 | super(props)
13 | this.state = {
14 | current: 0,
15 | }
16 | }
17 |
18 | render() {
19 | const options = {
20 | sectionClassName: 'section',
21 | anchors: ['sectionOne', 'sectionTwo', 'sectionThree'],
22 | scrollBar: false,
23 | navigation: true,
24 | verticalAlign: false,
25 | sectionPaddingTop: '50px',
26 | sectionPaddingBottom: '50px',
27 | arrowNavigation: true,
28 | scrollCallback: (states) => this.setState({current: states.activeSection})
29 | };
30 |
31 | const {current} = this.state
32 |
33 | return (
34 |
35 |
40 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
{this.props.children}
;
32 | };
33 |
34 | render() {
35 | const alignVertical =
36 | this.props.verticalAlign || this.context.verticalAlign;
37 |
38 | const sectionStyle = {
39 | width: '100%',
40 | display: alignVertical ? 'table' : 'block',
41 | height: this.state.windowHeight,
42 | maxHeight: this.state.windowHeight,
43 | overflow: 'auto',
44 | backgroundColor: this.props.color,
45 | paddingTop: this.context.sectionPaddingTop,
46 | paddingBottom: this.context.sectionPaddingBottom
47 | };
48 |
49 | return (
50 |
57 | {alignVertical ? this.renderVerticalAlign() : this.props.children}
58 |
59 | );
60 | }
61 | }
62 |
63 | Section.propTypes = {
64 | color: PropTypes.string
65 | };
66 |
67 | Section.contextTypes = {
68 | verticalAlign: PropTypes.bool,
69 | sectionClassName: PropTypes.string,
70 | sectionPaddingTop: PropTypes.string,
71 | sectionPaddingBottom: PropTypes.string
72 | };
73 |
74 | export default Section;
75 |
--------------------------------------------------------------------------------
/src/SectionsContainer.js:
--------------------------------------------------------------------------------
1 | import React, { Component, Children, cloneElement } from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | class SectionsContainer extends Component {
5 | state = {
6 | activeSection: this.props.activeSection,
7 | scrollingStarted: false,
8 | sectionScrolledPosition: 0,
9 | windowHeight: 0
10 | };
11 |
12 | resetScrollTimer;
13 | childrenLength;
14 | getChildContext() {
15 | return {
16 | verticalAlign: this.props.verticalAlign,
17 | sectionClassName: this.props.sectionClassName,
18 | sectionPaddingTop: this.props.sectionPaddingTop,
19 | sectionPaddingBottom: this.props.sectionPaddingBottom
20 | };
21 | }
22 |
23 | componentWillUnmount() {
24 | this.clearResetScrollTimer();
25 | this.removeDefaultEventListeners();
26 | this.removeMouseWheelEventHandlers();
27 | this.removeOverflowFromBody();
28 | }
29 |
30 | componentDidMount() {
31 | this.childrenLength = this.props.children.length;
32 |
33 | this.handleResize();
34 | window.addEventListener('resize', this.handleResize);
35 |
36 | if (!this.props.scrollBar) {
37 | this.addCSS3Scroll();
38 | this.handleAnchor();
39 |
40 | window.addEventListener('hashchange', this.handleAnchor, false);
41 |
42 | if (this.props.arrowNavigation) {
43 | window.addEventListener('keydown', this.handleArrowKeys);
44 | }
45 |
46 | if (this.props.touchNavigation) {
47 | this.handleTouchNav();
48 | }
49 | }
50 | }
51 |
52 | componentWillReceiveProps(nextProps) {
53 | if (this.props.activeSection !== nextProps.activeSection) {
54 | this.setState({ activeSection: nextProps.activeSection });
55 | this.setAnchor(nextProps.activeSection);
56 | this.handleSectionTransition(nextProps.activeSection);
57 | this.addActiveClass();
58 | }
59 | }
60 |
61 | removeDefaultEventListeners = () => {
62 | window.removeEventListener('resize', this.handleResize);
63 | window.removeEventListener('hashchange', this.handleAnchor);
64 |
65 | if (this.props.arrowNavigation) {
66 | window.removeEventListener('keydown', this.handleArrowKeys);
67 | }
68 | }
69 |
70 | addCSS3Scroll = () => {
71 | this.addOverflowToBody();
72 | this.addMouseWheelEventHandlers();
73 | }
74 |
75 | addActiveClass = () => {
76 | this.removeActiveClass();
77 |
78 | let hash = window.location.hash.substring(1);
79 | let activeLinks = document.querySelectorAll(`a[href="#${hash}"]`);
80 |
81 | for (let i = 0; i < activeLinks.length; i++) {
82 | activeLinks[i].className =
83 | activeLinks[i].className +
84 | (activeLinks[i].className.length > 0 ? ' ' : '') +
85 | `${this.props.activeClass}`;
86 | }
87 | }
88 |
89 | removeActiveClass = () => {
90 | let activeLinks = document.querySelectorAll(
91 | `a:not([href="#${this.props.anchors[this.state.activeSection]}"])`
92 | );
93 |
94 | for (let i = 0; i < activeLinks.length; i++) {
95 | activeLinks[i].className = activeLinks[i].className.replace(
96 | /\b ?active/g,
97 | ''
98 | );
99 | }
100 | }
101 |
102 | addChildrenWithAnchorId = () => {
103 | let index = 0;
104 |
105 | return Children.map(this.props.children, child => {
106 | let id = this.props.anchors[index];
107 |
108 | index++;
109 |
110 | if (id) {
111 | return cloneElement(child, {
112 | id: id
113 | });
114 | } else {
115 | return child;
116 | }
117 | });
118 | }
119 |
120 | addOverflowToBody = () => {
121 | document.querySelector('body').style.overflow = 'hidden';
122 | }
123 |
124 | removeOverflowFromBody = () => {
125 | document.querySelector('body').style.overflow = 'initial';
126 | }
127 |
128 | addMouseWheelEventHandlers = () => {
129 | window.addEventListener('mousewheel', this.handleMouseWheel, false);
130 | window.addEventListener('DOMMouseScroll', this.handleMouseWheel, false);
131 | }
132 |
133 | removeMouseWheelEventHandlers = () => {
134 | window.removeEventListener('mousewheel', this.handleMouseWheel);
135 | window.removeEventListener('DOMMouseScroll', this.handleMouseWheel);
136 | }
137 |
138 | handleMouseWheel = event => {
139 | const e = window.event || event;
140 | const delta = Math.max(-1, Math.min(1, e.wheelDelta || -e.detail));
141 | const activeSection = this.state.activeSection - delta;
142 |
143 | if (
144 | this.state.scrollingStarted ||
145 | activeSection < 0 ||
146 | this.childrenLength === activeSection
147 | ) {
148 | return false;
149 | }
150 |
151 | this.setAnchor(activeSection);
152 | this.handleSectionTransition(activeSection);
153 | this.addActiveClass();
154 | }
155 |
156 | handleResize = () => {
157 | const position = 0 - this.state.activeSection * window.innerHeight;
158 |
159 | this.setState({
160 | scrollingStarted: true,
161 | windowHeight: window.innerHeight,
162 | sectionScrolledPosition: position
163 | });
164 |
165 | this.resetScroll();
166 | }
167 |
168 | handleSectionTransition = (index) => {
169 | const position = 0 - index * this.state.windowHeight;
170 |
171 | if (
172 | !this.props.anchors.length ||
173 | index === -1 ||
174 | index >= this.props.anchors.length
175 | ) {
176 | return false;
177 | }
178 |
179 | this.setState({
180 | scrollingStarted: true,
181 | activeSection: index,
182 | sectionScrolledPosition: position
183 | });
184 |
185 | this.resetScroll();
186 | this.handleScrollCallback();
187 | }
188 |
189 | handleArrowKeys = (e) => {
190 |
191 |
192 |
193 | const event = window.event ? window.event : e;
194 | const activeSection =
195 | event.keyCode === 38 || event.keyCode === 37
196 | ? this.state.activeSection - 1
197 | : event.keyCode === 40 || event.keyCode === 39
198 | ? this.state.activeSection + 1
199 | : -1;
200 |
201 | if (
202 | this.state.scrollingStarted ||
203 | activeSection < 0 ||
204 | this.childrenLength === activeSection
205 | ) {
206 | return false;
207 | }
208 |
209 | this.setAnchor(activeSection);
210 | this.handleSectionTransition(activeSection);
211 | this.addActiveClass();
212 | }
213 |
214 | handleTouchNav = () => {
215 | let that = this;
216 |
217 | let touchsurface = document.querySelector('.' + this.props.className),
218 | swipedir,
219 | startX,
220 | startY,
221 | dist,
222 | distX,
223 | distY,
224 | threshold = 50,
225 | restraint = 100,
226 | allowedTime = 1000,
227 | elapsedTime,
228 | startTime,
229 | handleswipe = function(swipedir) {
230 | console.log(swipedir);
231 | };
232 |
233 | touchsurface.addEventListener(
234 | 'touchstart',
235 | function(e) {
236 | let touchobj = e.changedTouches[0];
237 | swipedir = 'none';
238 | dist = 0;
239 | startX = touchobj.pageX;
240 | startY = touchobj.pageY;
241 | startTime = new Date().getTime();
242 |
243 | },
244 | false
245 | );
246 |
247 | touchsurface.addEventListener(
248 | 'touchmove',
249 | function(e) {
250 | e.preventDefault();
251 | },
252 | false
253 | );
254 |
255 | touchsurface.addEventListener(
256 | 'touchend',
257 | function(e) {
258 | let touchobj = e.changedTouches[0];
259 | distX = touchobj.pageX - startX;
260 | distY = touchobj.pageY - startY;
261 | elapsedTime = new Date().getTime() - startTime;
262 | if (elapsedTime <= allowedTime) {
263 |
264 | if (Math.abs(distY) >= threshold && Math.abs(distX) <= restraint) {
265 |
266 | swipedir = distY < 0 ? 'up' : 'down';
267 | let direction =
268 | swipedir === 'down'
269 | ? that.state.activeSection - 1
270 | : swipedir === 'up'
271 | ? that.state.activeSection + 1
272 | : -1;
273 | let hash = that.props.anchors[direction];
274 |
275 | if (!that.props.anchors.length || hash) {
276 | window.location.hash = '#' + hash;
277 | }
278 |
279 | that.handleSectionTransition(direction);
280 | }
281 | }
282 | handleswipe(swipedir);
283 |
284 | },
285 | false
286 | );
287 | }
288 |
289 | handleAnchor = () => {
290 | const hash = window.location.hash.substring(1);
291 | const activeSection = this.props.anchors.indexOf(hash);
292 |
293 | if (this.state.activeSection !== activeSection) {
294 | this.handleSectionTransition(activeSection);
295 | this.addActiveClass();
296 | }
297 | }
298 |
299 | setAnchor = (index) => {
300 | const hash = this.props.anchors[index];
301 |
302 | if (!this.props.anchors.length || hash) {
303 | window.location.hash = '#' + hash;
304 | }
305 | }
306 |
307 | handleScrollCallback = () => {
308 | if (this.props.scrollCallback) {
309 | setTimeout(() => this.props.scrollCallback(this.state), 0);
310 | }
311 | }
312 |
313 | resetScroll = () => {
314 | this.clearResetScrollTimer();
315 |
316 | this.resetScrollTimer = setTimeout(() => {
317 | this.setState({
318 | scrollingStarted: false
319 | });
320 | }, this.props.delay + 300);
321 | }
322 |
323 | clearResetScrollTimer = () => {
324 | if (this.resetScrollTimer) {
325 | clearTimeout(this.resetScrollTimer);
326 | }
327 | }
328 |
329 | renderNavigation = () => {
330 | let navigationStyle = {
331 | position: 'fixed',
332 | zIndex: '10',
333 | right: '20px',
334 | top: '50%',
335 | transform: 'translate(-50%, -50%)'
336 | };
337 |
338 | const anchors = this.props.anchors.map((link, index) => {
339 | const anchorStyle = {
340 | display: 'block',
341 | margin: '10px',
342 | borderRadius: '100%',
343 | backgroundColor: '#556270',
344 | padding: '5px',
345 | transition: 'all 0.2s',
346 | transform: this.state.activeSection === index ? 'scale(1.3)' : 'none'
347 | };
348 |
349 | return (
350 |
356 | );
357 | });
358 |
359 | return (
360 |
363 | {anchors}
364 |
365 | );
366 | }
367 |
368 | render() {
369 | let containerStyle = {
370 | height: '100%',
371 | width: '100%',
372 | position: 'relative',
373 | transform: `translate3d(0px, ${
374 | this.state.sectionScrolledPosition
375 | }px, 0px)`,
376 | transition: `all ${this.props.delay}ms ease`
377 | };
378 | return (
379 |
380 |
381 | {this.props.scrollBar
382 | ? this.addChildrenWithAnchorId()
383 | : this.props.children}
384 |
385 | {this.props.navigation && !this.props.scrollBar
386 | ? this.renderNavigation()
387 | : null}
388 |