Make viewport a module that caches height and width values

The .height() and .width() functions are actually pretty expensive for
the number of times we call them.  The viewport height and width
don't change often, though, so we can just cache them and recalculate
them on window resize.

(imported from commit 129fb8c058144125e2974f6b7967cd9f1a5c9ead)

humbug/settings.py

@@ -281,6 +281,7 @@ PIPELINE_JS = {
             'js/blueslip.js',
             'js/util.js',
             'js/setup.js',
+            'js/viewport.js',
             'js/rows.js',
             'js/stream_list.js',
             'js/narrow.js',

zephyr/static/js/viewport.js

@@ -0,0 +1,44 @@
+var viewport = (function () {
+var exports = {};
+
+var jwindow;
+var height;
+var width;
+
+exports.scrollTop = function viewport_scrollTop () {
+    return jwindow.scrollTop.apply(jwindow, arguments);
+};
+
+exports.height = function viewport_height() {
+    if (arguments.length !== 0) {
+        height = undefined;
+        return jwindow.height.apply(jwindow, arguments);
+    }
+    if (height === undefined) {
+        height = $(window).height();
+    }
+    return height;
+};
+
+exports.width = function viewport_width() {
+    if (arguments.length !== 0) {
+        width = undefined;
+        return jwindow.width.apply(jwindow, arguments);
+    }
+    if (width === undefined) {
+        width = jwindow.width();
+    }
+    return width;
+};
+
+$(function () {
+    jwindow = $(window);
+    // This handler must be placed before all resize handlers in our application
+    jwindow.resize(function () {
+        height = undefined;
+        width = undefined;
+    });
+});
+
+return exports;
+}());

zephyr/static/js/zephyr.js

@@ -9,8 +9,6 @@ var recent_subjects = {};
 var queued_mark_as_read = [];
 var queued_flag_timer;
 
-var viewport = $(window);
-
 var get_updates_params = {
     pointer: -1
 };