Fix issue where reveal was not respecting offset data vars, with visual testcase

diff --git a/js/foundation.reveal.js b/js/foundation.reveal.js
index 3918e0fa061cb141660bd5e4b012c35d6a7174b9..29bd3571dcb9e2b30c6c9cd3f35ab9cf00f6b0bb 100644 (file)
--- a/js/foundation.reveal.js
+++ b/js/foundation.reveal.js
@@ -109,17 +109,27 @@ class Reveal {
     var outerWidth = $(window).width();
     var height = this.$element.outerHeight();
     var outerHeight = $(window).height();
-    var left = parseInt((outerWidth - width) / 2, 10);
-    var top;
-    if (height > outerHeight) {
-      top = parseInt(Math.min(100, outerHeight / 10), 10);
+    var left, top;
+    if (this.options.hOffset === 'auto') {
+      left = parseInt((outerWidth - width) / 2, 10);
     } else {
-      top = parseInt((outerHeight - height) / 4, 10);
+      left = parseInt(this.options.hOffset, 10);
+    }
+    if (this.options.vOffset === 'auto') {
+      if (height > outerHeight) {
+        top = parseInt(Math.min(100, outerHeight / 10), 10);
+      } else {
+        top = parseInt((outerHeight - height) / 4, 10);
+      }
+    } else {
+      top = parseInt(this.options.vOffset, 10);
     }
     this.$element.css({top: top + 'px'});
-    // only worry about left if we don't have an overlay, otherwise we're perfectly in the middle
-    if(!this.$overlay) {
+    // only worry about left if we don't have an overlay or we havea  horizontal offset,
+    // otherwise we're perfectly in the middle
+    if(!this.$overlay || (this.options.hOffset !== 'auto')) {
       this.$element.css({left: left + 'px'});
+      this.$element.css({margin: '0px'});
     }
 
   }
@@ -497,15 +507,15 @@ Reveal.defaults = {
   /**
    * Distance, in pixels, the modal should push down from the top of the screen.
    * @option
-   * @example 100
+   * @example auto
    */
-  vOffset: 100,
+  vOffset: 'auto',
   /**
    * Distance, in pixels, the modal should push in from the side of the screen.
    * @option
-   * @example 0
+   * @example auto
    */
-  hOffset: 0,
+  hOffset: 'auto',
   /**
    * Allows the modal to be fullscreen, completely blocking out the rest of the view. JS checks for this as well.
    * @option

diff --git a/test/visual/reveal/basic.html b/test/visual/reveal/basic.html
index 05ee6f432160cf2c516618c52a77f84f50ad3dca..0164e36d8d8d32ce6a75b9dab5569b3be1909ac1 100644 (file)
--- a/test/visual/reveal/basic.html
+++ b/test/visual/reveal/basic.html
@@ -41,6 +41,16 @@
           <p><a data-close>Close modal</a></p>
         </div>
       </section>
+
+      <section>
+        <h2>With Offsets</h2>
+        <p>Clicking this link should open a reveal with offset 50, 50 from top/left</p>
+        <p><a data-open="exampleModal4">Open offset modal</a></p>
+        <div class="reveal" id="exampleModal4" data-reveal data-v-offset="50" data-h-offset="50">
+          <p>Am I in the top left?</p>
+          <p><a data-close>Close modal</a></p>
+        </div>
+      </section>
     </div>
 
     <script src="../assets/js/vendor.js"></script>