From 98b50e989e06446bb6fcab56a9e224bab33c3812 Mon Sep 17 00:00:00 2001
From: Andrew Robert Nicols <andrew.nicols@luns.net.uk>
Date: Wed, 21 Nov 2012 09:31:41 +0000
Subject: [PATCH] MDL-35819 Improve performance of help tooltip

Rather than using an event handler for each help link, we add the
'helpicon' class to them and delegate the display function.

In order for this to work, we modify the way that Y.io fetches the help to
use the intended target of the anchor rather than a value provided in the
add call. We also no longer modify this URL and instead add the ajaxurl
parameter to it using the Y.io data parameter.

This change is backwards compatible with people calling it without using
the help icon renderer.
---
 lib/javascript-static.js | 50 +++++++++++++++++++++-------------------
 lib/outputrenderers.php  |  4 +---
 2 files changed, 27 insertions(+), 27 deletions(-)

diff --git a/lib/javascript-static.js b/lib/javascript-static.js
index fa0dfc03e0c..a303aa83163 100644
--- a/lib/javascript-static.js
+++ b/lib/javascript-static.js
@@ -1442,14 +1442,20 @@ M.util.help_popups = {
 M.util.help_icon = {
     Y : null,
     instance : null,
-    add : function(Y, properties) {
-        this.Y = Y;
-        properties.node = Y.one('#'+properties.id);
-        if (properties.node) {
-            properties.node.on('click', this.display, this, properties);
+    initialised : false,
+    setup : function(Y) {
+        if (this.initialised) {
+            // Exit early if we have already completed setup
+            return;
         }
+        this.Y = Y;
+        Y.one('body').delegate('click', this.display, 'span.helplink a', this);
+        this.initialised = true;
     },
-    display : function(event, args) {
+    add : function(Y, properties) {
+        this.setup(Y);
+    },
+    display : function(event) {
         event.preventDefault();
         if (M.util.help_icon.instance === null) {
             var Y = M.util.help_icon.Y;
@@ -1479,7 +1485,7 @@ M.util.help_icon = {
                         //  Hide the menu if the user clicks outside of its content
                         boundingBox.get("ownerDocument").on("mousedown", function (event) {
                             var oTarget = event.target;
-                            var menuButton = Y.one("#"+args.id);
+                            var menuButton = this.helplink;
 
                             if (!oTarget.compareTo(menuButton) &&
                                 !menuButton.contains(oTarget) &&
@@ -1496,28 +1502,24 @@ M.util.help_icon = {
                         this.overlay.hide();
                     },
 
-                    display : function(event, args) {
-                        if (Y.one('html').get('dir') == 'rtl') {
-                            var overlayPosition = [Y.WidgetPositionAlign.TR, Y.WidgetPositionAlign.LC];
+                    display : function(event) {
+                        var overlayPosition;
+                        this.helplink = event.target.ancestor('span.helplink a', true);
+                        if (Y.one('html').get('dir') === 'rtl') {
+                            overlayPosition = [Y.WidgetPositionAlign.TR, Y.WidgetPositionAlign.LC];
                         } else {
-                            var overlayPosition = [Y.WidgetPositionAlign.TL, Y.WidgetPositionAlign.RC];
+                            overlayPosition = [Y.WidgetPositionAlign.TL, Y.WidgetPositionAlign.RC];
                         }
 
-                        this.helplink = args.node;
-
                         this.overlay.set('bodyContent', Y.Node.create('<img src="'+M.cfg.loadingicon+'" class="spinner" />'));
-                        this.overlay.set("align", {node:args.node, points: overlayPosition});
-
-                        var fullurl = args.url;
-                        if (!args.url.match(/https?:\/\//)) {
-                            fullurl = M.cfg.wwwroot + args.url;
-                        }
-
-                        var ajaxurl = fullurl + '&ajax=1';
+                        this.overlay.set("align", {node:this.helplink, points: overlayPosition});
 
                         var cfg = {
                             method: 'get',
                             context : this,
+                            data : {
+                                ajax : 1
+                            },
                             on: {
                                 success: function(id, o, node) {
                                     this.display_callback(o.responseText);
@@ -1532,7 +1534,7 @@ M.util.help_icon = {
                             }
                         };
 
-                        Y.io(ajaxurl, cfg);
+                        Y.io(this.helplink.get('href'), cfg);
                         this.overlay.show();
                     },
 
@@ -1548,10 +1550,10 @@ M.util.help_icon = {
                 };
                 help_content_overlay.init();
                 M.util.help_icon.instance = help_content_overlay;
-                M.util.help_icon.instance.display(event, args);
+                M.util.help_icon.instance.display(event);
             });
         } else {
-            M.util.help_icon.instance.display(event, args);
+            M.util.help_icon.instance.display(event);
         }
     },
     init : function(Y) {
diff --git a/lib/outputrenderers.php b/lib/outputrenderers.php
index 45d9618c84b..4e2d931c3e4 100644
--- a/lib/outputrenderers.php
+++ b/lib/outputrenderers.php
@@ -1944,11 +1944,9 @@ class core_renderer extends renderer_base {
         $title = get_string('helpprefix2', '', trim($title, ". \t"));
 
         $attributes = array('href'=>$url, 'title'=>$title, 'aria-haspopup' => 'true');
-        $id = html_writer::random_id('helpicon');
-        $attributes['id'] = $id;
         $output = html_writer::tag('a', $output, $attributes);
 
-        $this->page->requires->js_init_call('M.util.help_icon.add', array(array('id'=>$id, 'url'=>$url->out(false))));
+        $this->page->requires->js_init_call('M.util.help_icon.setup');
         $this->page->requires->string_for_js('close', 'form');
 
         // and finally span