[#52] Add offsetArrowHorizontal and offsetArrowVertical

README.md

@@ -318,6 +318,7 @@ is compiled.  Instead, you should modify the LESS and compile it (see the sectio
 
 #### 18/08/2014
 
+* `v2.6.0`: Add support for arrow offsets
 * `v2.5.6`: Fix issue where plugin would attempt to scroll past the maximum scroll value of the container
 * `v2.5.5`: Fix issue where modal steps would be mis-aligned when walkthrough re-opened
 * `v2.5.4`: Fix issue where plugin would try to scroll when it shouldn't because of the `scrollTo` value being a decimal

dist/jquery.pagewalkthrough.js

@@ -6,7 +6,7 @@
  *               James Warwood <[email protected]>
  *               Craig Roberts <[email protected]>
  * Created On: 27/02/2013
- * Version: 2.5.6
+ * Version: 2.6.0
  * Features & Bugs: https://github.com/warby-/jquery-pagewalkthrough/issues
  ***/
 
@@ -495,16 +495,21 @@
         left = (overlayHoleLeft + (overlayHoleWidth / 2)) -
           ($jpwTooltip.width() / 2) - 5 +
           parseInt(step.popup.offsetHorizontal, 10);
-        arrowLeft = ($jpwTooltip.width() / 2) - arrow;
-        arrowTop = '';
+        arrowLeft = ($jpwTooltip.width() / 2) - arrow +
+            parseInt(step.popup.offsetArrowHorizontal, 10);
+        arrowTop = (step.popup.offsetArrowVertical) ?
+            parseInt(step.popup.offsetArrowVertical, 10) :
+            '';
         break;
       case 'right':
         top = overlayHoleTop - (arrow / 2) +
             parseInt(step.popup.offsetVertical, 10);
         left = overlayHoleLeft + overlayHoleWidth + (arrow / 2) +
             parseInt(step.popup.offsetHorizontal, 10) + 105;
-        arrowTop = arrow;
-        arrowLeft = '';
+        arrowTop = arrow + parseInt(step.popup.offsetArrowVertical, 10);
+        arrowLeft = (step.popup.offsetArrowHorizontal) ?
+            parseInt(step.popup.offsetArrowHorizontal, 10) :
+            '';
         break;
       case 'bottom':
         top = overlayHoleTop + overlayHoleHeight +
@@ -513,20 +518,26 @@
           ($jpwTooltip.width() / 2) - 5 +
           parseInt(step.popup.offsetHorizontal, 10);
 
-        arrowLeft = ($jpwTooltip.width() / 2) - arrow;
-        arrowTop = '';
+        arrowLeft = (($jpwTooltip.width() / 2) - arrow) +
+            parseInt(step.popup.offsetArrowHorizontal, 10);
+        arrowTop = (step.popup.offsetArrowVertical) ?
+            parseInt(step.popup.offsetArrowVertical, 10) :
+            '';
         break;
       case 'left':
         top = overlayHoleTop - (arrow / 2) +
             parseInt(step.popup.offsetVertical, 10);
         left = overlayHoleLeft - $jpwTooltip.width() - (arrow) +
             parseInt(step.popup.offsetHorizontal, 10) - 105;
-        arrowTop = arrow;
-        arrowLeft = '';
+        arrowTop = arrow + parseInt(step.popup.offsetArrowVertical, 10);
+        arrowLeft = (step.popup.offsetArrowVertical) ?
+            parseInt(step.popup.offsetArrowHorizontal, 10) :
+            '';
         break;
     }
 
     $('#jpwTooltip span.' + step.popup.position).css({
+      'top': cleanValue(arrowTop),
       'left': cleanValue(arrowLeft)
     });
 
@@ -902,6 +913,10 @@
           offsetHorizontal: 0,
           // Vertical offset for the walkthrough
           offsetVertical: 0,
+          // Horizontal offset for the arrow
+          offsetArrowHorizontal: 0,
+          // Vertical offset for the arrow
+          offsetArrowVertical: 0,
           // Default width for each popup
           width: '320',
           // Amount in degrees to rotate the content by

pagewalkthrough.jquery.json

@@ -8,7 +8,7 @@
         "highlighting",
         "guide"
     ],
