Add zoom message.

huwshimi · Jan 30, 2014 · 2225754 · 2225754
1 parent dc0f96b
commit 2225754
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 0 deletions.
diff --git a/app/app.js b/app/app.js
@@ -528,6 +528,10 @@ YUI.add('juju-gui', function(Y) {
         this._renderHelpDropdownView();
       }, this);
 
+      Y.one(Y.config.win).on('resize', function(e) {
+        this._displayZoomMessage();
+      }, this);
+
       // Halt the default navigation on the juju logo to allow us to show
       // the real root view without namespaces
       var navNode = Y.one('#nav-brand-env');
@@ -641,6 +645,34 @@ YUI.add('juju-gui', function(Y) {
       }, this);
     },
 
+    /**
+     * Display a message when the browser is too small to work.
+     *
+     * @method _displayZoomMessage
+     */
+    _displayZoomMessage: function() {
+      if (Y.UA.os === 'macintosh') {
+        var metaKey = 'command';
+      } else {
+        var metaKey = 'ctrl';
+      }
+      // Only display the message once otherwise the message will continually
+      // fire while the browser is being resized or zoomed.
+      if (!this.zoomMessageDisplayed &&
+          Y.one('body').get('winWidth') <= 1024) {
+        this.db.notifications.add(
+            new models.Notification({
+              title: 'Browser too small',
+              message: 'This browser window is too small to display the Juju' +
+                  'GUI properly. Try using "' + metaKey +
+                  '+-" to zoom the window.',
+              level: 'error'
+            })
+        );
+        this.zoomMessageDisplayed = true;
+      }
+    },
+
     /**
     Export the YAML for this environment.
 
@@ -1103,6 +1135,8 @@ YUI.add('juju-gui', function(Y) {
         render: true
       });
 
+      // Display the zoom message on page load.
+      this._displayZoomMessage();
       next();
     },
 

diff --git a/test/test_app.js b/test/test_app.js
@@ -241,6 +241,44 @@ function injectData(app, data) {
       });
     });
 
+    it.only('should display a zoom message on small browsers', function() {
+      constructAppInstance({
+        env: juju.newEnvironment({ conn: new utils.SocketStub() })
+      });
+      //Y.one('body').setStyle('width', '1024');
+      // Set initial browser to 1024px
+      assert.equal(app.db.notifications.item(0).get('title'), 'Browser too small');
+    });
+
+    it('should display a zoom message on small browsers on resize',
+        function() {
+      constructAppInstance({
+        env: juju.newEnvironment({ conn: new utils.SocketStub() })
+      });
+      // Assert message null
+      // Resize browser
+      assert.equal(app.db.notifications.item(0).get('title'), 'Browser too small');
+    });
+
+    it('should not display the zoom message more than once', function() {
+      constructAppInstance({
+        env: juju.newEnvironment({ conn: new utils.SocketStub() })
+      });
+      // Set initial browser to 1024px
+      assert.equal(app.db.notifications.item(0).get('title'), 'Browser too small');
+      // Resize
+      // Message count should be 1
+    });
+
+    it('should show the correct message on a mac', function() {
+      constructAppInstance({
+        env: juju.newEnvironment({ conn: new utils.SocketStub() })
+      });
+      // Set the OS to mac
+      assert.equal(app.db.notifications.item(0).get('message'),
+                   'This browser window is too small to display the Juju' +
+                  'GUI properly. Try using "command+-" to zoom the window.');
+    });
   });
 })();