├── .gitignore
├── README.md
├── webpack.config.js
├── package.json
├── LICENSE
├── index.js
├── index.html
└── example.js


/.gitignore:
--------------------------------------------------------------------------------
1 | *~
2 | node_modules
3 | browser-bundle.js


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | react-fullscreen-component
2 | ==========================
3 | 
4 | Simple component that let's you create fullscreen toggles
5 | 
6 | Run `npm install` and `npm start` to compile the example, then open index.html.


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   cache: true,
 3 |   entry: './example',
 4 |   output: {
 5 |     filename: 'browser-bundle.js'
 6 |   },
 7 |   module: {
 8 |     loaders: [
 9 |       {test: /\.js$/, loader: 'jsx-loader'}
10 |     ]
11 |   }
12 | };


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-fullscreen-component",
 3 |   "version": "0.0.5",
 4 |   "description": "Simple component that let's you create fullscreen toggles",
 5 |   "main": "index.js",
 6 |   "repository": "jeroencoumans/react-fullscreen-component",
 7 |   "scripts": {
 8 |     "start": "webpack --progress --colors --watch",
 9 |     "test": "echo \"Error: no test specified\" && exit 1"
10 |   },
11 |   "author": "Jeroen Coumans <jeroencoumans@gmail.com>",
12 |   "license": "MIT",
13 |   "dependencies": {
14 |     "envify": "^1.*",
15 |     "react": "^0.*",
16 |     "screenfull": "jeroencoumans/screenfull.js#gh-pages"
17 |   },
18 |   "devDependencies": {
19 |     "webpack": "^1.*",
20 |     "jsx-loader": "^0.*"
21 |   }
22 | }
23 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2014 Jeroen Coumans
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | var screenfull = require('screenfull');
 2 | 
 3 | var FullscreenMixin = {
 4 | 
 5 |   getInitialState: function() {
 6 |     return {
 7 |       hasFullscreen: false
 8 |     };
 9 |   },
10 | 
11 |   componentDidMount: function () {
12 |     var enabled = screenfull.enabled;
13 | 
14 |     if (enabled) {
15 |       document.addEventListener(screenfull.raw.fullscreenchange, this.onChangeFullscreen);
16 | 
17 |       this.setState({
18 |         hasFullscreen: enabled,
19 |         isFullscreen: screenfull.isFullscreen,
20 |         fullScreenElement: screenfull.element
21 |       });
22 |     }
23 |   },
24 | 
25 |   requestFullscreen: function (ref) {
26 |     if (ref && ref.getDOMNode) {
27 |       var elem = ref.getDOMNode();
28 |       screenfull.request(elem);
29 |     } else {
30 |       screenfull.request();
31 |     }
32 |   },
33 | 
34 |   exitFullscreen: function () {
35 |     screenfull.exit();
36 |   },
37 | 
38 |   onChangeFullscreen: function (e) {
39 |     var isFullscreen = screenfull.isFullscreen;
40 |     this.setState({
41 |       isFullscreen: isFullscreen,
42 |       fullScreenElement: screenfull.element
43 |     });
44 | 
45 |     if (isFullscreen) {
46 |       typeof this.onEnterFullscreen === 'function' && this.onEnterFullscreen(e);
47 |     } else {
48 |       typeof this.onExitFullscreen === 'function' && this.onExitFullscreen(e);
49 |     }
50 |   }
51 | };
52 | 
53 | module.exports = FullscreenMixin;
54 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html>
  3 |   <head>
  4 |     <title>React Fullscreen component</title>
  5 |     <style>
  6 |       html {
  7 |         font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  8 |         padding: 30px 10px 0 0;
  9 |         font-size: 20px;
 10 |         line-height: 1.4;
 11 |         color: #737373;
 12 |         background: #f0f0f0;
 13 |         -webkit-font-smoothing: antialiased;
 14 |       }
 15 | 
 16 |       hr {
 17 |         border: none;
 18 |         border-top: 1px solid #e6e6e6;
 19 |         margin: 20px 0;
 20 |       }
 21 | 
 22 |       a {
 23 |         color: #666;
 24 |       }
 25 | 
 26 |       h1 {
 27 |         margin: 0;
 28 |         font-size: 40px;
 29 |         text-align: center;
 30 |       }
 31 | 
 32 |       h1 span {
 33 |         color: #bbb;
 34 |       }
 35 | 
 36 |       ul {
 37 |         padding: 0 0 0 40px;
 38 |         margin: 1em 0;
 39 |       }
 40 | 
 41 |       button {
 42 |         font-size: 13px;
 43 |       }
 44 | 
 45 |       nav {
 46 |         margin: 0 auto;
 47 |       }
 48 | 
 49 |       .container {
 50 |         width: 500px;
 51 |         margin: 0 auto;
 52 |       }
 53 | 
 54 |       #repo-link {
 55 |         text-align: center;
 56 |         text-decoration: none;
 57 |         display: block;
 58 |         position: absolute;
 59 |         top: 20px;
 60 |         left: 20px;
 61 |       }
 62 | 
 63 |       #social {
 64 |         margin: 10px auto;
 65 |         text-align: center;
 66 |       }
 67 | 
 68 |       #container {
 69 |         width: 500px;
 70 |         padding: 30px 20px;
 71 |         margin: 0 auto 50px auto;
 72 |         background: #fcfcfc;
 73 |         text-align: center;
 74 |         border: 1px solid #b3b3b3;
 75 |         border-radius: 4px;
 76 |         box-shadow: 0 1px 10px #a7a7a7, inset 0 1px 0 #fff;
 77 |       }
 78 | 
 79 |       #container ul {
 80 |         padding: 0;
 81 |         margin: 40px 0 0 0;
 82 |         list-style: none;
 83 |       }
 84 | 
 85 |       #demo-img {
 86 |         width: 100%;
 87 |         height: auto;
 88 |       }
 89 | 
 90 |       #demo-img,
 91 |       #demo-video {
 92 |         cursor: pointer;
 93 |       }
 94 | 
 95 |       header p {
 96 |         font-size: 17px;
 97 |       }
 98 |     </style>
 99 |   </head>
