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 = new LevelToolbar({
-      name: name,
-      parent: this
-    });
+    this.levelToolbar = React.createElement(
+      LevelToolbarView,
+      {
+        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;