Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

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.
  • Loading branch information...
commit 98b50e989e06446bb6fcab56a9e224bab33c3812 1 parent 2d7c5ee
Andrew Nicols authored November 21, 2012
50  lib/javascript-static.js
@@ -1442,14 +1442,20 @@ M.util.help_popups = {
1442 1442
 M.util.help_icon = {
1443 1443
     Y : null,
1444 1444
     instance : null,
1445  
-    add : function(Y, properties) {
1446  
-        this.Y = Y;
1447  
-        properties.node = Y.one('#'+properties.id);
1448  
-        if (properties.node) {
1449  
-            properties.node.on('click', this.display, this, properties);
  1445
+    initialised : false,
  1446
+    setup : function(Y) {
  1447
+        if (this.initialised) {
  1448
+            // Exit early if we have already completed setup
  1449
+            return;
1450 1450
         }
  1451
+        this.Y = Y;
  1452
+        Y.one('body').delegate('click', this.display, 'span.helplink a', this);
  1453
+        this.initialised = true;
1451 1454
     },
1452  
-    display : function(event, args) {
  1455
+    add : function(Y, properties) {
  1456
+        this.setup(Y);
  1457
+    },
  1458
+    display : function(event) {
1453 1459
         event.preventDefault();
1454 1460
         if (M.util.help_icon.instance === null) {
1455 1461
             var Y = M.util.help_icon.Y;
@@ -1479,7 +1485,7 @@ M.util.help_icon = {
1479 1485
                         //  Hide the menu if the user clicks outside of its content
1480 1486
                         boundingBox.get("ownerDocument").on("mousedown", function (event) {
1481 1487
                             var oTarget = event.target;
1482  
-                            var menuButton = Y.one("#"+args.id);
  1488
+                            var menuButton = this.helplink;
1483 1489
 
1484 1490
                             if (!oTarget.compareTo(menuButton) &&
1485 1491
                                 !menuButton.contains(oTarget) &&
@@ -1496,28 +1502,24 @@ M.util.help_icon = {
1496 1502
                         this.overlay.hide();
1497 1503
                     },
1498 1504
 
1499  
-                    display : function(event, args) {
1500  
-                        if (Y.one('html').get('dir') == 'rtl') {
1501  
-                            var overlayPosition = [Y.WidgetPositionAlign.TR, Y.WidgetPositionAlign.LC];
  1505
+                    display : function(event) {
  1506
+                        var overlayPosition;
  1507
+                        this.helplink = event.target.ancestor('span.helplink a', true);
  1508
+                        if (Y.one('html').get('dir') === 'rtl') {
  1509
+                            overlayPosition = [Y.WidgetPositionAlign.TR, Y.WidgetPositionAlign.LC];
1502 1510
                         } else {
1503  
-                            var overlayPosition = [Y.WidgetPositionAlign.TL, Y.WidgetPositionAlign.RC];
  1511
+                            overlayPosition = [Y.WidgetPositionAlign.TL, Y.WidgetPositionAlign.RC];
1504 1512
                         }
1505 1513
 
1506  
-                        this.helplink = args.node;
1507  
-
1508 1514
                         this.overlay.set('bodyContent', Y.Node.create('<img src="'+M.cfg.loadingicon+'" class="spinner" />'));
1509  
-                        this.overlay.set("align", {node:args.node, points: overlayPosition});
1510  
-
1511  
-                        var fullurl = args.url;
1512  
-                        if (!args.url.match(/https?:\/\//)) {
1513  
-                            fullurl = M.cfg.wwwroot + args.url;
1514  
-                        }
1515  
-
1516  
-                        var ajaxurl = fullurl + '&ajax=1';
  1515
+                        this.overlay.set("align", {node:this.helplink, points: overlayPosition});
1517 1516
 
1518 1517
                         var cfg = {
1519 1518
                             method: 'get',
1520 1519
                             context : this,
  1520
+                            data : {
  1521
+                                ajax : 1
  1522
+                            },
1521 1523
                             on: {
1522 1524
                                 success: function(id, o, node) {
1523 1525
                                     this.display_callback(o.responseText);
@@ -1532,7 +1534,7 @@ M.util.help_icon = {
1532 1534
                             }
1533 1535
                         };
1534 1536
 
1535  
-                        Y.io(ajaxurl, cfg);
  1537
+                        Y.io(this.helplink.get('href'), cfg);
1536 1538
                         this.overlay.show();
1537 1539
                     },
1538 1540
 
@@ -1548,10 +1550,10 @@ M.util.help_icon = {
1548 1550
                 };
1549 1551
                 help_content_overlay.init();
1550 1552
                 M.util.help_icon.instance = help_content_overlay;
1551  
-                M.util.help_icon.instance.display(event, args);
  1553
+                M.util.help_icon.instance.display(event);
1552 1554
             });
1553 1555
         } else {
1554  
-            M.util.help_icon.instance.display(event, args);
  1556
+            M.util.help_icon.instance.display(event);
1555 1557
         }
1556 1558
     },
1557 1559
     init : function(Y) {
4  lib/outputrenderers.php
@@ -1944,11 +1944,9 @@ protected function render_help_icon(help_icon $helpicon) {
1944 1944
         $title = get_string('helpprefix2', '', trim($title, ". \t"));
1945 1945
 
1946 1946
         $attributes = array('href'=>$url, 'title'=>$title, 'aria-haspopup' => 'true');
1947  
-        $id = html_writer::random_id('helpicon');
1948  
-        $attributes['id'] = $id;
1949 1947
         $output = html_writer::tag('a', $output, $attributes);
1950 1948
 
1951  
-        $this->page->requires->js_init_call('M.util.help_icon.add', array(array('id'=>$id, 'url'=>$url->out(false))));
  1949
+        $this->page->requires->js_init_call('M.util.help_icon.setup');
1952 1950
         $this->page->requires->string_for_js('close', 'form');
1953 1951
 
1954 1952
         // and finally span

0 notes on commit 98b50e9

Please sign in to comment.
Something went wrong with that request. Please try again.