flux-todomvc + some variations

Author: Nathan Hutchison

examples/flux-todomvc/js/app.js

@@ -11,7 +11,57 @@ var React = require('react');
 
 var TodoApp = require('./components/TodoApp.react');
 
+// Stuff from Axolotl example :D
+
+// hack to show the labs page before its enabled...
+// normally you would have a route to this page :D
+if (!localStorage.axoVariations) localStorage.axoVariations = '{show-labs-page: true}';
+
+var Axo = require('axolotl');
+
+var variationRequire = require.context('./variations', true, /\.js$/);
+var availableVariations = variationRequire.keys().map((v) => variationRequire(v).variation);
+
+var Axo = require('axolotl');
+var axo = new Axo(availableVariations, undefined, Axo.localStorageActions);
+
+var LabsPage = Axo.LabsPage;
+var LabsVariation = require('./variations/labs.js');
+
+var AxoContext = React.createClass({
+  childContextTypes: {
+    axo: React.PropTypes.object.isRequired,
+  },
+
+  getChildContext() {
+    return {
+      axo: axo,
+    };
+  },
+
+  getInitialState() {
+    return {
+      showLabs: false,
+    };
+  },
+
+  render() {
+    return (
+      <div>
+        <LabsVariation onClick={() => this.setState({showLabs: !this.state.showLabs})}/>
+        { this.state.showLabs ?
+          <LabsPage/>
+          :
+          <TodoApp/>
+        }
+      </div>
+    );
+  }
+});
+
+// :D
+
 React.render(
-  <TodoApp />,
+  <AxoContext/>,
   document.getElementById('todoapp')
 );

examples/flux-todomvc/js/components/TodoItem.react.js

@@ -14,6 +14,12 @@ var TodoTextInput = require('./TodoTextInput.react');
 
 var classNames = require('classnames');
 
+// Axolotl Variation :D
+
+var ROFLVariation = require('../variations/rofl');
+
+// :D
+
 var TodoItem = React.createClass({
 
   propTypes: {
@@ -62,6 +68,7 @@ var TodoItem = React.createClass({
             onChange={this._onToggleComplete}
           />
           <label onDoubleClick={this._onDoubleClick}>
+            <ROFLVariation/>
             {todo.text}
           </label>
           <button className="destroy" onClick={this._onDestroyClick} />

examples/flux-todomvc/js/variations/labs.js

@@ -0,0 +1,24 @@
+var React = require('react');
+
+var Axo = require('axolotl');
+
+var LabsPage = React.createClass({
+  render() {
+    return (
+      <div>
+        <br/>
+        <a href="#" onClick={this.props.onClick}>Toggle Labs Config</a>
+      </div>
+    );
+  }
+});
+
+
+const LabsPageVariation =  Axo.VariationEnhance({
+  Component: LabsPage,
+  name: 'show-labs-page',
+  description: 'Add a link to configure the labs page',
+  visible: true, // allow users to opt in should they choose
+});
+
+module.exports = LabsPageVariation;

examples/flux-todomvc/js/variations/rofl.js

@@ -0,0 +1,23 @@
+var React = require('react');
+
+var Axo = require('axolotl');
+
+var ROFL = React.createClass({
+  render() {
+    return (
+      <div>
+        <img style={{width: 40}} src={`http://lorempixel.com/40/40/cats?${Math.random()}`}/>
+      </div>
+    );
+  }
+});
+
+
+const ROFLVariation =  Axo.VariationEnhance({
+  Component: ROFL,
+  name: 'rofl',
+  description: 'Put a cat on it',
+  visible: true, // allow users to opt in should they choose
+});
+
+module.exports = ROFLVariation;