BOOM removed helper bar view look at those stats brah

src/js/app/index.js

@@ -278,8 +278,8 @@ function CommandUI() {
   var Collections = require('../models/collections');
   var CommandViews = require('../views/commandViews');
   var CommandHistoryView = require('../react_views/CommandHistoryView.jsx');
+  var MainHelperBarView = require('../react_views/MainHelperBarView.jsx');
 
-  var mainHelperBar = new Views.MainHelperBar();
   var backgroundView = new Views.BackgroundView();
 
   this.commandCollection = new Collections.CommandCollection();
@@ -291,6 +291,10 @@ function CommandUI() {
     el: $('#commandLineBar')
   });
 
+  React.render(
+    React.createElement(MainHelperBarView),
+    document.getElementById('helperBarMount')
+  );
   React.render(
     React.createElement(
       CommandHistoryView,

src/js/react_views/CommandsHelperBarView.jsx

@@ -0,0 +1,69 @@
+var HelperBarView = require('../react_views/HelperBarView.jsx');
+var Main = require('../app');
+var React = require('react');
+
+var log = require('../log');
+
+var CommandsHelperBarView = React.createClass({
+
+  propTypes: {
+    shown: React.PropTypes.bool.isRequired,
+    onExit: React.PropTypes.func.isRequired
+  },
+
+  render: function() {
+    return (
+      <HelperBarView
+        items={this.getItems()}
+        shown={this.props.shown}
+      />
+    );
+  },
+
+  fireCommand: function(command) {
+    log.viewInteracted('commandHelperBar');
+    Main.getEventBaton().trigger('commandSubmitted', command);
+  },
+
+  getItems: function() {
+    return [{
+      text: 'Levels',
+      onClick: function() {
+        this.fireCommand('levels');
+      }.bind(this),
+    }, {
+      text: 'Solution',
+      onClick: function() {
+        this.fireCommand('show solution');
+      }.bind(this),
+    }, {
+      text: 'Reset',
+      onClick: function() {
+        this.fireCommand('reset');
+      }.bind(this),
+    }, {
+      text: 'Undo',
+      onClick: function() {
+        this.fireCommand('undo');
+      }.bind(this),
+    }, {
+      text: 'Objective',
+      onClick: function() {
+        this.fireCommand('objective');
+      }.bind(this),
+    }, {
+      text: 'Help',
+      onClick: function() {
+        this.fireCommand('help general; git help');
+      }.bind(this)
+    }, {
+      icon: 'signout',
+      onClick: function() {
+        this.props.onExit();
+      }.bind(this)
+    }];
+  }
+
+});
+
+module.exports = CommandsHelperBarView;

src/js/react_views/HelperBarView.jsx

@@ -0,0 +1,64 @@
+var React = require('react');
+
+var reactUtil = require('../util/reactUtil');
+
+var HelperBarView = React.createClass({
+
+  propTypes: {
+    className: React.PropTypes.string,
+    shown: React.PropTypes.bool.isRequired,
+    items: React.PropTypes.array.isRequired
+  },
+
+  render: function() {
+    var topClassName = reactUtil.joinClasses([
+      'helperBar',
+      'transitionAll',
+      this.props.shown ? 'show' : '',
+      this.props.className ? this.props.className : ''
+    ]);
+
+    return (
+      <div className={topClassName}>
+        {this.props.items.map(function(item, index) {
+          return [
+            this.renderItem(item),
+            // ugh -- we need this spacer at the end only
+            // if we are not the last element
+            index === this.props.items.length - 1 ?
+              null :
+              <span key={'helper_bar_' + index}>{' '}</span>
+          ];
+        }.bind(this))}
+      </div>
+    );
+  },
+
+  renderItem: function(item, index) {
+    if (item.newPageLink) {
+      return (
+        <a
+          key={'helper_bar_' + index}
+          onClick={item.onClick}
+          target="_blank"
+          href={item.href}>
+          <i className={'icon-' + item.icon} />
+          {' '}
+        </a>
+      );
+    }
+    return (
+      <a
+        key={'helper_bar_' + index}
+        onClick={item.onClick}>
+        {item.text ? item.text :
+          <i className={'icon-' + item.icon} />
+        }
+        {' '}
+      </a>
+    );
+  }
+
+});
+
+module.exports = HelperBarView;

src/js/react_views/IntlHelperBarView.jsx

@@ -0,0 +1,85 @@
+var HelperBarView = require('../react_views/HelperBarView.jsx');
+var Main = require('../app');
+var React = require('react');
+
+var log = require('../log');
+
+var IntlHelperBarView = React.createClass({
+
+  propTypes: {
+    shown: React.PropTypes.bool.isRequired,
+    onExit: React.PropTypes.func.isRequired
+  },
+
+  render: function() {
+    return (
+      <HelperBarView
+        items={this.getItems()}
+        shown={this.props.shown}
+      />
+    );
+  },
+
+  fireCommand: function(command) {
+    log.viewInteracted('intlSelect');
+    Main.getEventBaton().trigger('commandSubmitted', command);
+    this.props.onExit();
+  },
+
+  getItems: function() {
+    return [{
+      text: 'Git Branching',
+      onClick: function() {
+        this.fireCommand('locale en_US; levels');
+      }.bind(this)
+    }, {
+      text: '日本語版リポジトリ',
+      onClick: function() {
+        this.fireCommand('locale ja; levels');
+      }.bind(this)
+    }, {
+      text: 'Git 브랜치 배우기',
+      onClick: function() {
+        this.fireCommand('locale ko; levels');
+      }.bind(this)
+    }, {
+      text: '学习 Git 分支',
+      onClick: function() {
+        this.fireCommand('locale zh_CN; levels');
+      }.bind(this)
+    }, {
+      text: '學習 Git 分支',
+      onClick: function() {
+        this.fireCommand('locale zh_TW; levels');
+      }.bind(this)
+    }, {
+      text: 'español',
+      onClick: function() {
+        this.fireCommand('locale es_AR; levels');
+      }.bind(this)
+    }, {
+      text: 'português',
+      onClick: function() {
+        this.fireCommand('locale pt_BR; levels');
+      }.bind(this)
+    }, {
+      text: 'français',
+      onClick: function() {
+        this.fireCommand('locale fr_FR; levels');
+      }.bind(this)
+    }, {
+      text: 'Deutsch',
+      onClick: function() {
+        this.fireCommand('locale de_DE; levels');
+      }.bind(this)
+    }, {
+      icon: 'signout',
+      onClick: function() {
+        this.props.onExit();
+      }.bind(this)
+    }];
+  }
+
+});
+
+module.exports = IntlHelperBarView;

src/js/react_views/MainHelperBarView.jsx

@@ -0,0 +1,75 @@
+var HelperBarView = require('../react_views/HelperBarView.jsx');
+var IntlHelperBarView =
+  require('../react_views/IntlHelperBarView.jsx');
+var CommandsHelperBarView =
+  require('../react_views/CommandsHelperBarView.jsx');
+var React = require('react');
+
+var keyMirror = require('../util/keyMirror');
+var log = require('../log');
+
+var BARS = keyMirror({
+  SELF: null,
+  INTL: null,
+  COMMANDS: null
+});
+
+var MainHelperBarView = React.createClass({
+
+  getInitialState: function() {
+    return {
+      shownBar: BARS.SELF
+    };
+  },
+
+  render: function() {
+    return (
+      <div>
+        <HelperBarView
+          className="BaseHelperBar"
+          items={this.getItems()}
+          shown={this.state.shownBar === BARS.SELF}
+        />
+        <CommandsHelperBarView
+          shown={this.state.shownBar === BARS.COMMANDS}
+          onExit={this.showSelf}
+        />
+        <IntlHelperBarView
+          shown={this.state.shownBar === BARS.INTL}
+          onExit={this.showSelf}
+        />
+      </div>
+    );
+  },
+
+  showSelf: function() {
+    this.setState({
+      shownBar: BARS.SELF
+    });
+  },
+
+  getItems: function() {
+    return [{
+      icon: 'question-sign',
+      onClick: function() {
+        this.setState({
+          shownBar: BARS.COMMANDS
+        });
+      }.bind(this)
+    }, {
+      icon: 'globe',
+      onClick: function() {
+        this.setState({
+          shownBar: BARS.INTL
+        });
+      }.bind(this)
+    }, {
+      newPageLink: true,
+      icon: 'facebook',
+      href: 'https://www.facebook.com/LearnGitBranching'
+    }];
+  }
+
+});
+
+module.exports = MainHelperBarView;

src/js/views/index.js

@@ -560,265 +560,6 @@ var ZoomAlertWindow = ViewportAlert.extend({
   }
 });
 
-var HelperBar = BaseView.extend({
-  getClassName: function() {
-    return 'BaseHelperBar';
-  },
-
-  tagName: 'div',
-  className: 'helperBar transitionAll',
-  template: _.template($('#helper-bar-template').html()),
-  events: {
-    'click a': 'onClick'
-  },
-
-  onClick: function(ev) {
-    var target = ev.target;
-    var id = $(target).attr('data-id');
-    var funcName = 'on' + id[0].toUpperCase() + id.slice(1) + 'Click';
-    this[funcName].call(this);
-  },
-
-  show: function() {
-    this.$el.toggleClass('show', true);
-  },
-
-  hide: function() {
-    this.$el.toggleClass('show', false);
-    if (this.deferred) {
-      this.deferred.resolve();
-    }
-  },
-
-  getItems: function() {
-    return [];
-  },
-
-  setupChildren: function() {
-  },
-
-  fireCommand: function(command) {
-    Main.getEventBaton().trigger('commandSubmitted', command);
-  },
-
-  showDeferMe: function(otherBar) {
-    this.hide();
-
-    var whenClosed = Q.defer();
-    otherBar.deferred = whenClosed;
-    whenClosed.promise.then(_.bind(function() {
-      this.show();
-    }, this));
-    otherBar.show();
-  },
-
-  onExitClick: function() {
-    this.hide();
-  },
-
-  initialize: function(options) {
-    options = options || {};
-    this.destination = $('body');
-
-    this.JSON = {
-      items: this.getItems()
-    };
-    this.render();
-    this.$el.addClass(this.getClassName());
-    this.setupChildren();
-
-    if (!options.wait) {
-      this.show();
-    }
-  }
-});
-
-var IntlHelperBar = HelperBar.extend({
-  getClassName: function() {
-    return 'IntlHelperBar';
-  },
-
-  getItems: function() {
-    return [{
-      text: 'Git Branching',
-      id: 'english'
-    }, {
-      text: '日本語版リポジトリ',
-      id: 'japanese'
-    }, {
-      text: 'Git 브랜치 배우기',
-      id: 'korean'
-    }, {
-      text: '学习 Git 分支',
-      id: 'simpchinese'
-    }, {
-      text: '學習 Git 分支',
-      id: 'tradchinese'
-    }, {
-      text: 'español',
-      id: 'spanish'
-    }, {
-      text: 'português',
-      id: 'portuguese'
-    }, {
-      text: 'français',
-      id: 'french'
-    }, {
-      text: 'Deutsch',
-      id: 'german'
-    }, {
-      icon: 'signout',
-      id: 'exit'
-    }];
-  },
-
-  fireCommand: function() {
-    log.viewInteracted('intlSelect');
-    HelperBar.prototype.fireCommand.apply(this, arguments);
-  },
-
-  onJapaneseClick: function() {
-    this.fireCommand('locale ja; levels');
-    this.hide();
-  },
-
-  onEnglishClick: function() {
-    this.fireCommand('locale en_US; levels');
-    this.hide();
-  },
-
-  onKoreanClick: function() {
-    this.fireCommand('locale ko; levels');
-    this.hide();
-  },
-
-  onSpanishClick: function() {
-    this.fireCommand('locale es_AR; levels');
-    this.hide();
-  },
-  
-  onPortugueseClick: function() {
-    this.fireCommand('locale pt_BR; levels');
-    this.hide();
-  },
-
-  onFrenchClick: function() {
-    this.fireCommand('locale fr_FR; levels');
-    this.hide();
-  },
-
-  onGermanClick: function() {
-    this.fireCommand('locale de_DE; levels');
-    this.hide();
-  },
-
-  onSimpchineseClick: function() {
-    this.fireCommand('locale zh_CN; levels');
-    this.hide();
-  },
-
-  onTradchineseClick: function() {
-    this.fireCommand('locale zh_TW; levels');
-    this.hide();
-  }
-});
-
-var CommandsHelperBar = HelperBar.extend({
-  getClassName: function() {
-    return 'CommandsHelperBar';
-  },
-
-  getItems: function() {
-    return [{
-      text: 'Levels',
-      id: 'levels'
-    }, {
-      text: 'Solution',
-      id: 'solution'
-    }, {
-      text: 'Reset',
-      id: 'reset'
-    }, {
-      text: 'Undo',
-      id: 'undo'
-    }, {
-      text: 'Objective',
-      id: 'objective'
-    }, {
-      text: 'Help',
-      id: 'help'
-    }, {
-      icon: 'signout',
-      id: 'exit'
-    }];
-  },
-
-  fireCommand: function() {
-    log.viewInteracted('helperBar');
-    HelperBar.prototype.fireCommand.apply(this, arguments);
-  },
-
-  onSolutionClick: function() {
-    this.fireCommand('show solution');
-  },
-
-  onObjectiveClick: function() {
-    this.fireCommand('objective');
-  },
-
-  onLevelsClick: function() {
-    this.fireCommand('levels');
-  },
-
-  onResetClick: function() {
-    this.fireCommand('reset');
-  },
-
-  onUndoClick: function() {
-    this.fireCommand('undo');
-  },
-
-  onHelpClick: function() {
-    this.fireCommand('help general; git help');
-  }
-});
-
-var MainHelperBar = HelperBar.extend({
-  getItems: function() {
-    return [{
-      icon: 'question-sign',
-      id: 'commands'
-    }, {
-      icon: 'globe',
-      id: 'intl'
-    }, {
-      newPageLink: true,
-      icon: 'facebook',
-      id: 'fb',
-      href: 'https://www.facebook.com/LearnGitBranching'
-    }];
-  },
-
-  onFbClick: function() {
-    log.viewInteracted('fbPageLink');
-  },
-
-  onIntlClick: function() {
-    this.showDeferMe(this.intlHelper);
-    log.viewInteracted('openIntlBar');
-  },
-
-  onCommandsClick: function() {
-    this.showDeferMe(this.commandsHelper);
-    log.viewInteracted('openCommandsBar');
-  },
-
-  setupChildren: function() {
-    this.commandsHelper = new CommandsHelperBar({ wait: true });
-    this.intlHelper = new IntlHelperBar({ wait: true});
-  }
-});
-
 var CanvasTerminalHolder = BaseView.extend({
   tagName: 'div',
   className: 'canvasTerminalHolder box flex1',
@@ -966,8 +707,5 @@ exports.ZoomAlertWindow = ZoomAlertWindow;
 exports.ConfirmCancelTerminal = ConfirmCancelTerminal;
 exports.WindowSizeAlertWindow = WindowSizeAlertWindow;
 
-exports.MainHelperBar = MainHelperBar;
-
 exports.CanvasTerminalHolder = CanvasTerminalHolder;
 exports.NextLevelConfirm = NextLevelConfirm;
-

src/template.index.html

@@ -91,6 +91,12 @@
   <div id="canvasHolder">
   </div>
 
+  <div id="reactMount">
+  </div>
+
+  <div id="helperBarMount">
+  </div>
+
   <!-- lol inline styles -->
   <a class="githubLink" href="https://github.com/pcottle/learnGitBranching" target="_blank">
     <img
@@ -116,26 +122,7 @@
 
   <script src="lib/jquery-ui-1.9.0.custom.min.js"></script>
 
-  <!-- Templates from here on out. Someone seriously needs to fix template
-       management for node.js apps. I know there is the text plugin
-       for requireJS but that's lame. For now, they are all listed here... -->
-  <script type="text/html" id="helper-bar-template">
-    <% for(var i = 0; i < items.length; i++) { %>
-      <% if (items[i].text) { %>
-        <a data-id="<%= items[i].id %>" class="<%=items[i].id%>"><%= items[i].text %></a>
-      <% } else if (items[i].newPageLink) { %>
-        <a data-id="<%= items[i].id %>"
-          target="_blank" href="<%= items[i].href %>"class="<%=items[i].id%>">
-          <i data-id="<%= items[i].id %>" class="icon-<%= items[i].icon %>"></i>
-        </a>
-      <% } else { %>
-        <a data-id="<%= items[i].id %>" class="<%=items[i].id%>">
-          <i data-id="<%= items[i].id %>" class="icon-<%= items[i].icon %>"></i>
-        </a>
-      <% } %>
-    <% } %>
-  </script>
-
+  <!-- Templates from here on out... -->
   <script type="text/html" id="modal-view-template">
     <div class="contentHolder box vertical center flex1">
     </div>
@@ -453,9 +440,6 @@
       </div>
     </li>
   </script>
-
-  <div id="reactMount" />
-
   <!-- The compiled and minified build file (that actually does everything) is below.
        For a much easier time perusing the source, see the individual files at:
           https://github.com/pcottle/learnGitBranching