☘ Get ready for dashboard

Squashed commits:
[26c35c4] ☘ Update all dependencies
[db8cebe] Add babel-runtime to reduce the runtime boilerplate code
[45add79] Why fixed doesn't work?
[d92cdcb] Add devices detection library
[cd96784] chore(package): update jsdom to version 8.4.1

https://greenkeeper.io/
[d0ab2e1] Add scrolling motion w/ mobile support examples
[aa1f103] Add a solid foundation for scrolling motions
[dcee3df] chore(package): update react-router to version 2.4.0

https://greenkeeper.io/
[daeebe8] chore(package): update babel-plugin-module-alias to version 1.4.0

https://greenkeeper.io/

.babelrc

@@ -1,6 +1,7 @@
 {
   "presets": ["es2015", "stage-0", "react"],
   "plugins": [
+    "transform-runtime",
     "add-module-exports",
     [
       "babel-plugin-module-alias", [

.eslintrc

@@ -17,7 +17,10 @@ env:
 plugins:
   - react
 globals:
+  device: false
+  IScroll: false
   Velocity: false
+  ScrollMagic: false
 rules:
   comma-dangle: [warn, only-multiline]
   comma-spacing: [warn, {before: false, after: true}]

client/index.js

@@ -1,9 +1,9 @@
+import './motions';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import Provider from 'react-redux/lib/components/Provider';
 import browserHistory from 'react-router/lib/browserHistory';
 import createStore from 'common/store';
-import 'common/animations';
 
 const store = createStore(window.__INITIAL_STATE__);
 const rootElement = document.getElementById('root');

common/animations.js → client/motions.js

@@ -1,3 +1,10 @@
+import 'ScrollMagic';
+import 'ScrollMagic.velocity';
+
+if ('production' !== process.env.NODE_ENV) {
+  require('debug.addIndicators');
+}
+
 Velocity.RegisterEffect('cform.standOut', {
   defaultDuration: 300,
   calls: [

common/middleware.js

@@ -3,7 +3,7 @@ import promiseMiddleware from 'redux-promise-middleware';
 
 const promiseTypeSuffixes = ['读取', '成功', '失败'];
 
-export default (('production' === process.env.NODE_ENV) || global.GLOBAL) ? [
+export default (('production' === process.env.NODE_ENV) || global.global) ? [
   promiseMiddleware({promiseTypeSuffixes}),
 ] : [
   promiseMiddleware({promiseTypeSuffixes}),

common/reducer.js

@@ -1,6 +1,7 @@
 import combineReducers from 'redux/lib/combineReducers';
-import arsenal from './ui/Motions/reducer';
 
 export default combineReducers({
-  arsenal,
+  application(state = "Initial State") {
+    return state;
+  },
 });

common/routes.js

@@ -1,17 +1,9 @@
 import React from 'react';
-import {Router, Route, IndexRoute} from 'react-router';
+import {Router, Route/*, IndexRoute*/} from 'react-router';
 import {
   Application,
-  Motions,
-  MotionsList,
-  Motion,
 } from './ui';
 
 export default history => <Router history={history}>
-  <Route path="/" component={Application}>
-    <Route path="motions" component={Motions}>
-      <IndexRoute component={MotionsList}/>
-      <Route path=":name" component={Motion}/>
-    </Route>
-  </Route>
+  <Route path="/" component={Application}/>
 </Router>;

common/styles/helpers.css

@@ -4,3 +4,10 @@
   padding-left: 0;
   list-style: none;
 }
+
+.motion-container {
+  position: relative;
+  & > content {
+    position: absolute auto;
+  }
+}

common/ui/Application/index.jsx

@@ -1,23 +1,27 @@
 import React, {Component} from 'react';
+import Helmet from 'react-helmet';
 import Link from 'react-router/lib/Link';
-import styles from './styles.css';
+import './styles.css';
+
+const defaultHelmet = {
+  defaultTitle: '巧思',
+  titleTemplate: '%s - 巧思',
+  meta: [
+    {"charset": "UTF-8"},
+    {"http-equiv": "X-UA-Compatible", "content": "IE=edge, chrome=1"},
+    {"name": "viewport", "content": "width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"},
+  ]
+};
 
 export default class Application extends Component {
   render() {
-    return <div className={styles.container}>
+    return <div>
+      <Helmet {...defaultHelmet} title="首页"/>
       <header>
-        <nav className={styles.navigation}>
-          <Link to={`/`} activeClassName={styles.active} onlyActiveOnIndex>
+        <nav>
+          <Link to={`/`} activeClassName="active" onlyActiveOnIndex>
             首页
           </Link>
-          <Link to={{
-              pathname: `/motions`,
-              state: {enter: 'Right', leave: 'Left'}
-            }}
-            activeClassName={styles.active}
-          >
-            动效
-          </Link>
         </nav>
       </header>
       <main>{this.props.children}</main>

common/ui/Application/styles.css

@@ -1,34 +1 @@
 @import 'common/styles/globals.css';
-
-:root {
-  --cover-image: images/intro-background-full.png;
-}
-
-.container {
-  /* position: absolute 0 0; */
-  padding: 1rem;
-  /* width: width(var(--cover-image)); */
-  /* height: height(var(--cover-image)); */
-  /* background: resolve(var(--cover-image)); */
-  /* background-size: size(var(--cover-image)); */
-  /*composes: absolute-full from '../../styles/helpers.css';*/
-}
-
-.navigation {
-  clear: fix;
-  padding-bottom: 1rem;
-  border-bottom: 1px solid gray;
-
-  & :any-link {
-    color: gray;
-    text-decoration: none;
-  }
-
-  & .active {
-    font-weight: bold;
-  }
-
-  & a:not(:last-child) {
-    margin-right: 1rem;
-  }
-}

common/ui/index.js

@@ -1,4 +1 @@
 export Application from './Application';
-export Motions from './Motions';
-export MotionsList from './Motions/List';
-export Motion from './Motion';

config/webpack.babel.js

@@ -10,7 +10,7 @@ const defaults = {
   entry: {
     client: [path.resolve('client/index.js')],
     vendor: [
-      'babel-polyfill', 'isomorphic-fetch',
+      'babel-polyfill', 'isomorphic-fetch', 'device.js',
       'velocity-animate', 'velocity-animate/velocity.ui', 'jquery',
       'react', 'react-dom', 'react-router', 'redux', 'react-redux',
     ],
@@ -23,7 +23,14 @@ const defaults = {
     chunkFilename: isProduction ? '[id].chunk.js?[hash]' : '[id].chunk.js',
   },
   resolve: {
-    alias: {'common': path.resolve('common'), 'fetch': 'isomorphic-fetch'},
+    alias: {
+      'fetch': 'isomorphic-fetch',
+      'common': path.resolve('common'),
+      'velocity': path.resolve('node_modules/velocity-animate/velocity.js'),
+      'ScrollMagic': path.resolve('node_modules/scrollmagic/scrollmagic/uncompressed/ScrollMagic.js'),
+      'debug.addIndicators': path.resolve('node_modules/scrollmagic/scrollmagic/uncompressed/plugins/debug.addIndicators.js'),
+      'ScrollMagic.velocity': path.resolve('node_modules/scrollmagic/scrollmagic/uncompressed/plugins/animation.velocity.js'),
+    },
     fallback: path.resolve('public'),
     extensions: ['', '.js', '.json', '.jsx'],
   },
@@ -42,12 +49,19 @@ const defaults = {
         'css?modules&localIdentName=[name]_[local]-[hash:base64:4]',
         'postcss',
       ],
-    }, {test: require.resolve('jquery'), loader: 'expose?$!expose?jQuery'}],
+    }, {
+      test: require.resolve('jquery'), loader: 'expose?$!expose?jQuery'
+    }, {
+      test: require.resolve('scrollmagic'), loader: 'expose?ScrollMagic'
+    }],
   },
   plugins: [
     new webpack.EnvironmentPlugin(['NODE_ENV']),
     new webpack.optimize.OccurrenceOrderPlugin(true),
-    new webpack.ProvidePlugin({'Promise': 'bluebird'}),
+    new webpack.ProvidePlugin({
+      'Promise': 'bluebird',
+      'IScroll': 'iscroll/build/iscroll-probe'
+    }),
     new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js'),
   ],
   postcss(webpack) {
@@ -57,9 +71,7 @@ const defaults = {
       require('postcss-hexrgba'),
       require('postcss-position'),
       require('postcss-responsive-type'),
-      require('postcss-cssnext')({
-        browsers: '> 1%, last 2 versions, not ie <= 8',
-      }),
+      require('postcss-cssnext')({browsers: '> 1%, last 2 versions'}),
       require('postcss-assets')({
         cachebuster: true,
         basePath: 'public/',
@@ -82,7 +94,7 @@ export default {
     ],
     vendor: isProduction ? defaults.entry.vendor : [
       ...defaults.entry.vendor, 'redux-logger',
-    ]
+    ],
   },
   module: isProduction ? defaults.module : {
     loaders: defaults.module.loaders,