Permalink
Browse files

First commit

  • Loading branch information...
1 parent 2624fe4 commit e244b30a117a80208a08eb652542247af56c55b6 @mihaiari mihaiari committed Oct 11, 2015
Showing with 20,329 additions and 1 deletion.
  1. +32 −0 .gitignore
  2. +25 −0 .jshintrc
  3. +0 −1 README.md
  4. +77 −0 dist/Section.js
  5. +145 −0 dist/SectionsContainer.js
  6. +19,740 −0 example/bundle.js
  7. +4 −0 example/demo.css
  8. +24 −0 example/demo.js
  9. +12 −0 example/index.html
  10. +16 −0 example/server.js
  11. +19 −0 example/webpack.config.js
  12. +4 −0 index.js
  13. +39 −0 package.json
  14. +64 −0 src/Section.js
  15. +128 −0 src/SectionsContainer.js
View
@@ -0,0 +1,32 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directory
+# https://docs.npmjs.com/misc/faq#should-i-check-my-node-modules-folder-into-git
+node_modules
+
+# Custom
+.DS_Store
+build
View
@@ -0,0 +1,25 @@
+{
+
+ // Environments:
+ "browser" : true,
+ "node" : true,
+ "esnext": true,
+
+ // Enforcing options:
+ "bitwise": true,
+ "camelcase": false,
+ "curly": true,
+ "eqeqeq": true,
+ "latedef": true,
+ "newcap": true,
+ "noarg": true,
+ "noempty": true,
+ "nonew": true,
+ "quotmark": "single",
+ "regexp": true,
+ "strict": false,
+ "trailing": true,
+ "undef": true,
+ "unused": true
+
+}
View
@@ -1,2 +1 @@
# react-fullpage
-# react-fullpage
View
@@ -0,0 +1,77 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', {
+ value: true
+});
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var Section = _react2['default'].createClass({
+ displayName: 'Section',
+
+ propTypes: {
+ color: _react2['default'].PropTypes.string
+ },
+
+ contextTypes: {
+ verticalAlign: _react2['default'].PropTypes.bool
+ },
+
+ getInitialState: function getInitialState() {
+ return {
+ windowHeight: window.innerHeight
+ };
+ },
+
+ handleResize: function handleResize() {
+ this.setState({
+ windowHeight: window.innerHeight
+ });
+ },
+
+ componentDidMount: function componentDidMount() {
+ window.addEventListener('resize', this.handleResize);
+ },
+
+ componentWillUnmount: function componentWillUnmount() {
+ window.removeEventListener('resize', this.handleResize);
+ },
+
+ render: function render() {
+ var alignVertical = this.props.verticalAlign || this.context.verticalAlign;
+
+ var sectionStyle = {
+ backgroundColor: this.props.color || 'green',
+ height: this.state.windowHeight,
+ width: '100%',
+ display: alignVertical ? 'table' : 'block'
+ };
+
+ return _react2['default'].createElement(
+ 'div',
+ { className: 'Section', style: sectionStyle },
+ alignVertical ? this._renderVerticalAlign() : this.props.children
+ );
+ },
+
+ _renderVerticalAlign: function _renderVerticalAlign() {
+ var verticalAlignStyle = {
+ display: 'table-cell',
+ verticalAlign: 'middle',
+ width: '100%'
+ };
+
+ return _react2['default'].createElement(
+ 'div',
+ { style: verticalAlignStyle },
+ this.props.children
+ );
+ }
+});
+
+exports['default'] = Section;
+module.exports = exports['default'];
@@ -0,0 +1,145 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', {
+ value: true
+});
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactDom = require('react-dom');
+
+var _reactDom2 = _interopRequireDefault(_reactDom);
+
+var SectionsContainer = _react2['default'].createClass({
+ displayName: 'SectionsContainer',
+
+ propTypes: {
+ delay: _react2['default'].PropTypes.number,
+ verticalAlign: _react2['default'].PropTypes.bool
+ },
+
+ childContextTypes: {
+ verticalAlign: _react2['default'].PropTypes.bool
+ },
+
+ getInitialState: function getInitialState() {
+ return {
+ activeSection: 0,
+ scrollingStarted: false,
+ sectionScrolledPosition: 0,
+ windowHeight: window.innerHeight
+ };
+ },
+
+ getDefaultProps: function getDefaultProps() {
+ return {
+ delay: 1000,
+ verticalAlign: false
+ };
+ },
+
+ getChildContext: function getChildContext() {
+ return {
+ verticalAlign: this.props.verticalAlign
+ };
+ },
+
+ componentWillMount: function componentWillMount() {
+ document.querySelector('body').style.overflow = 'hidden';
+ },
+
+ componentWillUnmount: function componentWillUnmount() {
+ window.removeEventListener('resize', this._handleResize);
+ },
+
+ componentDidMount: function componentDidMount() {
+ window.addEventListener('resize', this._handleResize);
+ this._addHeightToParents();
+ this._addMouseWheelEventHandlers();
+ },
+
+ _addHeightToParents: function _addHeightToParents() {
+ var child = _reactDom2['default'].findDOMNode(this);
+ var previousParent = child.parentNode;
+
+ while (previousParent) {
+ if ('style' in previousParent) {
+ previousParent.style.height = '100%';
+ previousParent = previousParent.parentNode;
+ } else {
+ return false;
+ }
+ }
+ },
+
+ _addMouseWheelEventHandlers: function _addMouseWheelEventHandlers() {
+ window.addEventListener('mousewheel', this._mouseWheelHandler, false);
+ window.addEventListener('DOMMouseScroll', this._mouseWheelHandler, false);
+ },
+
+ _removeMouseWheelEventHandlers: function _removeMouseWheelEventHandlers() {
+ window.removeEventListener('mousewheel', this._mouseWheelHandler);
+ window.removeEventListener('DOMMouseScroll', this._mouseWheelHandler);
+ },
+
+ _mouseWheelHandler: function _mouseWheelHandler() {
+ var _this = this;
+
+ this._removeMouseWheelEventHandlers();
+
+ var e = window.event || e; // old IE support
+ var delta = Math.max(-1, Math.min(1, e.wheelDelta || -e.detail));
+ var activeSection = this.state.activeSection - delta;
+ var position = this.state.sectionScrolledPosition + delta * this.state.windowHeight;
+ var maxPosition = 0 - this.props.children.length * this.state.windowHeight;
+
+ if (position > 0 || maxPosition === position || this.state.scrollingStarted) {
+ this._addMouseWheelEventHandlers();
+ return false;
+ }
+
+ this.setState({
+ activeSection: activeSection,
+ scrollingStarted: true,
+ sectionScrolledPosition: position
+ });
+
+ setTimeout(function () {
+ _this.setState({
+ scrollingStarted: false
+ });
+ _this._addMouseWheelEventHandlers();
+ }, this.props.delay + 300);
+ },
+
+ _handleResize: function _handleResize() {
+ var position = 0 - this.state.activeSection * window.innerHeight;
+ this.setState({
+ windowHeight: window.innerHeight,
+ sectionScrolledPosition: position
+ });
+ },
+
+ render: function render() {
+ var containerStyle = {
+ transform: 'translate3d(0px, ' + this.state.sectionScrolledPosition + 'px, 0px)',
+ transition: 'all ' + this.props.delay + 'ms ease',
+ height: '100%',
+ width: '100%'
+ };
+
+ return _react2['default'].createElement(
+ 'div',
+ { className: 'SectionContainer', style: containerStyle },
+ this.props.children
+ );
+ }
+
+});
+
+exports['default'] = SectionsContainer;
+module.exports = exports['default'];
Oops, something went wrong.

0 comments on commit e244b30

Please sign in to comment.