foundation.reveal.js.es6 in foundation-rails-6.2.1.0

- old
+ new

@@ -107,21 +107,31 @@
   _updatePosition() {
     var width = this.$element.outerWidth();
     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'});
     }
 
   }
 
   /**
@@ -222,11 +232,11 @@
     // Motion UI method of reveal
     if (this.options.animationIn) {
       if (this.options.overlay) {
         Foundation.Motion.animateIn(this.$overlay, 'fade-in');
       }
-      Foundation.Motion.animateIn(this.$element, this.options.animationIn, function() {
+      Foundation.Motion.animateIn(this.$element, this.options.animationIn, () => {
         this.focusableElements = Foundation.Keyboard.findFocusable(this.$element);
       });
     }
     // jQuery method of reveal
     else {
@@ -290,13 +300,10 @@
               _this.close();
               _this.$anchor.focus();
             }
           }
         });
-        if (_this.focusableElements.length === 0) { // no focusable elements inside the modal at all, prevent tabbing in general
-          e.preventDefault();
-        }
       });
     }
 
     // lock focus within modal while tabbing
     this.$element.on('keydown.zf.reveal', function(e) {
@@ -306,16 +313,22 @@
         tab_forward: function() {
           if (_this.$element.find(':focus').is(_this.focusableElements.eq(-1))) { // left modal downwards, setting focus to first element
             _this.focusableElements.eq(0).focus();
             e.preventDefault();
           }
+          if (_this.focusableElements.length === 0) { // no focusable elements inside the modal at all, prevent tabbing in general
+            e.preventDefault();
+          }
         },
         tab_backward: function() {
           if (_this.$element.find(':focus').is(_this.focusableElements.eq(0)) || _this.$element.is(':focus')) { // left modal upwards, setting focus to last element
             _this.focusableElements.eq(-1).focus();
             e.preventDefault();
           }
+          if (_this.focusableElements.length === 0) { // no focusable elements inside the modal at all, prevent tabbing in general
+            e.preventDefault();
+          }
         },
         open: function() {
           if (_this.$element.find(':focus').is(_this.$element.find('[data-close]'))) {
             setTimeout(function() { // set focus back to anchor if close button has been activated
               _this.$anchor.focus();
@@ -435,10 +448,11 @@
    * Destroys an instance of a modal.
    * @function
    */
   destroy() {
     if (this.options.overlay) {
+      this.$element.appendTo($('body')); // move $element outside of $overlay to prevent error unregisterPlugin()
       this.$overlay.hide().off().remove();
     }
     this.$element.hide().off();
     this.$anchor.off('.zf');
     $(window).off(`.zf.reveal:${this.id}`);
@@ -491,18 +505,18 @@
    */
   multipleOpened: false,
   /**
    * 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
    * @example false
    */