├── .babelrc
├── index.js
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── components
    │   ├── index.js
    │   ├── Progress.js
    │   ├── util.js
    │   ├── Step.js
    │   ├── Hint.js
    │   └── Impress.js
    ├── images
    │   └── swipe-right.png
    ├── index.js
    ├── App.test.js
    ├── App.js
    ├── demo
    │   └── impress-demo.js
    └── styles
    │   └── _base.scss
├── styles
    ├── react-impressjs.map
    ├── react-impressjs.css
    └── impress-demo.css
├── .travis.yml
├── .gitignore
├── .npmignore
├── config
    ├── jest
    │   ├── fileTransform.js
    │   └── cssTransform.js
    ├── polyfills.js
    ├── env.js
    ├── webpack.config.impress.js
    ├── paths.js
    ├── webpack.config.dev.js
    ├── webpack.config.prod.js
    └── webpack.config.impress.prod.js
├── scripts
    ├── test.js
    ├── build.js
    ├── build_impress.js
    └── start.js
├── LICENSE
├── package.json
└── README.md


/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |     "presets": ["es2015", "stage-0", "react"]
3 | }


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 | 
3 | module.exports = require('./lib');


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GeorgioWan/react-impressjs/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/components/index.js:
--------------------------------------------------------------------------------
1 | export {default as Impress} from './Impress';
2 | export {default as Step}    from './Step';


--------------------------------------------------------------------------------
/src/images/swipe-right.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GeorgioWan/react-impressjs/HEAD/src/images/swipe-right.png


--------------------------------------------------------------------------------
/styles/react-impressjs.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sources":[],"names":[],"mappings":"","file":"static/css/main.1cce37d7.css","sourceRoot":""}


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import App from './App';
4 | 
5 | ReactDOM.render(
6 |   <App />,
7 |   document.getElementById('root')
8 | );
9 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
 1 | language: node_js
 2 | 
 3 | notifications:
 4 |   email:
 5 |   - georgio.wan@gmail.com
 6 | 
 7 | node_js:
 8 |   - 7.6.0
 9 |   
10 | npm:
11 |   - 4
12 | 
13 | before_install:
14 |   - npm install yarn -g
15 |   - yarn install


--------------------------------------------------------------------------------
/src/App.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import App from './App';
4 | 
5 | it('renders without crashing', () => {
6 |   const div = document.createElement('div');
7 |   ReactDOM.render(<App />, div);
8 | });
9 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/ignore-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | 
 6 | # testing
 7 | /coverage
 8 | 
 9 | # production
10 | /build
11 | /lib
12 | 
13 | # misc
14 | .DS_Store
15 | .env
16 | npm-debug.log*
17 | yarn-debug.log*
18 | yarn-error.log*
19 | 
20 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/ignore-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | 
 6 | # testing
 7 | /coverage
 8 | 
 9 | # production
10 | /build
11 | 
12 | # misc
13 | .DS_Store
14 | .env
15 | npm-debug.log*
16 | yarn-debug.log*
17 | yarn-error.log*
18 | 
19 | /src
20 | /public
21 | /scripts
22 | /config
23 | 
24 | 


--------------------------------------------------------------------------------
/config/jest/fileTransform.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | 
 3 | // This is a custom Jest transformer turning file imports into filenames.
 4 | // http://facebook.github.io/jest/docs/tutorial-webpack.html
 5 | 
 6 | module.exports = {
 7 |   process(src, filename) {
 8 |     return 'module.exports = ' + JSON.stringify(path.basename(filename)) + ';';
 9 |   },
10 | };
11 | 


--------------------------------------------------------------------------------
/config/jest/cssTransform.js:
--------------------------------------------------------------------------------
 1 | // This is a custom Jest transformer turning style imports into empty objects.
 2 | // http://facebook.github.io/jest/docs/tutorial-webpack.html
 3 | 
 4 | module.exports = {
 5 |   process() {
 6 |     return 'module.exports = {};';
 7 |   },
 8 |   getCacheKey(fileData, filename) {
 9 |     // The output is always the same.
10 |     return 'cssTransform';
11 |   },
12 | };
13 | 


--------------------------------------------------------------------------------
/scripts/test.js:
--------------------------------------------------------------------------------
 1 | process.env.NODE_ENV = 'test';
 2 | process.env.PUBLIC_URL = '';
 3 | 
 4 | // Load environment variables from .env file. Suppress warnings using silent
 5 | // if this file is missing. dotenv will never modify any environment variables
 6 | // that have already been set.
 7 | // https://github.com/motdotla/dotenv
 8 | require('dotenv').config({silent: true});
 9 | 
10 | const jest = require('jest');
11 | const argv = process.argv.slice(2);
12 | 
13 | // Watch unless on CI or in coverage mode
14 | if (!process.env.CI && argv.indexOf('--coverage') < 0) {
15 |   argv.push('--watch');
16 | }
17 | 
18 | 
19 | jest.run(argv);
20 | 


--------------------------------------------------------------------------------
/config/polyfills.js:
--------------------------------------------------------------------------------
 1 | if (typeof Promise === 'undefined') {
 2 |   // Rejection tracking prevents a common issue where React gets into an
 3 |   // inconsistent state due to an error, but it gets swallowed by a Promise,
 4 |   // and the user has no idea what causes React's erratic future behavior.
 5 |   require('promise/lib/rejection-tracking').enable();
 6 |   window.Promise = require('promise/lib/es6-extensions.js');
 7 | }
 8 | 
 9 | // fetch() polyfill for making API calls.
10 | require('whatwg-fetch');
11 | 
12 | // Object.assign() is commonly used with React.
13 | // It will use the native implementation if it's present and isn't buggy.
14 | Object.assign = require('object-assign');
15 | 


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import { Impress, Step } from './components';
 3 | //import { Impress, Step } from '../';
 4 | import './styles/_base.scss';
 5 | //import '../styles/impress-demo.css';
 6 | 
 7 | import demo from './demo/impress-demo';
 8 | 
 9 | class App extends Component {
10 |   render() {
11 |     return (
12 |       <Impress progress={true}>
13 |       {
14 |         demo.map( (d, index ) => {
15 |           return (
16 |             React.createElement( Step, {
17 |               id: d.id, 
18 |               className: d.className,
19 |               data: d.data,
20 |               key: index
21 |             }, 
22 |             d.content.map( (child, index) => {
23 |               return (
24 |                 React.cloneElement( child, {
25 |                   id: child.id,
26 |                   className: child.className,
27 |                   key: index
28 |                 })
29 |               );
30 |             }))
31 |             
32 |           );
33 |         })
34 |       }
35 |       </Impress>
36 |     );
37 |   }
38 | }
39 | 
40 | export default App;
41 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright © 2017 GeorgioWan
 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.


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
 6 |     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
 7 |     <title>React-impressJS Demo</title>
 8 |   </head>
 9 |   <body>
10 |     <div id="root"></div>
11 |     
12 |     <div style="position:fixed; bottom:0px; margin: 5px 10px; pointer-events: auto">
13 |       <a class="github-button" href="https://github.com/GeorgioWan/react-impressjs/fork" data-icon="octicon-repo-forked" aria-label="Fork GeorgioWan/react-impressjs on GitHub">Fork</a>
14 |       <a class="github-button" href="https://github.com/GeorgioWan/react-impressjs" data-icon="octicon-star" data-count-href="/GeorgioWan/react-impressjs/stargazers" data-count-api="/repos/GeorgioWan/react-impressjs#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star GeorgioWan/react-impressjs on GitHub">Star</a>
15 |       <p style="color:rgba(0, 0, 0, 0.6);font-size:small;margin:3px;"><b>React-impressJS</b> © 2017<span style="margin:0 3px;color: #d2482e;">♥</span>OAwan</p>
16 |     </div>
17 |     <script async defer src="https://buttons.github.io/buttons.js"></script>
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/config/env.js:
--------------------------------------------------------------------------------
 1 | // Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
 2 | // injected into the application via DefinePlugin in Webpack configuration.
 3 | 
 4 | var REACT_APP = /^REACT_APP_/i;
 5 | 
 6 | function getClientEnvironment(publicUrl) {
 7 |   var raw = Object
 8 |     .keys(process.env)
 9 |     .filter(key => REACT_APP.test(key))
10 |     .reduce((env, key) => {
11 |       env[key] = process.env[key];
12 |       return env;
13 |     }, {
14 |       // Useful for determining whether we’re running in production mode.
15 |       // Most importantly, it switches React into the correct mode.
16 |       'NODE_ENV': process.env.NODE_ENV || 'development',
17 |       // Useful for resolving the correct path to static assets in `public`.
18 |       // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
19 |       // This should only be used as an escape hatch. Normally you would put
20 |       // images into the `src` and `import` them in code to get their paths.
21 |       'PUBLIC_URL': publicUrl
22 |     });
23 |   // Stringify all values so we can feed into Webpack DefinePlugin
24 |   var stringified = {
25 |     'process.env': Object
26 |       .keys(raw)
27 |       .reduce((env, key) => {
28 |         env[key] = JSON.stringify(raw[key]);
29 |         return env;
30 |       }, {})
31 |   };
32 | 
33 |   return { raw, stringified };
34 | }
35 | 
36 | module.exports = getClientEnvironment;
37 | 


--------------------------------------------------------------------------------
/src/components/Progress.js:
--------------------------------------------------------------------------------
 1 | import React, {Component} from 'react';
 2 | import {Line}             from 'rc-progress';
 3 | import PropTypes          from 'prop-types';
 4 | 
 5 | export default class Progress extends Component {
 6 |   render() {
 7 |     const {progress, stepsData, activeStep, stepsTotal} = this.props;
 8 |     const color_gold = '#e5b560',
 9 |           color_gray = '#3e4852';
10 |     const ua = navigator.userAgent.toLowerCase();
11 |     const progressWidth = (ua.search(/(iphone)|(ipod)|(android)/) === -1)
12 |         ? 0.2
13 |         : 1;
14 |     let currentStepIndex = Object.keys(stepsData).
15 |                                   findIndex((s) => s === activeStep.id) + 1;
16 |     let percent = parseInt(currentStepIndex / stepsTotal * 100, 10);
17 | 
18 |     return (
19 |         <div style={{
20 |           position: 'fixed',
21 |           bottom: '-3px',
22 |           width: '100%',
23 |           display: progress ? 'block' : 'none',
24 |         }}>
25 |           <p style={{
26 |             fontSize: 20,
27 |             color: color_gray,
28 |             textAlign: 'center',
29 |             opacity: .5,
30 |           }}>
31 |                     <span>
32 |                         {currentStepIndex}
33 |                       <span style={{paddingLeft: 1, fontSize: 13}}>{'/' +
34 |                       stepsTotal}</span>
35 |                     </span>
36 |           </p>
37 |           <Line percent={percent}
38 |                 strokeLinecap='square'
39 |                 strokeWidth={progressWidth} strokeColor={color_gold}
40 |                 trailWidth={progressWidth} trailColor={color_gray}/>
41 |         </div>
42 |     );
43 |   }
44 | }
45 | 
46 | Progress.propTypes = {
47 |   /**
48 |    * Progress of presentation
49 |    */
50 |   progress: PropTypes.bool,
51 | 
52 |   /**
53 |    * Steps data
54 |    */
55 |   stepsData: PropTypes.object,
56 | 
57 |   /**
58 |    * Object representing current step
59 |    */
60 |   activeStep: PropTypes.shape({
61 |     id: PropTypes.string,
62 |   }),
63 | 
64 |   /**
65 |    * Amount of steps
66 |    */
67 |   stepsTotal: PropTypes.number,
68 | };
69 | 


--------------------------------------------------------------------------------
/config/webpack.config.impress.js:
--------------------------------------------------------------------------------
 1 | var webpack = require('webpack');
 2 | var paths = require('./paths');
 3 | var ExtractTextPlugin = require("extract-text-webpack-plugin");
 4 | 
 5 | var publicPath = '/';
 6 | 
 7 | module.exports = {
 8 |   entry: [
 9 |     //index: paths.componentPath
10 |     //Impress: paths.impressPath,
11 |     //Step: paths.stepPath
12 |     require.resolve('./polyfills'),
13 |     paths.appIndexJs,
14 |   ],
15 |   output: {
16 |     path: paths.appDist,
17 |     pathinfo: true,
18 |     filename: '[name].js',
19 |     publicPath: publicPath
20 |   },
21 |   resolve: {
22 |     fallback: paths.nodePaths,
23 |     extensions: ['.js', '.json', '.jsx', ''],
24 |     alias: {
25 |       'react-native': 'react-native-web'
26 |     }
27 |   },
28 |   module: {
29 |     preLoaders: [
30 |       {
31 |         test: /\.(js|jsx)$/,
32 |         loader: 'eslint',
33 |         include: paths.appSrc,
34 |       }
35 |     ],
36 |     loaders: [
37 |       {
38 |         exclude: [
39 |           /\.html$/,
40 |           /\.(js|jsx)$/,
41 |           /\.css$/,
42 |           /\.json$/,
43 |           /\.svg$/,
44 |           /\.sass$/,
45 |           /\.scss$/
46 |           
47 |         ],
48 |         loader: 'url',
49 |         query: {
50 |           limit: 10000,
51 |           name: 'static/media/[name].[hash:8].[ext]'
52 |         }
53 |       },
54 |       {
55 |         test: /\.(js|jsx)$/,
56 |         include: paths.appSrc,
57 |         loader: 'babel',
58 |         query: {
59 |           cacheDirectory: true
60 |         }
61 |       },
62 |       {
63 |         test: /\.css$/,
64 |         loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
65 |       },
66 |       // Scss
67 |       {
68 |         test: /\.s[ac]ss$/,
69 |         include: paths.appSrc,
70 |         loader: ExtractTextPlugin.extract(['css', 'sass'])
71 |       },
72 |       {
73 |         test: /\.json$/,
74 |         loader: 'json'
75 |       },
76 |       {
77 |         test: /\.svg$/,
78 |         loader: 'file',
79 |         query: {
80 |           name: 'static/media/[name].[hash:8].[ext]'
81 |         }
82 |       }
83 |     ]
84 |   },
85 |   plugins: [
86 |     new ExtractTextPlugin("[name].css")
87 |   ]
88 | };
89 | 


--------------------------------------------------------------------------------
/src/components/util.js:
--------------------------------------------------------------------------------
 1 | export function toNumber(numeric, fallback) {
 2 |   return isNaN(numeric) ? (fallback || 0) : Number(numeric);
 3 | }
 4 | 
 5 | export function translate(data) {
 6 |   return ' translate3d(' + toNumber(data.x) + 'px, ' + toNumber(data.y) +
 7 |       'px, ' + toNumber(data.z) + 'px)';
 8 | }
 9 | 
