Objective button Resolves #168

src/js/level/index.js

@@ -53,6 +53,7 @@ var Level = Sandbox.extend({
     this.on('toggleGoal', this.toggleGoal);
     this.on('minimizeCanvas', this.minimizeGoal);
     this.on('resizeCanvas', this.resizeGoal);
+    this.on('toggleObjective', this.toggleObjective);
 
     Level.__super__.initialize.apply(this, [options]);
     this.startOffCommand();
@@ -92,8 +93,6 @@ var Level = Sandbox.extend({
       return;
     }
 
-    debugger;
-    console.log(intl.getStartDialog(levelObj));
     var dialog = $.extend({}, intl.getStartDialog(levelObj));
     // grab the last slide only
     dialog.childViews = dialog.childViews.slice(-1);
@@ -268,6 +267,13 @@ var Level = Sandbox.extend({
     });
   },
 
+  toggleObjective: function() {
+    Main.getEventBaton().trigger(
+      'commandSubmitted',
+      'objective'
+    );
+  },
+
   toggleGoal: function () {
     if (this.goalCanvasHolder && this.goalCanvasHolder.inDom) {
       this.hideGoal();

src/js/views/index.js

@@ -567,11 +567,15 @@ var LevelToolbar = BaseView.extend({
     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));

src/style/main.css

@@ -329,6 +329,7 @@ div.toolbar.level-toolbar {
   border-radius: 0;
   height: inherit;
   font-size: 12px;
+  position: relative;
 }
 
 div.toolbar.level-toolbar button {
@@ -359,6 +360,17 @@ div.toolbar div.showGoalWrapper {
   margin-left: 6px;
 }
 
+div.toolbar div.showObjectiveWrapper {
+  float: right;
+  margin-right: 6px;
+}
+
+div.toolbar div.buttonsWrapper {
+  position: absolute;
+  width: 100%;
+  top: 10px;
+}
+
 div.toolbar div.levelNameWrapper {
   text-align: center;
   position: relative;

src/template.index.html

@@ -144,9 +144,6 @@
   <script type="text/html" id="level-toolbar-template">
     <div class="toolbar level-toolbar box vertical center transitionAll hidden">
       <div class="clearfix">
-        <div class="showGoalWrapper">
-          <button id="show-goal" type="button">Show Goal</button>
-        </div>
         <div class="levelNameWrapper">
           <i class="icon-bolt"></i>
           Level
@@ -155,6 +152,14 @@
           </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>