popovers: Extend the compute_placement() function.

This commit extends the `compute_placement()` function in
`popovers.js` to take into account height/width of popover as well as
positioning preference. If vertical positioning is desired and the
popover fits in either 'top/bottom' positions then we don't check for
`left/right' positions. Earlier the behavior was to prefer
'left/right'positions over 'top/bottom' positions, which resulted in
the emoji picker popping incorrectly to the left.

static/js/emoji_picker.js

@@ -2,6 +2,11 @@ var emoji_picker = (function () {
 
 var exports = {};
 
+// Emoji picker is of fixed width and height. Update these
+// whenever these values are changed in `reactions.css`.
+var APPROX_HEIGHT = 330;
+var APPROX_WIDTH = 255;
+
 // The functionalities for reacting to a message with an emoji
 // and composing a message with an emoji share a single widget,
 // implemented as the emoji_popover.
@@ -193,10 +198,10 @@ exports.render_emoji_popover = function (elt, id) {
         class: "emoji-info-popover",
         categories: get_rendered_emoji_categories(),
     };
+    var placement = popovers.compute_placement(elt, APPROX_HEIGHT, APPROX_WIDTH, true);
     elt.popover({
         // temporary patch for handling popover placement of `viewport_center`
-        placement: popovers.compute_placement(elt) === 'viewport_center' ?
+        placement: placement === 'viewport_center' ? 'left' : placement,
-            'right' : popovers.compute_placement(elt),
         template:  templates.render('emoji_popover', template_args),
         title:     "",
         content:   generate_emoji_picker_content(id),

static/js/hotspots.js

@@ -137,7 +137,12 @@ function place_popover(hotspot) {
     var popover_offset;
     var arrow_placement;
     var orientation = hotspot.location.popover ||
-        popovers.compute_placement($(hotspot.location.element));
+        popovers.compute_placement(
+            $(hotspot.location.element),
+            popover_height,
+            popover_width,
+            false
+        );
 
     switch (orientation) {
         case TOP:

static/js/popovers.js

@@ -620,10 +620,8 @@ exports.set_userlist_placement = function (placement) {
     userlist_placement = placement || "right";
 };
 
-exports.compute_placement = function (elt) {
+exports.compute_placement = function (elt, popover_height, popover_width,
-    var popover_height = 350;
+                                      prefer_vertical_positioning) {
-    var popover_width = 350;
-
     var client_rect = elt.get(0).getBoundingClientRect();
     var distance_from_top = client_rect.top;
     var distance_from_bottom = message_viewport.height() - client_rect.bottom;
@@ -648,6 +646,13 @@ exports.compute_placement = function (elt) {
     if (distance_from_bottom > popover_height && elt_will_fit_horizontally) {
         placement = 'bottom';
     }
+
+    if (prefer_vertical_positioning && placement !== 'viewport_center') {
+        // If vertical positioning is prefered and the popover fits in
+        // either top or bottom position then return.
+        return placement;
+    }
+
     if (distance_from_left > popover_width && elt_will_fit_vertically) {
         placement = 'left';
     }