10 | export function rotate(data, revert) {
11 |   let rX = ' rotateX(' + toNumber(data.rotateX) + 'deg) ',
12 |       rY = ' rotateY(' + toNumber(data.rotateY) + 'deg) ',
13 |       rZ = ' rotateZ(' + toNumber(data.rotateZ) + 'deg) ';
14 | 
15 |   return revert ? rZ + rY + rX : rX + rY + rZ;
16 | }
17 | 
18 | export function scale(data) {
19 |   return ' scale(' + toNumber(data, 1) + ')';
20 | }
21 | 
22 | export function perspective(p) {
23 |   return ' perspective(' + p + 'px) ';
24 | }
25 | 
26 | export function computeWindowScale(config) {
27 |   let hScale = window.innerHeight / config.height,
28 |       wScale = window.innerWidth / config.width,
29 |       scale  = hScale > wScale ? wScale : hScale;
30 | 
31 |   if (config.maxScale && scale > config.maxScale) {
32 |     scale = config.maxScale;
33 |   }
34 | 
35 |   if (config.minScale && scale < config.minScale) {
36 |     scale = config.minScale;
37 |   }
38 | 
39 |   return scale;
40 | }
41 | 
42 | export const pfx = (() => {
43 |   let style    = document.createElement('dummy').style,
44 |       prefixes = 'Webkit Moz O ms Khtml'.split(' '),
45 |       memory   = {};
46 | 
47 |   return (prop) => {
48 |     if (typeof memory[prop] === 'undefined') {
49 |       let ucProp = prop.charAt(0).toUpperCase() + prop.substr(1),
50 |           props  = (prop + ' ' + prefixes.join(ucProp + ' ') + ucProp).split(
51 |               ' ');
52 | 
53 |       memory[prop] = null;
54 |       for (let i in props) {
55 |         if (style[props[i]] !== undefined) {
56 |           memory[prop] = props[i];
57 |           break;
58 |         }
59 |       }
60 |     }
61 | 
62 |     return memory[prop];
63 |   };
64 | })();
65 | 
66 | export function css(el, props) {
67 |   for (let key in props) {
68 |     if (props.hasOwnProperty(key)) {
69 |       let pkey = pfx(key);
70 |       if (pkey !== null) {
71 |         el.style[pkey] = props[key];
72 |       }
73 |     }
74 |   }
75 |   return el;
76 | }
77 | 
78 | export function throttle(fn, delay) {
79 |   let timer = null;
80 |   return function() {
81 |     let context = this, args = arguments;
82 |     clearTimeout(timer);
83 |     timer = setTimeout(function() {
84 |       fn.apply(context, args);
85 |     }, delay);
86 |   };
87 | }
88 | 
89 | export function getElementFromHash(stepsData) {
90 |   let id = window.location.hash.replace(/^#\/?/, '');
91 |   return stepsData[id];
92 | }
93 | 


--------------------------------------------------------------------------------
/config/paths.js:
--------------------------------------------------------------------------------
 1 | var path = require('path');
 2 | var fs = require('fs');
 3 | var url = require('url');
 4 | 
 5 | // Make sure any symlinks in the project folder are resolved:
 6 | // https://github.com/facebookincubator/create-react-app/issues/637
 7 | var appDirectory = fs.realpathSync(process.cwd());
 8 | function resolveApp(relativePath) {
 9 |   return path.resolve(appDirectory, relativePath);
10 | }
11 | 
12 | // We support resolving modules according to `NODE_PATH`.
13 | // This lets you use absolute paths in imports inside large monorepos:
14 | // https://github.com/facebookincubator/create-react-app/issues/253.
15 | 
16 | // It works similar to `NODE_PATH` in Node itself:
17 | // https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
18 | 
19 | // We will export `nodePaths` as an array of absolute paths.
20 | // It will then be used by Webpack configs.
21 | // Jest doesn’t need this because it already handles `NODE_PATH` out of the box.
22 | 
23 | // Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.
24 | // Otherwise, we risk importing Node.js core modules into an app instead of Webpack shims.
25 | // https://github.com/facebookincubator/create-react-app/issues/1023#issuecomment-265344421
26 | 
27 | var nodePaths = (process.env.NODE_PATH || '')
28 |   .split(process.platform === 'win32' ? ';' : ':')
29 |   .filter(Boolean)
30 |   .filter(folder => !path.isAbsolute(folder))
31 |   .map(resolveApp);
32 | 
33 | var envPublicUrl = process.env.PUBLIC_URL;
34 | 
35 | function ensureSlash(path, needsSlash) {
36 |   var hasSlash = path.endsWith('/');
37 |   if (hasSlash && !needsSlash) {
38 |     return path.substr(path, path.length - 1);
39 |   } else if (!hasSlash && needsSlash) {
40 |     return path + '/';
41 |   } else {
42 |     return path;
43 |   }
44 | }
45 | 
46 | function getPublicUrl(appPackageJson) {
47 |   return envPublicUrl || require(appPackageJson).homepage;
48 | }
49 | 
50 | // We use `PUBLIC_URL` environment variable or "homepage" field to infer
51 | // "public path" at which the app is served.
52 | // Webpack needs to know it to put the right <script> hrefs into HTML even in
53 | // single-page apps that may serve index.html for nested URLs like /todos/42.
54 | // We can't use a relative path in HTML because we don't want to load something
55 | // like /todos/42/static/js/bundle.7289d.js. We have to know the root.
56 | function getServedPath(appPackageJson) {
57 |   var publicUrl = getPublicUrl(appPackageJson);
58 |   var servedUrl = envPublicUrl || (
59 |     publicUrl ? url.parse(publicUrl).pathname : '/'
60 |   );
61 |   return ensureSlash(servedUrl, true);
62 | }
63 | 
64 | // config after eject: we're in ./config/
65 | module.exports = {
66 |   appBuild: resolveApp('build'),
67 |   appDist: resolveApp('dist'),
68 |   appPublic: resolveApp('public'),
69 |   appHtml: resolveApp('public/index.html'),
70 |   appIndexJs: resolveApp('src/index.js'),
71 |   appPackageJson: resolveApp('package.json'),
72 |   appSrc: resolveApp('src'),
73 |   yarnLockFile: resolveApp('yarn.lock'),
74 |   testsSetup: resolveApp('src/setupTests.js'),
75 |   appNodeModules: resolveApp('node_modules'),
76 |   ownNodeModules: resolveApp('node_modules'),
77 |   nodePaths: nodePaths,
78 |   publicUrl: getPublicUrl(resolveApp('package.json')),
79 |   servedPath: getServedPath(resolveApp('package.json')),
80 |   impressPath: resolveApp('src/components/Impress.js'),
81 |   stepPath: resolveApp('src/components/Step.js'),
82 |   componentPath: resolveApp('src/components/index.js')
83 | };
84 | 


--------------------------------------------------------------------------------
/src/components/Step.js:
--------------------------------------------------------------------------------
  1 | import React, {Component}                   from 'react';
  2 | import update                               from 'react/lib/update';
  3 | import {rotate, scale, toNumber, translate} from './util';
  4 | 
  5 | const defaultData = {
  6 |   x: 0,
  7 |   y: 0,
  8 |   z: 0,
  9 |   rotateX: 0,
 10 |   rotateY: 0,
 11 |   rotateZ: 0,
 12 |   scale: 1,
 13 | };
 14 | 
 15 | export default class Step extends Component {
 16 |   constructor(props) {
 17 |     super(props);
 18 | 
 19 |     const {className, duration} = this.props;
 20 | 
 21 |     this.state = {
 22 |       id: this.gtepID(),
 23 |       className: className ? ('step ' + className) : 'step',
 24 |       data: this.getData(),
 25 |       duration: duration ? duration : 1000,
 26 |       isPresented: false,
 27 |     };
 28 |   }
 29 | 
 30 |   componentDidMount() {
 31 |     const {initStep} = this.props;
 32 | 
 33 |     initStep(this.state);
 34 |   }
 35 | 
 36 |   componentWillReceiveProps(nextProps) {
 37 |     const {id, isPresented} = this.state;
 38 | 
 39 |     if (id === nextProps.activeStep.id && !isPresented)
 40 |       this.setState(update(this.state, {
 41 |         isPresented: {
 42 |           $set: true,
 43 |         },
 44 |       }));
 45 |   }
 46 | 
 47 |   // Step's Event
 48 |   handleClick(e) {
 49 |     const {goto} = this.props;
 50 |     let target = e.target;
 51 | 
 52 |     while (!target.classList.contains('step') &&
 53 |     !target.classList.contains('active') &&
 54 |     !target.classList.contains('oi-step-element') &&
 55 |     target !== document.documentElement) {
 56 |       target = target.parentNode;
 57 |     }
 58 | 
 59 |     if (target !== document.documentElement)
 60 |       if (target.classList.contains('step'))
 61 |         goto(this.state, this.state.duration);
 62 |   }
 63 | 
 64 |   // Step's ID, ClassName, Style
 65 |   gtepID() {
 66 |     const {id, idHelper} = this.props;
 67 | 
 68 |     return id || ('step-' + idHelper);
 69 |   }
 70 | 
 71 |   getClassName() {
 72 |     const {activeStep} = this.props;
 73 |     const {id, className, isPresented} = this.state;
 74 | 
 75 |     if (id === activeStep.id)
 76 |       return className + ' active present';
 77 |     else if (isPresented)
 78 |       return className + ' past';
 79 |     else
 80 |       return className + ' future';
 81 |   }
 82 | 
 83 |   getData() {
 84 |     const {data} = this.props;
 85 | 
 86 |     return data ? {
 87 |       x: toNumber(data.x),
 88 |       y: toNumber(data.y),
 89 |       z: toNumber(data.z),
 90 |       rotateX: toNumber(data.rotateX),
 91 |       rotateY: toNumber(data.rotateY),
 92 |       rotateZ: toNumber(data.rotateZ || data.rotate),
 93 |       scale: toNumber(data.scale, 1),
 94 |     } : defaultData;
 95 |   }
 96 | 
 97 |   getStyle() {
 98 |     const {data} = this.state;
 99 | 
100 |     let _stepStyle = {
101 |       position: 'absolute',
102 |       transform: 'translate(-50%, -50%) ',
103 |       transformStyle: 'preserve-3d',
104 |     };
105 | 
106 |     _stepStyle.transform += translate(data ? data : defaultData) +
107 |         rotate(data ? data : defaultData) +
108 |         scale(data.scale ? data.scale : defaultData);
109 | 
110 |     return _stepStyle;
111 |   }
112 | 
113 |   render() {
114 |     const {children} = this.props;
115 |     const {id} = this.state;
116 | 
117 |     const _stepClassName = this.getClassName();
118 |     const _stepStyle = this.getStyle();
119 | 
120 |     return (
121 |         <div id={id}
122 |              className={_stepClassName}
123 |              style={_stepStyle}
124 |              onClick={this.handleClick.bind(this)}>
125 |           {children}
126 |         </div>
127 |     );
128 |   }
129 | }


--------------------------------------------------------------------------------
/src/components/Hint.js:
--------------------------------------------------------------------------------
 1 | import React, {Component} from 'react';
 2 | 
 3 | export default class Hint extends Component {
 4 |   render() {
 5 |     const {hint, stepsData, activeStep, hintMessage} = this.props;
 6 |     const ua = navigator.userAgent.toLowerCase();
 7 |     const isMobile = (ua.search(/(iphone)|(ipod)|(android)/) === -1);
 8 | 
 9 |     // Swipe-right from www.flaticon.com
10 |     const swipeRight = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAACVVBMVEUAAAA+Rk8+SFI+SVI+SFI+SFI+SFI+SFI7Tk49SVE+SFI/SVA+SFE+SFI+SFE9SFE+SFI+SFI9SFFASFE+SVI/R1JARlNASVI/SFI+SVJJSUkrVVU+SFI+SFI9SFI/R1Q+SFI/SVNDQ1E+SFI7SFU+R1M+SVJAQEBASlM+SlI+SFI/SFI3SVs+SFI+RVMzM2Y+SFI/SVJCSlI+R1I+R1M/R1I+RlU+SFIzTU0+R1IAgIA9R1I+SFI9SVI+SFI+SVM+SFI9SVI6RlE+SFI7RU4+SFI+SFM9R1M+SFE/SFJAR1E+SFI+SFE8R1E+SFI5R1U9R1E9SFE+SFI+SFI+SVE+SFM/SFE+SFM+SFI+SFM+SVE+SVRAQFVCSVA7R1M+SFJGRl0+SFI+SVE9R1M/R1E9R1I8SlM+SFI+SFI9R1EAAAA+SFI+SVI+R1M+SFI9SVJERFU+SFE9SFI+SFJAUFA9SFQ+SFI+SVE+SVNVVVU+SFI9SFM+SFJAQGA/SVM+SFI9SFE9SFI+SFM9SVU9R1I+SFI5VVU8RFU+SFI+R1E/SFI9R1E+SFI+SVM+R1I+R1I9SFM+SFI+SFJASFQ9SFJASlA/SFE+SFE/SVFAR1U9SFM+SFI9R1I9SVI/R1I+SFI+SVE+RlQ/SFE/R1I9SVI+SFFAR1M+SFI+SFM9R1BCTFU8SlE/SFM9SVI/SFI+S1E+Sk8+SFI/SFM/SFFDQ04+SFI+SFI+R1M+R1I9SFE9R1I+SFI+SFI+SFI/R1I8S0s/SFI+R1I9SFI+R1I+SFM+SFIAAADsccMoAAAAxXRSTlMAHWel4+vEfw0/tEnxyYdx/PeNPNpdKDiG6AcGsaS7Pf1pE/gniNMEND7XNQ75JQXbbR/WtnYhxQrvAmTHcNFi5zsW/hq9eJrCakjevC/7EoGmgM5elFXSfLB3RgwjK/YLsnRTYRk38L5oAeRXb8aJD7nc+hBD3VsxA8tc7QhN9L95rSp99Qke2Z3QT817oah15k5AYDBu1WUkLuWWhXriQjqjr1SgROmLNhsmjp6fKS2ZcjkXY7VWWlgy8+yuQRHUc7eP7tmoxvwAAAABYktHRACIBR1IAAAACXBIWXMAAA3XAAAN1wFCKJt4AAAAB3RJTUUH4QQMERcOUUUbKQAAA3pJREFUWMOVlvdfFFcUxZ9GLMGydhSRVSOIYLAFFUTRtSsYRVQSy5oikTWJCooFxUTB3tHEJJqY2DuWGHvL9//K3XVWhux782bPL3M+7+w5O3Nfu0q50K79Bx1SOnbqrDTo8mF7ZUNqV2JISdWI3aC7xd8jgIOeXRLVXtgSessv+vTt1z9tAHQYmCCnD7IlZMDg2NdnBmGISjph6DACH72jwyErRrJH9HchZ6RnQi50c2jeKPhYnvmjScQYU8BYGBfn4+ETeRRo/EwwBUyESYUOL4LJ0Wdxx8luTIkGTDV+QwlMc+j0IKEZiX8xU/yzzFWcDb3ifA7MTdav5sH8OC+GBcn6Vbos5NLWipYtbCt/avMrtQgWx3k5LGmrVlj9aiksi/PlUNlWXfjZ5xa/WtETVjp8FawO2wwJWANfxHkf+DLpgK9c60z2Q0bSAUMDhL52+Fqoyldq4Krc9CQSvoF1Dq2OwPpvs2RnD/vu+w1+A8bAxjivcG2gTaU+A9pBTa3DN8eswS3Logfd6uK6oq3bfCRshx0Oza6HSNFOpcK76t+9R8Nu+7z8AD/GeXeynIruiTifEtprC+gHjU0OLyx9/877KvevOXBQCkpG2JIgx94hk1YrBxVlh494ZqTBUaOYfyz2ISV1HgEjoD7bqBYePxGbmkPmgJOin/J6xYnNm2Q+TpvkM0FbgJRC6vSTQWsWe+RnZcHZKvhF/3q/ylIO2/xK/QbntMJ5+H2n3a/+gNFaQS6OZh9+tS0F9mjGwwGCnf0ERJuNC5rhTNeh6o350FszXOS1CtugAXI0w3Ik/unL3ySzXaAZr4O/fAXIvVWvG9/c2mJ446I0Q7rx2hA1YT8Bl2C4VtgPl334q69Aqla5Cot8BFyDAfotf30UgRv2ALnobxqkW3DbHlDe2kf8H3dClBXY/HfhoFGshBZbgFxZ94ziBQjc9/aHu1L2wCwvkE7Le0c+hL895LFVth0lt98jL/0f2SiPPfQn0tB6n1rS9TfmmuUWa5nzZEFfMc7liqf6w8iNs89gpknMgS3KhkxpKe4atB3w3Bqgnpu/84h5H7jwQur4Ui9JDc/YA9QreK1X3nj0Dy6sk1IVapVx5p3oRljW4y6dUC0H+gYfAeqt9IbTEofz78EJP361719M8DEJUZyqMfhf5fkLUJktkUR3cGRaQgX+A9+U00T4J6SQAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE3LTA0LTEyVDE3OjIzOjE0KzAyOjAwNwWLpwAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxNy0wNC0xMlQxNzoyMzoxNCswMjowMEZYMxsAAAAZdEVYdFNvZnR3YXJlAHd3dy5pbmtzY2FwZS5vcmeb7jwaAAAAAElFTkSuQmCC';
11 | 
12 |     // If current Step is first one, let hint show up.
13 |     const isFirstStep = Object.keys(stepsData).
14 |                                findIndex((s) => s === activeStep.id) === 0;
15 | 
16 |     return (
17 |         <div className={isFirstStep ? 'show' : ''}
18 |              style={{display: hint ? 'block' : 'none'}}>
19 |           {
20 |             isMobile ?
21 |                 <div className="hint">{hintMessage}</div>
22 |                 :
23 |                 <div className="mobile-hint">
24 |                   <img src={swipeRight} role="presentation"/>
25 |                   <span><b>Swipe</b> to navigate</span>
26 |                 </div>
27 |           }
28 |         </div>
29 |     );
30 |   }
31 | }
32 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "react-impressjs",
  3 |   "version": "1.1.0",
  4 |   "license": "MIT",
  5 |   "author": "GeorgioWan <georgio.wan@gmail.com> (http://github.com/georgiowan)",
  6 |   "contributors": [
  7 |     {
  8 |       "name": "Bartłomiej Czyż",
  9 |       "email": "bartek@czyz.it"
 10 |     }
 11 |   ],
 12 |   "keywords": [
 13 |     "react",
 14 |     "reactjs",
 15 |     "impress",
 16 |     "presentation"
 17 |   ],
 18 |   "repository": {
 19 |     "type": "git",
 20 |     "url": "https://github.com/georgiowan/react-impressjs"
 21 |   },
 22 |   "homepage": "https://oawan.me/react-impressjs",
 23 |   "bugs": {
 24 |     "url": "https://github.com/georgiowan/react-impressjs/issues"
 25 |   },
 26 |   "dependencies": {
 27 |     "rc-progress": "^2.1.0",
 28 |     "react": "^15.4.2",
 29 |     "react-dom": "^15.4.2"
 30 |   },
 31 |   "devDependencies": {
 32 |     "autoprefixer": "6.7.2",
 33 |     "babel-cli": "^6.24.0",
 34 |     "babel-core": "6.22.1",
 35 |     "babel-eslint": "7.1.1",
 36 |     "babel-jest": "18.0.0",
 37 |     "babel-loader": "6.2.10",
 38 |     "babel-preset-es2015": "^6.24.0",
 39 |     "babel-preset-react": "^6.23.0",
 40 |     "babel-preset-react-app": "^2.1.1",
 41 |     "babel-preset-stage-0": "^6.22.0",
 42 |     "babel-runtime": "^6.20.0",
 43 |     "case-sensitive-paths-webpack-plugin": "1.1.4",
 44 |     "chalk": "1.1.3",
 45 |     "connect-history-api-fallback": "1.3.0",
 46 |     "cross-spawn": "4.0.2",
 47 |     "css-loader": "0.26.1",
 48 |     "detect-port": "1.0.1",
 49 |     "dotenv": "2.0.0",
 50 |     "eslint": "3.8.1",
 51 |     "eslint-config-react-app": "^0.5.2",
 52 |     "eslint-loader": "1.6.0",
 53 |     "eslint-plugin-flowtype": "2.21.0",
 54 |     "eslint-plugin-import": "2.0.1",
 55 |     "eslint-plugin-jsx-a11y": "2.2.3",
 56 |     "eslint-plugin-react": "6.4.1",
 57 |     "extract-text-webpack-plugin": "1.0.1",
 58 |     "file-loader": "0.10.0",
 59 |     "filesize": "3.3.0",
 60 |     "fs-extra": "0.30.0",
 61 |     "gzip-size": "3.0.0",
 62 |     "html-webpack-plugin": "2.24.0",
 63 |     "http-proxy-middleware": "0.17.3",
 64 |     "jest": "18.1.0",
 65 |     "json-loader": "0.5.4",
 66 |     "node-sass": "^4.5.0",
 67 |     "object-assign": "4.1.1",
 68 |     "postcss-loader": "1.2.2",
 69 |     "promise": "7.1.1",
 70 |     "prop-types": "^15.6.1",
 71 |     "react-dev-utils": "^0.5.1",
 72 |     "recursive-readdir": "2.1.1",
 73 |     "rimraf": "^2.6.1",
 74 |     "sass-loader": "^6.0.2",
 75 |     "strip-ansi": "3.0.1",
 76 |     "style-loader": "0.13.1",
 77 |     "url-loader": "0.5.7",
 78 |     "webpack": "^1.14.0",
 79 |     "webpack-dev-server": "1.16.2",
 80 |     "webpack-manifest-plugin": "1.1.0",
 81 |     "whatwg-fetch": "2.0.2"
 82 |   },
 83 |   "scripts": {
 84 |     "build-css": "node-sass src/ -o src/",
 85 |     "watch-css": "npm run build-css && node-sass src/ -o src/ --watch",
 86 |     "start": "node scripts/start.js",
 87 |     "build": "node scripts/build.js",
 88 |     "test": "node scripts/test.js --env=jsdom",
 89 |     "ri-dev": "NODE_ENV='development' webpack --progress --colors --config ./config/webpack.config.impress.js",
 90 |     "ri-build": "node scripts/build_impress.js",
 91 |     "prepublish": "rimraf lib && babel src/components --out-dir lib --source-maps --copy-files"
 92 |   },
 93 |   "jest": {
 94 |     "collectCoverageFrom": [
 95 |       "src/**/*.{js,jsx}"
 96 |     ],
 97 |     "setupFiles": [
 98 |       "<rootDir>/config/polyfills.js"
 99 |     ],
100 |     "testPathIgnorePatterns": [
101 |       "<rootDir>[/\\\\](build|docs|node_modules|scripts)[/\\\\]"
102 |     ],
103 |     "testEnvironment": "node",
104 |     "testURL": "http://localhost",
105 |     "transform": {
106 |       "^.+\\.(js|jsx)$": "<rootDir>/node_modules/babel-jest",
107 |       "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
108 |       "^(?!.*\\.(js|jsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
109 |     },
110 |     "transformIgnorePatterns": [
111 |       "[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$"
112 |     ],
113 |     "moduleNameMapper": {
114 |       "^react-native$": "react-native-web"
115 |     }
116 |   },
117 |   "babel": {
118 |     "presets": [
119 |       "react-app"
120 |     ]
121 |   },
122 |   "eslintConfig": {
123 |     "extends": "react-app"
124 |   }
125 | }
126 | 


