MDL-56596 tool_usertours: Update to latest version of tours and popper

The updated release of the popper library addresses some issues where
boundaries were not resepected correctly.

admin/tool/usertours/amd/src/tour.js

@@ -612,7 +612,7 @@ Tour.prototype.processStepListeners = function (stepConfig) {
             args: ['click', $.proxy(function (e) {
                 if ($(e.target).parents('[data-flexitour="container"]').length === 0) {
                     // Ignore clicks when they are in the flexitour.
-                    window.setTimeout($.proxy(this.next, this), 100);
+                    window.setTimeout($.proxy(this.next, this), 500);
                 }
             }, this)]
         });
@@ -754,10 +754,10 @@ Tour.prototype.addStepToPage = function (stepConfig) {
 
         animationTarget.animate({
             scrollTop: this.calculateScrollTop(stepConfig)
-        }).promise().then($.proxy(function () {
+        }).promise().then(function () {
             this.positionStep(stepConfig);
             this.revealStep(stepConfig);
-        }, this));
+        }.bind(this));
     } else if (stepConfig.orphan) {
         stepConfig.isOrphan = true;
 
@@ -776,13 +776,22 @@ Tour.prototype.addStepToPage = function (stepConfig) {
         this.currentStepNode = currentStepNode;
 
         this.currentStepNode.offset(this.calculateStepPositionInPage());
+        this.currentStepNode.css('position', 'fixed');
 
         this.currentStepPopper = new Popper($('body'), this.currentStepNode[0], {
             removeOnDestroy: true,
             placement: stepConfig.placement + '-start',
             arrowElement: '[data-role="arrow"]',
             // Empty the modifiers. We've already placed the step and don't want it moved.
-            modifiers: []
+            modifiers: {
+                hide: {
+                    enabled: false
+                },
+                applyStyle: {
+                    onLoad: null,
+                    enabled: false
+                }
+            }
         });
 
         this.revealStep(stepConfig);
@@ -802,7 +811,7 @@ Tour.prototype.revealStep = function (stepConfig) {
         window.setTimeout($.proxy(function () {
             // After a brief delay, focus again.
             // There seems to be an issue with Jaws where it only reads the dialogue title initially.
-            // This second focus causes it to read the full dialogue.
+            // This second focus helps it to read the full dialogue.
             if (this.currentStepNode) {
                 this.currentStepNode.focus();
             }
@@ -1120,15 +1129,13 @@ Tour.prototype.calculateScrollTop = function (stepConfig) {
 Tour.prototype.calculateStepPositionInPage = function () {
     var viewportHeight = $(window).height();
     var stepHeight = this.currentStepNode.height();
-    var scrollTop = $(window).scrollTop();
 
     var viewportWidth = $(window).width();
     var stepWidth = this.currentStepNode.width();
-    var scrollLeft = $(window).scrollLeft();
 
     return {
-        top: Math.ceil(scrollTop + (viewportHeight - stepHeight) / 2),
-        left: Math.ceil(scrollLeft + (viewportWidth - stepWidth) / 2)
+        top: Math.ceil((viewportHeight - stepHeight) / 2),
+        left: Math.ceil((viewportWidth - stepWidth) / 2)
     };
 };
 
@@ -1166,18 +1173,29 @@ Tour.prototype.positionStep = function (stepConfig) {
     }
 
     var target = this.getStepTarget(stepConfig);
+    var config = {
+        placement: stepConfig.placement + '-start',
+        removeOnDestroy: true,
+        modifiers: {
+            flip: {
+                behaviour: flipBehavior
+            },
+            arrow: {
+                element: '[data-role="arrow"]'
+            }
+        }
+    };
+
+    var boundaryElement = target.closest('section');
+    if (boundaryElement.length) {
+        config.boundariesElement = boundaryElement[0];
+    }
+
     var background = $('[data-flexitour="step-background"]');
     if (background.length) {
         target = background;
     }
-
-    this.currentStepPopper = new Popper(target, content[0], {
-        placement: stepConfig.placement + '-start',
-        removeOnDestroy: true,
-        flipBehavior: flipBehavior,
-        arrowElement: '[data-role="arrow"]',
-        modifiers: ['shift', 'offset', 'preventOverflow', 'keepTogether', this.centerPopper, 'arrow', 'flip', 'applyStyle']
-    });
+    this.currentStepPopper = new Popper(target, content[0], config);
 
     return this;
 };
@@ -1363,25 +1381,14 @@ Tour.prototype.calculatePosition = function (elem) {
     return null;
 };
 
-Tour.prototype.centerPopper = function (data) {
-    if (!this.isModifierRequired(Tour.prototype.centerPopper, this.modifiers.keepTogether)) {
-        console.warn('WARNING: keepTogether modifier is required by centerPopper modifier in order to work, be sure to include it before arrow!');
-        return data;
-    }
-
-    var placement = data.placement.split('-')[0];
-    var reference = data.offsets.reference;
-    var isVertical = ['left', 'right'].indexOf(placement) !== -1;
-
-    var len = isVertical ? 'height' : 'width';
-    var side = isVertical ? 'top' : 'left';
-
-    data.offsets.popper[side] += Math.max(reference[len] / 2 - data.offsets.popper[len] / 2, 0);
-
-    return data;
-};
-
-Tour.prototype.accessibilityShow = function (stepConfig) {
+/**
+ * Perform accessibility changes for step shown.
+ *
+ * This will add aria-hidden="true" to all siblings and parent siblings.
+ *
+ * @method  accessibilityShow
+ */
+Tour.prototype.accessibilityShow = function () {
     var stateHolder = 'data-has-hidden';
     var attrName = 'aria-hidden';
     var hideFunction = function hideFunction(child) {
@@ -1409,6 +1416,13 @@ Tour.prototype.accessibilityShow = function (stepConfig) {
     });
 };
 
+/**
+ * Perform accessibility changes for step hidden.
+ *
+ * This will remove any newly added aria-hidden="true".
+ *
+ * @method  accessibilityHide
+ */
 Tour.prototype.accessibilityHide = function () {
     var stateHolder = 'data-has-hidden';
     var attrName = 'aria-hidden';

admin/tool/usertours/thirdpartylibs.xml

@@ -4,14 +4,14 @@
     <location>amd/src/tour.js</location>
     <name>Flexitour</name>
     <license>GPLv3</license>
-    <version>0.9.7</version>
+    <version>0.9.8</version>
     <licenseversion>3</licenseversion>
   </library>
   <library>
     <location>amd/src/popper.js</location>
     <name>Popper.js</name>
     <license>MIT</license>
-    <version>v0.6.4</version>
+    <version>v1.0.0-alpha.3</version>
     <licenseversion></licenseversion>
   </library>
 </libraries>