Fixed help message positioning (Bug #1259394)

Now uses jQuery to compute the position of the help box. Combining
.position() and .offset() means that relatively positioned elements
in the help box's ancestry don't affect its final position.

For very small screens, the help box now resizes to fit the screen.
For larger screens it's capped at 500px (rather than using percentage
widths as before) to avoid the width being dependent on parent
elements.

Change-Id: Ib65b9795ac25789d653fd20cbe2b2cd46d2d8c75
Signed-off-by: Jono Mingard <jonom@catalyst.net.nz>

htdocs/js/mahara.js

@@ -407,30 +407,7 @@ function contextualHelp(formName, helpName, pluginType, pluginName, page, sectio
         insertSiblingNodesAfter(ref.parentNode, contextualHelpContainer);
     }
 
-    var position = getElementPosition(ref);
-    var dimensions = getElementDimensions(contextualHelpContainer);
-
-    // Adjust the position. The element is moved towards the centre of the
-    // screen, based on which quadrant of the screen the help icon is in
-    screenDimensions = getViewportDimensions();
-    if (position.x + dimensions.w < screenDimensions.w) {
-        // Left of the screen - there's enough room for it
-        position.x += 15;
-    }
-    else if (position.x - dimensions.w < 0) {
-        if (dimensions.w >= screenDimensions.w) {
-            // Very small screen, let them scroll
-            position.x = 0;
-        }
-        else {
-            // Otherwise center it
-            position.x = (screenDimensions.w / 2) - (dimensions.w / 2);
-        }
-    }
-    else {
-        position.x -= dimensions.w;
-    }
-    position.y -= 10;
+    var position = contextualHelpPosition(ref, contextualHelpContainer);
 
     // Once it has been positioned, make it visible
     setElementPosition(contextualHelpContainer, position);
@@ -490,16 +467,59 @@ function buildContextualHelpBox(content) {
     getFirstElementByTagAndClassName(null, 'help-dismiss', contextualHelpContainer).focus();
 }
 
+/*
+ * Positions the box so that it's next to the link that was activated
+ */
+function contextualHelpPosition(ref, contextualHelpContainer) {
+    $j(contextualHelpContainer).css('visibility', 'hidden').removeClass('hidden');
+
+    var position = $j(ref).position();
+    var offset = $j(ref).offset();
+    var containerwidth = $j(contextualHelpContainer).outerWidth(true);
+
+    // Adjust the position. The element is moved towards the centre of the
+    // screen, based on which quadrant of the screen the help icon is in
+    var screenwidth = $j(window).width();
+    if (offset.left + containerwidth < screenwidth) {
+        // Left of the screen - there's enough room for it
+        position.left += 15;
+    }
+    else if (offset.left - containerwidth < 0) {
+        var oldoffset = $j(contextualHelpContainer).offset();
+        var oldposition = $j(contextualHelpContainer).position();
+
+        if (containerwidth >= screenwidth) {
+            // Very small screen, resize the help box to fit
+            var margin = containerwidth - $j(contextualHelpContainer).width();
+            $j(contextualHelpContainer).css('width', screenwidth - margin);
+            position.left = oldposition.left - oldoffset.left;
+        }
+        else {
+            // Otherwise center it
+            position.left = (screenwidth / 2) - (containerwidth / 2) - oldoffset.left + oldposition.left;
+        }
+    }
+    else {
+        position.left -= containerwidth;
+    }
+    position.top -= 10;
+
+    $j(contextualHelpContainer).css('visibility', 'visible');
+
+    return {x: position.left, y: position.top};
+}
+
 /*
  * Ensures that the contextual help box given is fully visible on screen. This
  * will adjust the position of the help vertically if the help has opened right
  * next to the bottom or top of the viewport
  */
 function ensureHelpIsOnScreen(container, position) {
-    var dimensions = getElementDimensions(container);
-    if (position.y + dimensions.h > screenDimensions.h + getFirstElementByTagAndClassName('html').scrollTop) {
-        position.y -= dimensions.h - 18;
-        setElementPosition(container, position);
+    var screenheight = $j(window).height();
+    var containerheight = $j(container).height();
+    if (position.y + containerheight > screenheight + $j('html').scrollTop()) {
+        position.y -= containerheight - 18;
+        $j(container).css('top', position.y);
     }
 }
 

htdocs/theme/raw/static/style/style.css

@@ -249,7 +249,7 @@ form.oneline.inline div,
 .contextualHelp {
     padding: 10px;
     margin: 0;
-    width: 30%;
+    width: 500px;
     max-height: 400px;
     overflow: auto;
     background-color: #F9F9F9;