--------------------------------------------------------------------------------
/src/demo/impress-demo.js:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | 
  3 | export default [
  4 |   {
  5 |       id:"bored",
  6 |       className:"slide",
  7 |       data:{
  8 |           x:-1000, 
  9 |           y:-1500
 10 |       },
 11 |       content:[
 12 |           <q>Aren’t you just <b>bored</b> with all those slides-based presentations?</q>
 13 |       ]
 14 |   },
 15 |   {
 16 |       className:"slide",
 17 |       data:{
 18 |           y:-1500
 19 |       },
 20 |       content:[
 21 |           <q>Don’t you think that presentations given <strong>in modern browsers</strong> shouldn’t <strong>copy the limits</strong> of ‘classic’ slide decks?</q>
 22 |       ]
 23 |   },
 24 |   {
 25 |       className:"slide",
 26 |       data:{
 27 |           x:1000,
 28 |           y:-1500
 29 |       },
 30 |       content:[
 31 |           <q>Would you like to <strong>impress your audience</strong> with <strong>stunning visualization</strong> of your talk?</q>
 32 |       ]
 33 |   },
 34 |   {
 35 |       id:"title",
 36 |       data:{
 37 |           scale: 4
 38 |       },
 39 |       content:[
 40 |           <span className="try">then you should try</span>,
 41 |           <h1>impress.js<sup>*</sup></h1>,
 42 |           <span className="footnote"><sup>*</sup> no rhyme intended</span>
 43 |       ]
 44 |   },
 45 |   {
 46 |       id: "its",
 47 |       data:{
 48 |           x:850,
 49 |           y:3000,
 50 |           rotateZ:90,
 51 |           scale:5
 52 |       },
 53 |       content:[
 54 |           <p>It’s a <strong>presentation tool</strong> <br/>
 55 |           inspired by the idea behind <a href="http://prezi.com" target="_blank" rel="nofollow">prezi.com</a> <br/>
 56 |           and based on the <strong>power of CSS3 transforms and transitions</strong> in modern browsers.</p>
 57 |       ]
 58 |   },
 59 |   {
 60 |       id: "big",
 61 |       data:{
 62 |           x:3500,
 63 |           y:2100,
 64 |           rotateZ:180,
 65 |           scale:6
 66 |       },
 67 |       content:[
 68 |           <p>visualize your <b>big</b> <span className="thoughts">thoughts</span></p>
 69 |       ]
 70 |   },
 71 |   {
 72 |       id: "tiny",
 73 |       data:{
 74 |           x:2825,
 75 |           y:2325,
 76 |           z:-3000,
 77 |           rotateZ:300,
 78 |           scale:1
 79 |       },
 80 |       content:[
 81 |           <p>and <b>tiny</b> ideas</p>
 82 |       ]
 83 |   },
 84 |   {
 85 |       id: "ing",
 86 |       data:{
 87 |           x:3500,
 88 |           y:-850,
 89 |           rotateZ:270,
 90 |           scale:6
 91 |       },
 92 |       content:[
 93 |           <p>by <b className="positioning">positioning</b>, <b className="rotating">rotating</b> and <b className="scaling">scaling</b> them on an infinite canvas</p>
 94 |       ]
 95 |   },
 96 |   {
 97 |       id: "imagination",
 98 |       data:{
 99 |           x:6700,
100 |           y:-300,
101 |           scale:6
102 |       },
103 |       content:[
104 |           <p>the only <b>limit</b> is your <b className="imagination scaling-up">imagination</b></p>
105 |       ]
106 |   },
107 |   {
108 |       id: "source",
109 |       data:{
110 |           x:6300,
111 |           y:2000,
112 |           rotateZ:20,
113 |           scale:4
114 |       },
115 |       content:[
116 |           <p>want to know more?</p>,
117 |           <q><a href="http://github.com/bartaz/impress.js" target="_blank" rel="nofollow">use the source</a>, Luke!</q>
118 |       ]
119 |   },
120 |   {
121 |       id: "one-more-thing",
122 |       data:{
123 |           x:6000,
124 |           y:4000,
125 |           scale:2
126 |       },
127 |       content:[
128 |           <p>one more thing...</p>
129 |       ]
130 |   },
131 |   {
132 |       id: "its-in-3d",
133 |       data:{
134 |           x:6200,
135 |           y:4300,
136 |           z:-100,
137 |           rotateX:-40,
138 |           rotateY:10,
139 |           scale:2
140 |       },
141 |       content:[
142 |           <p><span className="have">have</span> <span className="you">you</span> <span className="noticed">noticed</span> <span className="its">it’s</span> <span className="in">in</span> <b>3D<sup>*</sup></b>?</p>,
143 |           <span className="footnote">* beat that, prezi ;)</span>
144 |       ]
145 |   },
146 |   {
147 |       id: "by-react-impressjs",
148 |       data:{
149 |           x:3000,
150 |           y:6000,
151 |           z:4000,
152 |           rotateX:-70,
153 |           rotateY:30,
154 |           scale:10
155 |       },
156 |       content:[
157 |           <p>This demo of impress.js is made via <a href="https://github.com/GeorgioWan/react-impressjs" target="_blank">React-impressJS</a></p>
158 |       ]
159 |   }
160 | ];


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # React-impressJS
  2 | 
  3 | impress.js via React :tada:
  4 | 
  5 | [![NPM version][npm-image]][npm-url]
  6 | [![Build Status][travis-image]][travis-url]
  7 | [![LICENCE][licence-image]][licence-url]
  8 | 
  9 | [npm-image]: https://img.shields.io/npm/v/react-impressjs.svg
 10 | [npm-url]: https://www.npmjs.com/package/react-impressjs
 11 | [travis-image]: https://travis-ci.org/GeorgioWan/react-impressjs.svg?branch=master
 12 | [travis-url]: https://travis-ci.org/GeorgioWan/react-impressjs
 13 | [licence-image]: https://img.shields.io/npm/l/react-impressjs.svg
 14 | [licence-url]: https://github.com/GeorgioWan/react-impressjs/blob/master/LICENSE
 15 | 
 16 | ## Why React-impressJS
 17 | 
 18 | Easy to create an impressive **Slide**/**Introduction**/**Presentation** in ReactJS.
 19 | 
 20 | ## Install
 21 | 
 22 | [![NPM install](https://nodei.co/npm/react-impressjs.png)](https://www.npmjs.com/package/react-impressjs)
 23 | 
 24 | ## Feature
 25 | 
 26 | ### Quick Navigation
 27 | 
 28 | #### Navigation on Mobile devise (YES! We provide mobile browser now :tada:)
 29 | 
 30 | Just **Swipe** to navigate:
 31 | 
 32 | `swipe right`: Go to the previous Step.
 33 | 
 34 | `swipe left`: Go to the next Step.
 35 | 
 36 | #### Navigation on PC/Laptop
 37 | 
 38 | You can use **Spacebar** or **Arrow keys** to navigate, and here's all the keys for navigation:
 39 | 
 40 | `←` or `↑` or `PageUp`: Go to the previous Step.
 41 | 
 42 | `→` or `↓` or `Space` or `PageDown`: Go to the next Step.
 43 | 
 44 | `Home`: Go to the first Step.
 45 | 
 46 | `End`: Go to the last Step.
 47 | 
 48 | > p.s. You can also **Click** the Step directly.
 49 | 
 50 | ### Progress (Step Counter)
 51 | 
 52 | Provide **progress bar** and **Slide Counter** (current/total number), let presentation more clearly.
 53 | 
 54 | ### Hash Permalinks
 55 | 
 56 | You can navigate to the Step you want with `#/step-id`.
 57 | 
 58 | ## Usage
 59 | 
 60 | ### Components
 61 | 
 62 | **React-impressJS** have two components: **`<Impress />`** and **`<Step />`**, as same as [**impress.js**](https://github.com/impress/impress.js/).
 63 | 
 64 | **`<Impress />`** contains the **root of impress** and the **camera**, then put **`<Step />`** inside impress component, magic happens :sparkles:
 65 | 
 66 | > What's **impress.js**!? 
 67 | >
 68 | > It's an awesome presentation framework power of CSS3 transorms and transitions, please check [THIS](https://github.com/impress/impress.js) first!!
 69 | 
 70 | ## API
 71 | 
 72 | ### Impress props
 73 | 
 74 | | name     | type    | description     | default      |
 75 | |----------|----------------|----------|--------------|
 76 | |rootData | Object | setting impress basic config | **defaults** |
 77 | |fallbackMessage | String or Element | fallback message is only visible when there is `impress-not-supported` | - |
 78 | |hint | Boolean | display hint or not | **true** |
 79 | |hintMessage | String or Element | hint for presentation | - |
 80 | |progress | Boolean | progress of presentation | **false** |
 81 | 
 82 | ```js
 83 | const defaults = {
 84 |     width: 1024,
 85 |     height: 768,
 86 |     maxScale: 1,
 87 |     minScale: 0,
 88 |     perspective: 1000,
 89 |     transitionDuration: 1000
 90 | };
 91 | ```
 92 | 
 93 | ### Step props
 94 | 
 95 | | name     | type    | description     | default      |
 96 | |----------|----------------|----------|--------------|
 97 | |id | String | id of dom node | "step-" + ~**timestamp**~ **idHelper**(counter of Step) |
 98 | |className | String | additional css class of step dom node | '' |
 99 | |data | Object | setting Step's presentation | **defaultData** |
100 | |duration | number | define duration of the transition in ms  | **1000** |
101 | 
102 | ```js
103 | const defaultData = {
104 |   x: 0,       // as data-x
105 |   y: 0,       // as data-y
106 |   z: 0,       // as data-z
107 |   rotateX: 0, // as data-rotate-x
108 |   rotateY: 0, // as data-rotate-y
109 |   rotateZ: 0, // as data-rotate and data-rotate-z
110 |   scale: 1    // as data-scale
111 | };
112 | ```
113 | 
114 | ### Basic Use
115 | 
116 | ```jsx
117 | import { Impress, Step } from 'react-impressjs';
118 | // styles of react-impressjs
119 | import 'react-impressjs/styles/react-impressjs.css';
120 | 
121 | <Impress 
122 |     progress={true}
123 |     fallbackMessage={<p>Sorry, your <b>device or browser</b> couldn't support well.</p>}
124 |     >
125 |     <Step id={'overview'} /> 
126 |     <Step id={'any_id'} className={'class_name'} />
127 |     <Step className={'without_id_is_ok'} 
128 |           data={
129 |             {
130 |                 x:100,
131 |                 y:-100,
132 |                 scale:2
133 |             }}/>
134 |     <Step duration={1500}>
135 |         <h1>Any Element write in Step!</h1>
136 |         <hr />
137 |         <p>Made by your <b>Creativity</b> !!</p>
138 |     </Step>
139 | </Impress>
140 | ```
141 | 
142 | ## Style
143 | 
144 | Currently, you can use style of **impress.js** or **React-impressJS** in your app:
145 | 
146 | ```js
147 | // style of impress
148 | import 'react-impressjs/styles/impress-demo.css';
149 | 
150 | // style of react-impressjs
151 | import 'react-impressjs/styles/react-impressjs.css';
152 | ```
153 | 
154 | > We suggest you use the **React-impressJS**.
155 | >
156 | > If you have the better one, I'm glad you can share with us, expect yours! :grin::grin:
157 | 
158 | ## Development
159 | 
160 | This Component is still under development, if you have any suggestion, you could tell me in [**issue**](https://github.com/GeorgioWan/react-impressjs/issues) or [**fork this repo**](https://github.com/GeorgioWan/react-impressjs#fork-destination-box) :muscle:
161 | 
162 | ## License
163 | 
164 | **React-impressJS** is released under the [MIT license](https://github.com/GeorgioWan/react-impressjs/blob/master/LICENSE).
165 | 
166 | 
167 | > This project was bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app).
168 | 


--------------------------------------------------------------------------------
/config/webpack.config.dev.js:
--------------------------------------------------------------------------------
  1 | var autoprefixer = require('autoprefixer');
  2 | var webpack = require('webpack');
  3 | var HtmlWebpackPlugin = require('html-webpack-plugin');
  4 | var CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
  5 | var InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
  6 | var WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
  7 | var getClientEnvironment = require('./env');
  8 | var paths = require('./paths');
  9 | 
 10 | 
 11 | 
 12 | // Webpack uses `publicPath` to determine where the app is being served from.
 13 | // In development, we always serve from the root. This makes config easier.
 14 | var publicPath = '/';
 15 | // `publicUrl` is just like `publicPath`, but we will provide it to our app
 16 | // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
 17 | // Omit trailing slash as %PUBLIC_PATH%/xyz looks better than %PUBLIC_PATH%xyz.
 18 | var publicUrl = '';
 19 | // Get environment variables to inject into our app.
 20 | var env = getClientEnvironment(publicUrl);
 21 | 
 22 | // This is the development configuration.
 23 | // It is focused on developer experience and fast rebuilds.
 24 | // The production configuration is different and lives in a separate file.
 25 | module.exports = {
 26 |   // You may want 'eval' instead if you prefer to see the compiled output in DevTools.
 27 |   // See the discussion in https://github.com/facebookincubator/create-react-app/issues/343.
 28 |   devtool: 'cheap-module-source-map',
 29 |   // These are the "entry points" to our application.
 30 |   // This means they will be the "root" imports that are included in JS bundle.
 31 |   // The first two entry points enable "hot" CSS and auto-refreshes for JS.
 32 |   entry: [
 33 |     // Include an alternative client for WebpackDevServer. A client's job is to
 34 |     // connect to WebpackDevServer by a socket and get notified about changes.
 35 |     // When you save a file, the client will either apply hot updates (in case
 36 |     // of CSS changes), or refresh the page (in case of JS changes). When you
 37 |     // make a syntax error, this client will display a syntax error overlay.
 38 |     // Note: instead of the default WebpackDevServer client, we use a custom one
 39 |     // to bring better experience for Create React App users. You can replace
 40 |     // the line below with these two lines if you prefer the stock client:
 41 |     // require.resolve('webpack-dev-server/client') + '?/',
 42 |     // require.resolve('webpack/hot/dev-server'),
 43 |     require.resolve('react-dev-utils/webpackHotDevClient'),
 44 |     // We ship a few polyfills by default:
 45 |     require.resolve('./polyfills'),
 46 |     // Finally, this is your app's code:
 47 |     paths.appIndexJs,
 48 |     // We include the app code last so that if there is a runtime error during
 49 |     // initialization, it doesn't blow up the WebpackDevServer client, and
 50 |     // changing JS code would still trigger a refresh.
 51 |   ],
 52 |   output: {
 53 |     // Next line is not used in dev but WebpackDevServer crashes without it:
 54 |     path: paths.appBuild,
 55 |     // Add /* filename */ comments to generated require()s in the output.
 56 |     pathinfo: true,
 57 |     // This does not produce a real file. It's just the virtual path that is
 58 |     // served by WebpackDevServer in development. This is the JS bundle
 59 |     // containing code from all our entry points, and the Webpack runtime.
 60 |     filename: 'static/js/bundle.js',
 61 |     // This is the URL that app is served from. We use "/" in development.
 62 |     publicPath: publicPath
 63 |   },
 64 |   resolve: {
 65 |     // This allows you to set a fallback for where Webpack should look for modules.
 66 |     // We read `NODE_PATH` environment variable in `paths.js` and pass paths here.
 67 |     // We use `fallback` instead of `root` because we want `node_modules` to "win"
 68 |     // if there any conflicts. This matches Node resolution mechanism.
 69 |     // https://github.com/facebookincubator/create-react-app/issues/253
 70 |     fallback: paths.nodePaths,
 71 |     // These are the reasonable defaults supported by the Node ecosystem.
 72 |     // We also include JSX as a common component filename extension to support
 73 |     // some tools, although we do not recommend using it, see:
 74 |     // https://github.com/facebookincubator/create-react-app/issues/290
 75 |     extensions: ['.js', '.json', '.jsx', ''],
 76 |     alias: {
 77 |       // Support React Native Web
 78 |       // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
 79 |       'react-native': 'react-native-web'
 80 |     }
 81 |   },
 82 |   
 83 |   module: {
 84 |     // First, run the linter.
 85 |     // It's important to do this before Babel processes the JS.
 86 |     preLoaders: [
 87 |       {
 88 |         test: /\.(js|jsx)$/,
 89 |         loader: 'eslint',
 90 |         include: paths.appSrc,
 91 |       }
 92 |     ],
 93 |     loaders: [
 94 |       // ** ADDING/UPDATING LOADERS **
 95 |       // The "url" loader handles all assets unless explicitly excluded.
 96 |       // The `exclude` list *must* be updated with every change to loader extensions.
 97 |       // When adding a new loader, you must add its `test`
 98 |       // as a new entry in the `exclude` list for "url" loader.
 99 | 
100 |       // "url" loader embeds assets smaller than specified size as data URLs to avoid requests.
101 |       // Otherwise, it acts like the "file" loader.
102 |       {
103 |         exclude: [
104 |           /\.html$/,
105 |           /\.(js|jsx)$/,
106 |           /\.css$/,
107 |           /\.json$/,
108 |           /\.svg$/,
109 |           /\.sass$/,
110 |           /\.scss$/
111 |           
112 |         ],
113 |         loader: 'url',
114 |         query: {
115 |           limit: 10000,
116 |           name: 'static/media/[name].[hash:8].[ext]'
117 |         }
118 |       },
119 |       // Process JS with Babel.
120 |       {
121 |         test: /\.(js|jsx)$/,
122 |         include: paths.appSrc,
123 |         loader: 'babel',
124 |         query: {
125 |           
126 |           // This is a feature of `babel-loader` for webpack (not Babel itself).
127 |           // It enables caching results in ./node_modules/.cache/babel-loader/
128 |           // directory for faster rebuilds.
129 |           cacheDirectory: true
130 |         }
131 |       },
132 |       // "postcss" loader applies autoprefixer to our CSS.
133 |       // "css" loader resolves paths in CSS and adds assets as dependencies.
134 |       // "style" loader turns CSS into JS modules that inject <style> tags.
135 |       // In production, we use a plugin to extract that CSS to a file, but
136 |       // in development "style" loader enables hot editing of CSS.
137 |       {
138 |         test: /\.css$/,
139 |         loader: 'style!css?importLoaders=1!postcss'
140 |       },
141 |       // JSON is not enabled by default in Webpack but both Node and Browserify
142 |       // allow it implicitly so we also enable it.
143 |       {
144 |         test: /\.json$/,
145 |         loader: 'json'
146 |       },
147 |       // "file" loader for svg
148 |       {
149 |         test: /\.svg$/,
150 |         loader: 'file',
151 |         query: {
152 |           name: 'static/media/[name].[hash:8].[ext]'
153 |         }
154 |       },
155 |       // Scss
156 |       {
157 |         test: /\.scss$/,
158 |         include: paths.appSrc,
159 |         loaders: ["style", "css", "sass"]
160 |       }
161 |       // ** STOP ** Are you adding a new loader?
162 |       // Remember to add the new extension(s) to the "url" loader exclusion list.
163 |     ]
164 |   },
165 |   
166 |   // We use PostCSS for autoprefixing only.
167 |   postcss: function() {
168 |     return [
169 |       autoprefixer({
170 |         browsers: [
171 |           '>1%',
172 |           'last 4 versions',
173 |           'Firefox ESR',
174 |           'not ie < 9', // React doesn't support IE8 anyway
175 |         ]
176 |       }),
177 |     ];
178 |   },
179 |   plugins: [
180 |     // Makes some environment variables available in index.html.
181 |     // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
182 |     // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
183 |     // In development, this will be an empty string.
184 |     new InterpolateHtmlPlugin(env.raw),
185 |     // Generates an `index.html` file with the <script> injected.
186 |     new HtmlWebpackPlugin({
187 |       inject: true,
188 |       template: paths.appHtml,
189 |     }),
190 |     // Makes some environment variables available to the JS code, for example:
191 |     // if (process.env.NODE_ENV === 'development') { ... }. See `./env.js`.
192 |     new webpack.DefinePlugin(env.stringified),
193 |     // This is necessary to emit hot updates (currently CSS only):
194 |     new webpack.HotModuleReplacementPlugin(),
195 |     // Watcher doesn't work well if you mistype casing in a path so we use
196 |     // a plugin that prints an error when you attempt to do this.
197 |     // See https://github.com/facebookincubator/create-react-app/issues/240
198 |     new CaseSensitivePathsPlugin(),
199 |     // If you require a missing module and then `npm install` it, you still have
200 |     // to restart the development server for Webpack to discover it. This plugin
201 |     // makes the discovery automatic so you don't have to restart.
202 |     // See https://github.com/facebookincubator/create-react-app/issues/186
203 |     new WatchMissingNodeModulesPlugin(paths.appNodeModules)
204 |   ],
205 |   // Some libraries import Node modules but don't use them in the browser.
206 |   // Tell Webpack to provide empty mocks for them so importing them works.
207 |   node: {
208 |     fs: 'empty',
209 |     net: 'empty',
210 |     tls: 'empty'
211 |   }
212 | };
213 | 


--------------------------------------------------------------------------------
/scripts/build.js:
--------------------------------------------------------------------------------
  1 | // Do this as the first thing so that any code reading it knows the right env.
  2 | process.env.NODE_ENV = 'production';
  3 | 
  4 | // Load environment variables from .env file. Suppress warnings using silent
  5 | // if this file is missing. dotenv will never modify any environment variables
  6 | // that have already been set.
  7 | // https://github.com/motdotla/dotenv
  8 | require('dotenv').config({silent: true});
  9 | 
 10 | var chalk = require('chalk');
 11 | var fs = require('fs-extra');
 12 | var path = require('path');
 13 | var url = require('url');
 14 | var filesize = require('filesize');
 15 | var gzipSize = require('gzip-size').sync;
 16 | var webpack = require('webpack');
 17 | var config = require('../config/webpack.config.prod');
 18 | var paths = require('../config/paths');
 19 | var checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
 20 | var recursive = require('recursive-readdir');
 21 | var stripAnsi = require('strip-ansi');
 22 | 
 23 | var useYarn = fs.existsSync(paths.yarnLockFile);
 24 | 
 25 | // Warn and crash if required files are missing
 26 | if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
 27 |   process.exit(1);
 28 | }
 29 | 
 30 | // Input: /User/dan/app/build/static/js/main.82be8.js
 31 | // Output: /static/js/main.js
 32 | function removeFileNameHash(fileName) {
 33 |   return fileName
 34 |     .replace(paths.appBuild, '')
 35 |     .replace(/\/?(.*)(\.\w+)(\.js|\.css)/, (match, p1, p2, p3) => p1 + p3);
 36 | }
 37 | 
 38 | // Input: 1024, 2048
 39 | // Output: "(+1 KB)"
 40 | function getDifferenceLabel(currentSize, previousSize) {
 41 |   var FIFTY_KILOBYTES = 1024 * 50;
 42 |   var difference = currentSize - previousSize;
 43 |   var fileSize = !Number.isNaN(difference) ? filesize(difference) : 0;
 44 |   if (difference >= FIFTY_KILOBYTES) {
 45 |     return chalk.red('+' + fileSize);
 46 |   } else if (difference < FIFTY_KILOBYTES && difference > 0) {
 47 |     return chalk.yellow('+' + fileSize);
 48 |   } else if (difference < 0) {
 49 |     return chalk.green(fileSize);
 50 |   } else {
 51 |     return '';
 52 |   }
 53 | }
 54 | 
 55 | // First, read the current file sizes in build directory.
 56 | // This lets us display how much they changed later.
 57 | recursive(paths.appBuild, (err, fileNames) => {
 58 |   var previousSizeMap = (fileNames || [])
 59 |     .filter(fileName => /\.(js|css)$/.test(fileName))
 60 |     .reduce((memo, fileName) => {
 61 |       var contents = fs.readFileSync(fileName);
 62 |       var key = removeFileNameHash(fileName);
 63 |       memo[key] = gzipSize(contents);
 64 |       return memo;
 65 |     }, {});
 66 | 
 67 |   // Remove all content but keep the directory so that
 68 |   // if you're in it, you don't end up in Trash
 69 |   fs.emptyDirSync(paths.appBuild);
 70 | 
 71 |   // Start the webpack build
 72 |   build(previousSizeMap);
 73 | 
 74 |   // Merge with the public folder
 75 |   copyPublicFolder();
 76 | });
 77 | 
 78 | // Print a detailed summary of build files.
 79 | function printFileSizes(stats, previousSizeMap) {
 80 |   var assets = stats.toJson().assets
 81 |     .filter(asset => /\.(js|css)$/.test(asset.name))
 82 |     .map(asset => {
 83 |       var fileContents = fs.readFileSync(paths.appBuild + '/' + asset.name);
 84 |       var size = gzipSize(fileContents);
 85 |       var previousSize = previousSizeMap[removeFileNameHash(asset.name)];
 86 |       var difference = getDifferenceLabel(size, previousSize);
 87 |       return {
 88 |         folder: path.join('build', path.dirname(asset.name)),
 89 |         name: path.basename(asset.name),
 90 |         size: size,
 91 |         sizeLabel: filesize(size) + (difference ? ' (' + difference + ')' : '')
 92 |       };
 93 |     });
 94 |   assets.sort((a, b) => b.size - a.size);
 95 |   var longestSizeLabelLength = Math.max.apply(null,
 96 |     assets.map(a => stripAnsi(a.sizeLabel).length)
 97 |   );
 98 |   assets.forEach(asset => {
 99 |     var sizeLabel = asset.sizeLabel;
100 |     var sizeLength = stripAnsi(sizeLabel).length;
101 |     if (sizeLength < longestSizeLabelLength) {
102 |       var rightPadding = ' '.repeat(longestSizeLabelLength - sizeLength);
103 |       sizeLabel += rightPadding;
104 |     }
105 |     console.log(
106 |       '  ' + sizeLabel +
107 |       '  ' + chalk.dim(asset.folder + path.sep) + chalk.cyan(asset.name)
108 |     );
109 |   });
110 | }
111 | 
112 | // Print out errors
113 | function printErrors(summary, errors) {
114 |   console.log(chalk.red(summary));
115 |   console.log();
116 |   errors.forEach(err => {
117 |     console.log(err.message || err);
118 |     console.log();
119 |   });
120 | }
121 | 
122 | // Create the production build and print the deployment instructions.
123 | function build(previousSizeMap) {
124 |   console.log('Creating an optimized production build...');
125 |   webpack(config).run((err, stats) => {
126 |     if (err) {
127 |       printErrors('Failed to compile.', [err]);
128 |       process.exit(1);
129 |     }
130 | 
131 |     if (stats.compilation.errors.length) {
132 |       printErrors('Failed to compile.', stats.compilation.errors);
133 |       process.exit(1);
134 |     }
135 | 
136 |     if (process.env.CI && stats.compilation.warnings.length) {
137 |      printErrors('Failed to compile. When process.env.CI = true, warnings are treated as failures. Most CI servers set this automatically.', stats.compilation.warnings);
138 |      process.exit(1);
139 |    }
140 | 
141 |     console.log(chalk.green('Compiled successfully.'));
142 |     console.log();
143 | 
144 |     console.log('File sizes after gzip:');
145 |     console.log();
146 |     printFileSizes(stats, previousSizeMap);
147 |     console.log();
148 | 
149 |     var openCommand = process.platform === 'win32' ? 'start' : 'open';
150 |     var appPackage  = require(paths.appPackageJson);
151 |     var publicUrl = paths.publicUrl;
152 |     var publicPath = config.output.publicPath;
153 |     var publicPathname = url.parse(publicPath).pathname;
154 |     if (publicUrl && publicUrl.indexOf('.github.io/') !== -1) {
155 |       // "homepage": "http://user.github.io/project"
156 |       console.log('The project was built assuming it is hosted at ' + chalk.green(publicPathname) + '.');
157 |       console.log('You can control this with the ' + chalk.green('homepage') + ' field in your '  + chalk.cyan('package.json') + '.');
158 |       console.log();
159 |       console.log('The ' + chalk.cyan('build') + ' folder is ready to be deployed.');
160 |       console.log('To publish it at ' + chalk.green(publicUrl) + ', run:');
161 |       // If script deploy has been added to package.json, skip the instructions
162 |       if (typeof appPackage.scripts.deploy === 'undefined') {
163 |         console.log();
164 |         if (useYarn) {
165 |           console.log('  ' + chalk.cyan('yarn') +  ' add --dev gh-pages');
166 |         } else {
167 |           console.log('  ' + chalk.cyan('npm') +  ' install --save-dev gh-pages');
168 |         }
169 |         console.log();
170 |         console.log('Add the following script in your ' + chalk.cyan('package.json') + '.');
171 |         console.log();
172 |         console.log('    ' + chalk.dim('// ...'));
173 |         console.log('    ' + chalk.yellow('"scripts"') + ': {');
174 |         console.log('      ' + chalk.dim('// ...'));
175 |         console.log('      ' + chalk.yellow('"predeploy"') + ': ' + chalk.yellow('"npm run build",'));
176 |         console.log('      ' + chalk.yellow('"deploy"') + ': ' + chalk.yellow('"gh-pages -d build"'));
177 |         console.log('    }');
178 |         console.log();
179 |         console.log('Then run:');
180 |       }
181 |       console.log();
182 |       console.log('  ' + chalk.cyan(useYarn ? 'yarn' : 'npm') +  ' run deploy');
183 |       console.log();
184 |     } else if (publicPath !== '/') {
185 |       // "homepage": "http://mywebsite.com/project"
186 |       console.log('The project was built assuming it is hosted at ' + chalk.green(publicPath) + '.');
187 |       console.log('You can control this with the ' + chalk.green('homepage') + ' field in your '  + chalk.cyan('package.json') + '.');
188 |       console.log();
189 |       console.log('The ' + chalk.cyan('build') + ' folder is ready to be deployed.');
190 |       console.log();
191 |     } else {
192 |       if (publicUrl) {
193 |         // "homepage": "http://mywebsite.com"
194 |         console.log('The project was built assuming it is hosted at ' + chalk.green(publicUrl) +  '.');
195 |         console.log('You can control this with the ' + chalk.green('homepage') + ' field in your '  + chalk.cyan('package.json') + '.');
196 |         console.log();
197 |       } else {
198 |         // no homepage
199 |         console.log('The project was built assuming it is hosted at the server root.');
200 |         console.log('To override this, specify the ' + chalk.green('homepage') + ' in your '  + chalk.cyan('package.json') + '.');
201 |         console.log('For example, add this to build it for GitHub Pages:')
202 |         console.log();
203 |         console.log('  ' + chalk.green('"homepage"') + chalk.cyan(': ') + chalk.green('"http://myname.github.io/myapp"') + chalk.cyan(','));
204 |         console.log();
205 |       }
206 |       var build = path.relative(process.cwd(), paths.appBuild);
207 |       console.log('The ' + chalk.cyan(build) + ' folder is ready to be deployed.');
208 |       console.log('You may also serve it locally with a static server:')
209 |       console.log();
210 |       if (useYarn) {
211 |         console.log('  ' + chalk.cyan('yarn') +  ' global add pushstate-server');
212 |       } else {
213 |         console.log('  ' + chalk.cyan('npm') +  ' install -g pushstate-server');
214 |       }
215 |       console.log('  ' + chalk.cyan('pushstate-server') + ' ' + build);
216 |       console.log('  ' + chalk.cyan(openCommand) + ' http://localhost:' + (process.env.PORT || 9000));
217 |       console.log();
218 |     }
219 |   });
220 | }
221 | 
222 | function copyPublicFolder() {
223 |   fs.copySync(paths.appPublic, paths.appBuild, {
224 |     dereference: true,
225 |     filter: file => file !== paths.appHtml
226 |   });
227 | }
228 | 


--------------------------------------------------------------------------------
/scripts/build_impress.js:
--------------------------------------------------------------------------------
  1 | // Do this as the first thing so that any code reading it knows the right env.
  2 | process.env.NODE_ENV = 'production';
  3 | 
  4 | // Load environment variables from .env file. Suppress warnings using silent
  5 | // if this file is missing. dotenv will never modify any environment variables
  6 | // that have already been set.
  7 | // https://github.com/motdotla/dotenv
  8 | require('dotenv').config({silent: true});
  9 | 
 10 | var chalk = require('chalk');
 11 | var fs = require('fs-extra');
 12 | var path = require('path');
 13 | var url = require('url');
 14 | var filesize = require('filesize');
 15 | var gzipSize = require('gzip-size').sync;
 16 | var webpack = require('webpack');
 17 | var config = require('../config/webpack.config.impress.prod');
 18 | var paths = require('../config/paths');
 19 | var checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
 20 | var recursive = require('recursive-readdir');
 21 | var stripAnsi = require('strip-ansi');
 22 | 
 23 | var useYarn = fs.existsSync(paths.yarnLockFile);
 24 | 
 25 | // Warn and crash if required files are missing
 26 | if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
 27 |   process.exit(1);
 28 | }
 29 | 
 30 | // Input: /User/dan/app/build/static/js/main.82be8.js
 31 | // Output: /static/js/main.js
 32 | function removeFileNameHash(fileName) {
 33 |   return fileName
 34 |     .replace(paths.appBuild, '')
 35 |     .replace(/\/?(.*)(\.\w+)(\.js|\.css)/, (match, p1, p2, p3) => p1 + p3);
 36 | }
 37 | 
 38 | // Input: 1024, 2048
 39 | // Output: "(+1 KB)"
 40 | function getDifferenceLabel(currentSize, previousSize) {
 41 |   var FIFTY_KILOBYTES = 1024 * 50;
 42 |   var difference = currentSize - previousSize;
 43 |   var fileSize = !Number.isNaN(difference) ? filesize(difference) : 0;
 44 |   if (difference >= FIFTY_KILOBYTES) {
 45 |     return chalk.red('+' + fileSize);
 46 |   } else if (difference < FIFTY_KILOBYTES && difference > 0) {
 47 |     return chalk.yellow('+' + fileSize);
 48 |   } else if (difference < 0) {
 49 |     return chalk.green(fileSize);
 50 |   } else {
 51 |     return '';
 52 |   }
 53 | }
 54 | 
 55 | // First, read the current file sizes in build directory.
 56 | // This lets us display how much they changed later.
 57 | recursive(paths.appBuild, (err, fileNames) => {
 58 |   var previousSizeMap = (fileNames || [])
 59 |     .filter(fileName => /\.(js|css)$/.test(fileName))
 60 |     .reduce((memo, fileName) => {
 61 |       var contents = fs.readFileSync(fileName);
 62 |       var key = removeFileNameHash(fileName);
 63 |       memo[key] = gzipSize(contents);
 64 |       return memo;
 65 |     }, {});
 66 | 
 67 |   // Remove all content but keep the directory so that
 68 |   // if you're in it, you don't end up in Trash
 69 |   fs.emptyDirSync(paths.appBuild);
 70 | 
 71 |   // Start the webpack build
 72 |   build(previousSizeMap);
 73 | 
 74 |   // Merge with the public folder
 75 |   copyPublicFolder();
 76 | });
 77 | 
 78 | // Print a detailed summary of build files.
 79 | function printFileSizes(stats, previousSizeMap) {
 80 |   var assets = stats.toJson().assets
 81 |     .filter(asset => /\.(js|css)$/.test(asset.name))
 82 |     .map(asset => {
 83 |       var fileContents = fs.readFileSync(paths.appBuild + '/' + asset.name);
 84 |       var size = gzipSize(fileContents);
 85 |       var previousSize = previousSizeMap[removeFileNameHash(asset.name)];
 86 |       var difference = getDifferenceLabel(size, previousSize);
 87 |       return {
 88 |         folder: path.join('build', path.dirname(asset.name)),
 89 |         name: path.basename(asset.name),
 90 |         size: size,
 91 |         sizeLabel: filesize(size) + (difference ? ' (' + difference + ')' : '')
 92 |       };
 93 |     });
 94 |   assets.sort((a, b) => b.size - a.size);
 95 |   var longestSizeLabelLength = Math.max.apply(null,
 96 |     assets.map(a => stripAnsi(a.sizeLabel).length)
 97 |   );
 98 |   assets.forEach(asset => {
 99 |     var sizeLabel = asset.sizeLabel;
100 |     var sizeLength = stripAnsi(sizeLabel).length;
101 |     if (sizeLength < longestSizeLabelLength) {
102 |       var rightPadding = ' '.repeat(longestSizeLabelLength - sizeLength);
103 |       sizeLabel += rightPadding;
104 |     }
105 |     console.log(
106 |       '  ' + sizeLabel +
107 |       '  ' + chalk.dim(asset.folder + path.sep) + chalk.cyan(asset.name)
108 |     );
109 |   });
110 | }
111 | 
112 | // Print out errors
113 | function printErrors(summary, errors) {
114 |   console.log(chalk.red(summary));
115 |   console.log();
116 |   errors.forEach(err => {
117 |     console.log(err.message || err);
118 |     console.log();
119 |   });
120 | }
121 | 
122 | // Create the production build and print the deployment instructions.
123 | function build(previousSizeMap) {
124 |   console.log('Creating an optimized production build...');
125 |   webpack(config).run((err, stats) => {
126 |     if (err) {
127 |       printErrors('Failed to compile.', [err]);
128 |       process.exit(1);
129 |     }
130 | 
131 |     if (stats.compilation.errors.length) {
132 |       printErrors('Failed to compile.', stats.compilation.errors);
133 |       process.exit(1);
134 |     }
135 | 
136 |     if (process.env.CI && stats.compilation.warnings.length) {
137 |      printErrors('Failed to compile. When process.env.CI = true, warnings are treated as failures. Most CI servers set this automatically.', stats.compilation.warnings);
138 |      process.exit(1);
139 |    }
140 | 
141 |     console.log(chalk.green('Compiled successfully.'));
142 |     console.log();
143 | 
144 |     console.log('File sizes after gzip:');
145 |     console.log();
146 |     printFileSizes(stats, previousSizeMap);
147 |     console.log();
148 | 
149 |     var openCommand = process.platform === 'win32' ? 'start' : 'open';
150 |     var appPackage  = require(paths.appPackageJson);
151 |     var publicUrl = paths.publicUrl;
152 |     var publicPath = config.output.publicPath;
153 |     var publicPathname = url.parse(publicPath).pathname;
154 |     if (publicUrl && publicUrl.indexOf('.github.io/') !== -1) {
155 |       // "homepage": "http://user.github.io/project"
156 |       console.log('The project was built assuming it is hosted at ' + chalk.green(publicPathname) + '.');
157 |       console.log('You can control this with the ' + chalk.green('homepage') + ' field in your '  + chalk.cyan('package.json') + '.');
158 |       console.log();
159 |       console.log('The ' + chalk.cyan('build') + ' folder is ready to be deployed.');
160 |       console.log('To publish it at ' + chalk.green(publicUrl) + ', run:');
161 |       // If script deploy has been added to package.json, skip the instructions
162 |       if (typeof appPackage.scripts.deploy === 'undefined') {
163 |         console.log();
164 |         if (useYarn) {
165 |           console.log('  ' + chalk.cyan('yarn') +  ' add --dev gh-pages');
166 |         } else {
167 |           console.log('  ' + chalk.cyan('npm') +  ' install --save-dev gh-pages');
168 |         }
169 |         console.log();
170 |         console.log('Add the following script in your ' + chalk.cyan('package.json') + '.');
171 |         console.log();
172 |         console.log('    ' + chalk.dim('// ...'));
173 |         console.log('    ' + chalk.yellow('"scripts"') + ': {');
174 |         console.log('      ' + chalk.dim('// ...'));
175 |         console.log('      ' + chalk.yellow('"predeploy"') + ': ' + chalk.yellow('"npm run build",'));
176 |         console.log('      ' + chalk.yellow('"deploy"') + ': ' + chalk.yellow('"gh-pages -d build"'));
177 |         console.log('    }');
178 |         console.log();
179 |         console.log('Then run:');
180 |       }
181 |       console.log();
182 |       console.log('  ' + chalk.cyan(useYarn ? 'yarn' : 'npm') +  ' run deploy');
183 |       console.log();
184 |     } else if (publicPath !== '/') {
185 |       // "homepage": "http://mywebsite.com/project"
186 |       console.log('The project was built assuming it is hosted at ' + chalk.green(publicPath) + '.');
187 |       console.log('You can control this with the ' + chalk.green('homepage') + ' field in your '  + chalk.cyan('package.json') + '.');
188 |       console.log();
189 |       console.log('The ' + chalk.cyan('build') + ' folder is ready to be deployed.');
190 |       console.log();
191 |     } else {
192 |       if (publicUrl) {
193 |         // "homepage": "http://mywebsite.com"
194 |         console.log('The project was built assuming it is hosted at ' + chalk.green(publicUrl) +  '.');
195 |         console.log('You can control this with the ' + chalk.green('homepage') + ' field in your '  + chalk.cyan('package.json') + '.');
196 |         console.log();
197 |       } else {
198 |         // no homepage
199 |         console.log('The project was built assuming it is hosted at the server root.');
200 |         console.log('To override this, specify the ' + chalk.green('homepage') + ' in your '  + chalk.cyan('package.json') + '.');
201 |         console.log('For example, add this to build it for GitHub Pages:')
202 |         console.log();
203 |         console.log('  ' + chalk.green('"homepage"') + chalk.cyan(': ') + chalk.green('"http://myname.github.io/myapp"') + chalk.cyan(','));
204 |         console.log();
205 |       }
206 |       var build = path.relative(process.cwd(), paths.appBuild);
207 |       console.log('The ' + chalk.cyan(build) + ' folder is ready to be deployed.');
208 |       console.log('You may also serve it locally with a static server:')
209 |       console.log();
210 |       if (useYarn) {
211 |         console.log('  ' + chalk.cyan('yarn') +  ' global add pushstate-server');
212 |       } else {
213 |         console.log('  ' + chalk.cyan('npm') +  ' install -g pushstate-server');
214 |       }
215 |       console.log('  ' + chalk.cyan('pushstate-server') + ' ' + build);
216 |       console.log('  ' + chalk.cyan(openCommand) + ' http://localhost:' + (process.env.PORT || 9000));
217 |       console.log();
218 |     }
219 |   });
220 | }
221 | 
222 | function copyPublicFolder() {
223 |   fs.copySync(paths.appPublic, paths.appBuild, {
224 |     dereference: true,
225 |     filter: file => file !== paths.appHtml
226 |   });
227 | }
228 | 


--------------------------------------------------------------------------------
/styles/react-impressjs.css:
--------------------------------------------------------------------------------
1 | @import url(https://fonts.googleapis.com/css?family=Roboto:300,700);a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,time,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}#react-impressjs{line-height:1;font-family:Roboto,San Francisco,\\5FAE\8EDF\6B63\9ED1\9AD4,"sans-serif";min-height:100vh;background:#d7d7d7;background:-webkit-gradient(radial,50% 50%,0,50% 50%,500,from(#f0f0f0),to(#9ba5af));background:-webkit-radial-gradient(#f0f0f0,#9ba5af);background:-moz-radial-gradient(#f0f0f0,#9ba5af);background:-ms-radial-gradient(#f0f0f0,#9ba5af);background:-o-radial-gradient(#f0f0f0,#9ba5af);background:radial-gradient(#f0f0f0,#9ba5af)}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}b,strong{font-weight:700}em,i{font-style:italic}sub,sup{position:relative}sub{bottom:-.25em}sup{top:-.5em}.step{position:relative;width:900px;padding:20px;margin:20px auto;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;-o-box-sizing:border-box;box-sizing:border-box;font-family:Roboto,San Francisco,\\5FAE\8EDF\6B63\9ED1\9AD4,"sans-serif";font-size:48px;line-height:1.5}.step .h1,.step h1{font-size:124.8px}.step .h2,.step h2{font-size:103.2px}.step .h3,.step h3{font-size:81.6px}.step .h4,.step h4{font-size:62.4px}.step .h5,.step h5{font-size:48px}.step .h6,.step h6{font-size:40.8px}.impress-enabled .step{margin:0;opacity:.3;-webkit-transition:opacity 1s;-moz-transition:opacity 1s;-ms-transition:opacity 1s;-o-transition:opacity 1s;transition:opacity 1s}.impress-enabled .step.active{opacity:1;cursor:default}.impress-enabled .step a{color:hsla(0,0%,100%,.8);text-decoration:none;padding:0 .4em;background:#3e4852;border-radius:.2em;-webkit-transition:all .5s;-moz-transition:all .5s;-ms-transition:all .5s;-o-transition:all .5s;transition:all .5s}.impress-enabled .step a:focus,.impress-enabled .step a:hover{color:#e5b560;background:#495561;box-shadow:0 4px 8px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19);text-decoration:none}.impress-enabled .step b{display:inline-block;-webkit-transition:all .5s;-moz-transition:all .5s;-ms-transition:all .5s;-o-transition:all .5s;transition:all .5s}.impress-enabled .step.present .positioning{-webkit-transform:translateY(-10px);-moz-transform:translateY(-10px);-ms-transform:translateY(-10px);transform:translateY(-10px)}.impress-enabled .step.present .positioning,.impress-enabled .step.present .positioning-down{-webkit-transition-delay:1.25s;-moz-transition-delay:1.25s;-ms-transition-delay:1.25s;-o-transition-delay:1.25s;transition-delay:1.25s}.impress-enabled .step.present .positioning-down{-webkit-transform:translateY(10px);-moz-transform:translateY(10px);-ms-transform:translateY(10px);transform:translateY(10px)}.impress-enabled .step.present .rotating{-webkit-transform:rotate(-10deg);-moz-transform:rotate(-10deg);-ms-transform:rotate(-10deg);transform:rotate(-10deg)}.impress-enabled .step.present .rotating,.impress-enabled .step.present .rotating-right{-webkit-transition-delay:1.5s;-moz-transition-delay:1.5s;-ms-transition-delay:1.5s;-o-transition-delay:1.5s;transition-delay:1.5s}.impress-enabled .step.present .rotating-right{-webkit-transform:rotate(10deg);-moz-transform:rotate(10deg);-ms-transform:rotate(10deg);transform:rotate(10deg)}.impress-enabled .step.present .scaling{-webkit-transform:scale(.7);-moz-transform:scale(.7);-ms-transform:scale(.7);transform:scale(.7)}.impress-enabled .step.present .scaling,.impress-enabled .step.present .scaling-up{-webkit-transition-delay:1.75s;-moz-transition-delay:1.75s;-ms-transition-delay:1.75s;-o-transition-delay:1.75s;transition-delay:1.75s}.impress-enabled .step.present .scaling-up{-webkit-transform:scale(1.3);-moz-transform:scale(1.3);-ms-transform:scale(1.3);transform:scale(1.3)}.slide{display:block;line-height:36px;width:900px;height:700px;padding:40px 60px;background-color:#fff;border:1px solid rgba(0,0,0,.3);border-radius:3px;box-shadow:0 8px 16px rgba(0,20,80,.04),0 4px 16px rgba(0,0,0,.08);color:#666;text-shadow:0 2px 2px rgba(0,0,0,.1);font-size:35px;letter-spacing:1px}.slide .h1,.slide h1{font-size:91px}.slide .h2,.slide h2{font-size:75.25px}.slide .h3,.slide h3{font-size:59.5px}.slide .h4,.slide h4{font-size:45.5px}.slide .h5,.slide h5{font-size:35px}.slide .h6,.slide h6{font-size:29.75px}.slide:hover{box-shadow:0 8px 16px rgba(0,40,80,.08),0 8px 24px 5px rgba(0,0,0,.08)}#overview{display:none}.impress-on-overview .step{opacity:1}.hint{opacity:0;animation:fadeOutUp .6s ease forwards;color:hsla(0,0%,100%,.8);background-color:#3e4852;font-size:20px;text-align:center;width:400px;min-height:100px;line-height:100px;position:fixed;left:25px;bottom:14%;z-index:9999;border-radius:3px;filter:drop-shadow(0 8px 8px rgba(0,0,0,.3))}.hint b{color:#e5b560}.mobile-hint{opacity:0;animation:fadeOutUp .6s ease forwards;text-align:center;color:#3e4852;width:128px;position:fixed;left:calc(50% - 64px);bottom:10%}.mobile-hint img{display:block;margin:0 auto;width:48px}.mobile-hint span{display:block;margin-top:5px}.show .hint,.show .mobile-hint{animation:fadeInDown .6s ease 1s forwards}.impress-enabled .hint,.impress-enabled .mobile-hint{display:block}@keyframes fadeInDown{0%{opacity:0;transform:translate3d(0,-100%,0)}to{opacity:1;transform:none}}@keyframes fadeOutUp{0%{opacity:1}to{opacity:0;transform:translate3d(0,100%,0)}}.slide q{display:block;font-size:50px;line-height:72px;margin-top:100px}.slide q strong{white-space:nowrap}#title{padding:0}#title .try{font-size:64px;position:absolute;top:-.5em;left:1.5em;-webkit-transform:translateZ(20px);-moz-transform:translateZ(20px);-ms-transform:translateZ(20px);transform:translateZ(20px)}#title .try,#title h1{-webkit-transition-delay:0s;-moz-transition-delay:0s;-ms-transition-delay:0s;-o-transition-delay:0s;transition-delay:0s}#title h1{font-size:190px;-webkit-transform:translateZ(50px);-moz-transform:translateZ(50px);-ms-transform:translateZ(50px);transform:translateZ(50px)}#title .footnote{font-size:32px}#big{width:600px;text-align:center;font-size:60px;line-height:1}#big b{display:block;font-size:250px;line-height:250px}#big .thoughts{font-size:90px;line-height:150px}#tiny{text-align:center}#ing,#tiny{width:500px}#imagination{width:600px}#imagination .imagination{font-size:78px}#source{width:700px;padding-bottom:300px;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARgAAAEYCAMAAACwUBm+AAAAAXNSR0IArs4c6QAAAKtQTFRFsAAAvbWSLUUrLEQqY1s8UYJMqJ1vNTEgOiIdIzYhjIFVLhsXZ6lgSEIsP2U8JhcCVzMsSXZEgXdOO145XJdWOl03LzAYMk4vSXNExr+hwcuxRTs1Qmk+RW9Am49eFRANQz4pUoNMQWc+OSMDTz0wLBsCNVMxa2NBOyUDUoNNSnlEWo9VRGxAVzYFl6tXCggHbLNmMUIcHhwTXkk5f3VNRT8wUT8xAAAACQocRBWFFwAAAAF0Uk5TAEDm2GYAAAPCSURBVHja7d3JctNAFIZRMwRCCGEmzPM8z/D+T8bu/ptbXXJFdij5fMt2Wuo+2UgqxVmtttq5WVotLzBgwIABAwYMGDCn0qVqbo69psPqVpWx+1XG5iaavF8wYMCAAQMGDBgwi4DJ6Y6qkxB1HNlcN3a92gbR5P2CAQMGDBgwYMCAWSxMlrU+UY5yu2l9okfV4bAxUVbf7TJnAwMGDBgwYMCAAbMLMHeqbGR82Zy+VR1Ht81nVca6R+UdTLaU24Ruzd3qM/e4yjnAgAEDBgwYMGDA7AJMd1l/3NRdVGcj3eX/2WEhCmDGxnM7yqygu8XIPjJj8iN/MGDAgAEDBgwYMAuDGb8q0RGlLCHLv1t9qDKWn3vdNHVuEI6HPaxO9Jo3GDBgwIABAwYMmIXBdC9ShGgMk+XnkXUeuGcsP/e1+lhNnZsL/G5Vs3OAAQMGDBgwYMCAWSxMR3SzOmraG5atdy9wZKzb+vg16qyqe2FltbnAgAEDBgwYMGDALAxmTJSuN3WA76rnVca6GTnemGN1WoEBAwYMGDBgwIBZGMxUomy4+xO899V4LAg5Xnc2MGDAgAEDBgwYMGA218Wq+2K1LDqvY9xZu8zN8fICdM6btYABAwYMGDBgwIABMzfH0+pGU5afze2tXebmeAfVz+p8BQYMGDBgwIABAwbMPBzZ+oWmfJrln1273FhkbHzee9WWbw7AgAEDBgwYMGDALAKm43hcdctKgblcPamOhuXnXlY5Xs6bsW4FGyQCAwYMGDBgwIABswiYMceZKgvMo+h8mrHLTdn676rj+FEFoTtHd8MwOxEYMGDAgAEDBgyYRcBM5UhXqiymW3R3c9ARhWO/OmjqfjVZy+xEYMCAAQMGDBgwYBYG073OnCV0RFNhMhaOa9WfKmOB6XjHMN1tQmaAAQMGDBgwYMCA2VWY7vXjz1U4croAzgPztwIDBgwYMGDAgAEDZhswh035NBw59Dww3RgYMGDAgAEDBgwYMJuD6f4tXT7NUqfCdBvZLkxXdgQGDBgwYMCAAQNmt2DGj8WzwAfV/w7T/aq7mxwwYMCAAQMGDBgwuwqTOo7uTwTngflSzQ3TdaJvAwEDBgwYMGDAgAED5gSvgbyo5oHZ4Pc+gwEDBgwYMGDAgAEzhOm+5G0qTGaAAQMGDBgwYMCAAXNaMOcnls3tNwWm+zRzp54NDBgwYMCAAQMGDJh5YNL36k1TLuGvVq+qnKMbS5n7tulT9asCAwYMGDBgwIABA2ZumKuztLnjgQEDBgwYMGDAgNl5mH/4/ltKA6vBNAAAAABJRU5ErkJggg==);background-position:100% 100%;background-repeat:no-repeat}#source q{font-size:60px}#its-in-3d p{-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-ms-transform-style:preserve-3d;-o-transform-style:preserve-3d;transform-style:preserve-3d}#its-in-3d b,#its-in-3d span{display:inline-block;-webkit-transform:translateZ(40px);-moz-transform:translateZ(40px);-ms-transform:translateZ(40px);transform:translateZ(40px);-webkit-transition-delay:.5s;-moz-transition-delay:.5s;-ms-transition-delay:.5s;-o-transition-delay:.5s;transition-delay:.5s}#its-in-3d .have{-webkit-transform:translateZ(-40px);-moz-transform:translateZ(-40px);-ms-transform:translateZ(-40px);transform:translateZ(-40px)}#its-in-3d .have,#its-in-3d .you{-webkit-transition-delay:0s;-moz-transition-delay:0s;-ms-transition-delay:0s;-o-transition-delay:0s;transition-delay:0s}#its-in-3d .you{-webkit-transform:translateZ(20px);-moz-transform:translateZ(20px);-ms-transform:translateZ(20px);transform:translateZ(20px)}#its-in-3d .noticed{-webkit-transform:translateZ(-40px);-moz-transform:translateZ(-40px);-ms-transform:translateZ(-40px);transform:translateZ(-40px)}#its-in-3d .its,#its-in-3d .noticed{-webkit-transition-delay:0s;-moz-transition-delay:0s;-ms-transition-delay:0s;-o-transition-delay:0s;transition-delay:0s}#its-in-3d .its{-webkit-transform:translateZ(60px);-moz-transform:translateZ(60px);-ms-transform:translateZ(60px);transform:translateZ(60px)}#its-in-3d .footnote,#its-in-3d .in{-webkit-transform:translateZ(-10px);-moz-transform:translateZ(-10px);-ms-transform:translateZ(-10px);transform:translateZ(-10px);-webkit-transition-delay:0s;-moz-transition-delay:0s;-ms-transition-delay:0s;-o-transition-delay:0s;transition-delay:0s}#its-in-3d .footnote{font-size:32px}#its-in-3d.present b,#its-in-3d.present span{-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);-webkit-transition-delay:0s;-moz-transition-delay:0s;-ms-transition-delay:0s;-o-transition-delay:0s;transition-delay:0s}
2 | /*# sourceMappingURL=react-impressjs.css.map*/


--------------------------------------------------------------------------------
/config/webpack.config.prod.js:
--------------------------------------------------------------------------------
  1 | var autoprefixer = require('autoprefixer');
  2 | var webpack = require('webpack');
  3 | var HtmlWebpackPlugin = require('html-webpack-plugin');
  4 | var ExtractTextPlugin = require('extract-text-webpack-plugin');
  5 | var ManifestPlugin = require('webpack-manifest-plugin');
  6 | var InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
  7 | var url = require('url');
  8 | var paths = require('./paths');
  9 | var getClientEnvironment = require('./env');
 10 | 
 11 | 
 12 | 
 13 | // Webpack uses `publicPath` to determine where the app is being served from.
 14 | // It requires a trailing slash, or the file assets will get an incorrect path.
 15 | var publicPath = paths.servedPath;
 16 | // Some apps do not use client-side routing with pushState.
 17 | // For these, "homepage" can be set to "." to enable relative asset paths.
 18 | var shouldUseRelativeAssetPaths = publicPath === './';
 19 | // `publicUrl` is just like `publicPath`, but we will provide it to our app
 20 | // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
 21 | // Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
 22 | var publicUrl = publicPath.slice(0, -1);
 23 | // Get environment variables to inject into our app.
 24 | var env = getClientEnvironment(publicUrl);
 25 | 
 26 | // Assert this just to be safe.
 27 | // Development builds of React are slow and not intended for production.
 28 | if (env.stringified['process.env'].NODE_ENV !== '"production"') {
 29 |   throw new Error('Production builds must have NODE_ENV=production.');
 30 | }
 31 | 
 32 | // Note: defined here because it will be used more than once.
 33 | const cssFilename = 'static/css/[name].[contenthash:8].css';
 34 | 
 35 | // ExtractTextPlugin expects the build output to be flat.
 36 | // (See https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/27)
 37 | // However, our output is structured with css, js and media folders.
 38 | // To have this structure working with relative paths, we have to use custom options.
 39 | const extractTextPluginOptions = shouldUseRelativeAssetPaths
 40 |   // Making sure that the publicPath goes back to to build folder.
 41 |   ? { publicPath: Array(cssFilename.split('/').length).join('../') }
 42 |   : undefined;
 43 | 
 44 | // This is the production configuration.
 45 | // It compiles slowly and is focused on producing a fast and minimal bundle.
 46 | // The development configuration is different and lives in a separate file.
 47 | module.exports = {
 48 |   // Don't attempt to continue if there are any errors.
 49 |   bail: true,
 50 |   // We generate sourcemaps in production. This is slow but gives good results.
 51 |   // You can exclude the *.map files from the build during deployment.
 52 |   devtool: 'source-map',
 53 |   // In production, we only want to load the polyfills and the app code.
 54 |   entry: [
 55 |     require.resolve('./polyfills'),
 56 |     paths.appIndexJs
 57 |   ],
 58 |   output: {
 59 |     // The build folder.
 60 |     path: paths.appBuild,
 61 |     // Generated JS file names (with nested folders).
 62 |     // There will be one main bundle, and one file per asynchronous chunk.
 63 |     // We don't currently advertise code splitting but Webpack supports it.
 64 |     filename: 'static/js/[name].[chunkhash:8].js',
 65 |     chunkFilename: 'static/js/[name].[chunkhash:8].chunk.js',
 66 |     // We inferred the "public path" (such as / or /my-project) from homepage.
 67 |     publicPath: publicPath
 68 |   },
 69 |   resolve: {
 70 |     // This allows you to set a fallback for where Webpack should look for modules.
 71 |     // We read `NODE_PATH` environment variable in `paths.js` and pass paths here.
 72 |     // We use `fallback` instead of `root` because we want `node_modules` to "win"
 73 |     // if there any conflicts. This matches Node resolution mechanism.
 74 |     // https://github.com/facebookincubator/create-react-app/issues/253
 75 |     fallback: paths.nodePaths,
 76 |     // These are the reasonable defaults supported by the Node ecosystem.
 77 |     // We also include JSX as a common component filename extension to support
 78 |     // some tools, although we do not recommend using it, see:
 79 |     // https://github.com/facebookincubator/create-react-app/issues/290
 80 |     extensions: ['.js', '.json', '.jsx', ''],
 81 |     alias: {
 82 |       // Support React Native Web
 83 |       // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
 84 |       'react-native': 'react-native-web'
 85 |     }
 86 |   },
 87 |   
 88 |   module: {
 89 |     // First, run the linter.
 90 |     // It's important to do this before Babel processes the JS.
 91 |     preLoaders: [
 92 |       {
 93 |         test: /\.(js|jsx)$/,
 94 |         loader: 'eslint',
 95 |         include: paths.appSrc
 96 |       }
 97 |     ],
 98 |     loaders: [
 99 |       // ** ADDING/UPDATING LOADERS **
100 |       // The "url" loader handles all assets unless explicitly excluded.
101 |       // The `exclude` list *must* be updated with every change to loader extensions.
102 |       // When adding a new loader, you must add its `test`
103 |       // as a new entry in the `exclude` list in the "url" loader.
104 | 
105 |       // "url" loader embeds assets smaller than specified size as data URLs to avoid requests.
106 |       // Otherwise, it acts like the "file" loader.
107 |       {
108 |         exclude: [
109 |           /\.html$/,
110 |           /\.(js|jsx)$/,
111 |           /\.css$/,
112 |           /\.json$/,
113 |           /\.svg$/
114 |         ],
115 |         loader: 'url',
116 |         query: {
117 |           limit: 10000,
118 |           name: 'static/media/[name].[hash:8].[ext]'
119 |         }
120 |       },
121 |       // Process JS with Babel.
122 |       {
123 |         test: /\.(js|jsx)$/,
124 |         include: paths.appSrc,
125 |         loader: 'babel',
126 |         
127 |       },
128 |       // The notation here is somewhat confusing.
129 |       // "postcss" loader applies autoprefixer to our CSS.
130 |       // "css" loader resolves paths in CSS and adds assets as dependencies.
131 |       // "style" loader normally turns CSS into JS modules injecting <style>,
132 |       // but unlike in development configuration, we do something different.
133 |       // `ExtractTextPlugin` first applies the "postcss" and "css" loaders
134 |       // (second argument), then grabs the result CSS and puts it into a
135 |       // separate file in our build process. This way we actually ship
136 |       // a single CSS file in production instead of JS code injecting <style>
137 |       // tags. If you use code splitting, however, any async bundles will still
138 |       // use the "style" loader inside the async code so CSS from them won't be
139 |       // in the main CSS file.
140 |       {
141 |         test: /\.css$/,
142 |         loader: ExtractTextPlugin.extract(
143 |           'style',
144 |           'css?importLoaders=1!postcss',
145 |           extractTextPluginOptions
146 |         )
147 |         // Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
148 |       },
149 |       // JSON is not enabled by default in Webpack but both Node and Browserify
150 |       // allow it implicitly so we also enable it.
151 |       {
152 |         test: /\.json$/,
153 |         loader: 'json'
154 |       },
155 |       // "file" loader for svg
156 |       {
157 |         test: /\.svg$/,
158 |         loader: 'file',
159 |         query: {
160 |           name: 'static/media/[name].[hash:8].[ext]'
161 |         }
162 |       }
163 |       // ** STOP ** Are you adding a new loader?
164 |       // Remember to add the new extension(s) to the "url" loader exclusion list.
165 |     ]
166 |   },
167 |   
168 |   // We use PostCSS for autoprefixing only.
169 |   postcss: function() {
170 |     return [
171 |       autoprefixer({
172 |         browsers: [
173 |           '>1%',
174 |           'last 4 versions',
175 |           'Firefox ESR',
176 |           'not ie < 9', // React doesn't support IE8 anyway
177 |         ]
178 |       }),
179 |     ];
180 |   },
181 |   plugins: [
182 |     // Makes some environment variables available in index.html.
183 |     // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
184 |     // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
185 |     // In production, it will be an empty string unless you specify "homepage"
186 |     // in `package.json`, in which case it will be the pathname of that URL.
187 |     new InterpolateHtmlPlugin(env.raw),
188 |     // Generates an `index.html` file with the <script> injected.
189 |     new HtmlWebpackPlugin({
190 |       inject: true,
191 |       template: paths.appHtml,
192 |       minify: {
193 |         removeComments: true,
194 |         collapseWhitespace: true,
195 |         removeRedundantAttributes: true,
196 |         useShortDoctype: true,
197 |         removeEmptyAttributes: true,
198 |         removeStyleLinkTypeAttributes: true,
199 |         keepClosingSlash: true,
200 |         minifyJS: true,
201 |         minifyCSS: true,
202 |         minifyURLs: true
203 |       }
204 |     }),
205 |     // Makes some environment variables available to the JS code, for example:
206 |     // if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
207 |     // It is absolutely essential that NODE_ENV was set to production here.
208 |     // Otherwise React will be compiled in the very slow development mode.
209 |     new webpack.DefinePlugin(env.stringified),
210 |     // This helps ensure the builds are consistent if source hasn't changed:
211 |     new webpack.optimize.OccurrenceOrderPlugin(),
212 |     // Try to dedupe duplicated modules, if any:
213 |     new webpack.optimize.DedupePlugin(),
214 |     // Minify the code.
215 |     new webpack.optimize.UglifyJsPlugin({
216 |       compress: {
217 |         screw_ie8: true, // React doesn't support IE8
218 |         warnings: false
219 |       },
220 |       mangle: {
221 |         screw_ie8: true
222 |       },
223 |       output: {
224 |         comments: false,
225 |         screw_ie8: true
226 |       }
227 |     }),
228 |     // Note: this won't work without ExtractTextPlugin.extract(..) in `loaders`.
229 |     new ExtractTextPlugin(cssFilename),
230 |     // Generate a manifest file which contains a mapping of all asset filenames
231 |     // to their corresponding output file so that tools can pick it up without
232 |     // having to parse `index.html`.
233 |     new ManifestPlugin({
234 |       fileName: 'asset-manifest.json'
235 |     })
236 |   ],
237 |   // Some libraries import Node modules but don't use them in the browser.
238 |   // Tell Webpack to provide empty mocks for them so importing them works.
239 |   node: {
240 |     fs: 'empty',
241 |     net: 'empty',
242 |     tls: 'empty'
243 |   }
244 | };
245 | 


--------------------------------------------------------------------------------
/config/webpack.config.impress.prod.js:
--------------------------------------------------------------------------------
  1 | var autoprefixer = require('autoprefixer');
  2 | var webpack = require('webpack');
  3 | var HtmlWebpackPlugin = require('html-webpack-plugin');
  4 | var ExtractTextPlugin = require('extract-text-webpack-plugin');
  5 | var ManifestPlugin = require('webpack-manifest-plugin');
  6 | var InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
  7 | var url = require('url');
  8 | var paths = require('./paths');
  9 | var getClientEnvironment = require('./env');
 10 | 
 11 | 
 12 | 
 13 | // Webpack uses `publicPath` to determine where the app is being served from.
 14 | // It requires a trailing slash, or the file assets will get an incorrect path.
 15 | var publicPath = paths.servedPath;
 16 | // Some apps do not use client-side routing with pushState.
 17 | // For these, "homepage" can be set to "." to enable relative asset paths.
 18 | var shouldUseRelativeAssetPaths = publicPath === './';
 19 | // `publicUrl` is just like `publicPath`, but we will provide it to our app
 20 | // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
 21 | // Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
 22 | var publicUrl = publicPath.slice(0, -1);
 23 | // Get environment variables to inject into our app.
 24 | var env = getClientEnvironment(publicUrl);
 25 | 
 26 | // Assert this just to be safe.
 27 | // Development builds of React are slow and not intended for production.
 28 | if (env.stringified['process.env'].NODE_ENV !== '"production"') {
 29 |   throw new Error('Production builds must have NODE_ENV=production.');
 30 | }
 31 | 
 32 | // Note: defined here because it will be used more than once.
 33 | const cssFilename = 'static/css/[name].[contenthash:8].css';
 34 | 
 35 | // ExtractTextPlugin expects the build output to be flat.
 36 | // (See https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/27)
 37 | // However, our output is structured with css, js and media folders.
 38 | // To have this structure working with relative paths, we have to use custom options.
 39 | const extractTextPluginOptions = shouldUseRelativeAssetPaths
 40 |   // Making sure that the publicPath goes back to to build folder.
 41 |   ? { publicPath: Array(cssFilename.split('/').length).join('../') }
 42 |   : undefined;
 43 | 
 44 | // This is the production configuration.
 45 | // It compiles slowly and is focused on producing a fast and minimal bundle.
 46 | // The development configuration is different and lives in a separate file.
 47 | module.exports = {
 48 |   // Don't attempt to continue if there are any errors.
 49 |   bail: true,
 50 |   // We generate sourcemaps in production. This is slow but gives good results.
 51 |   // You can exclude the *.map files from the build during deployment.
 52 |   devtool: 'source-map',
 53 |   // In production, we only want to load the polyfills and the app code.
 54 |   entry: [
 55 |     require.resolve('./polyfills'),
 56 |     paths.appIndexJs
 57 |   ],
 58 |   output: {
 59 |     // The build folder.
 60 |     path: paths.appBuild,
 61 |     // Generated JS file names (with nested folders).
 62 |     // There will be one main bundle, and one file per asynchronous chunk.
 63 |     // We don't currently advertise code splitting but Webpack supports it.
 64 |     filename: 'static/js/[name].[chunkhash:8].js',
 65 |     chunkFilename: 'static/js/[name].[chunkhash:8].chunk.js',
 66 |     // We inferred the "public path" (such as / or /my-project) from homepage.
 67 |     publicPath: publicPath
 68 |   },
 69 |   resolve: {
 70 |     // This allows you to set a fallback for where Webpack should look for modules.
 71 |     // We read `NODE_PATH` environment variable in `paths.js` and pass paths here.
 72 |     // We use `fallback` instead of `root` because we want `node_modules` to "win"
 73 |     // if there any conflicts. This matches Node resolution mechanism.
 74 |     // https://github.com/facebookincubator/create-react-app/issues/253
 75 |     fallback: paths.nodePaths,
 76 |     // These are the reasonable defaults supported by the Node ecosystem.
 77 |     // We also include JSX as a common component filename extension to support
 78 |     // some tools, although we do not recommend using it, see:
 79 |     // https://github.com/facebookincubator/create-react-app/issues/290
 80 |     extensions: ['.js', '.json', '.jsx', ''],
 81 |     alias: {
 82 |       // Support React Native Web
 83 |       // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
 84 |       'react-native': 'react-native-web'
 85 |     }
 86 |   },
 87 |   
 88 |   module: {
 89 |     // First, run the linter.
 90 |     // It's important to do this before Babel processes the JS.
 91 |     preLoaders: [
 92 |       {
 93 |         test: /\.(js|jsx)$/,
 94 |         loader: 'eslint',
 95 |         include: paths.appSrc
 96 |       }
 97 |     ],
 98 |     loaders: [
 99 |       // ** ADDING/UPDATING LOADERS **
100 |       // The "url" loader handles all assets unless explicitly excluded.
101 |       // The `exclude` list *must* be updated with every change to loader extensions.
102 |       // When adding a new loader, you must add its `test`
103 |       // as a new entry in the `exclude` list in the "url" loader.
104 | 
105 |       // "url" loader embeds assets smaller than specified size as data URLs to avoid requests.
106 |       // Otherwise, it acts like the "file" loader.
107 |       {
108 |         exclude: [
109 |           /\.html$/,
110 |           /\.(js|jsx)$/,
111 |           /\.css$/,
112 |           /\.json$/,
113 |           /\.svg$/
114 |         ],
115 |         loader: 'url',
116 |         query: {
117 |           limit: 10000,
118 |           name: 'static/media/[name].[hash:8].[ext]'
119 |         }
120 |       },
121 |       // Process JS with Babel.
122 |       {
123 |         test: /\.(js|jsx)$/,
124 |         include: paths.appSrc,
125 |         loader: 'babel',
126 |         
127 |       },
128 |       // The notation here is somewhat confusing.
129 |       // "postcss" loader applies autoprefixer to our CSS.
130 |       // "css" loader resolves paths in CSS and adds assets as dependencies.
131 |       // "style" loader normally turns CSS into JS modules injecting <style>,
132 |       // but unlike in development configuration, we do something different.
133 |       // `ExtractTextPlugin` first applies the "postcss" and "css" loaders
134 |       // (second argument), then grabs the result CSS and puts it into a
135 |       // separate file in our build process. This way we actually ship
136 |       // a single CSS file in production instead of JS code injecting <style>
137 |       // tags. If you use code splitting, however, any async bundles will still
138 |       // use the "style" loader inside the async code so CSS from them won't be
139 |       // in the main CSS file.
140 |       {
141 |         test: /\.css$/,
142 |         loader: ExtractTextPlugin.extract(
143 |           'style',
144 |           'css?importLoaders=1!postcss',
145 |           extractTextPluginOptions
146 |         )
147 |         // Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
148 |       },
149 |       {
150 |         test: /\.s[ac]ss$/,
151 |         loader: ExtractTextPlugin.extract([
152 |           'css',
153 |           'sass'
154 |         ])
155 |       },
156 |       // JSON is not enabled by default in Webpack but both Node and Browserify
157 |       // allow it implicitly so we also enable it.
158 |       {
159 |         test: /\.json$/,
160 |         loader: 'json'
161 |       },
162 |       // "file" loader for svg
163 |       {
164 |         test: /\.svg$/,
165 |         loader: 'file',
166 |         query: {
167 |           name: 'static/media/[name].[hash:8].[ext]'
168 |         }
169 |       }
170 |       // ** STOP ** Are you adding a new loader?
171 |       // Remember to add the new extension(s) to the "url" loader exclusion list.
172 |     ]
173 |   },
174 |   
175 |   // We use PostCSS for autoprefixing only.
176 |   postcss: function() {
177 |     return [
178 |       autoprefixer({
179 |         browsers: [
180 |           '>1%',
181 |           'last 4 versions',
182 |           'Firefox ESR',
183 |           'not ie < 9', // React doesn't support IE8 anyway
184 |         ]
185 |       }),
186 |     ];
187 |   },
188 |   plugins: [
189 |     // Makes some environment variables available in index.html.
190 |     // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
191 |     // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
192 |     // In production, it will be an empty string unless you specify "homepage"
193 |     // in `package.json`, in which case it will be the pathname of that URL.
194 |     new InterpolateHtmlPlugin(env.raw),
195 |     // Generates an `index.html` file with the <script> injected.
196 |     new HtmlWebpackPlugin({
197 |       inject: true,
198 |       template: paths.appHtml,
199 |       minify: {
200 |         removeComments: true,
201 |         collapseWhitespace: true,
202 |         removeRedundantAttributes: true,
203 |         useShortDoctype: true,
204 |         removeEmptyAttributes: true,
205 |         removeStyleLinkTypeAttributes: true,
206 |         keepClosingSlash: true,
207 |         minifyJS: true,
208 |         minifyCSS: true,
209 |         minifyURLs: true
210 |       }
211 |     }),
212 |     // Makes some environment variables available to the JS code, for example:
213 |     // if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
214 |     // It is absolutely essential that NODE_ENV was set to production here.
215 |     // Otherwise React will be compiled in the very slow development mode.
216 |     new webpack.DefinePlugin(env.stringified),
217 |     // This helps ensure the builds are consistent if source hasn't changed:
218 |     new webpack.optimize.OccurrenceOrderPlugin(),
219 |     // Try to dedupe duplicated modules, if any:
220 |     new webpack.optimize.DedupePlugin(),
221 |     // Minify the code.
222 |     new webpack.optimize.UglifyJsPlugin({
223 |       compress: {
224 |         screw_ie8: true, // React doesn't support IE8
225 |         warnings: false
226 |       },
227 |       mangle: {
228 |         screw_ie8: true
229 |       },
230 |       output: {
231 |         comments: false,
232 |         screw_ie8: true
233 |       }
234 |     }),
235 |     // Note: this won't work without ExtractTextPlugin.extract(..) in `loaders`.
236 |     new ExtractTextPlugin(cssFilename),
237 |     // Generate a manifest file which contains a mapping of all asset filenames
238 |     // to their corresponding output file so that tools can pick it up without
239 |     // having to parse `index.html`.
240 |     new ManifestPlugin({
241 |       fileName: 'asset-manifest.json'
242 |     })
243 |   ],
244 |   // Some libraries import Node modules but don't use them in the browser.
245 |   // Tell Webpack to provide empty mocks for them so importing them works.
246 |   node: {
247 |     fs: 'empty',
248 |     net: 'empty',
249 |     tls: 'empty'
250 |   }
251 | };
252 | 


--------------------------------------------------------------------------------
/src/styles/_base.scss:
--------------------------------------------------------------------------------
  1 | /*** base style for impress ***/
  2 | 
  3 | /************/
  4 | /*** Font ***/
  5 | /************/
  6 | @import url(https://fonts.googleapis.com/css?family=Roboto:300,700);
  7 | $_font-family: 'Roboto', 'San Francisco', '微軟正黑體', 'sans-serif';
  8 | $_font-size: 48px;
  9 | 
 10 | /*************/
 11 | /*** Color ***/
 12 | /*************/
 13 | $_main-color: #3e4852;
 14 | $_sub-color : #e5b560;
 15 | 
 16 | /*************/
 17 | /*** mixin ***/
 18 | /*************/
 19 | @mixin transition($props, $second){
 20 |   -webkit-transition: $props $second;
 21 |      -moz-transition: $props $second;
 22 |       -ms-transition: $props $second;
 23 |        -o-transition: $props $second;
 24 |           transition: $props $second;
 25 | }
 26 | @mixin transform($transform, $delay) {
 27 |   -webkit-transform: $transform;
 28 |      -moz-transform: $transform;
 29 |       -ms-transform: $transform;
 30 |           transform: $transform;
 31 |           
 32 |   -webkit-transition-delay: $delay;
 33 |      -moz-transition-delay: $delay;
 34 |       -ms-transition-delay: $delay;
 35 |        -o-transition-delay: $delay;
 36 |           transition-delay: $delay;
 37 | }
 38 | 
 39 | 
 40 | html, body, div, span, applet, object, iframe,
 41 | h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 42 | a, abbr, acronym, address, big, cite, code,
 43 | del, dfn, em, img, ins, kbd, q, s, samp,
 44 | small, strike, strong, sub, sup, tt, var,
 45 | b, u, i, center,
 46 | dl, dt, dd, ol, ul, li,
 47 | fieldset, form, label, legend,
 48 | 
 49 | article, aside, canvas, details, embed,
 50 | figure, figcaption, footer, header, hgroup,
 51 | menu, nav, output, ruby, section, summary,
 52 | time, mark, audio, video {
 53 |   margin: 0;
 54 |   padding: 0;
 55 |   border: 0;
 56 |   font-size: 100%;
 57 |   font: inherit;
 58 |   vertical-align: baseline;
 59 | }
 60 | 
 61 | article, aside, details, figcaption, figure,
 62 | footer, header, hgroup, menu, nav, section {
 63 |     display: block;
 64 | }
 65 | 
 66 | #react-impressjs{
 67 |   line-height: 1;
 68 |   font-family: $_font-family;
 69 |   min-height: 100vh;
 70 |   background: rgb(215, 215, 215);
 71 |   background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 500, from(rgb(240, 240, 240)), to(rgb(155, 165, 175)));
 72 |   background: -webkit-radial-gradient(rgb(240, 240, 240), rgb(155, 165, 175));
 73 |   background:    -moz-radial-gradient(rgb(240, 240, 240), rgb(155, 165, 175));
 74 |   background:     -ms-radial-gradient(rgb(240, 240, 240), rgb(155, 165, 175));
 75 |   background:      -o-radial-gradient(rgb(240, 240, 240), rgb(155, 165, 175));
 76 |   background:         radial-gradient(rgb(240, 240, 240), rgb(155, 165, 175));
 77 | }
 78 | 
 79 | ol, ul {
 80 |   list-style: none;
 81 | }
 82 | 
 83 | blockquote, q {
 84 |   quotes: none;
 85 |   &:before, &:after{
 86 |     content: '';
 87 |     content: none;
 88 |   }
 89 | }
 90 | 
 91 | /*
 92 |     Now let's bring some text styles back ...
 93 | */
 94 | b, strong { font-weight: bold }
 95 | i, em { font-style: italic }
 96 | sub, sup {
 97 |   position: relative;
 98 | }
 99 | sub {bottom: -.25em;}
100 | sup {top: -.5em;}
101 | 
102 | 
103 | /*
104 |     step style
105 | */
106 | .step {
107 |   position: relative;
108 |   width: 900px;
109 |   padding: 20px;
110 |   margin: 20px auto;
111 | 
112 |   -webkit-box-sizing: border-box;
113 |   -moz-box-sizing:    border-box;
114 |   -ms-box-sizing:     border-box;
115 |   -o-box-sizing:      border-box;
116 |   box-sizing:         border-box;
117 | 
118 |   font-family: $_font-family;
119 |   font-size: $_font-size;
120 |   line-height: 1.5;
121 |   
122 |   /*****************/
123 |   /*** Font-Size ***/
124 |   /*****************/
125 |   h1, .h1{ font-size: ($_font-size * 2.6); }
126 |   h2, .h2{ font-size: ($_font-size * 2.15); }
127 |   h3, .h3{ font-size: ($_font-size * 1.7); }
128 |   h4, .h4{ font-size: ($_font-size * 1.3); }
129 |   h5, .h5{ font-size: ($_font-size * 1); }
130 |   h6, .h6{ font-size: ($_font-size * 0.85); }
131 | }
132 | .impress-enabled {
133 |   .step {
134 |     margin: 0;
135 |     opacity: 0.3;
136 | 
137 |     @include transition(opacity, 1s);
138 |     
139 |     &.active{ 
140 |       opacity: 1; 
141 |       cursor: default;
142 |     }
143 |     
144 |     a {
145 |       color: rgba(255,255,255,0.8);
146 |       text-decoration: none;
147 |       padding: 0 0.4em;
148 |       background: $_main-color;
149 |       border-radius: 0.2em;
150 |     
151 |       @include transition(all, .5s);
152 |       
153 |       &:hover, &:focus {
154 |         color: $_sub-color;
155 |         background: lighten($_main-color, 5);
156 |         box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
157 |         text-decoration:none;
158 |       }
159 |     }
160 |     b {
161 |       display: inline-block;
162 |       
163 |       @include transition(all, .5s);
164 |     }
165 |     &.present {
166 |       .positioning {
167 |         @include transform(translateY(-10px), 1.25s);
168 |       }
169 |       .positioning-down {
170 |         @include transform(translateY(10px), 1.25s);
171 |       }
172 |       .rotating{
173 |         @include transform(rotate(-10deg), 1.5s);
174 |       }
175 |       .rotating-right{
176 |         @include transform(rotate(10deg), 1.5s);
177 |       }
178 |       .scaling{
179 |         @include transform(scale(.7), 1.75s);
180 |       }
181 |       .scaling-up{
182 |         @include transform(scale(1.3), 1.75s);
183 |       }
184 |     }
185 |   }
186 | }
187 | 
188 | /*
189 |     slide style
190 | */
191 | .slide {
192 |   display: block;
193 | 
194 |   line-height: 36px;
195 |   width: 900px;
196 |   height: 700px;
197 |   padding: 40px 60px;
198 | 
199 |   background-color: white;
200 |   border: 1px solid rgba(0, 0, 0, .3);
201 |   border-radius: 3px;
202 |   box-shadow: 0 8px 16px rgba(0,20,80,.04), 0 4px 16px rgba(0,0,0,.08);
203 | 
204 |   color: rgb(102, 102, 102);
205 |   text-shadow: 0 2px 2px rgba(0, 0, 0, .1);
206 | 
207 |   $_font-size: 35px;
208 |   font-size: $_font-size;
209 |   letter-spacing: 1px;
210 |   
211 |   h1, .h1{ font-size: ($_font-size * 2.6); }
212 |   h2, .h2{ font-size: ($_font-size * 2.15); }
213 |   h3, .h3{ font-size: ($_font-size * 1.7); }
214 |   h4, .h4{ font-size: ($_font-size * 1.3); }
215 |   h5, .h5{ font-size: ($_font-size * 1); }
216 |   h6, .h6{ font-size: ($_font-size * 0.85); }
217 |   
218 |   &:hover{
219 |     box-shadow: 0 8px 16px rgba(0,40,80,.08), 0 8px 24px 5px rgba(0,0,0,.08);
220 |   }
221 | }
222 | 
223 | /*
224 |     overview
225 | */
226 | #overview {display: none;}
227 | .impress-on-overview .step {
228 |   opacity: 1;
229 | }
230 | /*
231 |     hint
232 | */
233 | .hint {
234 |   opacity: 0;
235 |   animation: fadeOutUp .6s ease forwards;
236 | 
237 |   color: rgba(255,255,255,.8);
238 |   background-color: $_main-color;
239 |   font-size: 20px;
240 |   text-align: center;
241 |   
242 |   width: 400px;
243 |   min-height: 100px;
244 |   line-height: 100px;
245 | 
246 |   position: fixed;
247 |   left: 25px;
248 |   bottom: 14%;
249 |   z-index: 9999;
250 | 
251 |   border-radius: 3px;
252 |   filter: drop-shadow(0 8px 8px rgba(0,0,0,.3));
253 |   
254 |   b {
255 |     color: $_sub-color;
256 |   }
257 | }
258 | .mobile-hint {
259 |   opacity: 0;
260 |   animation: fadeOutUp .6s ease forwards;
261 |   
262 |   text-align: center;
263 |   color: $_main-color;
264 |   
265 |   width: 128px;
266 |   
267 |   position: fixed;
268 |   left: calc(50% - 64px);
269 |   bottom: 10%;
270 |   
271 |   img {
272 |     display:block;
273 |     margin: 0 auto;
274 |     width: 48px;
275 |   }
276 |   span {
277 |     display: block;
278 |     margin-top: 5px;
279 |   }
280 | }
281 | .show {
282 |   .hint, .mobile-hint {
283 |     animation: fadeInDown .6s ease 1s forwards;
284 |   }
285 | }
286 | .impress-enabled { 
287 |   .hint, .mobile-hint { display: block }
288 | }
289 | /*
290 |   animation
291 | */
292 | @keyframes fadeInDown {
293 |   from {
294 |     opacity: 0;
295 |     transform: translate3d(0, -100%, 0);
296 |   }
297 |   to {
298 |     opacity: 1;
299 |     transform: none;
300 |   }
301 | }
302 | @keyframes fadeOutUp {
303 |   from {
304 |     opacity: 1;
305 |   }
306 |   to {
307 |     opacity: 0;
308 |     transform: translate3d(0, 100%, 0);
309 |   }
310 | }
311 | /*
312 |   For Demo
313 | */
314 | .slide {
315 |   q {
316 |     display: block;
317 |     font-size: 50px;
318 |     line-height: 72px;
319 | 
320 |     margin-top: 100px;
321 |     
322 |     strong {
323 |       white-space: nowrap;
324 |     }
325 |   }
326 | }
327 | #title {
328 |   padding: 0;
329 |   
330 |   .try {
331 |     font-size: 64px;
332 |     position: absolute;
333 |     top: -0.5em;
334 |     left: 1.5em;
335 |     
336 |     @include transform(translateZ(20px), 0s);
337 |   }
338 |   h1 {
339 |     font-size: 190px;
340 |     
341 |     @include transform(translateZ(50px), 0s);
342 |   }
343 |   .footnote {
344 |     font-size: 32px;
345 |   }
346 | }
347 | 
348 | #big {
349 |   width: 600px;
350 |   text-align: center;
351 |   font-size: 60px;
352 |   line-height: 1;
353 |   b {
354 |     display: block;
355 |     font-size: 250px;
356 |     line-height: 250px;
357 |   }
358 |   .thoughts {
359 |     font-size: 90px;
360 |     line-height: 150px;
361 |   }
362 | }
363 | 
364 | #tiny {
365 |   width: 500px;
366 |   text-align: center;
367 | }
368 | 
369 | #ing { width:500px; }
370 | 
371 | #imagination {
372 |   width: 600px;
373 |   
374 |   .imagination {
375 |     font-size: 78px;
376 |   }
377 | }
378 | 
379 | #source {
380 |   width: 700px;
381 |   padding-bottom: 300px;
382 | 
383 |   /* Yoda Icon :: Pixel Art from Star Wars http://www.pixeljoint.com/pixelart/1423.htm */
384 |   background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARgAAAEYCAMAAACwUBm+AAAAAXNSR0IArs4c6QAAAKtQTFRFsAAAvbWSLUUrLEQqY1s8UYJMqJ1vNTEgOiIdIzYhjIFVLhsXZ6lgSEIsP2U8JhcCVzMsSXZEgXdOO145XJdWOl03LzAYMk4vSXNExr+hwcuxRTs1Qmk+RW9Am49eFRANQz4pUoNMQWc+OSMDTz0wLBsCNVMxa2NBOyUDUoNNSnlEWo9VRGxAVzYFl6tXCggHbLNmMUIcHhwTXkk5f3VNRT8wUT8xAAAACQocRBWFFwAAAAF0Uk5TAEDm2GYAAAPCSURBVHja7d3JctNAFIZRMwRCCGEmzPM8z/D+T8bu/ptbXXJFdij5fMt2Wuo+2UgqxVmtttq5WVotLzBgwIABAwYMGDCn0qVqbo69psPqVpWx+1XG5iaavF8wYMCAAQMGDBgwi4DJ6Y6qkxB1HNlcN3a92gbR5P2CAQMGDBgwYMCAWSxMlrU+UY5yu2l9okfV4bAxUVbf7TJnAwMGDBgwYMCAAbMLMHeqbGR82Zy+VR1Ht81nVca6R+UdTLaU24Ruzd3qM/e4yjnAgAEDBgwYMGDA7AJMd1l/3NRdVGcj3eX/2WEhCmDGxnM7yqygu8XIPjJj8iN/MGDAgAEDBgwYMAuDGb8q0RGlLCHLv1t9qDKWn3vdNHVuEI6HPaxO9Jo3GDBgwIABAwYMmIXBdC9ShGgMk+XnkXUeuGcsP/e1+lhNnZsL/G5Vs3OAAQMGDBgwYMCAWSxMR3SzOmraG5atdy9wZKzb+vg16qyqe2FltbnAgAEDBgwYMGDALAxmTJSuN3WA76rnVca6GTnemGN1WoEBAwYMGDBgwIBZGMxUomy4+xO899V4LAg5Xnc2MGDAgAEDBgwYMGA218Wq+2K1LDqvY9xZu8zN8fICdM6btYABAwYMGDBgwIABMzfH0+pGU5afze2tXebmeAfVz+p8BQYMGDBgwIABAwbMPBzZ+oWmfJrln1273FhkbHzee9WWbw7AgAEDBgwYMGDALAKm43hcdctKgblcPamOhuXnXlY5Xs6bsW4FGyQCAwYMGDBgwIABswiYMceZKgvMo+h8mrHLTdn676rj+FEFoTtHd8MwOxEYMGDAgAEDBgyYRcBM5UhXqiymW3R3c9ARhWO/OmjqfjVZy+xEYMCAAQMGDBgwYBYG073OnCV0RFNhMhaOa9WfKmOB6XjHMN1tQmaAAQMGDBgwYMCA2VWY7vXjz1U4croAzgPztwIDBgwYMGDAgAEDZhswh035NBw59Dww3RgYMGDAgAEDBgwYMJuD6f4tXT7NUqfCdBvZLkxXdgQGDBgwYMCAAQNmt2DGj8WzwAfV/w7T/aq7mxwwYMCAAQMGDBgwuwqTOo7uTwTngflSzQ3TdaJvAwEDBgwYMGDAgAED5gSvgbyo5oHZ4Pc+gwEDBgwYMGDAgAEzhOm+5G0qTGaAAQMGDBgwYMCAAXNaMOcnls3tNwWm+zRzp54NDBgwYMCAAQMGDJh5YNL36k1TLuGvVq+qnKMbS5n7tulT9asCAwYMGDBgwIABA2ZumKuztLnjgQEDBgwYMGDAgNl5mH/4/ltKA6vBNAAAAABJRU5ErkJggg==);
385 |   background-position: bottom right;
386 |   background-repeat: no-repeat;
387 |   
388 |   q { font-size: 60px; }
389 | }
390 | 
391 | #its-in-3d {
392 |   p {
393 |     -webkit-transform-style: preserve-3d;
394 |     -moz-transform-style:    preserve-3d;
395 |     -ms-transform-style:     preserve-3d;
396 |     -o-transform-style:      preserve-3d;
397 |     transform-style:         preserve-3d;
398 |   }
399 |   span, b {
400 |     display: inline-block;
401 |     
402 |     @include transform(translateZ(40px), .5s);
403 |   }
404 |   .have { @include transform(translateZ(-40px), 0s); }
405 |   .you  { @include transform(translateZ(20px), 0s); }
406 |   .noticed { @include transform(translateZ(-40px), 0s); }
407 |   .its { @include transform(translateZ(60px), 0s); }
408 |   .in { @include transform(translateZ(-10px), 0s); }
409 |   .footnote { 
410 |     font-size: 32px;
411 |     @include transform(translateZ(-10px), 0s); 
412 |   }
413 |   &.present {
414 |     span, b {
415 |       @include transform(translateZ(0px), 0s);
416 |     }
417 |   }
418 | }


