tried out zoom level, shows 2 for some reason

src/js/app/index.js

@@ -1,6 +1,9 @@
 var _ = require('underscore');
 var Backbone = require('backbone');
 
+var Constants = require('../util/constants');
+var Views = require('../views');
+
 /**
  * Globals
  */
@@ -34,6 +37,18 @@ var init = function(){
     eventBaton.trigger('documentClick', e);
   });
 
+  // zoom level measure, I wish there was a jquery event for this
+  require('../util/zoomLevel').setupZoomPoll(function(level) {
+    eventBaton.trigger('zoomChange', level);
+  }, this);
+
+  eventBaton.stealBaton('zoomChange', function(level) {
+    if (level > Constants.VIEWPORT.maxZoom ||
+        level < Constants.VIEWPORT.minZoom) {
+      var view = new Views.ZoomAlertWindow();
+    }
+  });
+
   // the default action on window focus and document click is to just focus the text area
   eventBaton.stealBaton('windowFocus', focusTextArea);
   eventBaton.stealBaton('documentClick', focusTextArea);
@@ -64,7 +79,6 @@ var init = function(){
 $(document).ready(init);
 
 function UI() {
-  this.active = true;
   var Collections = require('../models/collections');
   var CommandViews = require('../views/commandViews');
 

src/js/util/constants.js

@@ -10,6 +10,11 @@ var GLOBAL = {
   isAnimating: false
 };
 
+var VIEWPORT = {
+  minZoom: 1,
+  maxZoom: 1.15
+};
+
 var GRAPHICS = {
   arrowHeadSize: 8,
 
@@ -43,4 +48,5 @@ var GRAPHICS = {
 exports.GLOBAL = GLOBAL;
 exports.TIME = TIME;
 exports.GRAPHICS = GRAPHICS;
+exports.VIEWPORT = VIEWPORT;
 

src/js/util/index.js

@@ -5,7 +5,6 @@ exports.isBrowser = function() {
   return inBrowser;
 };
 
-
 exports.splitTextCommand = function(value, func, context) {
   func = _.bind(func, context);
   _.each(value.split(';'), function(command, index) {

src/js/util/zoomLevel.js

@@ -0,0 +1,16 @@
+var _ = require('underscore');
+
+var setupZoomPoll = function(callback, context) {
+  var currentZoom = 0;
+
+  setInterval(function() {
+    var newZoom = window.outerWidth / window.innerWidth;
+    if (newZoom !== currentZoom) {
+      currentZoom = newZoom;
+      callback.apply(context, [newZoom]);
+    }
+  }, 100);
+};
+
+exports.setupZoomPoll = setupZoomPoll;
+

src/js/views/index.js

@@ -2,7 +2,9 @@ var GitError = require('../util/errors').GitError;
 var _ = require('underscore');
 // horrible hack to get localStorage Backbone plugin
 var Backbone = (!require('../util').isBrowser()) ? require('backbone') : window.Backbone;
+
 var Main = require('../app');
+var Constants = require('../util/constants');
 
 var BaseView = Backbone.View.extend({
   getDestination: function() {
@@ -47,12 +49,21 @@ var PositiveNegativeBase = BaseView.extend({
 });
 
 var ContainedBase = BaseView.extend({
+  getAnimationTime: function() { return 700; },
+
   show: function() {
     this.container.show();
   },
 
   hide: function() {
     this.container.hide();
+  },
+
+  die: function() {
+    this.hide();
+    setTimeout(_.bind(function() {
+      this.tearDown();
+    }, this), this.getAnimationTime() * 1.1);
   }
 });
 
@@ -111,6 +122,8 @@ var ModalView = Backbone.View.extend({
   className: 'modalView box horizontal center transitionOpacityLinear',
   template: _.template($('#modal-view-template').html()),
 
+  getAnimationTime: function() { return 700; },
+
   initialize: function(options) {
     this.render();
     this.stealKeyboard();
@@ -171,7 +184,7 @@ var ModalView = Backbone.View.extend({
     // be one-off though so...
     setTimeout(_.bind(function() {
       this.toggleZ(false);
-    }, this), 700);
+    }, this), this.getAnimationTime());
   },
 
   getInsideElement: function() {
@@ -226,6 +239,10 @@ var ModalAlert = ContainedBase.extend({
       markdown: options.markdown
     };
 
+    if (options.markdowns) {
+      this.JSON.markdown = options.markdowns.join('\n');
+    }
+
     this.container = new ModalTerminal({
       title: 'Alert!'
     });
@@ -243,10 +260,47 @@ var ModalAlert = ContainedBase.extend({
   }
 });
 
+var ZoomAlertWindow = Backbone.View.extend({
+  initialize: function(options) {
+    this.grabBatons();
+    this.modalAlert = new ModalAlert({
+      markdowns: [
+        '## That zoom level is not supported :-/',
+        'Please zoom back to a supported zoom level with Ctrl + and Ctrl -',
+        '',
+        '(and of course, pull requests to fix this are appreciated :D)'
+      ]
+    });
+
+    this.modalAlert.show();
+  },
+
+  grabBatons: function() {
+    Main.getEventBaton().stealBaton('zoomChange', this.zoomChange, this);
+  },
+
+  releaseBatons: function() {
+    Main.getEventBaton().releaseBaton('zoomChange', this.zoomChange, this);
+  },
+
+  zoomChange: function(level) {
+    if (level <= Constants.VIEWPORT.maxZoom &&
+        level >= Constants.VIEWPORT.minZoom) {
+      this.finish();
+    }
+  },
+
+  finish: function() {
+    this.releaseBatons();
+    this.modalAlert.die();
+  }
+});
+
 exports.ModalView = ModalView;
 exports.ModalTerminal = ModalTerminal;
 exports.ModalAlert = ModalAlert;
 exports.ContainedBase = ContainedBase;
 exports.ConfirmCancelView = ConfirmCancelView;
 exports.LeftRightView = LeftRightView;
+exports.ZoomAlertWindow = ZoomAlertWindow;
 

todo.txt

@@ -34,6 +34,7 @@ Big Bugs to fix:
 Done things:
 (I only started this on Dec 17th 2012 to get a better sense of what was done)
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+[x] awesome zoom level polling and sweet event baton stealing :DDDDDDDDDDDDDD
 [x] then refactor keyboard input and UI.listen() to that event system
 [x] make some kind of "single listener" event system... will make keyboard stuff easy
     because then you just steal and release for modals and such