MDL-60077 User tours: pop-up triangle look bad next to the corners
authorHuong Nguyen <huongnv13@gmail.com>
Mon, 29 Jan 2018 02:54:32 +0000 (09:54 +0700)
committerHuong Nguyen <huongnv13@gmail.com>
Mon, 29 Jan 2018 03:31:31 +0000 (10:31 +0700)
admin/tool/usertours/amd/build/tour.min.js
admin/tool/usertours/amd/src/tour.js
admin/tool/usertours/thirdpartylibs.xml

index 78eb5cf..8dcdf69 100644 (file)
Binary files a/admin/tool/usertours/amd/build/tour.min.js and b/admin/tool/usertours/amd/build/tour.min.js differ
index f77f4d9..7e263ec 100644 (file)
@@ -619,43 +619,44 @@ Tour.prototype.addEventHandler = function (eventName, handler) {
  */
 Tour.prototype.processStepListeners = function (stepConfig) {
     this.listeners.push(
-        // Next/Previous buttons.
-        {
-            node: this.currentStepNode,
-            args: ['click', '[data-role="next"]', $.proxy(this.next, this)]
-        }, {
-            node: this.currentStepNode,
-            args: ['click', '[data-role="previous"]', $.proxy(this.previous, this)]
-        },
-
-        // Close and end tour buttons.
-        {
-            node: this.currentStepNode,
-            args: ['click', '[data-role="end"]', $.proxy(this.endTour, this)]
-        },
-
-        // Click backdrop and hide tour.
-        {
-            node: $('[data-flexitour="backdrop"]'),
-            args: ['click', $.proxy(this.hide, this)]
-        },
-
-        // Click out and hide tour without backdrop.
-        {
-            node: $('body'),
-            args: ['click', $.proxy(function (e) {
-                // Handle click in or click out tour content,
-                // if click out, hide tour.
-                if (!this.currentStepNode.is(e.target) && $(e.target).closest('[data-role="flexitour-step"]').length === 0) {
-                    this.hide();
-                }}, this)]
-        },
+    // Next/Previous buttons.
+    {
+        node: this.currentStepNode,
+        args: ['click', '[data-role="next"]', $.proxy(this.next, this)]
+    }, {
+        node: this.currentStepNode,
+        args: ['click', '[data-role="previous"]', $.proxy(this.previous, this)]
+    },
+
+    // Close and end tour buttons.
+    {
+        node: this.currentStepNode,
+        args: ['click', '[data-role="end"]', $.proxy(this.endTour, this)]
+    },
+
+    // Click backdrop and hide tour.
+    {
+        node: $('[data-flexitour="backdrop"]'),
+        args: ['click', $.proxy(this.hide, this)]
+    },
+
+    // Click out and hide tour without backdrop.
+    {
+        node: $('body'),
+        args: ['click', $.proxy(function (e) {
+            // Handle click in or click out tour content,
+            // if click out, hide tour.
+            if (!this.currentStepNode.is(e.target) && $(e.target).closest('[data-role="flexitour-step"]').length === 0) {
+                this.hide();
+            }
+        }, this)]
+    },
 
-        // Keypresses.
-        {
-            node: $('body'),
-            args: ['keydown', $.proxy(this.handleKeyDown, this)]
-        });
+    // Keypresses.
+    {
+        node: $('body'),
+        args: ['keydown', $.proxy(this.handleKeyDown, this)]
+    });
 
     if (stepConfig.moveOnClick) {
         var targetNode = this.getStepTarget(stepConfig);
@@ -1260,6 +1261,57 @@ Tour.prototype.positionStep = function (stepConfig) {
             arrow: {
                 element: '[data-role="arrow"]'
             }
+        },
+        onCreate: function onCreate(data) {
+            recalculateArrowPosition(data);
+        },
+        onUpdate: function onUpdate(data) {
+            recalculateArrowPosition(data);
+        }
+    };
+
+    var recalculateArrowPosition = function recalculateArrowPosition(data) {
+        var placement = data.placement.split('-')[0];
+        var isVertical = ['left', 'right'].indexOf(placement) !== -1;
+        var arrowElement = data.instance.popper.querySelector('[data-role="arrow"]');
+        if (isVertical) {
+            var arrowHeight = parseFloat(window.getComputedStyle(arrowElement).height);
+            var arrowOffset = parseFloat(window.getComputedStyle(arrowElement).top);
+            var popperHeight = parseFloat(window.getComputedStyle(data.instance.popper).height);
+            var popperOffset = parseFloat(window.getComputedStyle(data.instance.popper).top);
+            var popperBorderWidth = parseFloat($('.modal-content').css('borderTopWidth'));
+            var popperBorderRadiusWidth = parseFloat($('.modal-content').css('borderTopLeftRadius'));
+            var arrowPos = arrowOffset + arrowHeight / 2;
+            var maxPos = popperHeight + popperOffset - popperBorderWidth - popperBorderRadiusWidth;
+            var minPos = popperOffset + popperBorderWidth + popperBorderRadiusWidth;
+            if (arrowPos >= maxPos || arrowPos <= minPos) {
+                var newArrowPos = 0;
+                if (arrowPos > popperHeight / 2) {
+                    newArrowPos = maxPos - arrowHeight;
+                } else {
+                    newArrowPos = minPos + arrowHeight;
+                }
+                $(arrowElement).css('top', newArrowPos);
+            }
+        } else {
+            var arrowWidth = parseFloat(window.getComputedStyle(arrowElement).width);
+            var _arrowOffset = parseFloat(window.getComputedStyle(arrowElement).left);
+            var popperWidth = parseFloat(window.getComputedStyle(data.instance.popper).width);
+            var _popperOffset = parseFloat(window.getComputedStyle(data.instance.popper).left);
+            var _popperBorderWidth = parseFloat($('.modal-content').css('borderTopWidth'));
+            var _popperBorderRadiusWidth = parseFloat($('.modal-content').css('borderTopLeftRadius'));
+            var _arrowPos = _arrowOffset + arrowWidth / 2;
+            var _maxPos = popperWidth + _popperOffset - _popperBorderWidth - _popperBorderRadiusWidth;
+            var _minPos = _popperOffset + _popperBorderWidth + _popperBorderRadiusWidth;
+            if (_arrowPos >= _maxPos || _arrowPos <= _minPos) {
+                var _newArrowPos = 0;
+                if (_arrowPos > popperWidth / 2) {
+                    _newArrowPos = _maxPos - arrowWidth;
+                } else {
+                    _newArrowPos = _minPos + arrowWidth;
+                }
+                $(arrowElement).css('left', _newArrowPos);
+            }
         }
     };
 
index f55d8b1..4047a06 100644 (file)
@@ -4,7 +4,7 @@
     <location>amd/src/tour.js</location>
     <name>Flexitour</name>
     <license>GPLv3</license>
-    <version>0.12.0</version>
+    <version>0.12.1</version>
     <licenseversion>3</licenseversion>
   </library>
   <library>