--------------------------------------------------------------------------------
/scripts/start.js:
--------------------------------------------------------------------------------
  1 | process.env.NODE_ENV = 'development';
  2 | 
  3 | // Load environment variables from .env file. Suppress warnings using silent
  4 | // if this file is missing. dotenv will never modify any environment variables
  5 | // that have already been set.
  6 | // https://github.com/motdotla/dotenv
  7 | require('dotenv').config({silent: true});
  8 | 
  9 | var chalk = require('chalk');
 10 | var webpack = require('webpack');
 11 | var WebpackDevServer = require('webpack-dev-server');
 12 | var historyApiFallback = require('connect-history-api-fallback');
 13 | var httpProxyMiddleware = require('http-proxy-middleware');
 14 | var detect = require('detect-port');
 15 | var clearConsole = require('react-dev-utils/clearConsole');
 16 | var checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
 17 | var formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
 18 | var getProcessForPort = require('react-dev-utils/getProcessForPort');
 19 | var openBrowser = require('react-dev-utils/openBrowser');
 20 | var prompt = require('react-dev-utils/prompt');
 21 | var fs = require('fs');
 22 | var config = require('../config/webpack.config.dev');
 23 | var paths = require('../config/paths');
 24 | 
 25 | var useYarn = fs.existsSync(paths.yarnLockFile);
 26 | var cli = useYarn ? 'yarn' : 'npm';
 27 | var isInteractive = process.stdout.isTTY;
 28 | 
 29 | // Warn and crash if required files are missing
 30 | if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
 31 |   process.exit(1);
 32 | }
 33 | 
 34 | // Tools like Cloud9 rely on this.
 35 | var DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
 36 | var compiler;
 37 | var handleCompile;
 38 | 
 39 | // You can safely remove this after ejecting.
 40 | // We only use this block for testing of Create React App itself:
 41 | var isSmokeTest = process.argv.some(arg => arg.indexOf('--smoke-test') > -1);
 42 | if (isSmokeTest) {
 43 |   handleCompile = function (err, stats) {
 44 |     if (err || stats.hasErrors() || stats.hasWarnings()) {
 45 |       process.exit(1);
 46 |     } else {
 47 |       process.exit(0);
 48 |     }
 49 |   };
 50 | }
 51 | 
 52 | function setupCompiler(host, port, protocol) {
 53 |   // "Compiler" is a low-level interface to Webpack.
 54 |   // It lets us listen to some events and provide our own custom messages.
 55 |   compiler = webpack(config, handleCompile);
 56 | 
 57 |   // "invalid" event fires when you have changed a file, and Webpack is
 58 |   // recompiling a bundle. WebpackDevServer takes care to pause serving the
 59 |   // bundle, so if you refresh, it'll wait instead of serving the old one.
 60 |   // "invalid" is short for "bundle invalidated", it doesn't imply any errors.
 61 |   compiler.plugin('invalid', function() {
 62 |     if (isInteractive) {
 63 |       clearConsole();
 64 |     }
 65 |     console.log('Compiling...');
 66 |   });
 67 | 
 68 |   var isFirstCompile = true;
 69 | 
 70 |   // "done" event fires when Webpack has finished recompiling the bundle.
 71 |   // Whether or not you have warnings or errors, you will get this event.
 72 |   compiler.plugin('done', function(stats) {
 73 |     if (isInteractive) {
 74 |       clearConsole();
 75 |     }
 76 | 
 77 |     // We have switched off the default Webpack output in WebpackDevServer
 78 |     // options so we are going to "massage" the warnings and errors and present
 79 |     // them in a readable focused way.
 80 |     var messages = formatWebpackMessages(stats.toJson({}, true));
 81 |     var isSuccessful = !messages.errors.length && !messages.warnings.length;
 82 |     var showInstructions = isSuccessful && (isInteractive || isFirstCompile);
 83 | 
 84 |     if (isSuccessful) {
 85 |       console.log(chalk.green('Compiled successfully!'));
 86 |     }
 87 | 
 88 |     if (showInstructions) {
 89 |       console.log();
 90 |       console.log('The app is running at:');
 91 |       console.log();
 92 |       console.log('  ' + chalk.cyan(protocol + '://' + host + ':' + port + '/'));
 93 |       console.log();
 94 |       console.log('Note that the development build is not optimized.');
 95 |       console.log('To create a production build, use ' + chalk.cyan(cli + ' run build') + '.');
 96 |       console.log();
 97 |       isFirstCompile = false;
 98 |     }
 99 | 
100 |     // If errors exist, only show errors.
101 |     if (messages.errors.length) {
102 |       console.log(chalk.red('Failed to compile.'));
103 |       console.log();
104 |       messages.errors.forEach(message => {
105 |         console.log(message);
106 |         console.log();
107 |       });
108 |       return;
109 |     }
110 | 
111 |     // Show warnings if no errors were found.
112 |     if (messages.warnings.length) {
113 |       console.log(chalk.yellow('Compiled with warnings.'));
114 |       console.log();
115 |       messages.warnings.forEach(message => {
116 |         console.log(message);
117 |         console.log();
118 |       });
119 |       // Teach some ESLint tricks.
120 |       console.log('You may use special comments to disable some warnings.');
121 |       console.log('Use ' + chalk.yellow('// eslint-disable-next-line') + ' to ignore the next line.');
122 |       console.log('Use ' + chalk.yellow('/* eslint-disable */') + ' to ignore all warnings in a file.');
123 |     }
124 |   });
125 | }
126 | 
127 | // We need to provide a custom onError function for httpProxyMiddleware.
128 | // It allows us to log custom error messages on the console.
129 | function onProxyError(proxy) {
130 |   return function(err, req, res){
131 |     var host = req.headers && req.headers.host;
132 |     console.log(
133 |       chalk.red('Proxy error:') + ' Could not proxy request ' + chalk.cyan(req.url) +
134 |       ' from ' + chalk.cyan(host) + ' to ' + chalk.cyan(proxy) + '.'
135 |     );
136 |     console.log(
137 |       'See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (' +
138 |       chalk.cyan(err.code) + ').'
139 |     );
140 |     console.log();
141 | 
142 |     // And immediately send the proper error response to the client.
143 |     // Otherwise, the request will eventually timeout with ERR_EMPTY_RESPONSE on the client side.
144 |     if (res.writeHead && !res.headersSent) {
145 |         res.writeHead(500);
146 |     }
147 |     res.end('Proxy error: Could not proxy request ' + req.url + ' from ' +
148 |       host + ' to ' + proxy + ' (' + err.code + ').'
149 |     );
150 |   }
151 | }
152 | 
153 | function addMiddleware(devServer) {
154 |   // `proxy` lets you to specify a fallback server during development.
155 |   // Every unrecognized request will be forwarded to it.
156 |   var proxy = require(paths.appPackageJson).proxy;
157 |   devServer.use(historyApiFallback({
158 |     // Paths with dots should still use the history fallback.
159 |     // See https://github.com/facebookincubator/create-react-app/issues/387.
160 |     disableDotRule: true,
161 |     // For single page apps, we generally want to fallback to /index.html.
162 |     // However we also want to respect `proxy` for API calls.
163 |     // So if `proxy` is specified, we need to decide which fallback to use.
164 |     // We use a heuristic: if request `accept`s text/html, we pick /index.html.
165 |     // Modern browsers include text/html into `accept` header when navigating.
166 |     // However API calls like `fetch()` won’t generally accept text/html.
167 |     // If this heuristic doesn’t work well for you, don’t use `proxy`.
168 |     htmlAcceptHeaders: proxy ?
169 |       ['text/html'] :
170 |       ['text/html', '*/*']
171 |   }));
172 |   if (proxy) {
173 |     if (typeof proxy !== 'string') {
174 |       console.log(chalk.red('When specified, "proxy" in package.json must be a string.'));
175 |       console.log(chalk.red('Instead, the type of "proxy" was "' + typeof proxy + '".'));
176 |       console.log(chalk.red('Either remove "proxy" from package.json, or make it a string.'));
177 |       process.exit(1);
178 |     }
179 | 
180 |     // Otherwise, if proxy is specified, we will let it handle any request.
181 |     // There are a few exceptions which we won't send to the proxy:
182 |     // - /index.html (served as HTML5 history API fallback)
183 |     // - /*.hot-update.json (WebpackDevServer uses this too for hot reloading)
184 |     // - /sockjs-node/* (WebpackDevServer uses this for hot reloading)
185 |     // Tip: use https://jex.im/regulex/ to visualize the regex
186 |     var mayProxy = /^(?!\/(index\.html$|.*\.hot-update\.json$|sockjs-node\/)).*$/;
187 | 
188 |     // Pass the scope regex both to Express and to the middleware for proxying
189 |     // of both HTTP and WebSockets to work without false positives.
190 |     var hpm = httpProxyMiddleware(pathname => mayProxy.test(pathname), {
191 |       target: proxy,
192 |       logLevel: 'silent',
193 |       onProxyReq: function(proxyReq, req, res) {
194 |         // Browers may send Origin headers even with same-origin
195 |         // requests. To prevent CORS issues, we have to change
196 |         // the Origin to match the target URL.
197 |         if (proxyReq.getHeader('origin')) {
198 |           proxyReq.setHeader('origin', proxy);
199 |         }
200 |       },
201 |       onError: onProxyError(proxy),
202 |       secure: false,
203 |       changeOrigin: true,
204 |       ws: true,
205 |       xfwd: true
206 |     });
207 |     devServer.use(mayProxy, hpm);
208 | 
209 |     // Listen for the websocket 'upgrade' event and upgrade the connection.
210 |     // If this is not done, httpProxyMiddleware will not try to upgrade until
211 |     // an initial plain HTTP request is made.
212 |     devServer.listeningApp.on('upgrade', hpm.upgrade);
213 |   }
214 | 
215 |   // Finally, by now we have certainly resolved the URL.
216 |   // It may be /index.html, so let the dev server try serving it again.
217 |   devServer.use(devServer.middleware);
218 | }
219 | 
220 | function runDevServer(host, port, protocol) {
221 |   var devServer = new WebpackDevServer(compiler, {
222 |     // Enable gzip compression of generated files.
223 |     compress: true,
224 |     // Silence WebpackDevServer's own logs since they're generally not useful.
225 |     // It will still show compile warnings and errors with this setting.
226 |     clientLogLevel: 'none',
227 |     // By default WebpackDevServer serves physical files from current directory
228 |     // in addition to all the virtual build products that it serves from memory.
229 |     // This is confusing because those files won’t automatically be available in
230 |     // production build folder unless we copy them. However, copying the whole
231 |     // project directory is dangerous because we may expose sensitive files.
232 |     // Instead, we establish a convention that only files in `public` directory
233 |     // get served. Our build script will copy `public` into the `build` folder.
234 |     // In `index.html`, you can get URL of `public` folder with %PUBLIC_URL%:
235 |     // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
236 |     // In JavaScript code, you can access it with `process.env.PUBLIC_URL`.
237 |     // Note that we only recommend to use `public` folder as an escape hatch
238 |     // for files like `favicon.ico`, `manifest.json`, and libraries that are
239 |     // for some reason broken when imported through Webpack. If you just want to
240 |     // use an image, put it in `src` and `import` it from JavaScript instead.
241 |     contentBase: paths.appPublic,
242 |     // Enable hot reloading server. It will provide /sockjs-node/ endpoint
243 |     // for the WebpackDevServer client so it can learn when the files were
244 |     // updated. The WebpackDevServer client is included as an entry point
245 |     // in the Webpack development configuration. Note that only changes
246 |     // to CSS are currently hot reloaded. JS changes will refresh the browser.
247 |     hot: true,
248 |     // It is important to tell WebpackDevServer to use the same "root" path
249 |     // as we specified in the config. In development, we always serve from /.
250 |     publicPath: config.output.publicPath,
251 |     // WebpackDevServer is noisy by default so we emit custom message instead
252 |     // by listening to the compiler events with `compiler.plugin` calls above.
253 |     quiet: true,
254 |     // Reportedly, this avoids CPU overload on some systems.
255 |     // https://github.com/facebookincubator/create-react-app/issues/293
256 |     watchOptions: {
257 |       ignored: /node_modules/
258 |     },
259 |     // Enable HTTPS if the HTTPS environment variable is set to 'true'
260 |     https: protocol === "https",
261 |     host: host
262 |   });
263 | 
264 |   // Our custom middleware proxies requests to /index.html or a remote API.
265 |   addMiddleware(devServer);
266 | 
267 |   // Launch WebpackDevServer.
268 |   devServer.listen(port, (err, result) => {
269 |     if (err) {
270 |       return console.log(err);
271 |     }
272 | 
273 |     if (isInteractive) {
274 |       clearConsole();
275 |     }
276 |     console.log(chalk.cyan('Starting the development server...'));
277 |     console.log();
278 | 
279 |     openBrowser(protocol + '://' + host + ':' + port + '/');
280 |   });
281 | }
282 | 
283 | function run(port) {
284 |   var protocol = process.env.HTTPS === 'true' ? "https" : "http";
285 |   var host = process.env.HOST || 'localhost';
286 |   setupCompiler(host, port, protocol);
287 |   runDevServer(host, port, protocol);
288 | }
289 | 
290 | // We attempt to use the default port but if it is busy, we offer the user to
291 | // run on a different port. `detect()` Promise resolves to the next free port.
292 | detect(DEFAULT_PORT).then(port => {
293 |   if (port === DEFAULT_PORT) {
294 |     run(port);
295 |     return;
296 |   }
297 | 
298 |   if (isInteractive) {
299 |     clearConsole();
300 |     var existingProcess = getProcessForPort(DEFAULT_PORT);
301 |     var question =
302 |       chalk.yellow('Something is already running on port ' + DEFAULT_PORT + '.' +
303 |         ((existingProcess) ? ' Probably:\n  ' + existingProcess : '')) +
304 |         '\n\nWould you like to run the app on another port instead?';
305 | 
306 |     prompt(question, true).then(shouldChangePort => {
307 |       if (shouldChangePort) {
308 |         run(port);
309 |       }
310 |     });
311 |   } else {
312 |     console.log(chalk.red('Something is already running on port ' + DEFAULT_PORT + '.'));
313 |   }
314 | });
315 | 