100 |   <body>
101 |     <div id="content"></div>
102 |     <script src="browser-bundle.js"></script>
103 |   </body>
104 | </html>


--------------------------------------------------------------------------------
/example.js:
--------------------------------------------------------------------------------
  1 | /** @jsx React.DOM */
  2 | var React = require('react');
  3 | var FullscreenMixin = require('./index');
  4 | 
  5 | if (typeof window !== undefined) {
  6 |   window.React = React;
  7 | }
  8 | 
  9 | var MyComponent = React.createClass({
 10 |   mixins: [FullscreenMixin],
 11 |   getInitialState: function () {
 12 |     return {
 13 |       hasIframe: false
 14 |     }
 15 |   },
 16 |   toggleFullscreen: function (e, ref) {
 17 |     e.preventDefault();
 18 | 
 19 |     this.state.isFullscreen ? this.exitFullscreen() : this.requestFullscreen(ref ? ref : this.refs.container);
 20 |   },
 21 |   onEnterFullscreen: function (e) {
 22 |     console.log('Entered fullscreen', e);
 23 |   },
 24 |   onExitFullscreen: function (e) {
 25 |     console.log('Exited fullscreen', e);
 26 |     if (this.state.hasIframe) {
 27 |       this.setState({ hasIframe: false });
 28 |       document.body.style.overflow = 'auto';
 29 |     }
 30 |   },
 31 |   handleRequest: function () {
 32 |     this.requestFullscreen(this.refs.container);
 33 |   },
 34 |   handleImg: function (e) {
 35 |     this.toggleFullscreen(e, this.refs.demoImg);
 36 |   },
 37 |   handleVideo: function (e) {
 38 |     this.toggleFullscreen(e, this.refs.demoVideo);
 39 |   },
 40 |   handleIframe: function (e) {
 41 |     if (this.state.isFullscreen) {
 42 |       this.setState({ hasIframe: true });
 43 |       document.body.style.overflow = 'hidden';
 44 |     }
 45 |   },
 46 |   renderIframe: function () {
 47 |     var style = {
 48 |       'position': 'absolute',
 49 |       'top:': 0,
 50 |       'left': 0,
 51 |       'bottom': 0,
 52 |       'right': 0,
 53 |       'width': '100%',
 54 |       'height': '100%',
 55 |       'display': this.state.hasIframe ? 'block' : 'none'
 56 |     }
 57 | 
 58 |     return this.state.hasIframe ? (
 59 |       <iframe frameBorder='no' id='external-iframe' style={style} src='http://bbc.com' />
 60 |     ) : null
 61 |   },
 62 |   render: function () {
 63 |     var hasFullscreen = this.state.hasFullscreen;
 64 |     var fullScreenElement = this.state.fullScreenElement;
 65 | 
 66 |     return (
 67 |       <section id='container' className='container' ref='container'>
 68 |         <header>
 69 |           <h1>React mixin for screenfull<span>.js</span></h1>
 70 |           <p>Simple wrapper for cross-browser usage of the JavaScript <a href='https://developer.mozilla.org/en/DOM/Using_full-screen_mode'>Fullscreen API</a>, which lets you bring the page or any element into fullscreen. Smoothens out the browser implementation differences, so you don't have too.</p>
 71 |           <p>This page is shamelessly stolen from <a href='http://sindresorhus.com/screenfull.js/'>screenfull.js</a>, modified to use the React mixin.</p>
 72 |         </header>
 73 |         <hr />
 74 |         <section>
 75 |           <p>Try out the Fullscreen API</p>
 76 |           <button id='request' onClick={this.handleRequest}>Request</button>
 77 |           <button id='exit' onClick={this.exitFullscreen}>Exit</button>
 78 |           <button id='toggle' onClick={this.toggleFullscreen}>Toggle</button>
 79 |           <button id='request2' onClick={this.requestFullscreen}>Request document</button>
 80 |         </section>
 81 |         <section>
 82 |           <ul>
 83 |             <li id='supported'>Supported/allowed: {this.state.hasFullscreen ? 'true' : 'false'}</li>
 84 |             <li id='status'>Is fullscreen: {this.state.isFullscreen ? 'true' : 'false'}</li>
 85 |             <li id='element'>Element: {fullScreenElement ? fullScreenElement.localName + (fullScreenElement.id ? '#' + fullScreenElement.id : '') : ''}</li>
 86 |           </ul>
 87 |         </section>
 88 |         <input autofocus placeholder='Keyboard test' />
 89 |         <hr />
 90 |         <section>
 91 |           <p>How to open external pages while in fullscreen</p>
 92 |           <button id='iframe' onClick={this.handleIframe}>Click when in fullscreen</button>
 93 |         </section>
 94 |         <hr />
 95 |         <section>
 96 |           <p>Click the image to make it fullscreen</p>
 97 |           <img width='500' height='206' id='demo-img' ref='demoImg' onClick={this.handleImg} src='http://sindresorhus.com/img/slideshow/4.jpg' />
 98 |         </section>
 99 |         <hr />
100 |         <section>
101 |           <p>Click the video to make it fullscreen</p>
102 |           <video id='demo-video' ref='demoVideo' onClick={this.handleVideo} width='500' height='281' poster='http://wroug.com/stuff/host/demo-video/poster-500px.jpg' controls>
103 |             <source src='http://wroug.com/stuff/host/demo-video/midnight_sun_sv1_720p.mp4' />
104 |             <source src='http://wroug.com/stuff/host/demo-video/midnight_sun_sv1_720p.webm' />
105 |           </video>
106 |           <small>Press Esc to exit</small>
107 |           <p><small>Video by <a href='http://scientifantastic.com'>Joe Capra</a></small></p>
108 |         </section>
109 |         {this.renderIframe()}
110 |       </section>
111 |     )
112 |   }
113 | });
114 | 
115 | React.renderComponent(
116 |   <MyComponent />,
117 |   document.getElementById('content')
118 | );


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