From 4b71ae21770d69274b0935f888458546abbbce27 Mon Sep 17 00:00:00 2001
From: benm <ben.merigan@deakin.edu.au>
Date: Tue, 20 Mar 2018 10:08:42 +1100
Subject: [PATCH] Tour will no longer overflow left edge of view

---
 src/trip.core.js | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/src/trip.core.js b/src/trip.core.js
index 2f8056f..f127325 100644
--- a/src/trip.core.js
+++ b/src/trip.core.js
@@ -992,6 +992,9 @@ Trip.prototype = {
       case 's':
         cssHorizontal += $sel.offset().left + ((selWidth - blockWidth) / 2);
         cssVertical += $sel.offset().top + selHeight + arrowHeight;
+        if (cssHorizontal < 0) {
+		    cssHorizontal = 0;
+        }
         break;
       case 'w':
         cssHorizontal += $sel.offset().left - (arrowWidth + blockWidth);
@@ -1002,10 +1005,30 @@ Trip.prototype = {
       default:
         cssHorizontal += $sel.offset().left + ((selWidth - blockWidth) / 2);
         cssVertical += $sel.offset().top - arrowHeight - blockHeight;
+        if (cssHorizontal < 0) {
+		    cssHorizontal = 0;
+        }
         break;
     }
 
     if (horizontalOrVertical === 'horizontal') {
+        // When the sel element is close to the page edge and the tripBlock has a modified (not centered) horizontal
+        // position we also modify the horizontal position of the arrow.
+        // Because the arrow is a pseudo element we cannot select it directly with jQuery
+        // so we create a style tag which we can then manipulate.
+        if (cssHorizontal <= 0) {
+            // add a style tag if it doesn't already exist in the DOM tree
+            if (typeof $('#arrowstyle').get(0) === 'undefined') {
+                $('head').append('<style id="arrowstyle"></style>');
+            }
+            // set the arrow to an appropriate horizontal location
+            $('#arrowstyle').text('.trip-block.n::before,.trip-block.s::before{left:' + ($sel.offset().left + (selWidth / 2) - arrowWidth) + 'px !important;}');
+        }
+        else {
+            // use default arrow horizontal location
+            $('#arrowstyle').remove();
+        }
+		
       switch (o.position) {
         case 'screen-center':
           $tripBlock.css({