--------------------------------------------------------------------------------
/src/components/Impress.js:
--------------------------------------------------------------------------------
  1 | import React, {Component} from 'react';
  2 | import update             from 'react/lib/update';
  3 | import PropTypes          from 'prop-types';
  4 | import {
  5 |   computeWindowScale,
  6 |   css,
  7 |   getElementFromHash,
  8 |   perspective,
  9 |   pfx,
 10 |   rotate,
 11 |   scale,
 12 |   throttle,
 13 |   toNumber,
 14 |   translate,
 15 | }                         from './util';
 16 | 
 17 | import Progress from './Progress';
 18 | import Hint     from './Hint';
 19 | 
 20 | const html = document.documentElement,
 21 |       body = document.body;
 22 | 
 23 | let _lastHash  = '',
 24 |     _stepsData = {},
 25 |     _activeStep,
 26 |     _idHelper  = 1;
 27 | 
 28 | export default class Impress extends Component {
 29 |   constructor(props) {
 30 |     super(props);
 31 | 
 32 |     const {rootData, hint, hintMessage, fallbackMessage, progress} = props;
 33 |     const rootStyles = {
 34 |       position: 'absolute',
 35 |       top: '50%',
 36 |       left: '50%',
 37 |       transformOrigin: 'top left',
 38 |       transition: 'all 0s ease-in-out',
 39 |       transformStyle: 'preserve-3d',
 40 |     };
 41 |     const defaultData = {
 42 |       x: 0, y: 0, z: 0,
 43 |       rotateX: 0, rotateY: 0, rotateZ: 0,
 44 |       scale: 1,
 45 |     };
 46 | 
 47 |     // <Impress /> State
 48 |     this.state = {
 49 |       /** Impress Config **/
 50 |       rootStyles,
 51 |       windowScale: null,
 52 |       config: null,
 53 |       impressSupported: false,
 54 | 
 55 |       /** Step Status **/
 56 |       activeStep: {
 57 |         data: defaultData,
 58 |       },
 59 | 
 60 |       /** Camera Status **/
 61 |       cameraStyles: rootStyles,
 62 | 
 63 |       /** Public attributes provide to use **/
 64 |       rootData: rootData, // (not recommended)
 65 |       hint: hint,
 66 |       hintMessage: hintMessage,
 67 |       fallbackMessage: fallbackMessage,
 68 |       progress: progress,
 69 | 
 70 |       /** For touch event **/
 71 |       startX: 0,
 72 |       deltaX: 0,
 73 |     };
 74 |   }
 75 | 
 76 |   componentWillMount() {
 77 |     // Init impress
 78 |     this.init();
 79 |   }
 80 | 
 81 |   componentDidMount() {
 82 |     const {impressSupported} = this.state;
 83 | 
 84 |     // 2017/2/28 暫時想不到好方法
 85 |     if (impressSupported)
 86 |       this.goto(_activeStep, 500);
 87 | 
 88 |     // Listener for keyboard event
 89 |     document.addEventListener('keyup', throttle((e) => {
 90 |       if (e.keyCode === 9 ||
 91 |           (e.keyCode >= 32 && e.keyCode <= 40)) {
 92 |         switch (e.keyCode) {
 93 |           case 35: // End
 94 |             this.end();
 95 |             break;
 96 |           case 36: // Home
 97 |             this.home();
 98 |             break;
 99 |           case 33: // Page up
100 |           case 37: // Left
101 |           case 38: // Up
102 |             this.prev();
103 |             break;
104 |           case 9:  // Tab
105 |           case 32: // Space
106 |           case 34: // Page down
107 |           case 39: // Right
108 |           case 40: // Down
109 |             this.next();
110 |             break;
111 |           default:
112 |             break;
113 |         }
114 |       }
115 |     }, 250), false);
116 | 
117 |     // Window resize
118 |     window.addEventListener('resize', throttle(() => {
119 |       if (impressSupported)
120 |         this.goto(this.state.activeStep, 500);
121 |     }, 250), false);
122 | 
123 |     // URL hash change
124 |     window.addEventListener('hashchange', throttle(() => {
125 |       if (window.location.hash !== _lastHash)
126 |         this.goto(getElementFromHash(_stepsData), 500);
127 |     }, 250), false);
128 |   }
129 | 
130 |   componentWillReceiveProps(nextPorps) {
131 |     this.setState({
132 |       fallbackMessage: nextPorps.fallbackMessage,
133 |       hint: nextPorps.hint,
134 |       hintMessage: nextPorps.hintMessage,
135 |     });
136 |   }
137 | 
138 |   componentWillUnmount() {
139 |     document.removeEventListener('keydown', function(event) {
140 |       console.log(event.keyCode);
141 |     }, false);
142 |   }
143 | 
144 |   /**
145 |    * Initialize Impress.
146 |    */
147 |   init() {
148 |     const {rootData} = this.state;
149 | 
150 |     const defaults = {
151 |       width: 1024,
152 |       height: 768,
153 |       maxScale: 1,
154 |       minScale: 0,
155 |       perspective: 1000,
156 |       transitionDuration: 1000,
157 |     };
158 | 
159 |     // const ua = navigator.userAgent.toLowerCase()
160 | 
161 |     // Check impress support or not.
162 |     const impressSupported =
163 |         // Browser should support CSS 3D transtorms
164 |         (pfx('perspective') !== null) &&
165 |         // Browser should support `classList` and `dataset` APIs
166 |         (body.classList) &&
167 |         (body.dataset);// &&
168 |     // But some mobile devices need to be blacklisted,
169 |     // because their CSS 3D support or hardware is not
170 |     // good enough to run impress.js properly, sorry...
171 |     //( ua.search( /(iphone)|(ipod)|(android)/ ) === -1 );
172 | 
173 |     // Config
174 |     const config = {
175 |       width: toNumber(rootData.width, defaults.width),
176 |       height: toNumber(rootData.height, defaults.height),
177 |       maxScale: toNumber(rootData.maxScale, defaults.maxScale),
178 |       minScale: toNumber(rootData.minScale, defaults.minScale),
179 |       perspective: toNumber(rootData.perspective, defaults.perspective),
180 |       transitionDuration: toNumber(
181 |           rootData.transitionDuration, defaults.transitionDuration,
182 |       ),
183 |     };
184 |     // Window Scale
185 |     const windowScale = computeWindowScale(config);
186 |     // HTML height
187 |     css(html, {
188 |       height: '100vh',
189 |       overflow: 'hidden',
190 |     });
191 |     // Body style
192 |     css(body, {
193 |       height: '100vh',
194 |       overflow: 'hidden',
195 | 
196 |       // mobile devise supported
197 |       position: 'relative',
198 |     });
199 | 
200 |     this.setState(update(this.state, {
201 |       windowScale: {
202 |         $set: windowScale,
203 |       },
204 |       config: {
205 |         $set: config,
206 |       },
207 |       impressSupported: {
208 |         $set: impressSupported,
209 |       },
210 |       rootStyles: {
211 |         $merge: {
212 |           'transform': perspective(config.perspective / windowScale) +
213 |           scale(windowScale),
214 |         },
215 |       },
216 |     }));
217 |   }
218 | 
219 |   /**
220 |    * Initialize Steps.
221 |    *
222 |    * @param {Step} step init every Steps in Impress.
223 |    */
224 |   static initStep(step) {
225 |     // Set first Step as enter Step.
226 |     if (!_activeStep)
227 |       _activeStep = step;
228 | 
229 |     _stepsData = update(_stepsData, {
230 |       $merge: {
231 |         [step.id]: {
232 |           id: step.id,
233 |           className: step.className,
234 |           data: step.data,
235 |           duration: step.duration,
236 |         },
237 |       },
238 |     });
239 |   }
240 | 
241 |   /**
242 |    * Navigate to the SPECIFY Step.
243 |    *
244 |    * @param {Step} step you want to navigate to.
245 |    * @param {number} duration 1000 speed of navigation.
246 |    */
247 |   goto(step, duration = 1000) {
248 |     const {config, activeStep} = this.state;
249 |     let {windowScale} = this.state;
250 | 
251 |     window.scrollTo(0, 0);
252 | 
253 |     let target = {
254 |       x: -step.data.x,
255 |       y: -step.data.y,
256 |       z: -step.data.z,
257 |       rotateX: -step.data.rotateX,
258 |       rotateY: -step.data.rotateY,
259 |       rotateZ: -step.data.rotateZ,
260 |       scale: 1 / step.data.scale,
261 |     };
262 | 
263 |     // Check scale for zoom-in
264 |     let zoomin = target.scale >= (1 / activeStep.data.scale);
265 | 
266 |     duration = toNumber(duration, config.transitionDuration);
267 |     let delay = (duration / 2);
268 | 
269 |     if (step.id === activeStep.id)
270 |       windowScale = computeWindowScale(config);
271 | 
272 |     const targetScale = target.scale * windowScale;
273 | 
274 |     this.setState(update(this.state, {
275 |       activeStep: {
276 |         $set: step,
277 |       },
278 |       rootStyles: {
279 |         transform: {
280 |           $set: perspective(config.perspective / targetScale) +
281 |           scale(targetScale),
282 |         },
283 |         transitionDuration: {
284 |           $set: duration + 'ms',
285 |         },
286 |         transitionDelay: {
287 |           $set: (zoomin ? delay : 0) + 'ms',
288 |         },
289 |       },
290 |       cameraStyles: {
291 |         transform: {
292 |           $set: rotate(target, true) + translate(target),
293 |         },
294 |         transitionDuration: {
295 |           $set: duration + 'ms',
296 |         },
297 |         transitionDelay: {
298 |           $set: (zoomin ? 0 : delay) + 'ms',
299 |         },
300 |       },
301 |     }));
302 | 
303 |     window.location.hash = _lastHash = '#/' + step.id;
304 |   }
305 | 
306 |   // Navigate to the PREVIOUS Step.
307 |   prev() {
308 |     const {activeStep} = this.state;
309 | 
310 |     /**
311 |      * 2017.04.10
312 |      * Why we don't use Object.entries() or Object.values() any more ?
313 |      * Cause the browser of iOS device (Chrome, Safari...) and some of Android devise
314 |      * DOES'NT supported Object.entries() and Object.values() now...
315 |      */
316 |           // const stepsDataEntries = Object.entries( _stepsData );
317 |           // let prev = stepsDataEntries.findIndex( ([k, v]) => { return k === activeStep.id } ) - 1;
318 |           // prev = prev >= 0 ? stepsDataEntries[ prev ][1] : stepsDataEntries[ stepsDataEntries.length - 1 ][1];
319 | 
320 |     const stepsDataKeys = Object.keys(_stepsData);
321 |     // get index of previous
322 |     let prev = stepsDataKeys.findIndex(k => k === activeStep.id) - 1;
323 | 
324 |     // get id via index from stepsData
325 |     prev = prev >= 0
326 |         ? stepsDataKeys[prev]
327 |         : stepsDataKeys[stepsDataKeys.length - 1];
328 | 
329 |     // get previous step
330 |     prev = _stepsData[prev];
331 | 
332 |     this.goto(prev, prev.duration);
333 |   }
334 | 
335 |   // Navigate to the NEXT Step.
336 |   next() {
337 |     const {activeStep} = this.state;
338 |     const stepsDataKeys = Object.keys(_stepsData);
339 |     let next = stepsDataKeys.findIndex(k => k === activeStep.id) + 1;
340 |     next = next < stepsDataKeys.length ? stepsDataKeys[next] : stepsDataKeys[0];
341 |     next = _stepsData[next];
342 | 
343 |     this.goto(next, next.duration);
344 |   }
345 | 
346 |   // Navigate to the FIRST Step.
347 |   home() {
348 |     const stepsDataEntries = Object.entries(_stepsData);
349 |     const firstStep = stepsDataEntries[0][1];
350 | 
351 |     this.goto(firstStep, firstStep.duration);
352 |   }
353 | 
354 |   // Navigate to the LAST Step.
355 |   end() {
356 |     const stepsDataEntries = Object.entries(_stepsData);
357 |     const lastStep = stepsDataEntries[stepsDataEntries.length - 1][1];
358 | 
359 |     this.goto(lastStep, lastStep.duration);
360 |   }
361 | 
362 |   // Touch Start( record start position: startX )
363 |   handleTouchStart(e) {
364 |     this.setState({
365 |       startX: e.touches[0].clientX,
366 |     });
367 |   }
368 | 
369 |   // Touch Move( Calculate touch move path: deltaX )
370 |   handleTouchMove(e) {
371 |     e.preventDefault();
372 |     this.setState({
373 |       deltaX: this.state.startX - e.touches[0].clientX,
374 |     });
375 |   }
376 | 
377 |   // Touch End( decide navigate previous or next Step via 'deltaX' )
378 |   handleTouchEnd(e) {
379 |     if (this.state.deltaX > 0) // slide left
380 |       this.next();
381 |     else if (this.state.deltaX < 0) // slide right
382 |       this.prev();
383 | 
384 |     // reset
385 |     this.setState({
386 |       deltaX: 0,
387 |     });
388 |   }
389 | 
390 |   /**
391 |    * Create <Step />
392 |    *
393 |    * @return {Step} to render children.
394 |    */
395 |   stepComponent(step, index) {
396 |     const {activeStep} = this.state;
397 | 
398 |     return React.cloneElement(step, {
399 |       key: index,
400 |       idHelper: step.props.id ? '' : _idHelper++,
401 |       activeStep: activeStep,
402 |       initStep: Impress.initStep.bind(this),
403 |       goto: this.goto.bind(this),
404 |     }, step.props.children);
405 |   }
406 | 
407 |   render() {
408 |     const {
409 |             impressSupported,
410 |             rootStyles, cameraStyles, activeStep,
411 |             hint, hintMessage,
412 |             fallbackMessage,
413 |             progress,
414 |           } = this.state;
415 |     const steps = React.Children.map(this.props.children,
416 |         this.stepComponent.bind(this));
417 |     const stepsTotal = React.Children.count(this.props.children);
418 | 
419 |     return (
420 |         <div id="react-impressjs"
421 |              className={
422 |                (impressSupported
423 |                    ? 'impress-supported'
424 |                    : 'impress-not-supported') +
425 |                (activeStep ? ' impress-on-' + activeStep.id : '') +
426 |                ' impress-enabled'
427 |              }
428 |              onTouchStart={this.handleTouchStart.bind(this)}
429 |              onTouchMove={this.handleTouchMove.bind(this)}
430 |              onTouchEnd={this.handleTouchEnd.bind(this)}>
431 | 
432 |           <div id="impress" style={rootStyles}>
433 |             <div style={cameraStyles}>
434 |               {
435 |                 impressSupported ? steps :
436 |                     <div className="fallback-message">{fallbackMessage}</div>
437 |               }
438 |             </div>
439 |           </div>
440 |           <Hint
441 |               hint={hint}
442 |               stepsData={_stepsData}
443 |               activeStep={activeStep}
444 |               hintMessage={hintMessage}/>
445 |           <Progress
446 |               progress={progress}
447 |               stepsData={_stepsData}
448 |               activeStep={activeStep}
449 |               stepsTotal={stepsTotal}/>
450 |         </div>
451 |     );
452 |   }
453 | }
454 | 
455 | Impress.propTypes = {
456 |   /**
457 |    * Impress basic config
458 |    */
459 |   rootData: PropTypes.object,
460 | 
461 |   /**
462 |    * Whether to display hint or not
463 |    */
464 |   hint: PropTypes.bool,
465 | 
466 |   /**
467 |    * Hint for presentation
468 |    */
469 |   hintMessage: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
470 | 
471 |   /**
472 |    * Fallback message is only visible when there is impress-not-supported
473 |    */
474 |   fallbackMessage: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
475 | 
476 |   /**
477 |    * Progress of presentation
478 |    */
479 |   progress: PropTypes.bool,
480 | };
481 | 
482 | Impress.defaultProps = {
483 |   rootData: {},
484 |   hint: true,
485 |   hintMessage: <p>Use <b>Spacebar</b> or <b>Arrow keys</b> to navigate</p>,
486 |   fallbackMessage: <p>Your browser <b>doesn't support the features
487 |     required</b> by React-impressJS, so you are presented
488 |     with a simplified version of this presentation.</p>,
489 |   progress: false,
490 | };
491 | 


