add zh-tw

src/js/views/index.js

@@ -558,6 +558,7 @@ var LevelToolbar = BaseView.extend({
 
   initialize: function(options) {
     options = options || {};
+    this.parent = options.parent;
     this.JSON = {
       name: options.name || 'Some level! (unknown name)'
     };
@@ -565,6 +566,13 @@ var LevelToolbar = BaseView.extend({
     this.beforeDestination = $($('#commandLineHistory div.toolbar')[0]);
     this.render();
 
+    this.$goalButton = this.$el.find('#show-goal');
+
+    var parent = this.parent;
+    this.$goalButton.on('click', function () {
+      parent.trigger('toggleGoal');
+    });
+
     if (!options.wait) {
       process.nextTick(_.bind(this.show, this));
     }
@@ -596,6 +604,10 @@ var LevelToolbar = BaseView.extend({
 });
 
 var HelperBar = BaseView.extend({
+  getClassName: function() {
+    return 'BaseHelperBar';
+  },
+
   tagName: 'div',
   className: 'helperBar transitionAll',
   template: _.template($('#helper-bar-template').html()),
@@ -655,6 +667,7 @@ var HelperBar = BaseView.extend({
       items: this.getItems()
     };
     this.render();
+    this.$el.addClass(this.getClassName());
     this.setupChildren();
 
     if (!options.wait) {
@@ -664,6 +677,10 @@ var HelperBar = BaseView.extend({
 });
 
 var IntlHelperBar = HelperBar.extend({
+  getClassName: function() {
+    return 'IntlHelperBar';
+  },
+
   getItems: function() {
     return [{
       text: 'Git Branching',
@@ -683,6 +700,9 @@ var IntlHelperBar = HelperBar.extend({
     }, {
       text: 'français',
       id: 'french'
+    }, {
+      text: 'Deutsch',
+      id: 'german'
     }, {
       icon: 'signout',
       id: 'exit'
@@ -714,7 +734,12 @@ var IntlHelperBar = HelperBar.extend({
     this.hide();
   },
 
-  onSimpchineseClick: function() {
+  onGermanClick: function() {
+    this.fireCommand('locale de_DE; levels');
+    this.hide();
+  },
+
+  onChineseClick: function() {
     this.fireCommand('locale zh_CN; levels');
     this.hide();
   },
@@ -726,10 +751,17 @@ var IntlHelperBar = HelperBar.extend({
 });
 
 var CommandsHelperBar = HelperBar.extend({
+  getClassName: function() {
+    return 'CommandsHelperBar';
+  },
+
   getItems: function() {
     return [{
       text: 'Levels',
       id: 'levels'
+    }, {
+      text: 'Solution',
+      id: 'solution'
     }, {
       text: 'Reset',
       id: 'reset'
@@ -753,6 +785,10 @@ var CommandsHelperBar = HelperBar.extend({
     HelperBar.prototype.fireCommand.apply(this, arguments);
   },
 
+  onSolutionClick: function() {
+    this.fireCommand('show solution');
+  },
+
   onObjectiveClick: function() {
     this.fireCommand('objective');
   },
@@ -820,6 +856,8 @@ var CanvasTerminalHolder = BaseView.extend({
 
   initialize: function(options) {
     options = options || {};
+    this.parent = options.parent;
+    this.minHeight = options.minHeight || 200;
     this.destination = $('body');
     this.JSON = {
       title: options.title || intl.str('goal-to-reach'),
@@ -829,6 +867,19 @@ var CanvasTerminalHolder = BaseView.extend({
     this.render();
     this.inDom = true;
 
+    this.$terminal = this.$el.find('.terminal-window-holder').first();
+    this.$terminal.height(0.8 * $(window).height());
+    this.$terminal.draggable({
+      cursor: 'move',
+      handle: '.toolbar',
+      containment: '#interfaceWrapper',
+      scroll: false
+    });
+
+    // If the entire window gets resized such that the terminal is outside the view, then
+    // move it back into the view, and expand/shrink it vertically as necessary.
+    $(window).on('resize', _.debounce(_.bind(this.recalcLayout, this), 300));
+
     if (options.additionalClass) {
       this.$el.addClass(options.additionalClass);
     }
@@ -841,7 +892,7 @@ var CanvasTerminalHolder = BaseView.extend({
   },
 
   die: function() {
-    this.slideOut();
+    this.minimize();
     this.inDom = false;
 
     setTimeout(_.bind(function() {
@@ -849,16 +900,79 @@ var CanvasTerminalHolder = BaseView.extend({
     }, this), this.getAnimationTime());
   },
 
-  slideOut: function() {
-    this.slideToggle(true);
+  minimize: function() {
+    this.parent.trigger('minimizeCanvas', {
+      left: this.$terminal.css('left'),
+      top: this.$terminal.css('top')
+    }, {
+      width: this.$terminal.css('width'),
+      height: this.$terminal.css('height')
+    });
+
+    this.$terminal.animate({
+      height: '0px',
+      opacity: 0
+    }, this.getAnimationTime());
   },
 
-  slideIn: function() {
-    this.slideToggle(false);
+  restore: function (pos, size) {
+    var self = this;
+    pos = pos || { top: this.$terminal.css('top'), left: this.$terminal.css('left') };
+    size = size || { width: this.$terminal.css('width'), height: this.$terminal.css('height') };
+
+    this.$terminal.css({
+      top: pos.top,
+      left: pos.left,
+      width: size.width,
+      height: '0px',
+      opacity: '0'
+    });
+
+    this.$terminal.animate({
+      height: size.height,
+      opacity: 1
+    }, this.getAnimationTime(), function() {
+        self.recalcLayout();
+    });
   },
 
-  slideToggle: function(value) {
-    this.$('div.terminal-window-holder').toggleClass('slideOut', value);
+  recalcLayout: function () {
+    // Resize/reposition self based on the size of the browser window.
+
+    var parent = this.parent,
+        leftOffset = 0,
+        topOffset = 0,
+        heightOffset = 0,
+        width = this.$terminal.outerWidth(),
+        height = this.$terminal.outerHeight(),
+        left = this.$terminal.offset().left,
+        top = this.$terminal.offset().top,
+        right = ($(window).width() - (left + width)),
+        bottom = ($(window).height() - (top + height)),
+        minHeight = 0.75 * $(window).height(),
+        maxHeight = 0.95 * $(window).height();
+
+    // Calculate offsets
+    if (top < 0) { topOffset = -top; }
+    if (left < 0) { leftOffset = -left; }
+    if (right < 0) { leftOffset = right; }
+    if (bottom < 0) { topOffset = bottom; }
+    if (height < minHeight) { heightOffset = minHeight - height; }
+    if (height > maxHeight) { heightOffset = maxHeight - height; }
+
+    // Establish limits
+    left = Math.max(left + leftOffset, 0);
+    top = Math.max(top + topOffset, 0);
+    height = Math.max(height + heightOffset, minHeight);
+
+    // Set the new position/size
+    this.$terminal.animate({
+      left: left + 'px',
+      top: top + 'px',
+      height: height + 'px'
+    }, this.getAnimationTime(), function () {
+        parent.trigger('resizeCanvas');
+    });
   },
 
   getCanvasLocation: function() {