-    "version": "2.5.6",
+    "version": "2.6.0",
     "author": {
         "name": "Erwin Yusrizal",
         "email": "[email protected]"

src/jquery.pagewalkthrough.js

@@ -6,7 +6,7 @@
  *               James Warwood <[email protected]>
  *               Craig Roberts <[email protected]>
  * Created On: 27/02/2013
- * Version: 2.5.6
+ * Version: 2.6.0
  * Features & Bugs: https://github.com/warby-/jquery-pagewalkthrough/issues
  ***/
 
@@ -495,16 +495,21 @@
         left = (overlayHoleLeft + (overlayHoleWidth / 2)) -
           ($jpwTooltip.width() / 2) - 5 +
           parseInt(step.popup.offsetHorizontal, 10);
-        arrowLeft = ($jpwTooltip.width() / 2) - arrow;
-        arrowTop = '';
+        arrowLeft = ($jpwTooltip.width() / 2) - arrow +
+            parseInt(step.popup.offsetArrowHorizontal, 10);
+        arrowTop = (step.popup.offsetArrowVertical) ?
+            parseInt(step.popup.offsetArrowVertical, 10) :
+            '';
         break;
       case 'right':
         top = overlayHoleTop - (arrow / 2) +
             parseInt(step.popup.offsetVertical, 10);
         left = overlayHoleLeft + overlayHoleWidth + (arrow / 2) +
             parseInt(step.popup.offsetHorizontal, 10) + 105;
-        arrowTop = arrow;
-        arrowLeft = '';
+        arrowTop = arrow + parseInt(step.popup.offsetArrowVertical, 10);
+        arrowLeft = (step.popup.offsetArrowHorizontal) ?
+            parseInt(step.popup.offsetArrowHorizontal, 10) :
+            '';
         break;
       case 'bottom':
         top = overlayHoleTop + overlayHoleHeight +
@@ -513,20 +518,26 @@
           ($jpwTooltip.width() / 2) - 5 +
           parseInt(step.popup.offsetHorizontal, 10);
 
-        arrowLeft = ($jpwTooltip.width() / 2) - arrow;
-        arrowTop = '';
+        arrowLeft = (($jpwTooltip.width() / 2) - arrow) +
+            parseInt(step.popup.offsetArrowHorizontal, 10);
+        arrowTop = (step.popup.offsetArrowVertical) ?
+            parseInt(step.popup.offsetArrowVertical, 10) :
+            '';
         break;
       case 'left':
         top = overlayHoleTop - (arrow / 2) +
             parseInt(step.popup.offsetVertical, 10);
         left = overlayHoleLeft - $jpwTooltip.width() - (arrow) +
             parseInt(step.popup.offsetHorizontal, 10) - 105;
-        arrowTop = arrow;
-        arrowLeft = '';
+        arrowTop = arrow + parseInt(step.popup.offsetArrowVertical, 10);
+        arrowLeft = (step.popup.offsetArrowVertical) ?
+            parseInt(step.popup.offsetArrowHorizontal, 10) :
+            '';
         break;
     }
 
     $('#jpwTooltip span.' + step.popup.position).css({
+      'top': cleanValue(arrowTop),
       'left': cleanValue(arrowLeft)
     });
 
@@ -902,6 +913,10 @@
           offsetHorizontal: 0,
           // Vertical offset for the walkthrough
           offsetVertical: 0,
+          // Horizontal offset for the arrow
+          offsetArrowHorizontal: 0,
+          // Vertical offset for the arrow
+          offsetArrowVertical: 0,
           // Default width for each popup
           width: '320',
           // Amount in degrees to rotate the content by