--------------------------------------------------------------------------------
/styles/impress-demo.css:
--------------------------------------------------------------------------------
  1 | /*
  2 |     So you like the style of impress.js demo?
  3 |     Or maybe you are just curious how it was done?
  4 | 
  5 |     You couldn't find a better place to find out!
  6 | 
  7 |     Welcome to the stylesheet impress.js demo presentation.
  8 | 
  9 |     Please remember that it is not meant to be a part of impress.js and is
 10 |     not required by impress.js.
 11 |     I expect that anyone creating a presentation for impress.js would create
 12 |     their own set of styles.
 13 | 
 14 |     But feel free to read through it and learn how to get the most of what
 15 |     impress.js provides.
 16 | 
 17 |     And let me be your guide.
 18 | 
 19 |     Shall we begin?
 20 | */
 21 | 
 22 | 
 23 | /*
 24 |     We start with a good ol' reset.
 25 |     That's the one by Eric Meyer http://meyerweb.com/eric/tools/css/reset/
 26 | 
 27 |     You can probably argue if it is needed here, or not, but for sure it
 28 |     doesn't do any harm and gives us a fresh start.
 29 | */
 30 | 
 31 | html, body, div, span, applet, object, iframe,
 32 | h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 33 | a, abbr, acronym, address, big, cite, code,
 34 | del, dfn, em, img, ins, kbd, q, s, samp,
 35 | small, strike, strong, sub, sup, tt, var,
 36 | b, u, i, center,
 37 | dl, dt, dd, ol, ul, li,
 38 | fieldset, form, label, legend,
 39 | table, caption, tbody, tfoot, thead, tr, th, td,
 40 | article, aside, canvas, details, embed,
 41 | figure, figcaption, footer, header, hgroup,
 42 | menu, nav, output, ruby, section, summary,
 43 | time, mark, audio, video {
 44 |     margin: 0;
 45 |     padding: 0;
 46 |     border: 0;
 47 |     font-size: 100%;
 48 |     font: inherit;
 49 |     vertical-align: baseline;
 50 | }
 51 | 
 52 | /* HTML5 display-role reset for older browsers */
 53 | article, aside, details, figcaption, figure,
 54 | footer, header, hgroup, menu, nav, section {
 55 |     display: block;
 56 | }
 57 | body {
 58 |     line-height: 1;
 59 | }
 60 | ol, ul {
 61 |     list-style: none;
 62 | }
 63 | blockquote, q {
 64 |     quotes: none;
 65 | }
 66 | blockquote:before, blockquote:after,
 67 | q:before, q:after {
 68 |     content: '';
 69 |     content: none;
 70 | }
 71 | 
 72 | table {
 73 |     border-collapse: collapse;
 74 |     border-spacing: 0;
 75 | }
 76 | 
 77 | /*
 78 |     Now here is when interesting things start to appear.
 79 | 
 80 |     We set up <body> styles with default font and nice gradient in the background.
 81 |     And yes, there is a lot of repetition there because of -prefixes but we don't
 82 |     want to leave anybody behind.
 83 | */
 84 | body {
 85 |     font-family: 'PT Sans', sans-serif;
 86 |     min-height: 740px;
 87 | 
 88 |     background: rgb(215, 215, 215);
 89 |     background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 500, from(rgb(240, 240, 240)), to(rgb(190, 190, 190)));
 90 |     background: -webkit-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190));
 91 |     background:    -moz-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190));
 92 |     background:     -ms-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190));
 93 |     background:      -o-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190));
 94 |     background:         radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190));
 95 | }
 96 | 
 97 | /*
 98 |     Now let's bring some text styles back ...
 99 | */
