├── example
    ├── demo.gif
    └── index.html
├── .gitignore
├── bower.json
├── package.json
├── react-pacman-progress.css
├── README.md
└── react-pacman-progress.js


/example/demo.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mathieudutour/react-pacman-progress/HEAD/example/demo.gif


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # https://git-scm.com/docs/gitignore
2 | # https://help.github.com/articles/ignoring-files
3 | # Example .gitignore files: https://github.com/github/gitignore
4 | /bower_components/
5 | /node_modules/
6 | .DS_Store


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-pacman-progress",
 3 |   "main": [
 4 |     "react-pacman-progress.js",
 5 |     "react-pacman-progress.css"
 6 |   ],
 7 |   "version": "0.2.0",
 8 |   "homepage": "https://github.com/mathieudutour/react-pacman-progress",
 9 |   "description": "Simple react.js component for a fun prgress indicator",
10 |   "keywords": [
11 |     "react",
12 |     "progress",
13 |     "pacman",
14 |     "component",
15 |     "javascript",
16 |     "react-component"
17 |   ],
18 |   "authors": [
19 |     "Mathieu Dutour <mathieu@dutour.me>"
20 |   ],
21 |   "license": "MIT",
22 |   "ignore": [
23 |     "**/.*",
24 |     "node_modules",
25 |     "bower_components",
26 |     "test",
27 |     "tests",
28 |     "example"
29 |   ],
30 |   "dependencies": {
31 |     "react": "^0.12.0"
32 |   }
33 | }
34 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-pacman-progress",
 3 |   "version": "0.2.1",
 4 |   "description": "Simple react.js component for a fun prgress indicator",
 5 |   "main": "react-pacman-progress.js",
 6 |   "peerDependencies": {
 7 |     "react": "0.x"
 8 |   },
 9 |   "scripts": {},
10 |   "repository": {
11 |     "type": "git",
12 |     "url": "https://github.com/mathieudutour/react-pacman-progress"
13 |   },
14 |   "keywords": [
15 |     "react",
16 |     "progress",
17 |     "pacman",
18 |     "component",
19 |     "javascript",
20 |     "react-component"
21 |   ],
22 |   "author": "Mathieu Dutour",
23 |   "license": "MIT",
24 |   "bugs": {
25 |     "url": "https://github.com/mathieudutour/react-pacman-progress/issues"
26 |   },
27 |   "homepage": "https://github.com/mathieudutour/react-pacman-progress"
28 | }
29 | 


