PARTIAL level toolbar rewrite

src/js/level/index.js

@@ -6,6 +6,7 @@ var Main = require('../app');
 var intl = require('../intl');
 var log = require('../log');
 
+var React = require('react');
 var Errors = require('../util/errors');
 var Sandbox = require('../sandbox/').Sandbox;
 var GlobalStateActions = require('../actions/GlobalStateActions');
@@ -20,7 +21,7 @@ var MultiView = require('../views/multiView').MultiView;
 var CanvasTerminalHolder = require('../views').CanvasTerminalHolder;
 var ConfirmCancelTerminal = require('../views').ConfirmCancelTerminal;
 var NextLevelConfirm = require('../views').NextLevelConfirm;
-var LevelToolbar = require('../views').LevelToolbar;
+var LevelToolbarView = require('../react_views/LevelToolbarView.jsx');
 
 var TreeCompare = require('../graph/treeCompare');
 
@@ -126,11 +127,19 @@ var Level = Sandbox.extend({
 
   initName: function() {
     var name = intl.getName(this.level);
-
+    this.levelToolbar = React.createElement(
-    this.levelToolbar = new LevelToolbar({
+      LevelToolbarView,
-      name: name,
+      {
-      parent: this
+        name: name,
-    });
+        onGoalClick: this.toggleGoal.bind(this),
+        onObjectiveClick: this.toggleObjective.bind(this)
+      }
+    );
+    debugger;
+    React.render(
+      this.levelToolbar,
+      document.getElementById('levelToolbarMount')
+    );
   },
 
   initGoalData: function(options) {
@@ -213,7 +222,6 @@ var Level = Sandbox.extend({
     this.goalVis.hide();
     this.goalWindowPos = position;
     this.goalWindowSize = size;
-    this.levelToolbar.$goalButton.text(intl.str('show-goal-button'));
     if ($('#goalPlaceholder').is(':visible')) {
       $('#goalPlaceholder').hide();
       this.mainVis.myResize();
@@ -283,7 +291,6 @@ var Level = Sandbox.extend({
 
   showGoal: function(command, defer) {
     this.showSideVis(command, defer, this.goalCanvasHolder, this.initGoalVisualization);
-    this.levelToolbar.$goalButton.text(intl.str('hide-goal-button'));
     // show the squeezer again we are to the side
     if ($(this.goalVis.el).offset().left > 0.5 * $(window).width()) {
       $('#goalPlaceholder').show();
@@ -305,7 +312,6 @@ var Level = Sandbox.extend({
 
   hideGoal: function(command, defer) {
     this.hideSideVis(command, defer, this.goalCanvasHolder);
-    this.levelToolbar.$goalButton.text(intl.str('show-goal-button'));
   },
 
   hideSideVis: function(command, defer, canvasHolder, vis) {

src/js/react_views/CommandHistoryView.jsx

@@ -2,8 +2,6 @@ var CommandView = require('../react_views/CommandView.jsx');
 var Main = require('../app');
 var React = require('react');
 
-var reactUtil = require('../util/reactUtil');
-
 var _subscribeEvents = [
   'add',
   'reset',

src/js/react_views/CommandView.jsx

@@ -118,7 +118,7 @@ var CommandView = React.createClass({
     for (var i = 0; i < warnings.length; i++) {
       result.push(
         <p key={'warning_' + i}>
-          <i class="icon-exclamation-sign"></i>
+          <i className="icon-exclamation-sign"></i>
           {warnings[i]}
         </p>
       );

src/js/react_views/LevelToolbarView.jsx

@@ -0,0 +1,72 @@
+var React = require('react');
+var PropTypes = React.PropTypes;
+
+var intl = require('../intl');
+var reactUtil = require('../util/reactUtil');
+
+var LevelToolbarView = React.createClass({
+
+  propTypes: {
+    name: PropTypes.string.isRequired,
+    onGoalClick: PropTypes.func.isRequired,
+    onObjectiveClick: PropTypes.func.isRequired
+  },
+
+  getInitialState: function() {
+    return {
+      isHidden: true
+    };
+  },
+
+  componentDidMount: function() {
+    this.setState({
+      isHidden: false
+    });
+  },
+
+  render: function() {
+    return (
+      <div className={reactUtil.joinClasses([
+          'toolbar',
+          'level-toolbar',
+          'box',
+          'vertical',
+          'center',
+          'transitionAll',
+          this.state.isHidden ? 'hidden' : ''
+        ])}>
+        <div className="clearfix">
+          <div className="levelNameWrapper">
+            <i className="icon-bolt"></i>
+            {' Level '}
+            <span className="levelToolbarSpan">
+              {this.props.name}
+            </span>
+          </div>
+        </div>
+        <div className="buttonsWrapper">
+          <div className="showGoalWrapper">
+            <button
+              onClick={this.props.onGoalClick}
+              type="button">
+              {false ? 
+                intl.str('show-goal-button') :
+                intl.str('hide-goal-button')
+              }
+            </button>
+          </div>
+          <div className="showObjectiveWrapper">
+            <button
+              onClick={this.props.onObjectiveClick}
+              type="button">
+              Objective
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+});
+
+module.exports = LevelToolbarView;

src/js/views/index.js

@@ -559,62 +559,6 @@ var ZoomAlertWindow = ViewportAlert.extend({
   }
 });
 
-var LevelToolbar = BaseView.extend({
-  tagName: 'div',
-  className: 'levelToolbarHolder',
-  template: _.template($('#level-toolbar-template').html()),
-
-  initialize: function(options) {
-    options = options || {};
-    this.parent = options.parent;
-    this.JSON = {
-      name: options.name || 'Some level! (unknown name)'
-    };
-
-    this.beforeDestination = $($('#commandLineHistory div.toolbar')[0]);
-    this.render();
-
-    this.$goalButton = this.$el.find('#show-goal');
-    this.$objectiveButton = this.$el.find('#show-objective');
-
-    var parent = this.parent;
-    this.$goalButton.on('click', function () {
-      parent.trigger('toggleGoal');
-    });
-    this.$objectiveButton.on('click', function() {
-      parent.trigger('toggleObjective');
-    });
-
-    if (!options.wait) {
-      process.nextTick(_.bind(this.show, this));
-    }
-  },
-
-  getAnimationTime: function() { return 700; },
-
-  render: function() {
-    var HTML = this.template(this.JSON);
-
-    this.$el.html(HTML);
-    this.beforeDestination.after(this.el);
-  },
-
-  die: function() {
-    this.hide();
-    setTimeout(_.bind(function() {
-      this.tearDown();
-    }, this), this.getAnimationTime());
-  },
-
-  hide: function() {
-    this.$('div.toolbar').toggleClass('hidden', true);
-  },
-
-  show: function() {
-    this.$('div.toolbar').toggleClass('hidden', false);
-  }
-});
-
 var HelperBar = BaseView.extend({
   getClassName: function() {
     return 'BaseHelperBar';
@@ -1024,6 +968,5 @@ exports.WindowSizeAlertWindow = WindowSizeAlertWindow;
 exports.MainHelperBar = MainHelperBar;
 
 exports.CanvasTerminalHolder = CanvasTerminalHolder;
-exports.LevelToolbar = LevelToolbar;
 exports.NextLevelConfirm = NextLevelConfirm;
 

src/template.index.html

@@ -52,6 +52,9 @@
               </span>
             </div>
           </div>
+          <div id="levelToolbarMount">
+          </div>
+
         <div id="terminal" class="box flex1 horizontal startAlign">
           <div id="commandDisplay" class="box vertical flex1">
           </div>
@@ -65,6 +68,7 @@
           </div>
           <textarea id="commandTextField"></textarea>
         </div>
+
       </div>
     </div>
 
@@ -85,17 +89,21 @@
   </div>
 
   <div id="canvasHolder">
-
   </div>
 
   <!-- lol inline styles -->
   <a class="githubLink" href="https://github.com/pcottle/learnGitBranching" target="_blank">
-    <img style="position: absolute; top: 0; right: 0; border: 0;" src="assets/forkme_right_darkblue_121621.png" alt="Fork me on GitHub">
+    <img
+      style="position: absolute; top: 0; right: 0; border: 0;"
+      src="assets/forkme_right_darkblue_121621.png"
+      alt="Fork me on GitHub"
+    />
   </a>
 
   <!-- Dependencies -->
   <script type="text/javascript">
-    // PhantomJS doesn't support bind yet LOL. polyfill
+    // PhantomJS doesn't support bind yet LOL. polyfill locally so tests
+    // can pass while offline
     Function.prototype.bind = Function.prototype.bind || function (thisp) {
       var fn = this;
       return function () {
@@ -128,28 +136,6 @@
     <% } %>
   </script>
 
-  <script type="text/html" id="level-toolbar-template">
-    <div class="toolbar level-toolbar box vertical center transitionAll hidden">
-      <div class="clearfix">
-        <div class="levelNameWrapper">
-          <i class="icon-bolt"></i>
-          Level
-          <span class="levelToolbarSpan">
-            <%= name %>
-          </span>
-        </div>
-      </div>
-      <div class="buttonsWrapper">
-        <div class="showGoalWrapper">
-          <button id="show-goal" type="button">Show Goal</button>
-        </div>
-        <div class="showObjectiveWrapper">
-          <button id="show-objective" type="button">Objective</button>
-        </div>
-      </div>
-    </div>
-  </script>
-
   <script type="text/html" id="modal-view-template">
     <div class="contentHolder box vertical center flex1">
     </div>