100 | b, strong { font-weight: bold }
101 | i, em { font-style: italic }
102 | 
103 | /*
104 |     ... and give links a nice look.
105 | */
106 | a {
107 |     color: inherit;
108 |     text-decoration: none;
109 |     padding: 0 0.1em;
110 |     background: rgba(255,255,255,0.5);
111 |     text-shadow: -1px -1px 2px rgba(100,100,100,0.9);
112 |     border-radius: 0.2em;
113 | 
114 |     -webkit-transition: 0.5s;
115 |     -moz-transition:    0.5s;
116 |     -ms-transition:     0.5s;
117 |     -o-transition:      0.5s;
118 |     transition:         0.5s;
119 | }
120 | 
121 | a:hover,
122 | a:focus {
123 |     background: rgba(255,255,255,1);
124 |     text-shadow: -1px -1px 2px rgba(100,100,100,0.5);
125 | }
126 | 
127 | /*
128 |     Because the main point behind the impress.js demo is to demo impress.js
129 |     we display a fallback message for users with browsers that don't support
130 |     all the features required by it.
131 | 
132 |     All of the content will be still fully accessible for them, but I want
133 |     them to know that they are missing something - that's what the demo is
134 |     about, isn't it?
135 | 
136 |     And then we hide the message, when support is detected in the browser.
137 | */
138 | 
139 | .fallback-message {
140 |     font-family: sans-serif;
141 |     line-height: 1.3;
142 | 
143 |     width: 780px;
144 |     padding: 10px 10px 0;
145 |     margin: 20px auto;
146 | 
147 |     border: 1px solid #E4C652;
148 |     border-radius: 10px;
149 |     background: #EEDC94;
150 | }
151 | 
152 | .fallback-message p {
153 |     margin-bottom: 10px;
154 | }
155 | 
156 | .impress-supported .fallback-message {
157 |     display: none;
158 | }
159 | 
160 | /*
161 |     Now let's style the presentation steps.
162 | 
163 |     We start with basics to make sure it displays correctly in everywhere ...
164 | */
165 | 
166 | .step {
167 |     position: relative;
168 |     width: 900px;
169 |     padding: 40px;
170 |     margin: 20px auto;
171 | 
172 |     -webkit-box-sizing: border-box;
173 |     -moz-box-sizing:    border-box;
174 |     -ms-box-sizing:     border-box;
175 |     -o-box-sizing:      border-box;
176 |     box-sizing:         border-box;
177 | 
178 |     font-family: 'PT Serif', georgia, serif;
179 |     font-size: 48px;
180 |     line-height: 1.5;
181 | }
182 | 
183 | /*
184 |     ... and we enhance the styles for impress.js.
185 | 
186 |     Basically we remove the margin and make inactive steps a little bit transparent.
187 | */
188 | .impress-enabled .step {
189 |     margin: 0;
190 |     opacity: 0.3;
191 | 
192 |     -webkit-transition: opacity 1s;
193 |     -moz-transition:    opacity 1s;
194 |     -ms-transition:     opacity 1s;
195 |     -o-transition:      opacity 1s;
196 |     transition:         opacity 1s;
197 | }
198 | 
199 | .impress-enabled .step.active { opacity: 1 }
200 | 
201 | /*
202 |     These 'slide' step styles were heavily inspired by HTML5 Slides:
203 |     http://html5slides.googlecode.com/svn/trunk/styles.css
204 | 
205 |     ;)
206 | 
207 |     They cover everything what you see on first three steps of the demo.
208 | */
209 | .slide {
210 |     display: block;
211 | 
212 |     width: 900px;
213 |     height: 700px;
214 |     padding: 40px 60px;
215 | 
216 |     background-color: white;
217 |     border: 1px solid rgba(0, 0, 0, .3);
218 |     border-radius: 10px;
219 |     box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
220 | 
221 |     color: rgb(102, 102, 102);
222 |     text-shadow: 0 2px 2px rgba(0, 0, 0, .1);
223 | 
224 |     font-family: 'Open Sans', Arial, sans-serif;
225 |     font-size: 30px;
226 |     line-height: 36px;
227 |     letter-spacing: -1px;
228 | }
229 | 
230 | .slide q {
231 |     display: block;
232 |     font-size: 50px;
233 |     line-height: 72px;
234 | 
235 |     margin-top: 100px;
236 | }
237 | 
238 | .slide q strong {
239 |     white-space: nowrap;
240 | }
241 | 
242 | /*
243 |     And now we start to style each step separately.
244 | 
245 |     I agree that this may be not the most efficient, object-oriented and
246 |     scalable way of styling, but most of steps have quite a custom look
247 |     and typography tricks here and there, so they had to be styled separately.
248 | 
249 |     First is the title step with a big <h1> (no room for padding) and some
250 |     3D positioning along Z axis.
251 | */
252 | 
253 | #title {
254 |     padding: 0;
255 | }
256 | 
257 | #title .try {
258 |     font-size: 64px;
259 |     position: absolute;
260 |     top: -0.5em;
261 |     left: 1.5em;
262 | 
263 |     -webkit-transform: translateZ(20px);
264 |     -moz-transform:    translateZ(20px);
265 |     -ms-transform:     translateZ(20px);
266 |     -o-transform:      translateZ(20px);
267 |     transform:         translateZ(20px);
268 | }
269 | 
270 | #title h1 {
271 |     font-size: 190px;
272 | 
273 |     -webkit-transform: translateZ(50px);
274 |     -moz-transform:    translateZ(50px);
275 |     -ms-transform:     translateZ(50px);
276 |     -o-transform:      translateZ(50px);
277 |     transform:         translateZ(50px);
278 | }
279 | 
280 | #title .footnote {
281 |     font-size: 32px;
282 | }
283 | 
284 | /*
285 |     Second step is nothing special, just a text with a link, so it doesn't need
286 |     any special styling.
287 | 
288 |     Let's move to 'big thoughts' with centered text and custom font sizes.
289 | */
290 | #big {
291 |     width: 600px;
292 |     text-align: center;
293 |     font-size: 60px;
294 |     line-height: 1;
295 | }
296 | 
297 | #big b {
298 |     display: block;
299 |     font-size: 250px;
300 |     line-height: 250px;
301 | }
302 | 
303 | #big .thoughts {
304 |     font-size: 90px;
305 |     line-height: 150px;
306 | }
307 | 
308 | /*
309 |     'Tiny ideas' just need some tiny styling.
310 | */
311 | #tiny {
312 |     width: 500px;
313 |     text-align: center;
314 | }
315 | 
316 | /*
317 |     This step has some animated text ...
318 | */
319 | #ing { width: 500px }
320 | 
321 | /*
322 |     ... so we define display to `inline-block` to enable transforms and
323 |     transition duration to 0.5s ...
324 | */
325 | #ing b {
326 |     display: inline-block;
327 |     -webkit-transition: 0.5s;
328 |     -moz-transition:    0.5s;
329 |     -ms-transition:     0.5s;
330 |     -o-transition:      0.5s;
331 |     transition:         0.5s;
332 | }
333 | 
334 | /*
335 |     ... and we want 'positioning` word to move up a bit when the step gets
336 |     `present` class ...
337 | */
338 | #ing.present .positioning {
339 |     -webkit-transform: translateY(-10px);
340 |     -moz-transform:    translateY(-10px);
341 |     -ms-transform:     translateY(-10px);
342 |     -o-transform:      translateY(-10px);
343 |     transform:         translateY(-10px);
344 |     
345 |     -webkit-transition-delay: 1.25s;
346 |     -moz-transition-delay:    1.25s;
347 |     -ms-transition-delay:     1.25s;
348 |     -o-transition-delay:      1.25s;
349 |     transition-delay:         1.25s;
350 | }
351 | 
352 | /*
353 |     ... 'rotating' to rotate a quarter of a second later ...
354 | */
355 | #ing.present .rotating {
356 |     -webkit-transform: rotate(-10deg);
357 |     -moz-transform:    rotate(-10deg);
358 |     -ms-transform:     rotate(-10deg);
359 |     -o-transform:      rotate(-10deg);
360 |     transform:         rotate(-10deg);
361 | 
362 |     -webkit-transition-delay: 1.5s;
363 |     -moz-transition-delay:    1.5s;
364 |     -ms-transition-delay:     1.5s;
365 |     -o-transition-delay:      1.5s;
366 |     transition-delay:         1.5s;
367 | }
368 | 
369 | /*
370 |     ... and 'scaling' to scale down after another quarter of a second.
371 | */
372 | #ing.present .scaling {
373 |     -webkit-transform: scale(0.7);
374 |     -moz-transform:    scale(0.7);
375 |     -ms-transform:     scale(0.7);
376 |     -o-transform:      scale(0.7);
377 |     transform:         scale(0.7);
378 | 
379 |     -webkit-transition-delay: 1.75s;
380 |     -moz-transition-delay:    1.75s;
381 |     -ms-transition-delay:     1.75s;
382 |     -o-transition-delay:      1.75s;
383 |     transition-delay:         1.75s;
384 | }
385 | 
386 | /*
387 |     The 'imagination' step is again some boring font-sizing.
388 | */
389 | 
390 | #imagination {
391 |     width: 600px;
392 | }
393 | 
394 | #imagination .imagination {
395 |     font-size: 78px;
396 | }
397 | 
398 | /*
399 |     There is nothing really special about 'use the source, Luke' step, too,
400 |     except maybe of the Yoda background.
401 | 
402 |     As you can see below I've 'hard-coded' it in data URL.
403 |     That's not the best way to serve images, but because that's just this one
404 |     I decided it will be OK to have it this way.
405 | 
406 |     Just make sure you don't blindly copy this approach.
407 | */
408 | #source {
409 |     width: 700px;
410 |     padding-bottom: 300px;
411 | 
412 |     /* Yoda Icon :: Pixel Art from Star Wars http://www.pixeljoint.com/pixelart/1423.htm */
413 |     background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARgAAAEYCAMAAACwUBm+AAAAAXNSR0IArs4c6QAAAKtQTFRFsAAAvbWSLUUrLEQqY1s8UYJMqJ1vNTEgOiIdIzYhjIFVLhsXZ6lgSEIsP2U8JhcCVzMsSXZEgXdOO145XJdWOl03LzAYMk4vSXNExr+hwcuxRTs1Qmk+RW9Am49eFRANQz4pUoNMQWc+OSMDTz0wLBsCNVMxa2NBOyUDUoNNSnlEWo9VRGxAVzYFl6tXCggHbLNmMUIcHhwTXkk5f3VNRT8wUT8xAAAACQocRBWFFwAAAAF0Uk5TAEDm2GYAAAPCSURBVHja7d3JctNAFIZRMwRCCGEmzPM8z/D+T8bu/ptbXXJFdij5fMt2Wuo+2UgqxVmtttq5WVotLzBgwIABAwYMGDCn0qVqbo69psPqVpWx+1XG5iaavF8wYMCAAQMGDBgwi4DJ6Y6qkxB1HNlcN3a92gbR5P2CAQMGDBgwYMCAWSxMlrU+UY5yu2l9okfV4bAxUVbf7TJnAwMGDBgwYMCAAbMLMHeqbGR82Zy+VR1Ht81nVca6R+UdTLaU24Ruzd3qM/e4yjnAgAEDBgwYMGDA7AJMd1l/3NRdVGcj3eX/2WEhCmDGxnM7yqygu8XIPjJj8iN/MGDAgAEDBgwYMAuDGb8q0RGlLCHLv1t9qDKWn3vdNHVuEI6HPaxO9Jo3GDBgwIABAwYMmIXBdC9ShGgMk+XnkXUeuGcsP/e1+lhNnZsL/G5Vs3OAAQMGDBgwYMCAWSxMR3SzOmraG5atdy9wZKzb+vg16qyqe2FltbnAgAEDBgwYMGDALAxmTJSuN3WA76rnVca6GTnemGN1WoEBAwYMGDBgwIBZGMxUomy4+xO899V4LAg5Xnc2MGDAgAEDBgwYMGA218Wq+2K1LDqvY9xZu8zN8fICdM6btYABAwYMGDBgwIABMzfH0+pGU5afze2tXebmeAfVz+p8BQYMGDBgwIABAwbMPBzZ+oWmfJrln1273FhkbHzee9WWbw7AgAEDBgwYMGDALAKm43hcdctKgblcPamOhuXnXlY5Xs6bsW4FGyQCAwYMGDBgwIABswiYMceZKgvMo+h8mrHLTdn676rj+FEFoTtHd8MwOxEYMGDAgAEDBgyYRcBM5UhXqiymW3R3c9ARhWO/OmjqfjVZy+xEYMCAAQMGDBgwYBYG073OnCV0RFNhMhaOa9WfKmOB6XjHMN1tQmaAAQMGDBgwYMCA2VWY7vXjz1U4croAzgPztwIDBgwYMGDAgAEDZhswh035NBw59Dww3RgYMGDAgAEDBgwYMJuD6f4tXT7NUqfCdBvZLkxXdgQGDBgwYMCAAQNmt2DGj8WzwAfV/w7T/aq7mxwwYMCAAQMGDBgwuwqTOo7uTwTngflSzQ3TdaJvAwEDBgwYMGDAgAED5gSvgbyo5oHZ4Pc+gwEDBgwYMGDAgAEzhOm+5G0qTGaAAQMGDBgwYMCAAXNaMOcnls3tNwWm+zRzp54NDBgwYMCAAQMGDJh5YNL36k1TLuGvVq+qnKMbS5n7tulT9asCAwYMGDBgwIABA2ZumKuztLnjgQEDBgwYMGDAgNl5mH/4/ltKA6vBNAAAAABJRU5ErkJggg==);
414 |     background-position: bottom right;
415 |     background-repeat: no-repeat;
416 | }
417 | 
418 | #source q {
419 |     font-size: 60px;
420 | }
421 | 
422 | /*
423 |     And the "it's in 3D" step again brings some 3D typography - just for fun.
424 | 
425 |     Because we want to position <span> elements in 3D we set transform-style to
426 |     `preserve-3d` on the paragraph.
427 |     It is not needed by webkit browsers, but it is in Firefox. It's hard to say
428 |     which behaviour is correct as 3D transforms spec is not very clear about it.
429 | */
430 | #its-in-3d p {
431 |     -webkit-transform-style: preserve-3d;
432 |     -moz-transform-style:    preserve-3d; /* Y U need this Firefox?! */
433 |     -ms-transform-style:     preserve-3d;
434 |     -o-transform-style:      preserve-3d;
435 |     transform-style:         preserve-3d;
436 | }
437 | 
438 | /*
439 |     Below we position each word separately along Z axis and we want it to transition
440 |     to default position in 0.5s when the step gets `present` class.
441 | 
442 |     Quite a simple idea, but lot's of styles and prefixes.
443 | */
444 | #its-in-3d span,
445 | #its-in-3d b {
446 |     display: inline-block;
447 |     -webkit-transform: translateZ(40px);
448 |     -moz-transform:    translateZ(40px);
449 |     -ms-transform:     translateZ(40px);
450 |     -o-transform:      translateZ(40px);
451 |      transform:        translateZ(40px);
452 | 
453 |     -webkit-transition: 0.5s;
454 |     -moz-transition:    0.5s;
455 |     -ms-transition:     0.5s;
456 |     -o-transition:      0.5s;
457 |     transition:         0.5s;
458 | }
459 | 
460 | #its-in-3d .have {
461 |     -webkit-transform: translateZ(-40px);
462 |     -moz-transform:    translateZ(-40px);
463 |     -ms-transform:     translateZ(-40px);
464 |     -o-transform:      translateZ(-40px);
465 |     transform:         translateZ(-40px);
466 | }
467 | 
468 | #its-in-3d .you {
469 |     -webkit-transform: translateZ(20px);
470 |     -moz-transform:    translateZ(20px);
471 |     -ms-transform:     translateZ(20px);
472 |     -o-transform:      translateZ(20px);
473 |     transform:         translateZ(20px);
474 | }
475 | 
476 | #its-in-3d .noticed {
477 |     -webkit-transform: translateZ(-40px);
478 |     -moz-transform:    translateZ(-40px);
479 |     -ms-transform:     translateZ(-40px);
480 |     -o-transform:      translateZ(-40px);
481 |     transform:         translateZ(-40px);
482 | }
483 | 
484 | #its-in-3d .its {
485 |     -webkit-transform: translateZ(60px);
486 |     -moz-transform:    translateZ(60px);
487 |     -ms-transform:     translateZ(60px);
488 |     -o-transform:      translateZ(60px);
489 |     transform:         translateZ(60px);
490 | }
491 | 
492 | #its-in-3d .in {
493 |     -webkit-transform: translateZ(-10px);
494 |     -moz-transform:    translateZ(-10px);
495 |     -ms-transform:     translateZ(-10px);
496 |     -o-transform:      translateZ(-10px);
497 |     transform:         translateZ(-10px);
498 | }
499 | 
500 | #its-in-3d .footnote {
501 |     font-size: 32px;
502 | 
503 |     -webkit-transform: translateZ(-10px);
504 |     -moz-transform:    translateZ(-10px);
505 |     -ms-transform:     translateZ(-10px);
506 |     -o-transform:      translateZ(-10px);
507 |     transform:         translateZ(-10px);
508 | }
509 | 
510 | #its-in-3d.present span,
511 | #its-in-3d.present b {
512 |     -webkit-transform: translateZ(0px);
513 |     -moz-transform:    translateZ(0px);
514 |     -ms-transform:     translateZ(0px);
515 |     -o-transform:      translateZ(0px);
516 |     transform:         translateZ(0px);
517 | }
518 | 
519 | /*
520 |     The last step is an overview.
521 |     There is no content in it, so we make sure it's not visible because we want
522 |     to be able to click on other steps.
523 | 
524 | */
525 | #overview { display: none }
526 | 
527 | /*
528 |     We also make other steps visible and give them a pointer cursor using the
529 |     `impress-on-` class.
530 | */
531 | .impress-on-overview .step {
532 |     opacity: 1;
533 |     cursor: pointer;
534 | }
535 | 
536 | 
537 | /*
538 |     Now, when we have all the steps styled let's give users a hint how to navigate
539 |     around the presentation.
540 | 
541 |     The best way to do this would be to use JavaScript, show a delayed hint for a
542 |     first time users, then hide it and store a status in cookie or localStorage...
543 | 
544 |     But I wanted to have some CSS fun and avoid additional scripting...
545 | 
546 |     Let me explain it first, so maybe the transition magic will be more readable
547 |     when you read the code.
548 | 
549 |     First of all I wanted the hint to appear only when user is idle for a while.
550 |     You can't detect the 'idle' state in CSS, but I delayed a appearing of the
551 |     hint by 5s using transition-delay.
552 | 
553 |     You also can't detect in CSS if the user is a first-time visitor, so I had to
554 |     make an assumption that I'll only show the hint on the first step. And when
555 |     the step is changed hide the hint, because I can assume that user already
556 |     knows how to navigate.
557 | 
558 |     To summarize it - hint is shown when the user is on the first step for longer
559 |     than 5 seconds.
560 | 
561 |     The other problem I had was caused by the fact that I wanted the hint to fade
562 |     in and out. It can be easily achieved by transitioning the opacity property.
563 |     But that also meant that the hint was always on the screen, even if totally
564 |     transparent. It covered part of the screen and you couldn't correctly clicked
565 |     through it.
566 |     Unfortunately you cannot transition between display `block` and `none` in pure
567 |     CSS, so I needed a way to not only fade out the hint but also move it out of
568 |     the screen.
569 | 
570 |     I solved this problem by positioning the hint below the bottom of the screen
571 |     with CSS transform and moving it up to show it. But I also didn't want this move
572 |     to be visible. I wanted the hint only to fade in and out visually, so I delayed
573 |     the fade in transition, so it starts when the hint is already in its correct
574 |     position on the screen.
575 | 
576 |     I know, it sounds complicated ... maybe it would be easier with the code?
577 | */
578 | 
579 | .hint {
580 |     /*
581 |         We hide the hint until presentation is started and from browsers not supporting
582 |         impress.js, as they will have a linear scrollable view ...
583 |     */
584 |     display: none;
585 | 
586 |     /*
587 |         ... and give it some fixed position and nice styles.
588 |     */
589 |     position: fixed;
590 |     left: 0;
591 |     right: 0;
592 |     bottom: 200px;
593 | 
594 |     background: rgba(0,0,0,0.5);
595 |     color: #EEE;
596 |     text-align: center;
597 | 
598 |     font-size: 50px;
599 |     padding: 20px;
600 | 
601 |     z-index: 100;
602 | 
603 |     /*
604 |         By default we don't want the hint to be visible, so we make it transparent ...
605 |     */
606 |     opacity: 0;
607 | 
608 |     /*
609 |         ... and position it below the bottom of the screen (relative to it's fixed position)
610 |     */
611 |     -webkit-transform: translateY(400px);
612 |     -moz-transform:    translateY(400px);
613 |     -ms-transform:     translateY(400px);
614 |     -o-transform:      translateY(400px);
615 |     transform:         translateY(400px);
616 | 
617 |     /*
618 |         Now let's imagine that the hint is visible and we want to fade it out and move out
619 |         of the screen.
620 | 
621 |         So we define the transition on the opacity property with 1s duration and another
622 |         transition on transform property delayed by 1s so it will happen after the fade out
623 |         on opacity finished.
624 | 
625 |         This way user will not see the hint moving down.
626 |     */
627 |     -webkit-transition: opacity 1s, -webkit-transform 0.5s 1s;
628 |     -moz-transition:    opacity 1s,    -moz-transform 0.5s 1s;
629 |     -ms-transition:     opacity 1s,     -ms-transform 0.5s 1s;
630 |     -o-transition:      opacity 1s,      -o-transform 0.5s 1s;
631 |     transition:         opacity 1s,         transform 0.5s 1s;
632 | }
633 | 
634 | /*
635 |     Now we 'enable' the hint when presentation is initialized ...
636 | */
637 | .impress-enabled .hint { display: block }
638 | 
639 | /*
640 |     ... and we will show it when the first step (with id 'bored') is active.
641 | */
642 | .impress-on-bored .hint {
643 |     /*
644 |         We remove the transparency and position the hint in its default fixed
645 |         position.
646 |     */
647 |     opacity: 1;
648 | 
649 |     -webkit-transform: translateY(0px);
650 |     -moz-transform:    translateY(0px);
651 |     -ms-transform:     translateY(0px);
652 |     -o-transform:      translateY(0px);
653 |     transform:         translateY(0px);
654 | 
655 |     /*
656 |         Now for fade in transition we have the oposite situation from the one
657 |         above.
658 | 
659 |         First after 4.5s delay we animate the transform property to move the hint
660 |         into its correct position and after that we fade it in with opacity
661 |         transition.
662 |     */
663 |     -webkit-transition: opacity 1s 5s, -webkit-transform 0.5s 4.5s;
664 |     -moz-transition:    opacity 1s 5s,    -moz-transform 0.5s 4.5s;
665 |     -ms-transition:     opacity 1s 5s,     -ms-transform 0.5s 4.5s;
666 |     -o-transition:      opacity 1s 5s,      -o-transform 0.5s 4.5s;
667 |     transition:         opacity 1s 5s,         transform 0.5s 4.5s;
668 | }
669 | 
670 | /*
671 |     And as the last thing there is a workaround for quite strange bug.
672 |     It happens a lot in Chrome. I don't remember if I've seen it in Firefox.
673 | 
674 |     Sometimes the element positioned in 3D (especially when it's moved back
675 |     along Z axis) is not clickable, because it falls 'behind' the <body>
676 |     element.
677 | 
678 |     To prevent this, I decided to make <body> non clickable by setting
679 |     pointer-events property to `none` value.
680 |     Value if this property is inherited, so to make everything else clickable
681 |     I bring it back on the #impress element.
682 | 
683 |     If you want to know more about `pointer-events` here are some docs:
684 |     https://developer.mozilla.org/en/CSS/pointer-events
685 | 
686 |     There is one very important thing to notice about this workaround - it makes
687 |     everything 'unclickable' except what's in #impress element.
688 | 
689 |     So use it wisely ... or don't use at all.
690 | */
691 | .impress-enabled          { pointer-events: none }
692 | .impress-enabled #impress { pointer-events: auto }
693 | 
694 | /*
695 |     There is one funny thing I just realized.
696 | 
697 |     Thanks to this workaround above everything except #impress element is invisible
698 |     for click events. That means that the hint element is also not clickable.
699 |     So basically all of this transforms and delayed transitions trickery was probably
700 |     not needed at all...
701 | 
702 |     But it was fun to learn about it, wasn't it?
703 | */
704 | 
705 | /*
706 |     That's all I have for you in this file.
707 |     Thanks for reading. I hope you enjoyed it at least as much as I enjoyed writing it
708 |     for you.
709 | */
710 | 


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