--------------------------------------------------------------------------------
/react-pacman-progress.css:
--------------------------------------------------------------------------------
 1 | .pacman-progress {
 2 |   position: absolute;
 3 |   bottom: 100px;
 4 |   left: 50%;
 5 |   transition: all 1s ease-in-out 0.2s;
 6 | }
 7 | .pacman {
 8 |   position: absolute;
 9 |   transition: left 0.3s ease-in-out 0.2s;
10 |   width: 20px;
11 |   height: 20px;
12 |   transform: translate(-5px, -5px);
13 | }
14 | .pacman::before {
15 |   position: absolute;
16 |   content: " ";
17 |   width: 20px;
18 |   height: 10px;
19 |   border-top-left-radius: 10px;
20 |   border-top-right-radius: 10px;
21 |   background: #FFF;
22 | }
23 | 
24 | .pacman::after {
25 |   position: absolute;
26 |   content: " ";
27 |   width: 20px;
28 |   height: 10px;
29 |   border-bottom-left-radius: 10px;
30 |   border-bottom-right-radius: 10px;
31 |   background: #FFF;
32 |   top: 10px;
33 | }
34 | 
35 | .pacman.even::before {
36 |   animation: pacman-top 0.12s linear alternate both;
37 |   animation-iteration-count: 10;
38 | }
39 | .pacman.even::after {
40 |   animation: pacman-bottom 0.12s linear alternate both;
41 |   animation-iteration-count: 10;
42 | }
43 | .pacman.odd::before {
44 |   animation: pacman-top-bis 0.12s linear alternate both;
45 |   animation-iteration-count: 10;
46 | }
47 | .pacman.odd::after {
48 |   animation: pacman-bottom-bis 0.12s linear alternate both;
49 |   animation-iteration-count: 10;
50 | }
51 | 
52 | .point {
53 |   position: absolute;
54 |   float: left;
55 |   background: transparent;
56 |   width: 10px;
57 |   height: 10px;
58 |   border-width: 2px;
59 |   border-style: solid;
60 |   border-color: #FFF;
61 |   border-radius: 50%;
62 |   transition: all 0.01s ease-out 0.4s;
63 | }
64 | .point.current {
65 |   opacity: 0;
66 |   background: #FFF;
67 | }
68 | .point.done {
69 |   display: none;
70 | }
71 | 
72 | @keyframes pacman-top {
73 |   0% {transform: rotateZ(0deg);}
74 |   100% {transform: rotateZ(-30deg);}
75 | }
76 | @keyframes pacman-top-bis {
77 |   0% {transform: rotateZ(0deg);}
78 |   100% {transform: rotateZ(-30deg);}
79 | }
80 | @keyframes pacman-bottom {
81 |   0% {transform: rotateZ(0deg);}
82 |   100% {transform: rotateZ(30deg);}
83 | }
84 | @keyframes pacman-bottom-bis {
85 |   0% {transform: rotateZ(0deg);}
86 |   100% {transform: rotateZ(30deg);}
87 | }
88 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # react-pacman-progress
 2 | 
 3 | > Simple [React](http://facebook.github.io/react/index.html) component for a fun progress indicator.
 4 | 
 5 | ### [Demo](https://mathieudutour.github.io/react-pacman-progress)
 6 | 
 7 | [![Demo](https://cdn.rawgit.com/mathieudutour/react-pacman-progress/master/example/demo.gif "Demo")](https://github.com/mathieudutour/react-pacman-progress/blob/master/example/index.html)
 8 | 
 9 | ## Install
10 | 
11 | ```bash
12 | npm install react-pacman-progress --save
13 | ```
14 | 
15 | or
16 | 
17 | ```bash
18 | bower install react-pacman-progress --save
19 | ```
20 | 
21 | ## Example
22 | 
23 | Controlled usage:
24 | 
25 | ```javascript
26 | var PacmanProgress = require('react-pacman-progress');
27 | 
28 | var App = React.createClass({
29 |   getInitialState() {
30 |     return {currentIndex: 0};
31 |   },
32 |   render() {
33 |     var slides = [
34 |       {color: '#c0ffee'},
35 |       {color: '#deface'},
36 |       {color: '#0ff1ce'}
37 |     ]
38 |     return (
39 |       <div className="container" onCLick={this.handleClick}>
40 |         {
41 |           slides.map(function(slide, i) {
42 |             return <Slide index={i} currentIndex={this.state.currentIndex} color={slide.color} />;
43 |           }.bind(this))
44 |         }
45 |         <PacmanProgress items={slides.length} currentIndex={this.state.currentIndex} />
46 |       </div>
47 |     );
48 |   },
49 | 
50 |   handleClick: function() {
51 |     this.setState({currentIndex: this.state.currentIndex + 1});
52 |   }
53 | });
54 | ```
55 | 
56 | ## API
57 | 
58 | ### Props
59 | 
60 | ##### classNamespace
61 | 
62 | Namespace for CSS classes, _optional_, default is `` i.e CSS classes are `'' + 'pacman'`.
63 | 
64 | ##### items
65 | 
66 | Number of dots for pacman to eat. _required_
67 | 
68 | ##### currentIndex
69 | 
70 | Position of the pacman. Start at 0. _required_
71 | 
72 | ##### onClick
73 | 
74 | Function to call when clicking on a dot. _optional_, it takes 3 arguments:
75 |   * index of the dot clicked
76 |   * whether it was pacman which was clicked or not
77 |   * the event
78 | 
79 | ```
80 | handleClickPacman(index, isPacman, e) {
81 |   e.preventDefault();
82 |   this.setState({currentIndex: index});
83 | }
84 | ```
85 | 
86 | ## Styles
87 | 
88 | Look at [react-pacman-progress.css](https://github.com/mathieudutour/react-pacman-progress/blob/master/react-pacman-progress.css) for an idea on how to style this component.
89 | 
90 | ---
91 | 
92 | MIT Licensed
93 | 


--------------------------------------------------------------------------------
/example/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <head>
 4 |   <title>react-pacman-progress example (without JSX)</title>
 5 |   <link rel="stylesheet" href="../react-pacman-progress.css">
 6 |   <style>
 7 |     * {
 8 |       margin: 0;
 9 |       padding: 0;
10 |       border: 0;
11 |       -moz-box-sizing: border-box;
12 |       box-sizing: border-box;
13 |     }
14 |     html, body, #pacman-progress, .container, .slide {
15 |       height: 100%;
16 |     }
17 |     .container {
18 |       width: 100%;
19 |       overflow: hidden;
20 |     }
21 |     .slide  {
22 |       width: 100%;
23 |       position: absolute;
24 |       transition: all 0.3s ease-out;
25 |       color: #FFF;
26 |       font-family: sans-serif;
27 |       text-align: center;
28 |       padding-top: 30%;
29 |       font-size: 3em;
30 |     }
31 |   </style>
32 | </head>
33 | <body>
34 |   <div id="pacman-progress"></div>
35 |   <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.12.0/react.min.js"></script>
36 |   <script src="../react-pacman-progress.js"></script>
37 |   <script>
38 |     var SliderContainer = React.createClass({
39 |       displayName: "SliderContainer",
40 |       getInitialState: function() {
41 |         return {currentIndex: 0};
42 |       },
43 |       render: function() {
44 |         var slides = [
45 |           {color: '#37BFB7'},
46 |           {color: '#F48B7E'},
47 |           {color: '#94CC70'}
48 |         ]
49 |         return (
50 |           React.createElement("div", {className:"container", onClick:this.handleClick},
51 |             slides.map(function(slide, i) {
52 |         	    return React.createElement(Slide, {index: i, currentIndex: this.state.currentIndex, color: slide.color});
53 |             }.bind(this)),
54 |             React.createElement(PacmanProgress, {items: slides.length, currentIndex: this.state.currentIndex, onClick: this.handleClickPacman})
55 |           )
56 |         );
57 |       },
58 | 
59 |       handleClick: function(e) {
60 |         if (!e.defaultPrevented) {
61 |           this.setState({currentIndex: this.state.currentIndex + 1});
62 |         }
63 |       },
64 | 
65 |       handleClickPacman: function(index, isPacman, e) {
66 |         e.preventDefault();
67 |         this.setState({currentIndex: index});
68 |       }
69 |     });
70 |     var Slide = React.createClass({
71 |       displayName: "Slide",
72 | 
73 |       render: function() {
74 |         return (
75 |           React.createElement("div", {className:"slide", style:{
76 |             backgroundColor: this.props.color,
77 |             transform: "translate(" + (this.props.index - this.props.currentIndex) * 100 + "%, 0)"
78 |           }},"Click")
79 |         );
80 |       }
81 |     });
82 | 
83 |     React.render(React.createElement(SliderContainer, null), document.getElementById("pacman-progress"));
84 |   </script>
85 | </body>
86 | </html>
87 | 


--------------------------------------------------------------------------------
/react-pacman-progress.js:
--------------------------------------------------------------------------------
 1 | ;(function (root, factory) {
 2 |   if (typeof module !== 'undefined' && module.exports) {
 3 |     module.exports = factory(require('react'));
 4 |   } else if (typeof define === 'function' && define.amd) {
 5 |     define(['react'], factory);
 6 |   } else {
 7 |     root.PacmanProgress = factory(root.React);
 8 |   }
 9 | })(this, function componentFactory(React) {
10 |   var PacmanProgress = React.createClass({displayName: 'PacmanProgress',
11 |     propTypes: {
12 |       classNamespace: React.PropTypes.string,
13 |       items: React.PropTypes.number.isRequired,
14 |       currentIndex: React.PropTypes.number.isRequired,
15 |       onClick: React.PropTypes.func
16 |     },
17 | 
18 |     getDefaultProps: function() {
19 |       return {
20 |         classNamespace: '',
21 |         onClick: function() {}
22 |       };
23 |     },
24 | 
25 |     getPacmanClass() {
26 |       return this.props.classNamespace +
27 |              'pacman ' +
28 |              this.props.classNamespace +
29 |              (this.props.currentIndex % 2 ? 'odd' : 'even');
30 |     },
31 | 
32 |     getProgressClass() {
33 |       const className = [this.props.classNamespace + 'pacman-progress'];
34 |       if (this.props.currentIndex >= this.props.items) {
35 |         className.push(this.props.classNamespace + 'complete');
36 |       } else {
37 |         className.push(this.props.classNamespace + 'not-complete');
38 |       }
39 |       return className.join(' ');
40 |     },
41 | 
42 |     getPointClass(i) {
43 |       const className = [this.props.classNamespace + 'point'];
44 |       if (this.props.currentIndex > i) {
45 |         className.push(this.props.classNamespace + 'done');
46 |       } else if (this.props.currentIndex === i) {
47 |         className.push(this.props.classNamespace + 'current');
48 |       } else {
49 |         className.push(this.props.classNamespace + 'not-done');
50 |       }
51 |       return className.join(' ');
52 |     },
53 | 
54 |     getPointPosition(i) {
55 |       const position = {
56 |         top: '-5px',
57 |         left: (5 + 20 * (i - this.props.items / 2)) + 'px'
58 |       };
59 |       return position;
60 |     },
61 | 
62 |     render: function() {
63 |       return (
64 |         React.createElement('div', {className: this.getProgressClass()},
65 |           React.createElement('div', {
66 |             className: this.getPacmanClass(),
67 |             style: this.getPointPosition(this.props.currentIndex),
68 |             onClick: this.props.onClick.bind(this, this.props.currentIndex, true)
69 |           }),
70 |             Array.apply(null, Array(this.props.items)).map(function(item, i) {
71 |               return (
72 |                 React.createElement('div', {
73 |                   className: this.getPointClass(i),
74 |                   style: this.getPointPosition(i),
75 |                   key: 'pacman-progress-' + i,
76 |                   onClick: this.props.onClick.bind(this, i, false)
77 |                 })
78 |               );
79 |             }.bind(this))
80 |         )
81 |       );
82 |     }
83 |   });
84 | 
85 |   return PacmanProgress;
86 | });
87 | 


--------------------------------------------------------------------------------