Helper Bar and intl switching Issue #45 and Issue #69 and Issue #39

build/bundle.js

@@ -5945,7 +5945,7 @@ function CommandUI() {
   var Collections = require('../models/collections');
   var CommandViews = require('../views/commandViews');
 
-  //new Views.HelperBar();
+  var mainHelprBar = new Views.MainHelperBar();
 
   this.commandCollection = new Collections.CommandCollection();
   this.commandBuffer = new Collections.CommandBuffer({
@@ -10079,29 +10079,172 @@ var LevelToolbar = BaseView.extend({
 
 var HelperBar = BaseView.extend({
   tagName: 'div',
-  className: 'helperBar',
+  className: 'helperBar transitionAll',
   template: _.template($('#helper-bar-template').html()),
   events: {
-    'click div': 'onClick'
+    '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');
 
-    var items = [{
-      text: '??',
-      id: 'main'
-    }];
-
     this.JSON = {
-      items: items
+      items: this.getItems()
     };
-
     this.render();
+    this.setupChildren();
+
+    if (!options.wait) {
+      this.show();
+    }
+  }
+});
+
+var IntlHelperBar = HelperBar.extend({
+  getItems: function() {
+    return [{
+      text: 'Git Branching',
+      id: 'english'
+    }, {
+      text: 'Git 브랜치 배우기',
+      id: 'korean'
+    }, {
+      text: '学习Git分支',
+      id: 'chinese'
+    }, {
+      text: 'Français(e)',
+      id: 'french'
+    }, {
+      icon: 'signout',
+      id: 'exit'
+    }];
+  },
+
+  onEnglishClick: function() {
+    this.fireCommand('locale en_US; levels');
+    this.hide();
+  },
+
+  onKoreanClick: function() {
+    this.fireCommand('locale ko; levels');
+    this.hide();
+  },
+
+  onFrenchClick: function() {
+    this.fireCommand('locale fr_FR; levels');
+    this.hide();
+  },
+
+  onChineseClick: function() {
+    this.fireCommand('locale zh_CN; levels');
+    this.hide();
+  }
+});
+
+var CommandsHelperBar = HelperBar.extend({
+  getItems: function() {
+    return [{
+      text: 'Levels',
+      id: 'levels'
+    }, {
+      text: 'Reset',
+      id: 'reset'
+    }, {
+      text: 'Undo',
+      id: 'undo'
+    }, {
+      text: 'Help',
+      id: 'help'
+    }, {
+      icon: 'signout',
+      id: 'exit'
+    }];
+  },
+
+  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 [{
+      text: '?',
+      id: 'commands'
+    }, {
+      icon: 'globe',
+      id: 'intl'
+    }];
+  },
+
+  onIntlClick: function() {
+    this.showDeferMe(this.intlHelper);
+  },
+
+  onCommandsClick: function() {
+    this.showDeferMe(this.commandsHelper);
+  },
+
+  setupChildren: function() {
+    this.commandsHelper = new CommandsHelperBar({ wait: true });
+    this.intlHelper = new IntlHelperBar({ wait: true});
   }
 });
 
@@ -10172,7 +10315,8 @@ exports.LeftRightView = LeftRightView;
 exports.ZoomAlertWindow = ZoomAlertWindow;
 exports.ConfirmCancelTerminal = ConfirmCancelTerminal;
 exports.WindowSizeAlertWindow = WindowSizeAlertWindow;
-exports.HelperBar = HelperBar;
+
+exports.MainHelperBar = MainHelperBar;
 
 exports.CanvasTerminalHolder = CanvasTerminalHolder;
 exports.LevelToolbar = LevelToolbar;
@@ -14324,7 +14468,7 @@ var MultiViewBuilder = ContainedBase.extend({
   },
 
   addView: function(ev) {
-    var el = ev.srcElement;
+    var el = ev.target;
     var type = $(el).attr('data-type');
 
     var whenDone = Q.defer();
@@ -14347,7 +14491,7 @@ var MultiViewBuilder = ContainedBase.extend({
   },
 
   testOneView: function(ev) {
-    var el = ev.srcElement;
+    var el = ev.target;
     var index = $(el).attr('data-index');
     var toTest = this.getChildViews()[index];
     var MultiView = require('../views/multiView').MultiView;
@@ -14364,7 +14508,7 @@ var MultiViewBuilder = ContainedBase.extend({
   },
 
   editOneView: function(ev) {
-    var el = ev.srcElement;
+    var el = ev.target;
     var index = $(el).attr('data-index');
     var type = $(el).attr('data-type');
 
@@ -14388,7 +14532,7 @@ var MultiViewBuilder = ContainedBase.extend({
   },
 
   deleteOneView: function(ev) {
-    var el = ev.srcElement;
+    var el = ev.target;
     var index = $(el).attr('data-index');
     var toSlice = this.getChildViews();
 
@@ -19592,7 +19736,7 @@ var SeriesView = BaseView.extend({
   },
 
   getEventID: function(ev) {
-    var element = ev.srcElement || ev.currentTarget;
+    var element = ev.target;
     return $(element).attr('data-id');
   },
 
@@ -19702,7 +19846,7 @@ var CommandPromptView = Backbone.View.extend({
   },
 
   onKeyDown: function(e) {
-    var el = e.srcElement || e.currentTarget;
+    var el = e.target;
     this.updatePrompt(el);
   },
 
@@ -20541,7 +20685,7 @@ function CommandUI() {
   var Collections = require('../models/collections');
   var CommandViews = require('../views/commandViews');
 
-  //new Views.HelperBar();
+  var mainHelprBar = new Views.MainHelperBar();
 
   this.commandCollection = new Collections.CommandCollection();
   this.commandBuffer = new Collections.CommandBuffer({
@@ -26815,7 +26959,7 @@ var MultiViewBuilder = ContainedBase.extend({
   },
 
   addView: function(ev) {
-    var el = ev.srcElement;
+    var el = ev.target;
     var type = $(el).attr('data-type');
 
     var whenDone = Q.defer();
@@ -26838,7 +26982,7 @@ var MultiViewBuilder = ContainedBase.extend({
   },
 
   testOneView: function(ev) {
-    var el = ev.srcElement;
+    var el = ev.target;
     var index = $(el).attr('data-index');
     var toTest = this.getChildViews()[index];
     var MultiView = require('../views/multiView').MultiView;
@@ -26855,7 +26999,7 @@ var MultiViewBuilder = ContainedBase.extend({
   },
 
   editOneView: function(ev) {
-    var el = ev.srcElement;
+    var el = ev.target;
     var index = $(el).attr('data-index');
     var type = $(el).attr('data-type');
 
@@ -26879,7 +27023,7 @@ var MultiViewBuilder = ContainedBase.extend({
   },
 
   deleteOneView: function(ev) {
-    var el = ev.srcElement;
+    var el = ev.target;
     var index = $(el).attr('data-index');
     var toSlice = this.getChildViews();
 
@@ -26995,7 +27139,7 @@ var CommandPromptView = Backbone.View.extend({
   },
 
   onKeyDown: function(e) {
-    var el = e.srcElement || e.currentTarget;
+    var el = e.target;
     this.updatePrompt(el);
   },
 
@@ -28133,29 +28277,172 @@ var LevelToolbar = BaseView.extend({
 
 var HelperBar = BaseView.extend({
   tagName: 'div',
-  className: 'helperBar',
+  className: 'helperBar transitionAll',
   template: _.template($('#helper-bar-template').html()),
   events: {
-    'click div': 'onClick'
+    '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');
 
-    var items = [{
-      text: '??',
-      id: 'main'
-    }];
-
     this.JSON = {
-      items: items
+      items: this.getItems()
     };
-
     this.render();
+    this.setupChildren();
+
+    if (!options.wait) {
+      this.show();
+    }
+  }
+});
+
+var IntlHelperBar = HelperBar.extend({
+  getItems: function() {
+    return [{
+      text: 'Git Branching',
+      id: 'english'
+    }, {
+      text: 'Git 브랜치 배우기',
+      id: 'korean'
+    }, {
+      text: '学习Git分支',
+      id: 'chinese'
+    }, {
+      text: 'Français(e)',
+      id: 'french'
+    }, {
+      icon: 'signout',
+      id: 'exit'
+    }];
+  },
+
+  onEnglishClick: function() {
+    this.fireCommand('locale en_US; levels');
+    this.hide();
+  },
+
+  onKoreanClick: function() {
+    this.fireCommand('locale ko; levels');
+    this.hide();
+  },
+
+  onFrenchClick: function() {
+    this.fireCommand('locale fr_FR; levels');
+    this.hide();
+  },
+
+  onChineseClick: function() {
+    this.fireCommand('locale zh_CN; levels');
+    this.hide();
+  }
+});
+
+var CommandsHelperBar = HelperBar.extend({
+  getItems: function() {
+    return [{
+      text: 'Levels',
+      id: 'levels'
+    }, {
+      text: 'Reset',
+      id: 'reset'
+    }, {
+      text: 'Undo',
+      id: 'undo'
+    }, {
+      text: 'Help',
+      id: 'help'
+    }, {
+      icon: 'signout',
+      id: 'exit'
+    }];
+  },
+
+  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 [{
+      text: '?',
+      id: 'commands'
+    }, {
+      icon: 'globe',
+      id: 'intl'
+    }];
+  },
+
+  onIntlClick: function() {
+    this.showDeferMe(this.intlHelper);
+  },
+
+  onCommandsClick: function() {
+    this.showDeferMe(this.commandsHelper);
+  },
+
+  setupChildren: function() {
+    this.commandsHelper = new CommandsHelperBar({ wait: true });
+    this.intlHelper = new IntlHelperBar({ wait: true});
   }
 });
 
@@ -28226,7 +28513,8 @@ exports.LeftRightView = LeftRightView;
 exports.ZoomAlertWindow = ZoomAlertWindow;
 exports.ConfirmCancelTerminal = ConfirmCancelTerminal;
 exports.WindowSizeAlertWindow = WindowSizeAlertWindow;
-exports.HelperBar = HelperBar;
+
+exports.MainHelperBar = MainHelperBar;
 
 exports.CanvasTerminalHolder = CanvasTerminalHolder;
 exports.LevelToolbar = LevelToolbar;
@@ -28532,7 +28820,7 @@ var SeriesView = BaseView.extend({
   },
 
   getEventID: function(ev) {
-    var element = ev.srcElement || ev.currentTarget;
+    var element = ev.target;
     return $(element).attr('data-id');
   },
 

build/main.a07a2b2b.css

@@ -228,6 +228,7 @@ div.canvasTerminalHolder > div.terminal-window-holder.slideOut {
   transform: translate3d(-150%,0,0);
 }
 
+
 div.canvasTerminalHolder > div.terminal-window-holder > div.wrapper {
   margin: 0 20px 0px 20px;
   height: 80%;
@@ -523,7 +524,7 @@ li.rebaseEntry,
 }
 
 .helperBar {
-  position: fixed;
+  position: absolute;
   bottom: 0px;
   right: 0px;
   background: #424242;
@@ -533,10 +534,43 @@ li.rebaseEntry,
   border-bottom: 0;
   border-right: 0;
   box-shadow: -1px -1px 5px rgba(0,0,0,0.3);
-  cursor: pointer;
   font-weight: bold;
 }
 
+.helperBar i {
+  cursor: pointer;
+}
+
+.helperBar a {
+  cursor: pointer;
+  font-style: italic;
+}
+
+.helperBar a:after {
+  content: ' \b7';
+  font-style: normal;
+}
+
+.helperBar a:last-child:after {
+  content: '';
+}
+
+div.helperBar {
+  -webkit-transform: translate3d(150%,0,0);
+  -moz-transform: translate3d(150%,0,0);
+  -o-transform: translate3d(150%,0,0);
+  -ms-transform: translate3d(150%,0,0);
+  transform: translate3d(150%,0,0);
+}
+
+div.helperBar.show {
+  -webkit-transform: translate3d(0,0,0);
+  -moz-transform: translate3d(0,0,0);
+  -o-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+}
+
 #commandLineBar,
 .terminal-window .inside {
   border-top: 0;

index.html

@@ -13,7 +13,7 @@
   <meta property="og:image" content="http://pcottle.github.com/learnGitBranching/assets/learnGitBranching.png"/>
   <meta property="og:description" content="A interactive Git visualization tool to educate and challenge!"/>
 
-	<link rel="stylesheet" href="build/main.c1dbd088.css" type="text/css" charset="utf-8">
+	<link rel="stylesheet" href="build/main.a07a2b2b.css" type="text/css" charset="utf-8">
 	<link rel="stylesheet" href="src/style/font-awesome.css" type="text/css" charset="utf-8">
 </head>
 <body>
@@ -106,13 +106,15 @@
   </script>
 
   <script type="text/html" id="helper-bar-template">
-    <div class="helperBar">
-      <% for(var i = 0; i < items.length; i++) { %>
-        <a data-id="wtf">
-          <%= items[i].text %>
+    <% for(var i = 0; i < items.length; i++) { %>
+      <% if (items[i].text) { %>
+        <a data-id="<%= items[i].id %>"><%= items[i].text %></a>
+      <% } else { %>
+        <a data-id="<%= items[i].id %>">
+          <i data-id="<%= items[i].id %>" class="icon-<%= items[i].icon %>"></i>
         </a>
       <% } %>
-    </div>
+    <% } %>
   </script>
 
   <script type="text/html" id="level-toolbar-template">
@@ -424,7 +426,7 @@
        For a much easier time perusing the source, see the individual files at:
           https://github.com/pcottle/learnGitBranching
   -->
-  <script src="build/bundle.min.7b4cb821.js"></script>
+  <script src="build/bundle.min.54183ae3.js"></script>
 
   <!-- The advantage of github pages: super-easy, simple, slick static hostic.
        The downside? No raw logs to parse for analytics, so I have to include

src/js/app/index.js

@@ -168,7 +168,7 @@ function CommandUI() {
   var Collections = require('../models/collections');
   var CommandViews = require('../views/commandViews');
 
-  //new Views.HelperBar();
+  var mainHelprBar = new Views.MainHelperBar();
 
   this.commandCollection = new Collections.CommandCollection();
   this.commandBuffer = new Collections.CommandBuffer({

src/js/views/builderViews.js

@@ -324,7 +324,7 @@ var MultiViewBuilder = ContainedBase.extend({
   },
 
   addView: function(ev) {
-    var el = ev.srcElement;
+    var el = ev.target;
     var type = $(el).attr('data-type');
 
     var whenDone = Q.defer();
@@ -347,7 +347,7 @@ var MultiViewBuilder = ContainedBase.extend({
   },
 
   testOneView: function(ev) {
-    var el = ev.srcElement;
+    var el = ev.target;
     var index = $(el).attr('data-index');
     var toTest = this.getChildViews()[index];
     var MultiView = require('../views/multiView').MultiView;
@@ -364,7 +364,7 @@ var MultiViewBuilder = ContainedBase.extend({
   },
 
   editOneView: function(ev) {
-    var el = ev.srcElement;
+    var el = ev.target;
     var index = $(el).attr('data-index');
     var type = $(el).attr('data-type');
 
@@ -388,7 +388,7 @@ var MultiViewBuilder = ContainedBase.extend({
   },
 
   deleteOneView: function(ev) {
-    var el = ev.srcElement;
+    var el = ev.target;
     var index = $(el).attr('data-index');
     var toSlice = this.getChildViews();
 

src/js/views/commandViews.js

@@ -74,7 +74,7 @@ var CommandPromptView = Backbone.View.extend({
   },
 
   onKeyDown: function(e) {
-    var el = e.srcElement || e.currentTarget;
+    var el = e.target;
     this.updatePrompt(el);
   },
 

src/js/views/index.js

@@ -572,29 +572,172 @@ var LevelToolbar = BaseView.extend({
 
 var HelperBar = BaseView.extend({
   tagName: 'div',
-  className: 'helperBar',
+  className: 'helperBar transitionAll',
   template: _.template($('#helper-bar-template').html()),
   events: {
-    'click div': 'onClick'
+    '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');
 
-    var items = [{
-      text: '??',
-      id: 'main'
-    }];
-
     this.JSON = {
-      items: items
+      items: this.getItems()
     };
-
     this.render();
+    this.setupChildren();
+
+    if (!options.wait) {
+      this.show();
+    }
+  }
+});
+
+var IntlHelperBar = HelperBar.extend({
+  getItems: function() {
+    return [{
+      text: 'Git Branching',
+      id: 'english'
+    }, {
+      text: 'Git 브랜치 배우기',
+      id: 'korean'
+    }, {
+      text: '学习Git分支',
+      id: 'chinese'
+    }, {
+      text: 'Français(e)',
+      id: 'french'
+    }, {
+      icon: 'signout',
+      id: 'exit'
+    }];
+  },
+
+  onEnglishClick: function() {
+    this.fireCommand('locale en_US; levels');
+    this.hide();
+  },
+
+  onKoreanClick: function() {
+    this.fireCommand('locale ko; levels');
+    this.hide();
+  },
+
+  onFrenchClick: function() {
+    this.fireCommand('locale fr_FR; levels');
+    this.hide();
+  },
+
+  onChineseClick: function() {
+    this.fireCommand('locale zh_CN; levels');
+    this.hide();
+  }
+});
+
+var CommandsHelperBar = HelperBar.extend({
+  getItems: function() {
+    return [{
+      text: 'Levels',
+      id: 'levels'
+    }, {
+      text: 'Reset',
+      id: 'reset'
+    }, {
+      text: 'Undo',
+      id: 'undo'
+    }, {
+      text: 'Help',
+      id: 'help'
+    }, {
+      icon: 'signout',
+      id: 'exit'
+    }];
+  },
+
+  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 [{
+      text: '?',
+      id: 'commands'
+    }, {
+      icon: 'globe',
+      id: 'intl'
+    }];
+  },
+
+  onIntlClick: function() {
+    this.showDeferMe(this.intlHelper);
+  },
+
+  onCommandsClick: function() {
+    this.showDeferMe(this.commandsHelper);
+  },
+
+  setupChildren: function() {
+    this.commandsHelper = new CommandsHelperBar({ wait: true });
+    this.intlHelper = new IntlHelperBar({ wait: true});
   }
 });
 
@@ -665,7 +808,8 @@ exports.LeftRightView = LeftRightView;
 exports.ZoomAlertWindow = ZoomAlertWindow;
 exports.ConfirmCancelTerminal = ConfirmCancelTerminal;
 exports.WindowSizeAlertWindow = WindowSizeAlertWindow;
-exports.HelperBar = HelperBar;
+
+exports.MainHelperBar = MainHelperBar;
 
 exports.CanvasTerminalHolder = CanvasTerminalHolder;
 exports.LevelToolbar = LevelToolbar;

src/js/views/levelDropdownView.js

@@ -294,7 +294,7 @@ var SeriesView = BaseView.extend({
   },
 
   getEventID: function(ev) {
-    var element = ev.srcElement || ev.currentTarget;
+    var element = ev.target;
     return $(element).attr('data-id');
   },
 

src/style/main.css

@@ -228,6 +228,7 @@ div.canvasTerminalHolder > div.terminal-window-holder.slideOut {
   transform: translate3d(-150%,0,0);
 }
 
+
 div.canvasTerminalHolder > div.terminal-window-holder > div.wrapper {
   margin: 0 20px 0px 20px;
   height: 80%;
@@ -523,7 +524,7 @@ li.rebaseEntry,
 }
 
 .helperBar {
-  position: fixed;
+  position: absolute;
   bottom: 0px;
   right: 0px;
   background: #424242;
@@ -533,10 +534,43 @@ li.rebaseEntry,
   border-bottom: 0;
   border-right: 0;
   box-shadow: -1px -1px 5px rgba(0,0,0,0.3);
-  cursor: pointer;
   font-weight: bold;
 }
 
+.helperBar i {
+  cursor: pointer;
+}
+
+.helperBar a {
+  cursor: pointer;
+  font-style: italic;
+}
+
+.helperBar a:after {
+  content: ' \b7';
+  font-style: normal;
+}
+
+.helperBar a:last-child:after {
+  content: '';
+}
+
+div.helperBar {
+  -webkit-transform: translate3d(150%,0,0);
+  -moz-transform: translate3d(150%,0,0);
+  -o-transform: translate3d(150%,0,0);
+  -ms-transform: translate3d(150%,0,0);
+  transform: translate3d(150%,0,0);
+}
+
+div.helperBar.show {
+  -webkit-transform: translate3d(0,0,0);
+  -moz-transform: translate3d(0,0,0);
+  -o-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+  transform: translate3d(0,0,0);
+}
+
 #commandLineBar,
 .terminal-window .inside {
   border-top: 0;

src/template.index.html

@@ -106,13 +106,15 @@
   </script>
 
   <script type="text/html" id="helper-bar-template">
-    <div class="helperBar">
-      <% for(var i = 0; i < items.length; i++) { %>
-        <a data-id="wtf">
-          <%= items[i].text %>
+    <% for(var i = 0; i < items.length; i++) { %>
+      <% if (items[i].text) { %>
+        <a data-id="<%= items[i].id %>"><%= items[i].text %></a>
+      <% } else { %>
+        <a data-id="<%= items[i].id %>">
+          <i data-id="<%= items[i].id %>" class="icon-<%= items[i].icon %>"></i>
         </a>
       <% } %>
-    </div>
+    <% } %>
   </script>
 
   <script type="text/html" id="level-toolbar-template">