vendor/assets/js/foundation.reveal.js.es6 in foundation-rails-6.3.1.0 vs vendor/assets/js/foundation.reveal.js.es6 in foundation-rails-6.4.1.0
- old
+ new
@@ -1,47 +1,54 @@
'use strict';
-!function($) {
+import $ from 'jquery';
+import { Keyboard } from './foundation.util.keyboard';
+import { MediaQuery } from './foundation.util.mediaQuery';
+import { Motion } from './foundation.util.motion';
+import { Plugin } from './foundation.plugin';
+import { Triggers } from './foundation.util.triggers';
/**
* Reveal module.
* @module foundation.reveal
* @requires foundation.util.keyboard
- * @requires foundation.util.box
* @requires foundation.util.triggers
* @requires foundation.util.mediaQuery
* @requires foundation.util.motion if using animations
*/
-class Reveal {
+class Reveal extends Plugin {
/**
* Creates a new instance of Reveal.
* @class
+ * @name Reveal
* @param {jQuery} element - jQuery object to use for the modal.
* @param {Object} options - optional parameters.
*/
- constructor(element, options) {
+ _setup(element, options) {
this.$element = element;
this.options = $.extend({}, Reveal.defaults, this.$element.data(), options);
+ this.className = 'Reveal'; // ie9 back compat
this._init();
- Foundation.registerPlugin(this, 'Reveal');
- Foundation.Keyboard.register('Reveal', {
- 'ENTER': 'open',
- 'SPACE': 'open',
+ // Triggers init is idempotent, just need to make sure it is initialized
+ Triggers.init($);
+
+ Keyboard.register('Reveal', {
'ESCAPE': 'close',
});
}
/**
* Initializes the modal by adding the overlay and close buttons, (if selected).
* @private
*/
_init() {
+ MediaQuery._init();
this.id = this.$element.attr('id');
this.isActive = false;
- this.cached = {mq: Foundation.MediaQuery.current};
+ this.cached = {mq: MediaQuery.current};
this.isMobile = mobileSniff();
this.$anchor = $(`[data-open="${this.id}"]`).length ? $(`[data-open="${this.id}"]`) : $(`[data-toggle="${this.id}"]`);
this.$anchor.attr({
'aria-controls': this.id,
@@ -79,12 +86,18 @@
/**
* Creates an overlay div to display behind the modal.
* @private
*/
_makeOverlay() {
+ var additionalOverlayClasses = '';
+
+ if (this.options.additionalOverlayClasses) {
+ additionalOverlayClasses = ' ' + this.options.additionalOverlayClasses;
+ }
+
return $('<div></div>')
- .addClass('reveal-overlay')
+ .addClass('reveal-overlay' + additionalOverlayClasses)
.appendTo(this.options.appendTo);
}
/**
* Updates position of modal
@@ -140,20 +153,10 @@
'resizeme.zf.trigger': function() {
_this._updatePosition();
}
});
- if (this.$anchor.length) {
- this.$anchor.on('keydown.zf.reveal', function(e) {
- if (e.which === 13 || e.which === 32) {
- e.stopPropagation();
- e.preventDefault();
- _this.open();
- }
- });
- }
-
if (this.options.closeOnClick && this.options.overlay) {
this.$overlay.off('.zf.reveal').on('click.zf.reveal', function(e) {
if (e.target === _this.$element[0] ||
$.contains(_this.$element[0], e.target) ||
!$.contains(document, e.target)) {
@@ -182,15 +185,20 @@
* @function
* @fires Reveal#closeme
* @fires Reveal#open
*/
open() {
+ // either update or replace browser history
if (this.options.deepLink) {
var hash = `#${this.id}`;
if (window.history.pushState) {
- window.history.pushState(null, null, hash);
+ if (this.options.updateHistory) {
+ window.history.pushState({}, '', hash);
+ } else {
+ window.history.replaceState({}, '', hash);
+ }
} else {
window.location.hash = hash;
}
}
@@ -251,18 +259,18 @@
'aria-hidden': false,
'tabindex': -1
})
.focus();
addRevealOpenClasses();
- Foundation.Keyboard.trapFocus(_this.$element);
+ Keyboard.trapFocus(_this.$element);
}
if (this.options.overlay) {
- Foundation.Motion.animateIn(this.$overlay, 'fade-in');
+ Motion.animateIn(this.$overlay, 'fade-in');
}
- Foundation.Motion.animateIn(this.$element, this.options.animationIn, () => {
+ Motion.animateIn(this.$element, this.options.animationIn, () => {
if(this.$element) { // protect against object having been removed
- this.focusableElements = Foundation.Keyboard.findFocusable(this.$element);
+ this.focusableElements = Keyboard.findFocusable(this.$element);
afterAnimation();
}
});
}
// jQuery method of reveal
@@ -278,33 +286,31 @@
.attr({
'aria-hidden': false,
'tabindex': -1
})
.focus();
- Foundation.Keyboard.trapFocus(this.$element);
+ Keyboard.trapFocus(this.$element);
+ addRevealOpenClasses();
+
+ this._extraHandlers();
+
/**
* Fires when the modal has successfully opened.
* @event Reveal#open
*/
this.$element.trigger('open.zf.reveal');
-
- addRevealOpenClasses();
-
- setTimeout(() => {
- this._extraHandlers();
- }, 0);
}
/**
* Adds extra event handlers for the body and window if necessary.
* @private
*/
_extraHandlers() {
var _this = this;
if(!this.$element) { return; } // If we're in the middle of cleanup, don't freak out
- this.focusableElements = Foundation.Keyboard.findFocusable(this.$element);
+ this.focusableElements = Keyboard.findFocusable(this.$element);
if (!this.options.overlay && this.options.closeOnClick && !this.options.fullScreen) {
$('body').on('click.zf.reveal', function(e) {
if (e.target === _this.$element[0] ||
$.contains(_this.$element[0], e.target) ||
@@ -313,48 +319,19 @@
});
}
if (this.options.closeOnEsc) {
$(window).on('keydown.zf.reveal', function(e) {
- Foundation.Keyboard.handleKey(e, 'Reveal', {
+ Keyboard.handleKey(e, 'Reveal', {
close: function() {
if (_this.options.closeOnEsc) {
_this.close();
- _this.$anchor.focus();
}
}
});
});
}
-
- // lock focus within modal while tabbing
- this.$element.on('keydown.zf.reveal', function(e) {
- var $target = $(this);
- // handle keyboard event with keyboard util
- Foundation.Keyboard.handleKey(e, 'Reveal', {
- 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();
- }, 1);
- } else if ($target.is(_this.focusableElements)) { // dont't trigger if acual element has focus (i.e. inputs, links, ...)
- _this.open();
- }
- },
- close: function() {
- if (_this.options.closeOnEsc) {
- _this.close();
- _this.$anchor.focus();
- }
- },
- handled: function(preventDefault) {
- if (preventDefault) {
- e.preventDefault();
- }
- }
- });
- });
}
/**
* Closes the modal.
* @function
@@ -367,21 +344,17 @@
var _this = this;
// Motion UI method of hiding
if (this.options.animationOut) {
if (this.options.overlay) {
- Foundation.Motion.animateOut(this.$overlay, 'fade-out', finishUp);
+ Motion.animateOut(this.$overlay, 'fade-out');
}
- else {
- finishUp();
- }
- Foundation.Motion.animateOut(this.$element, this.options.animationOut);
+ Motion.animateOut(this.$element, this.options.animationOut, finishUp);
}
// jQuery method of hiding
else {
-
this.$element.hide(this.options.hideDelay);
if (this.options.overlay) {
this.$overlay.hide(0, finishUp);
}
@@ -416,11 +389,11 @@
$('body').removeClass('is-reveal-open');
}
}
- Foundation.Keyboard.releaseFocus(_this.$element);
+ Keyboard.releaseFocus(_this.$element);
_this.$element.attr('aria-hidden', true);
/**
* Fires when the modal is done closing.
@@ -443,10 +416,12 @@
window.history.replaceState('', document.title, window.location.href.replace(`#${this.id}`, ''));
} else {
window.location.hash = '';
}
}
+
+ this.$anchor.focus();
}
/**
* Toggles the open/closed state of a modal.
* @function
@@ -461,20 +436,18 @@
/**
* Destroys an instance of a modal.
* @function
*/
- destroy() {
+ _destroy() {
if (this.options.overlay) {
this.$element.appendTo($(this.options.appendTo)); // 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}`);
-
- Foundation.unregisterPlugin(this);
};
}
Reveal.defaults = {
/**
@@ -573,23 +546,32 @@
* @option
* @type {boolean}
* @default false
*/
deepLink: false,
+ /**
+ * Update the browser history with the open modal
+ * @option
+ * @default false
+ */
+ updateHistory: false,
/**
* Allows the modal to append to custom div.
* @option
* @type {string}
* @default "body"
*/
- appendTo: "body"
-
+ appendTo: "body",
+ /**
+ * Allows adding additional class names to the reveal overlay.
+ * @option
+ * @type {string}
+ * @default ''
+ */
+ additionalOverlayClasses: ''
};
-// Window exports
-Foundation.plugin(Reveal, 'Reveal');
-
function iPhoneSniff() {
return /iP(ad|hone|od).*OS/.test(window.navigator.userAgent);
}
function androidSniff() {
@@ -598,6 +580,6 @@
function mobileSniff() {
return iPhoneSniff() || androidSniff();
}
-}(jQuery);
+export {Reveal};