import $ from 'jquery';
// Core Foundation Utilities, utilized in a number of places.
/**
* Returns a boolean for RTL support
*/
function rtl() {
return $('html').attr('dir') === 'rtl';
}
/**
* returns a random base-36 uid with namespacing
* @function
* @param {Number} length - number of random base-36 digits desired. Increase for more random strings.
* @param {String} namespace - name of plugin to be incorporated in uid, optional.
* @default {String} '' - if no plugin name is provided, nothing is appended to the uid.
* @returns {String} - unique id
*/
function GetYoDigits(length, namespace){
length = length || 6;
return Math.round((Math.pow(36, length + 1) - Math.random() * Math.pow(36, length))).toString(36).slice(1) + (namespace ? `-${namespace}` : '');
}
/**
* Escape a string so it can be used as a regexp pattern
* @function
* @see https://stackoverflow.com/a/9310752/4317384
*
* @param {String} str - string to escape.
* @returns {String} - escaped string
*/
function RegExpEscape(str){
return str.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&');
}
function transitionend($elem){
var transitions = {
'transition': 'transitionend',
'WebkitTransition': 'webkitTransitionEnd',
'MozTransition': 'transitionend',
'OTransition': 'otransitionend'
};
var elem = document.createElement('div'),
end;
for (var t in transitions){
if (typeof elem.style[t] !== 'undefined'){
end = transitions[t];
}
}
if(end){
return end;
}else{
end = setTimeout(function(){
$elem.triggerHandler('transitionend', [$elem]);
}, 1);
return 'transitionend';
}
}
/**
* Return an event type to listen for window load.
*
* If `$elem` is passed, an event will be triggered on `$elem`. If window is already loaded, the event will still be triggered.
* If `handler` is passed, attach it to the event on `$elem`.
* Calling `onLoad` without handler allows you to get the event type that will be triggered before attaching the handler by yourself.
* @function
*
* @param {Object} [] $elem - jQuery element on which the event will be triggered if passed.
* @param {Function} [] handler - function to attach to the event.
* @returns {String} - event type that should or will be triggered.
*/
function onLoad($elem, handler) {
const didLoad = document.readyState === 'complete';
const eventType = (didLoad ? '_didLoad' : 'load') + '.zf.util.onLoad';
const cb = () => $elem.triggerHandler(eventType);
if ($elem) {
if (handler) $elem.one(eventType, handler);
if (didLoad)
setTimeout(cb);
else
$(window).one('load', cb);
}
return eventType;
}
/**
* Retuns an handler for the `mouseleave` that ignore disappeared mouses.
*
* If the mouse "disappeared" from the document (like when going on a browser UI element, See https://git.io/zf-11410),
* the event is ignored.
* - If the `ignoreLeaveWindow` is `true`, the event is ignored when the user actually left the window
* (like by switching to an other window with [Alt]+[Tab]).
* - If the `ignoreReappear` is `true`, the event will be ignored when the mouse will reappear later on the document
* outside of the element it left.
*
* @function
*
* @param {Function} [] handler - handler for the filtered `mouseleave` event to watch.
* @param {Object} [] options - object of options:
* - {Boolean} [false] ignoreLeaveWindow - also ignore when the user switched windows.
* - {Boolean} [false] ignoreReappear - also ignore when the mouse reappeared outside of the element it left.
* @returns {Function} - filtered handler to use to listen on the `mouseleave` event.
*/
function ignoreMousedisappear(handler, { ignoreLeaveWindow = false, ignoreReappear = false } = {}) {
return function leaveEventHandler(eLeave, ...rest) {
const callback = handler.bind(this, eLeave, ...rest);
// The mouse left: call the given callback if the mouse entered elsewhere
if (eLeave.relatedTarget !== null) {
return callback();
}
// Otherwise, check if the mouse actually left the window.
// In firefox if the user switched between windows, the window sill have the focus by the time
// the event is triggered. We have to debounce the event to test this case.
setTimeout(function leaveEventDebouncer() {
if (!ignoreLeaveWindow && document.hasFocus && !document.hasFocus()) {
return callback();
}
// Otherwise, wait for the mouse to reeapear outside of the element,
if (!ignoreReappear) {
$(document).one('mouseenter', function reenterEventHandler(eReenter) {
if (!$(eLeave.currentTarget).has(eReenter.target).length) {
// Fill where the mouse finally entered.
eLeave.relatedTarget = eReenter.target;
callback();
}
});
}
}, 0);
};
}
var foundation_core_utils = /*#__PURE__*/Object.freeze({
rtl: rtl,
GetYoDigits: GetYoDigits,
RegExpEscape: RegExpEscape,
transitionend: transitionend,
onLoad: onLoad,
ignoreMousedisappear: ignoreMousedisappear
});
// matchMedia() polyfill - Test a CSS media type/query in JS.
// Authors & copyright(c) 2012: Scott Jehl, Paul Irish, Nicholas Zakas, David Knight. MIT license
/* eslint-disable */
window.matchMedia || (window.matchMedia = (function () {
// For browsers that support matchMedium api such as IE 9 and webkit
var styleMedia = (window.styleMedia || window.media);
// For those that don't support matchMedium
if (!styleMedia) {
var style = document.createElement('style'),
script = document.getElementsByTagName('script')[0],
info = null;
style.type = 'text/css';
style.id = 'matchmediajs-test';
if (!script) {
document.head.appendChild(style);
} else {
script.parentNode.insertBefore(style, script);
}
// 'style.currentStyle' is used by IE <= 8 and 'window.getComputedStyle' for all other browsers
info = ('getComputedStyle' in window) && window.getComputedStyle(style, null) || style.currentStyle;
styleMedia = {
matchMedium: function (media) {
var text = '@media ' + media + '{ #matchmediajs-test { width: 1px; } }';
// 'style.styleSheet' is used by IE <= 8 and 'style.textContent' for all other browsers
if (style.styleSheet) {
style.styleSheet.cssText = text;
} else {
style.textContent = text;
}
// Test if media query is true or false
return info.width === '1px';
}
};
}
return function(media) {
return {
matches: styleMedia.matchMedium(media || 'all'),
media: media || 'all'
};
};
})());
/* eslint-enable */
var MediaQuery = {
queries: [],
current: '',
/**
* Initializes the media query helper, by extracting the breakpoint list from the CSS and activating the breakpoint watcher.
* @function
* @private
*/
_init() {
var self = this;
var $meta = $('meta.foundation-mq');
if(!$meta.length){
$(' with the attribute `[for="someInputId"]`
* 3. The `.closest()`
*
* @param {Object} $el - jQuery object to check for required attribute
* @returns {Boolean} Boolean value depends on whether or not attribute is checked or empty
*/
findLabel($el) {
var id = $el[0].id;
var $label = this.$element.find(`label[for="${id}"]`);
if (!$label.length) {
return $el.closest('label');
}
return $label;
}
/**
* Get the set of labels associated with a set of radio els in this order
* 2. The with the attribute `[for="someInputId"]`
* 3. The `.closest()`
*
* @param {Object} $el - jQuery object to check for required attribute
* @returns {Boolean} Boolean value depends on whether or not attribute is checked or empty
*/
findRadioLabels($els) {
var labels = $els.map((i, el) => {
var id = el.id;
var $label = this.$element.find(`label[for="${id}"]`);
if (!$label.length) {
$label = $(el).closest('label');
}
return $label[0];
});
return $(labels);
}
/**
* Adds the CSS error class as specified by the Abide settings to the label, input, and the form
* @param {Object} $el - jQuery object to add the class to
*/
addErrorClasses($el) {
var $label = this.findLabel($el);
var $formError = this.findFormError($el);
if ($label.length) {
$label.addClass(this.options.labelErrorClass);
}
if ($formError.length) {
$formError.addClass(this.options.formErrorClass);
}
$el.addClass(this.options.inputErrorClass).attr({
'data-invalid': '',
'aria-invalid': true
});
}
/**
* Adds [for] and [role=alert] attributes to all form error targetting $el,
* and [aria-describedby] attribute to $el toward the first form error.
* @param {Object} $el - jQuery object
*/
addA11yAttributes($el) {
let $errors = this.findFormError($el);
let $labels = $errors.filter('label');
let $error = $errors.first();
if (!$errors.length) return;
// Set [aria-describedby] on the input toward the first form error if it is not set
if (typeof $el.attr('aria-describedby') === 'undefined') {
// Get the first error ID or create one
let errorId = $error.attr('id');
if (typeof errorId === 'undefined') {
errorId = GetYoDigits(6, 'abide-error');
$error.attr('id', errorId);
}
$el.attr('aria-describedby', errorId);
}
if ($labels.filter('[for]').length < $labels.length) {
// Get the input ID or create one
let elemId = $el.attr('id');
if (typeof elemId === 'undefined') {
elemId = GetYoDigits(6, 'abide-input');
$el.attr('id', elemId);
}
// For each label targeting $el, set [for] if it is not set.
$labels.each((i, label) => {
const $label = $(label);
if (typeof $label.attr('for') === 'undefined')
$label.attr('for', elemId);
});
}
// For each error targeting $el, set [role=alert] if it is not set.
$errors.each((i, label) => {
const $label = $(label);
if (typeof $label.attr('role') === 'undefined')
$label.attr('role', 'alert');
}).end();
}
/**
* Adds [aria-live] attribute to the given global form error $el.
* @param {Object} $el - jQuery object to add the attribute to
*/
addGlobalErrorA11yAttributes($el) {
if (typeof $el.attr('aria-live') === 'undefined')
$el.attr('aria-live', this.options.a11yErrorLevel);
}
/**
* Remove CSS error classes etc from an entire radio button group
* @param {String} groupName - A string that specifies the name of a radio button group
*
*/
removeRadioErrorClasses(groupName) {
var $els = this.$element.find(`:radio[name="${groupName}"]`);
var $labels = this.findRadioLabels($els);
var $formErrors = this.findFormError($els);
if ($labels.length) {
$labels.removeClass(this.options.labelErrorClass);
}
if ($formErrors.length) {
$formErrors.removeClass(this.options.formErrorClass);
}
$els.removeClass(this.options.inputErrorClass).attr({
'data-invalid': null,
'aria-invalid': null
});
}
/**
* Removes CSS error class as specified by the Abide settings from the label, input, and the form
* @param {Object} $el - jQuery object to remove the class from
*/
removeErrorClasses($el) {
// radios need to clear all of the els
if($el[0].type == 'radio') {
return this.removeRadioErrorClasses($el.attr('name'));
}
var $label = this.findLabel($el);
var $formError = this.findFormError($el);
if ($label.length) {
$label.removeClass(this.options.labelErrorClass);
}
if ($formError.length) {
$formError.removeClass(this.options.formErrorClass);
}
$el.removeClass(this.options.inputErrorClass).attr({
'data-invalid': null,
'aria-invalid': null
});
}
/**
* Goes through a form to find inputs and proceeds to validate them in ways specific to their type.
* Ignores inputs with data-abide-ignore, type="hidden" or disabled attributes set
* @fires Abide#invalid
* @fires Abide#valid
* @param {Object} element - jQuery object to validate, should be an HTML input
* @returns {Boolean} goodToGo - If the input is valid or not.
*/
validateInput($el) {
var clearRequire = this.requiredCheck($el),
validated = false,
customValidator = true,
validator = $el.attr('data-validator'),
equalTo = true;
// don't validate ignored inputs or hidden inputs or disabled inputs
if ($el.is('[data-abide-ignore]') || $el.is('[type="hidden"]') || $el.is('[disabled]')) {
return true;
}
switch ($el[0].type) {
case 'radio':
validated = this.validateRadio($el.attr('name'));
break;
case 'checkbox':
validated = clearRequire;
break;
case 'select':
case 'select-one':
case 'select-multiple':
validated = clearRequire;
break;
default:
validated = this.validateText($el);
}
if (validator) {
customValidator = this.matchValidation($el, validator, $el.attr('required'));
}
if ($el.attr('data-equalto')) {
equalTo = this.options.validators.equalTo($el);
}
var goodToGo = [clearRequire, validated, customValidator, equalTo].indexOf(false) === -1;
var message = (goodToGo ? 'valid' : 'invalid') + '.zf.abide';
if (goodToGo) {
// Re-validate inputs that depend on this one with equalto
const dependentElements = this.$element.find(`[data-equalto="${$el.attr('id')}"]`);
if (dependentElements.length) {
let _this = this;
dependentElements.each(function() {
if ($(this).val()) {
_this.validateInput($(this));
}
});
}
}
this[goodToGo ? 'removeErrorClasses' : 'addErrorClasses']($el);
/**
* Fires when the input is done checking for validation. Event trigger is either `valid.zf.abide` or `invalid.zf.abide`
* Trigger includes the DOM element of the input.
* @event Abide#valid
* @event Abide#invalid
*/
$el.trigger(message, [$el]);
return goodToGo;
}
/**
* Goes through a form and if there are any invalid inputs, it will display the form error element
* @returns {Boolean} noError - true if no errors were detected...
* @fires Abide#formvalid
* @fires Abide#forminvalid
*/
validateForm() {
var acc = [];
var _this = this;
this.$inputs.each(function() {
acc.push(_this.validateInput($(this)));
});
var noError = acc.indexOf(false) === -1;
this.$element.find('[data-abide-error]').each((i, elem) => {
const $elem = $(elem);
// Ensure a11y attributes are set
if (this.options.a11yAttributes) this.addGlobalErrorA11yAttributes($elem);
// Show or hide the error
$elem.css('display', (noError ? 'none' : 'block'));
});
/**
* Fires when the form is finished validating. Event trigger is either `formvalid.zf.abide` or `forminvalid.zf.abide`.
* Trigger includes the element of the form.
* @event Abide#formvalid
* @event Abide#forminvalid
*/
this.$element.trigger((noError ? 'formvalid' : 'forminvalid') + '.zf.abide', [this.$element]);
return noError;
}
/**
* Determines whether or a not a text input is valid based on the pattern specified in the attribute. If no matching pattern is found, returns true.
* @param {Object} $el - jQuery object to validate, should be a text input HTML element
* @param {String} pattern - string value of one of the RegEx patterns in Abide.options.patterns
* @returns {Boolean} Boolean value depends on whether or not the input value matches the pattern specified
*/
validateText($el, pattern) {
// A pattern can be passed to this function, or it will be infered from the input's "pattern" attribute, or it's "type" attribute
pattern = (pattern || $el.attr('pattern') || $el.attr('type'));
var inputText = $el.val();
var valid = false;
if (inputText.length) {
// If the pattern attribute on the element is in Abide's list of patterns, then test that regexp
if (this.options.patterns.hasOwnProperty(pattern)) {
valid = this.options.patterns[pattern].test(inputText);
}
// If the pattern name isn't also the type attribute of the field, then test it as a regexp
else if (pattern !== $el.attr('type')) {
valid = new RegExp(pattern).test(inputText);
}
else {
valid = true;
}
}
// An empty field is valid if it's not required
else if (!$el.prop('required')) {
valid = true;
}
return valid;
}
/**
* Determines whether or a not a radio input is valid based on whether or not it is required and selected. Although the function targets a single `Back Back
'
*/
wrapper: '
',
/**
* Adds the parent link to the submenu.
* @option
* @type {boolean}
* @default false
*/
parentLink: false,
/**
* Allow the menu to return to root list on body click.
* @option
* @type {boolean}
* @default false
*/
closeOnClick: false,
/**
* Allow the menu to auto adjust height.
* @option
* @type {boolean}
* @default false
*/
autoHeight: false,
/**
* Animate the auto adjust height.
* @option
* @type {boolean}
* @default false
*/
animateHeight: false,
/**
* Scroll to the top of the menu after opening a submenu or navigating back using the menu back button
* @option
* @type {boolean}
* @default false
*/
scrollTop: false,
/**
* String jquery selector (for example 'body') of element to take offset().top from, if empty string the drilldown menu offset().top is taken
* @option
* @type {string}
* @default ''
*/
scrollTopElement: '',
/**
* ScrollTop offset
* @option
* @type {number}
* @default 0
*/
scrollTopOffset: 0,
/**
* Scroll animation duration
* @option
* @type {number}
* @default 500
*/
animationDuration: 500,
/**
* Scroll animation easing. Can be `'swing'` or `'linear'`.
* @option
* @type {string}
* @see {@link https://api.jquery.com/animate|JQuery animate}
* @default 'swing'
*/
animationEasing: 'swing'
// holdOpen: false
};
const POSITIONS = ['left', 'right', 'top', 'bottom'];
const VERTICAL_ALIGNMENTS = ['top', 'bottom', 'center'];
const HORIZONTAL_ALIGNMENTS = ['left', 'right', 'center'];
const ALIGNMENTS = {
'left': VERTICAL_ALIGNMENTS,
'right': VERTICAL_ALIGNMENTS,
'top': HORIZONTAL_ALIGNMENTS,
'bottom': HORIZONTAL_ALIGNMENTS
};
function nextItem(item, array) {
var currentIdx = array.indexOf(item);
if(currentIdx === array.length - 1) {
return array[0];
} else {
return array[currentIdx + 1];
}
}
class Positionable extends Plugin {
/**
* Abstract class encapsulating the tether-like explicit positioning logic
* including repositioning based on overlap.
* Expects classes to define defaults for vOffset, hOffset, position,
* alignment, allowOverlap, and allowBottomOverlap. They can do this by
* extending the defaults, or (for now recommended due to the way docs are
* generated) by explicitly declaring them.
*
**/
_init() {
this.triedPositions = {};
this.position = this.options.position === 'auto' ? this._getDefaultPosition() : this.options.position;
this.alignment = this.options.alignment === 'auto' ? this._getDefaultAlignment() : this.options.alignment;
this.originalPosition = this.position;
this.originalAlignment = this.alignment;
}
_getDefaultPosition () {
return 'bottom';
}
_getDefaultAlignment() {
switch(this.position) {
case 'bottom':
case 'top':
return rtl() ? 'right' : 'left';
case 'left':
case 'right':
return 'bottom';
}
}
/**
* Adjusts the positionable possible positions by iterating through alignments
* and positions.
* @function
* @private
*/
_reposition() {
if(this._alignmentsExhausted(this.position)) {
this.position = nextItem(this.position, POSITIONS);
this.alignment = ALIGNMENTS[this.position][0];
} else {
this._realign();
}
}
/**
* Adjusts the dropdown pane possible positions by iterating through alignments
* on the current position.
* @function
* @private
*/
_realign() {
this._addTriedPosition(this.position, this.alignment);
this.alignment = nextItem(this.alignment, ALIGNMENTS[this.position]);
}
_addTriedPosition(position, alignment) {
this.triedPositions[position] = this.triedPositions[position] || [];
this.triedPositions[position].push(alignment);
}
_positionsExhausted() {
var isExhausted = true;
for(var i = 0; i < POSITIONS.length; i++) {
isExhausted = isExhausted && this._alignmentsExhausted(POSITIONS[i]);
}
return isExhausted;
}
_alignmentsExhausted(position) {
return this.triedPositions[position] && this.triedPositions[position].length == ALIGNMENTS[position].length;
}
// When we're trying to center, we don't want to apply offset that's going to
// take us just off center, so wrap around to return 0 for the appropriate
// offset in those alignments. TODO: Figure out if we want to make this
// configurable behavior... it feels more intuitive, especially for tooltips, but
// it's possible someone might actually want to start from center and then nudge
// slightly off.
_getVOffset() {
return this.options.vOffset;
}
_getHOffset() {
return this.options.hOffset;
}
_setPosition($anchor, $element, $parent) {
if($anchor.attr('aria-expanded') === 'false'){ return false; }
var $eleDims = Box.GetDimensions($element),
$anchorDims = Box.GetDimensions($anchor);
if (!this.options.allowOverlap) {
// restore original position & alignment before checking overlap
this.position = this.originalPosition;
this.alignment = this.originalAlignment;
}
$element.offset(Box.GetExplicitOffsets($element, $anchor, this.position, this.alignment, this._getVOffset(), this._getHOffset()));
if(!this.options.allowOverlap) {
var minOverlap = 100000000;
// default coordinates to how we start, in case we can't figure out better
var minCoordinates = {position: this.position, alignment: this.alignment};
while(!this._positionsExhausted()) {
let overlap = Box.OverlapArea($element, $parent, false, false, this.options.allowBottomOverlap);
if(overlap === 0) {
return;
}
if(overlap < minOverlap) {
minOverlap = overlap;
minCoordinates = {position: this.position, alignment: this.alignment};
}
this._reposition();
$element.offset(Box.GetExplicitOffsets($element, $anchor, this.position, this.alignment, this._getVOffset(), this._getHOffset()));
}
// If we get through the entire loop, there was no non-overlapping
// position available. Pick the version with least overlap.
this.position = minCoordinates.position;
this.alignment = minCoordinates.alignment;
$element.offset(Box.GetExplicitOffsets($element, $anchor, this.position, this.alignment, this._getVOffset(), this._getHOffset()));
}
}
}
Positionable.defaults = {
/**
* Position of positionable relative to anchor. Can be left, right, bottom, top, or auto.
* @option
* @type {string}
* @default 'auto'
*/
position: 'auto',
/**
* Alignment of positionable relative to anchor. Can be left, right, bottom, top, center, or auto.
* @option
* @type {string}
* @default 'auto'
*/
alignment: 'auto',
/**
* Allow overlap of container/window. If false, dropdown positionable first
* try to position as defined by data-position and data-alignment, but
* reposition if it would cause an overflow.
* @option
* @type {boolean}
* @default false
*/
allowOverlap: false,
/**
* Allow overlap of only the bottom of the container. This is the most common
* behavior for dropdowns, allowing the dropdown to extend the bottom of the
* screen but not otherwise influence or break out of the container.
* @option
* @type {boolean}
* @default true
*/
allowBottomOverlap: true,
/**
* Number of pixels the positionable should be separated vertically from anchor
* @option
* @type {number}
* @default 0
*/
vOffset: 0,
/**
* Number of pixels the positionable should be separated horizontally from anchor
* @option
* @type {number}
* @default 0
*/
hOffset: 0,
};
/**
* Dropdown module.
* @module foundation.dropdown
* @requires foundation.util.keyboard
* @requires foundation.util.box
* @requires foundation.util.triggers
*/
class Dropdown extends Positionable {
/**
* Creates a new instance of a dropdown.
* @class
* @name Dropdown
* @param {jQuery} element - jQuery object to make into a dropdown.
* Object should be of the dropdown panel, rather than its anchor.
* @param {Object} options - Overrides to the default plugin settings.
*/
_setup(element, options) {
this.$element = element;
this.options = $.extend({}, Dropdown.defaults, this.$element.data(), options);
this.className = 'Dropdown'; // ie9 back compat
// Triggers init is idempotent, just need to make sure it is initialized
Triggers.init($);
this._init();
Keyboard.register('Dropdown', {
'ENTER': 'toggle',
'SPACE': 'toggle',
'ESCAPE': 'close'
});
}
/**
* Initializes the plugin by setting/checking options and attributes, adding helper variables, and saving the anchor.
* @function
* @private
*/
_init() {
var $id = this.$element.attr('id');
this.$anchors = $(`[data-toggle="${$id}"]`).length ? $(`[data-toggle="${$id}"]`) : $(`[data-open="${$id}"]`);
this.$anchors.attr({
'aria-controls': $id,
'data-is-focus': false,
'data-yeti-box': $id,
'aria-haspopup': true,
'aria-expanded': false
});
this._setCurrentAnchor(this.$anchors.first());
if(this.options.parentClass){
this.$parent = this.$element.parents('.' + this.options.parentClass);
}else{
this.$parent = null;
}
// Set [aria-labelledby] on the Dropdown if it is not set
if (typeof this.$element.attr('aria-labelledby') === 'undefined') {
// Get the anchor ID or create one
if (typeof this.$currentAnchor.attr('id') === 'undefined') {
this.$currentAnchor.attr('id', GetYoDigits(6, 'dd-anchor'));
}
this.$element.attr('aria-labelledby', this.$currentAnchor.attr('id'));
}
this.$element.attr({
'aria-hidden': 'true',
'data-yeti-box': $id,
'data-resize': $id,
});
super._init();
this._events();
}
_getDefaultPosition() {
// handle legacy classnames
var position = this.$element[0].className.match(/(top|left|right|bottom)/g);
if(position) {
return position[0];
} else {
return 'bottom'
}
}
_getDefaultAlignment() {
// handle legacy float approach
var horizontalPosition = /float-(\S+)/.exec(this.$currentAnchor.attr('class'));
if(horizontalPosition) {
return horizontalPosition[1];
}
return super._getDefaultAlignment();
}
/**
* Sets the position and orientation of the dropdown pane, checks for collisions if allow-overlap is not true.
* Recursively calls itself if a collision is detected, with a new position class.
* @function
* @private
*/
_setPosition() {
this.$element.removeClass(`has-position-${this.position} has-alignment-${this.alignment}`);
super._setPosition(this.$currentAnchor, this.$element, this.$parent);
this.$element.addClass(`has-position-${this.position} has-alignment-${this.alignment}`);
}
/**
* Make it a current anchor.
* Current anchor as the reference for the position of Dropdown panes.
* @param {HTML} el - DOM element of the anchor.
* @function
* @private
*/
_setCurrentAnchor(el) {
this.$currentAnchor = $(el);
}
/**
* Adds event listeners to the element utilizing the triggers utility library.
* @function
* @private
*/
_events() {
var _this = this;
this.$element.on({
'open.zf.trigger': this.open.bind(this),
'close.zf.trigger': this.close.bind(this),
'toggle.zf.trigger': this.toggle.bind(this),
'resizeme.zf.trigger': this._setPosition.bind(this)
});
this.$anchors.off('click.zf.trigger')
.on('click.zf.trigger', function() { _this._setCurrentAnchor(this); });
if(this.options.hover){
this.$anchors.off('mouseenter.zf.dropdown mouseleave.zf.dropdown')
.on('mouseenter.zf.dropdown', function(){
_this._setCurrentAnchor(this);
var bodyData = $('body').data();
if(typeof(bodyData.whatinput) === 'undefined' || bodyData.whatinput === 'mouse') {
clearTimeout(_this.timeout);
_this.timeout = setTimeout(function(){
_this.open();
_this.$anchors.data('hover', true);
}, _this.options.hoverDelay);
}
}).on('mouseleave.zf.dropdown', ignoreMousedisappear(function(){
clearTimeout(_this.timeout);
_this.timeout = setTimeout(function(){
_this.close();
_this.$anchors.data('hover', false);
}, _this.options.hoverDelay);
}));
if(this.options.hoverPane){
this.$element.off('mouseenter.zf.dropdown mouseleave.zf.dropdown')
.on('mouseenter.zf.dropdown', function(){
clearTimeout(_this.timeout);
}).on('mouseleave.zf.dropdown', ignoreMousedisappear(function(){
clearTimeout(_this.timeout);
_this.timeout = setTimeout(function(){
_this.close();
_this.$anchors.data('hover', false);
}, _this.options.hoverDelay);
}));
}
}
this.$anchors.add(this.$element).on('keydown.zf.dropdown', function(e) {
var $target = $(this),
visibleFocusableElements = Keyboard.findFocusable(_this.$element);
Keyboard.handleKey(e, 'Dropdown', {
open: function() {
if ($target.is(_this.$anchors) && !$target.is('input, textarea')) {
_this.open();
_this.$element.attr('tabindex', -1).focus();
e.preventDefault();
}
},
close: function() {
_this.close();
_this.$anchors.focus();
}
});
});
}
/**
* Adds an event handler to the body to close any dropdowns on a click.
* @function
* @private
*/
_addBodyHandler() {
var $body = $(document.body).not(this.$element),
_this = this;
$body.off('click.zf.dropdown')
.on('click.zf.dropdown', function(e){
if(_this.$anchors.is(e.target) || _this.$anchors.find(e.target).length) {
return;
}
if(_this.$element.is(e.target) || _this.$element.find(e.target).length) {
return;
}
_this.close();
$body.off('click.zf.dropdown');
});
}
/**
* Opens the dropdown pane, and fires a bubbling event to close other dropdowns.
* @function
* @fires Dropdown#closeme
* @fires Dropdown#show
*/
open() {
// var _this = this;
/**
* Fires to close other open dropdowns, typically when dropdown is opening
* @event Dropdown#closeme
*/
this.$element.trigger('closeme.zf.dropdown', this.$element.attr('id'));
this.$anchors.addClass('hover')
.attr({'aria-expanded': true});
// this.$element/*.show()*/;
this.$element.addClass('is-opening');
this._setPosition();
this.$element.removeClass('is-opening').addClass('is-open')
.attr({'aria-hidden': false});
if(this.options.autoFocus){
var $focusable = Keyboard.findFocusable(this.$element);
if($focusable.length){
$focusable.eq(0).focus();
}
}
if(this.options.closeOnClick){ this._addBodyHandler(); }
if (this.options.trapFocus) {
Keyboard.trapFocus(this.$element);
}
/**
* Fires once the dropdown is visible.
* @event Dropdown#show
*/
this.$element.trigger('show.zf.dropdown', [this.$element]);
}
/**
* Closes the open dropdown pane.
* @function
* @fires Dropdown#hide
*/
close() {
if(!this.$element.hasClass('is-open')){
return false;
}
this.$element.removeClass('is-open')
.attr({'aria-hidden': true});
this.$anchors.removeClass('hover')
.attr('aria-expanded', false);
/**
* Fires once the dropdown is no longer visible.
* @event Dropdown#hide
*/
this.$element.trigger('hide.zf.dropdown', [this.$element]);
if (this.options.trapFocus) {
Keyboard.releaseFocus(this.$element);
}
}
/**
* Toggles the dropdown pane's visibility.
* @function
*/
toggle() {
if(this.$element.hasClass('is-open')){
if(this.$anchors.data('hover')) return;
this.close();
}else{
this.open();
}
}
/**
* Destroys the dropdown.
* @function
*/
_destroy() {
this.$element.off('.zf.trigger').hide();
this.$anchors.off('.zf.dropdown');
$(document.body).off('click.zf.dropdown');
}
}
Dropdown.defaults = {
/**
* Class that designates bounding container of Dropdown (default: window)
* @option
* @type {?string}
* @default null
*/
parentClass: null,
/**
* Amount of time to delay opening a submenu on hover event.
* @option
* @type {number}
* @default 250
*/
hoverDelay: 250,
/**
* Allow submenus to open on hover events
* @option
* @type {boolean}
* @default false
*/
hover: false,
/**
* Don't close dropdown when hovering over dropdown pane
* @option
* @type {boolean}
* @default false
*/
hoverPane: false,
/**
* Number of pixels between the dropdown pane and the triggering element on open.
* @option
* @type {number}
* @default 0
*/
vOffset: 0,
/**
* Number of pixels between the dropdown pane and the triggering element on open.
* @option
* @type {number}
* @default 0
*/
hOffset: 0,
/**
* Position of dropdown. Can be left, right, bottom, top, or auto.
* @option
* @type {string}
* @default 'auto'
*/
position: 'auto',
/**
* Alignment of dropdown relative to anchor. Can be left, right, bottom, top, center, or auto.
* @option
* @type {string}
* @default 'auto'
*/
alignment: 'auto',
/**
* Allow overlap of container/window. If false, dropdown will first try to position as defined by data-position and data-alignment, but reposition if it would cause an overflow.
* @option
* @type {boolean}
* @default false
*/
allowOverlap: false,
/**
* Allow overlap of only the bottom of the container. This is the most common
* behavior for dropdowns, allowing the dropdown to extend the bottom of the
* screen but not otherwise influence or break out of the container.
* @option
* @type {boolean}
* @default true
*/
allowBottomOverlap: true,
/**
* Allow the plugin to trap focus to the dropdown pane if opened with keyboard commands.
* @option
* @type {boolean}
* @default false
*/
trapFocus: false,
/**
* Allow the plugin to set focus to the first focusable element within the pane, regardless of method of opening.
* @option
* @type {boolean}
* @default false
*/
autoFocus: false,
/**
* Allows a click on the body to close the dropdown.
* @option
* @type {boolean}
* @default false
*/
closeOnClick: false
};
/**
* DropdownMenu module.
* @module foundation.dropdown-menu
* @requires foundation.util.keyboard
* @requires foundation.util.box
* @requires foundation.util.nest
*/
class DropdownMenu extends Plugin {
/**
* Creates a new instance of DropdownMenu.
* @class
* @name DropdownMenu
* @fires DropdownMenu#init
* @param {jQuery} element - jQuery object to make into a dropdown menu.
* @param {Object} options - Overrides to the default plugin settings.
*/
_setup(element, options) {
this.$element = element;
this.options = $.extend({}, DropdownMenu.defaults, this.$element.data(), options);
this.className = 'DropdownMenu'; // ie9 back compat
this._init();
Keyboard.register('DropdownMenu', {
'ENTER': 'open',
'SPACE': 'open',
'ARROW_RIGHT': 'next',
'ARROW_UP': 'up',
'ARROW_DOWN': 'down',
'ARROW_LEFT': 'previous',
'ESCAPE': 'close'
});
}
/**
* Initializes the plugin, and calls _prepareMenu
* @private
* @function
*/
_init() {
Nest.Feather(this.$element, 'dropdown');
var subs = this.$element.find('li.is-dropdown-submenu-parent');
this.$element.children('.is-dropdown-submenu-parent').children('.is-dropdown-submenu').addClass('first-sub');
this.$menuItems = this.$element.find('[role="menuitem"]');
this.$tabs = this.$element.children('[role="menuitem"]');
this.$tabs.find('ul.is-dropdown-submenu').addClass(this.options.verticalClass);
if (this.options.alignment === 'auto') {
if (this.$element.hasClass(this.options.rightClass) || rtl() || this.$element.parents('.top-bar-right').is('*')) {
this.options.alignment = 'right';
subs.addClass('opens-left');
} else {
this.options.alignment = 'left';
subs.addClass('opens-right');
}
} else {
if (this.options.alignment === 'right') {
subs.addClass('opens-left');
} else {
subs.addClass('opens-right');
}
}
this.changed = false;
this._events();
};
_isVertical() {
return this.$tabs.css('display') === 'block' || this.$element.css('flex-direction') === 'column';
}
_isRtl() {
return this.$element.hasClass('align-right') || (rtl() && !this.$element.hasClass('align-left'));
}
/**
* Adds event listeners to elements within the menu
* @private
* @function
*/
_events() {
var _this = this,
hasTouch = 'ontouchstart' in window || (typeof window.ontouchstart !== 'undefined'),
parClass = 'is-dropdown-submenu-parent';
// used for onClick and in the keyboard handlers
var handleClickFn = function(e) {
var $elem = $(e.target).parentsUntil('ul', `.${parClass}`),
hasSub = $elem.hasClass(parClass),
hasClicked = $elem.attr('data-is-click') === 'true',
$sub = $elem.children('.is-dropdown-submenu');
if (hasSub) {
if (hasClicked) {
if (!_this.options.closeOnClick || (!_this.options.clickOpen && !hasTouch) || (_this.options.forceFollow && hasTouch)) { return; }
else {
e.stopImmediatePropagation();
e.preventDefault();
_this._hide($elem);
}
} else {
e.preventDefault();
e.stopImmediatePropagation();
_this._show($sub);
$elem.add($elem.parentsUntil(_this.$element, `.${parClass}`)).attr('data-is-click', true);
}
}
};
if (this.options.clickOpen || hasTouch) {
this.$menuItems.on('click.zf.dropdownmenu touchstart.zf.dropdownmenu', handleClickFn);
}
// Handle Leaf element Clicks
if(_this.options.closeOnClickInside){
this.$menuItems.on('click.zf.dropdownmenu', function(e) {
var $elem = $(this),
hasSub = $elem.hasClass(parClass);
if(!hasSub){
_this._hide();
}
});
}
if (!this.options.disableHover) {
this.$menuItems.on('mouseenter.zf.dropdownmenu', function (e) {
var $elem = $(this),
hasSub = $elem.hasClass(parClass);
if (hasSub) {
clearTimeout($elem.data('_delay'));
$elem.data('_delay', setTimeout(function () {
_this._show($elem.children('.is-dropdown-submenu'));
}, _this.options.hoverDelay));
}
}).on('mouseleave.zf.dropdownMenu', ignoreMousedisappear(function (e) {
var $elem = $(this),
hasSub = $elem.hasClass(parClass);
if (hasSub && _this.options.autoclose) {
if ($elem.attr('data-is-click') === 'true' && _this.options.clickOpen) { return false; }
clearTimeout($elem.data('_delay'));
$elem.data('_delay', setTimeout(function () {
_this._hide($elem);
}, _this.options.closingTime));
}
}));
}
this.$menuItems.on('keydown.zf.dropdownmenu', function(e) {
var $element = $(e.target).parentsUntil('ul', '[role="menuitem"]'),
isTab = _this.$tabs.index($element) > -1,
$elements = isTab ? _this.$tabs : $element.siblings('li').add($element),
$prevElement,
$nextElement;
$elements.each(function(i) {
if ($(this).is($element)) {
$prevElement = $elements.eq(i-1);
$nextElement = $elements.eq(i+1);
return;
}
});
var nextSibling = function() {
$nextElement.children('a:first').focus();
e.preventDefault();
}, prevSibling = function() {
$prevElement.children('a:first').focus();
e.preventDefault();
}, openSub = function() {
var $sub = $element.children('ul.is-dropdown-submenu');
if ($sub.length) {
_this._show($sub);
$element.find('li > a:first').focus();
e.preventDefault();
} else { return; }
}, closeSub = function() {
//if ($element.is(':first-child')) {
var close = $element.parent('ul').parent('li');
close.children('a:first').focus();
_this._hide(close);
e.preventDefault();
//}
};
var functions = {
open: openSub,
close: function() {
_this._hide(_this.$element);
_this.$menuItems.eq(0).children('a').focus(); // focus to first element
e.preventDefault();
},
handled: function() {
e.stopImmediatePropagation();
}
};
if (isTab) {
if (_this._isVertical()) { // vertical menu
if (_this._isRtl()) { // right aligned
$.extend(functions, {
down: nextSibling,
up: prevSibling,
next: closeSub,
previous: openSub
});
} else { // left aligned
$.extend(functions, {
down: nextSibling,
up: prevSibling,
next: openSub,
previous: closeSub
});
}
} else { // horizontal menu
if (_this._isRtl()) { // right aligned
$.extend(functions, {
next: prevSibling,
previous: nextSibling,
down: openSub,
up: closeSub
});
} else { // left aligned
$.extend(functions, {
next: nextSibling,
previous: prevSibling,
down: openSub,
up: closeSub
});
}
}
} else { // not tabs -> one sub
if (_this._isRtl()) { // right aligned
$.extend(functions, {
next: closeSub,
previous: openSub,
down: nextSibling,
up: prevSibling
});
} else { // left aligned
$.extend(functions, {
next: openSub,
previous: closeSub,
down: nextSibling,
up: prevSibling
});
}
}
Keyboard.handleKey(e, 'DropdownMenu', functions);
});
}
/**
* Adds an event handler to the body to close any dropdowns on a click.
* @function
* @private
*/
_addBodyHandler() {
var $body = $(document.body),
_this = this;
$body.off('mouseup.zf.dropdownmenu touchend.zf.dropdownmenu')
.on('mouseup.zf.dropdownmenu touchend.zf.dropdownmenu', function(e) {
var $link = _this.$element.find(e.target);
if ($link.length) { return; }
_this._hide();
$body.off('mouseup.zf.dropdownmenu touchend.zf.dropdownmenu');
});
}
/**
* Opens a dropdown pane, and checks for collisions first.
* @param {jQuery} $sub - ul element that is a submenu to show
* @function
* @private
* @fires Dropdownmenu#show
*/
_show($sub) {
var idx = this.$tabs.index(this.$tabs.filter(function(i, el) {
return $(el).find($sub).length > 0;
}));
var $sibs = $sub.parent('li.is-dropdown-submenu-parent').siblings('li.is-dropdown-submenu-parent');
this._hide($sibs, idx);
$sub.css('visibility', 'hidden').addClass('js-dropdown-active')
.parent('li.is-dropdown-submenu-parent').addClass('is-active');
var clear = Box.ImNotTouchingYou($sub, null, true);
if (!clear) {
var oldClass = this.options.alignment === 'left' ? '-right' : '-left',
$parentLi = $sub.parent('.is-dropdown-submenu-parent');
$parentLi.removeClass(`opens${oldClass}`).addClass(`opens-${this.options.alignment}`);
clear = Box.ImNotTouchingYou($sub, null, true);
if (!clear) {
$parentLi.removeClass(`opens-${this.options.alignment}`).addClass('opens-inner');
}
this.changed = true;
}
$sub.css('visibility', '');
if (this.options.closeOnClick) { this._addBodyHandler(); }
/**
* Fires when the new dropdown pane is visible.
* @event Dropdownmenu#show
*/
this.$element.trigger('show.zf.dropdownmenu', [$sub]);
}
/**
* Hides a single, currently open dropdown pane, if passed a parameter, otherwise, hides everything.
* @function
* @param {jQuery} $elem - element with a submenu to hide
* @param {Number} idx - index of the $tabs collection to hide
* @private
*/
_hide($elem, idx) {
var $toClose;
if ($elem && $elem.length) {
$toClose = $elem;
} else if (typeof idx !== 'undefined') {
$toClose = this.$tabs.not(function(i, el) {
return i === idx;
});
}
else {
$toClose = this.$element;
}
var somethingToClose = $toClose.hasClass('is-active') || $toClose.find('.is-active').length > 0;
if (somethingToClose) {
$toClose.find('li.is-active').add($toClose).attr({
'data-is-click': false
}).removeClass('is-active');
$toClose.find('ul.js-dropdown-active').removeClass('js-dropdown-active');
if (this.changed || $toClose.find('opens-inner').length) {
var oldClass = this.options.alignment === 'left' ? 'right' : 'left';
$toClose.find('li.is-dropdown-submenu-parent').add($toClose)
.removeClass(`opens-inner opens-${this.options.alignment}`)
.addClass(`opens-${oldClass}`);
this.changed = false;
}
/**
* Fires when the open menus are closed.
* @event Dropdownmenu#hide
*/
this.$element.trigger('hide.zf.dropdownmenu', [$toClose]);
}
}
/**
* Destroys the plugin.
* @function
*/
_destroy() {
this.$menuItems.off('.zf.dropdownmenu').removeAttr('data-is-click')
.removeClass('is-right-arrow is-left-arrow is-down-arrow opens-right opens-left opens-inner');
$(document.body).off('.zf.dropdownmenu');
Nest.Burn(this.$element, 'dropdown');
}
}
/**
* Default settings for plugin
*/
DropdownMenu.defaults = {
/**
* Disallows hover events from opening submenus
* @option
* @type {boolean}
* @default false
*/
disableHover: false,
/**
* Allow a submenu to automatically close on a mouseleave event, if not clicked open.
* @option
* @type {boolean}
* @default true
*/
autoclose: true,
/**
* Amount of time to delay opening a submenu on hover event.
* @option
* @type {number}
* @default 50
*/
hoverDelay: 50,
/**
* Allow a submenu to open/remain open on parent click event. Allows cursor to move away from menu.
* @option
* @type {boolean}
* @default false
*/
clickOpen: false,
/**
* Amount of time to delay closing a submenu on a mouseleave event.
* @option
* @type {number}
* @default 500
*/
closingTime: 500,
/**
* Position of the menu relative to what direction the submenus should open. Handled by JS. Can be `'auto'`, `'left'` or `'right'`.
* @option
* @type {string}
* @default 'auto'
*/
alignment: 'auto',
/**
* Allow clicks on the body to close any open submenus.
* @option
* @type {boolean}
* @default true
*/
closeOnClick: true,
/**
* Allow clicks on leaf anchor links to close any open submenus.
* @option
* @type {boolean}
* @default true
*/
closeOnClickInside: true,
/**
* Class applied to vertical oriented menus, Foundation default is `vertical`. Update this if using your own class.
* @option
* @type {string}
* @default 'vertical'
*/
verticalClass: 'vertical',
/**
* Class applied to right-side oriented menus, Foundation default is `align-right`. Update this if using your own class.
* @option
* @type {string}
* @default 'align-right'
*/
rightClass: 'align-right',
/**
* Boolean to force overide the clicking of links to perform default action, on second touch event for mobile.
* @option
* @type {boolean}
* @default true
*/
forceFollow: true
};
/**
* Equalizer module.
* @module foundation.equalizer
* @requires foundation.util.mediaQuery
* @requires foundation.util.imageLoader if equalizer contains images
*/
class Equalizer extends Plugin {
/**
* Creates a new instance of Equalizer.
* @class
* @name Equalizer
* @fires Equalizer#init
* @param {Object} element - jQuery object to add the trigger to.
* @param {Object} options - Overrides to the default plugin settings.
*/
_setup(element, options){
this.$element = element;
this.options = $.extend({}, Equalizer.defaults, this.$element.data(), options);
this.className = 'Equalizer'; // ie9 back compat
this._init();
}
/**
* Initializes the Equalizer plugin and calls functions to get equalizer functioning on load.
* @private
*/
_init() {
var eqId = this.$element.attr('data-equalizer') || '';
var $watched = this.$element.find(`[data-equalizer-watch="${eqId}"]`);
MediaQuery._init();
this.$watched = $watched.length ? $watched : this.$element.find('[data-equalizer-watch]');
this.$element.attr('data-resize', (eqId || GetYoDigits(6, 'eq')));
this.$element.attr('data-mutate', (eqId || GetYoDigits(6, 'eq')));
this.hasNested = this.$element.find('[data-equalizer]').length > 0;
this.isNested = this.$element.parentsUntil(document.body, '[data-equalizer]').length > 0;
this.isOn = false;
this._bindHandler = {
onResizeMeBound: this._onResizeMe.bind(this),
onPostEqualizedBound: this._onPostEqualized.bind(this)
};
var imgs = this.$element.find('img');
var tooSmall;
if(this.options.equalizeOn){
tooSmall = this._checkMQ();
$(window).on('changed.zf.mediaquery', this._checkMQ.bind(this));
}else{
this._events();
}
if((typeof tooSmall !== 'undefined' && tooSmall === false) || typeof tooSmall === 'undefined'){
if(imgs.length){
onImagesLoaded(imgs, this._reflow.bind(this));
}else{
this._reflow();
}
}
}
/**
* Removes event listeners if the breakpoint is too small.
* @private
*/
_pauseEvents() {
this.isOn = false;
this.$element.off({
'.zf.equalizer': this._bindHandler.onPostEqualizedBound,
'resizeme.zf.trigger': this._bindHandler.onResizeMeBound,
'mutateme.zf.trigger': this._bindHandler.onResizeMeBound
});
}
/**
* function to handle $elements resizeme.zf.trigger, with bound this on _bindHandler.onResizeMeBound
* @private
*/
_onResizeMe(e) {
this._reflow();
}
/**
* function to handle $elements postequalized.zf.equalizer, with bound this on _bindHandler.onPostEqualizedBound
* @private
*/
_onPostEqualized(e) {
if(e.target !== this.$element[0]){ this._reflow(); }
}
/**
* Initializes events for Equalizer.
* @private
*/
_events() {
this._pauseEvents();
if(this.hasNested){
this.$element.on('postequalized.zf.equalizer', this._bindHandler.onPostEqualizedBound);
}else{
this.$element.on('resizeme.zf.trigger', this._bindHandler.onResizeMeBound);
this.$element.on('mutateme.zf.trigger', this._bindHandler.onResizeMeBound);
}
this.isOn = true;
}
/**
* Checks the current breakpoint to the minimum required size.
* @private
*/
_checkMQ() {
var tooSmall = !MediaQuery.is(this.options.equalizeOn);
if(tooSmall){
if(this.isOn){
this._pauseEvents();
this.$watched.css('height', 'auto');
}
}else{
if(!this.isOn){
this._events();
}
}
return tooSmall;
}
/**
* A noop version for the plugin
* @private
*/
_killswitch() {
return;
}
/**
* Calls necessary functions to update Equalizer upon DOM change
* @private
*/
_reflow() {
if(!this.options.equalizeOnStack){
if(this._isStacked()){
this.$watched.css('height', 'auto');
return false;
}
}
if (this.options.equalizeByRow) {
this.getHeightsByRow(this.applyHeightByRow.bind(this));
}else{
this.getHeights(this.applyHeight.bind(this));
}
}
/**
* Manually determines if the first 2 elements are *NOT* stacked.
* @private
*/
_isStacked() {
if (!this.$watched[0] || !this.$watched[1]) {
return true;
}
return this.$watched[0].getBoundingClientRect().top !== this.$watched[1].getBoundingClientRect().top;
}
/**
* Finds the outer heights of children contained within an Equalizer parent and returns them in an array
* @param {Function} cb - A non-optional callback to return the heights array to.
* @returns {Array} heights - An array of heights of children within Equalizer container
*/
getHeights(cb) {
var heights = [];
for(var i = 0, len = this.$watched.length; i < len; i++){
this.$watched[i].style.height = 'auto';
heights.push(this.$watched[i].offsetHeight);
}
cb(heights);
}
/**
* Finds the outer heights of children contained within an Equalizer parent and returns them in an array
* @param {Function} cb - A non-optional callback to return the heights array to.
* @returns {Array} groups - An array of heights of children within Equalizer container grouped by row with element,height and max as last child
*/
getHeightsByRow(cb) {
var lastElTopOffset = (this.$watched.length ? this.$watched.first().offset().top : 0),
groups = [],
group = 0;
//group by Row
groups[group] = [];
for(var i = 0, len = this.$watched.length; i < len; i++){
this.$watched[i].style.height = 'auto';
//maybe could use this.$watched[i].offsetTop
var elOffsetTop = $(this.$watched[i]).offset().top;
if (elOffsetTop!=lastElTopOffset) {
group++;
groups[group] = [];
lastElTopOffset=elOffsetTop;
}
groups[group].push([this.$watched[i],this.$watched[i].offsetHeight]);
}
for (var j = 0, ln = groups.length; j < ln; j++) {
var heights = $(groups[j]).map(function(){ return this[1]; }).get();
var max = Math.max.apply(null, heights);
groups[j].push(max);
}
cb(groups);
}
/**
* Changes the CSS height property of each child in an Equalizer parent to match the tallest
* @param {array} heights - An array of heights of children within Equalizer container
* @fires Equalizer#preequalized
* @fires Equalizer#postequalized
*/
applyHeight(heights) {
var max = Math.max.apply(null, heights);
/**
* Fires before the heights are applied
* @event Equalizer#preequalized
*/
this.$element.trigger('preequalized.zf.equalizer');
this.$watched.css('height', max);
/**
* Fires when the heights have been applied
* @event Equalizer#postequalized
*/
this.$element.trigger('postequalized.zf.equalizer');
}
/**
* Changes the CSS height property of each child in an Equalizer parent to match the tallest by row
* @param {array} groups - An array of heights of children within Equalizer container grouped by row with element,height and max as last child
* @fires Equalizer#preequalized
* @fires Equalizer#preequalizedrow
* @fires Equalizer#postequalizedrow
* @fires Equalizer#postequalized
*/
applyHeightByRow(groups) {
/**
* Fires before the heights are applied
*/
this.$element.trigger('preequalized.zf.equalizer');
for (var i = 0, len = groups.length; i < len ; i++) {
var groupsILength = groups[i].length,
max = groups[i][groupsILength - 1];
if (groupsILength<=2) {
$(groups[i][0][0]).css({'height':'auto'});
continue;
}
/**
* Fires before the heights per row are applied
* @event Equalizer#preequalizedrow
*/
this.$element.trigger('preequalizedrow.zf.equalizer');
for (var j = 0, lenJ = (groupsILength-1); j < lenJ ; j++) {
$(groups[i][j][0]).css({'height':max});
}
/**
* Fires when the heights per row have been applied
* @event Equalizer#postequalizedrow
*/
this.$element.trigger('postequalizedrow.zf.equalizer');
}
/**
* Fires when the heights have been applied
*/
this.$element.trigger('postequalized.zf.equalizer');
}
/**
* Destroys an instance of Equalizer.
* @function
*/
_destroy() {
this._pauseEvents();
this.$watched.css('height', 'auto');
}
}
/**
* Default settings for plugin
*/
Equalizer.defaults = {
/**
* Enable height equalization when stacked on smaller screens.
* @option
* @type {boolean}
* @default false
*/
equalizeOnStack: false,
/**
* Enable height equalization row by row.
* @option
* @type {boolean}
* @default false
*/
equalizeByRow: false,
/**
* String representing the minimum breakpoint size the plugin should equalize heights on.
* @option
* @type {string}
* @default ''
*/
equalizeOn: ''
};
/**
* Interchange module.
* @module foundation.interchange
* @requires foundation.util.mediaQuery
*/
class Interchange extends Plugin {
/**
* Creates a new instance of Interchange.
* @class
* @name Interchange
* @fires Interchange#init
* @param {Object} element - jQuery object to add the trigger to.
* @param {Object} options - Overrides to the default plugin settings.
*/
_setup(element, options) {
this.$element = element;
this.options = $.extend({}, Interchange.defaults, options);
this.rules = [];
this.currentPath = '';
this.className = 'Interchange'; // ie9 back compat
this._init();
this._events();
}
/**
* Initializes the Interchange plugin and calls functions to get interchange functioning on load.
* @function
* @private
*/
_init() {
MediaQuery._init();
var id = this.$element[0].id || GetYoDigits(6, 'interchange');
this.$element.attr({
'data-resize': id,
'id': id
});
this._addBreakpoints();
this._generateRules();
this._reflow();
}
/**
* Initializes events for Interchange.
* @function
* @private
*/
_events() {
this.$element.off('resizeme.zf.trigger').on('resizeme.zf.trigger', () => this._reflow());
}
/**
* Calls necessary functions to update Interchange upon DOM change
* @function
* @private
*/
_reflow() {
var match;
// Iterate through each rule, but only save the last match
for (var i in this.rules) {
if(this.rules.hasOwnProperty(i)) {
var rule = this.rules[i];
if (window.matchMedia(rule.query).matches) {
match = rule;
}
}
}
if (match) {
this.replace(match.path);
}
}
/**
* Gets the Foundation breakpoints and adds them to the Interchange.SPECIAL_QUERIES object.
* @function
* @private
*/
_addBreakpoints() {
for (var i in MediaQuery.queries) {
if (MediaQuery.queries.hasOwnProperty(i)) {
var query = MediaQuery.queries[i];
Interchange.SPECIAL_QUERIES[query.name] = query.value;
}
}
}
/**
* Checks the Interchange element for the provided media query + content pairings
* @function
* @private
* @param {Object} element - jQuery object that is an Interchange instance
* @returns {Array} scenarios - Array of objects that have 'mq' and 'path' keys with corresponding keys
*/
_generateRules(element) {
var rulesList = [];
var rules;
if (this.options.rules) {
rules = this.options.rules;
}
else {
rules = this.$element.data('interchange');
}
rules = typeof rules === 'string' ? rules.match(/\[.*?, .*?\]/g) : rules;
for (var i in rules) {
if(rules.hasOwnProperty(i)) {
var rule = rules[i].slice(1, -1).split(', ');
var path = rule.slice(0, -1).join('');
var query = rule[rule.length - 1];
if (Interchange.SPECIAL_QUERIES[query]) {
query = Interchange.SPECIAL_QUERIES[query];
}
rulesList.push({
path: path,
query: query
});
}
}
this.rules = rulesList;
}
/**
* Update the `src` property of an image, or change the HTML of a container, to the specified path.
* @function
* @param {String} path - Path to the image or HTML partial.
* @fires Interchange#replaced
*/
replace(path) {
if (this.currentPath === path) return;
var _this = this,
trigger = 'replaced.zf.interchange';
// Replacing images
if (this.$element[0].nodeName === 'IMG') {
this.$element.attr('src', path).on('load', function() {
_this.currentPath = path;
})
.trigger(trigger);
}
// Replacing background images
else if (path.match(/\.(gif|jpg|jpeg|png|svg|tiff)([?#].*)?/i)) {
path = path.replace(/\(/g, '%28').replace(/\)/g, '%29');
this.$element.css({ 'background-image': 'url('+path+')' })
.trigger(trigger);
}
// Replacing HTML
else {
$.get(path, function(response) {
_this.$element.html(response)
.trigger(trigger);
$(response).foundation();
_this.currentPath = path;
});
}
/**
* Fires when content in an Interchange element is done being loaded.
* @event Interchange#replaced
*/
// this.$element.trigger('replaced.zf.interchange');
}
/**
* Destroys an instance of interchange.
* @function
*/
_destroy() {
this.$element.off('resizeme.zf.trigger');
}
}
/**
* Default settings for plugin
*/
Interchange.defaults = {
/**
* Rules to be applied to Interchange elements. Set with the `data-interchange` array notation.
* @option
* @type {?array}
* @default null
*/
rules: null
};
Interchange.SPECIAL_QUERIES = {
'landscape': 'screen and (orientation: landscape)',
'portrait': 'screen and (orientation: portrait)',
'retina': 'only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx)'
};
/**
* SmoothScroll module.
* @module foundation.smooth-scroll
*/
class SmoothScroll extends Plugin {
/**
* Creates a new instance of SmoothScroll.
* @class
* @name SmoothScroll
* @fires SmoothScroll#init
* @param {Object} element - jQuery object to add the trigger to.
* @param {Object} options - Overrides to the default plugin settings.
*/
_setup(element, options) {
this.$element = element;
this.options = $.extend({}, SmoothScroll.defaults, this.$element.data(), options);
this.className = 'SmoothScroll'; // ie9 back compat
this._init();
}
/**
* Initialize the SmoothScroll plugin
* @private
*/
_init() {
const id = this.$element[0].id || GetYoDigits(6, 'smooth-scroll');
this.$element.attr({ id });
this._events();
}
/**
* Initializes events for SmoothScroll.
* @private
*/
_events() {
this.$element.on('click.zf.smoothScroll', this._handleLinkClick);
this.$element.on('click.zf.smoothScroll', 'a[href^="#"]', this._handleLinkClick);
}
/**
* Handle the given event to smoothly scroll to the anchor pointed by the event target.
* @param {*} e - event
* @function
* @private
*/
_handleLinkClick(e) {
// Follow the link if it does not point to an anchor.
if (!$(e.currentTarget).is('a[href^="#"]')) return;
const arrival = e.currentTarget.getAttribute('href');
this._inTransition = true;
SmoothScroll.scrollToLoc(arrival, this.options, () => {
this._inTransition = false;
});
e.preventDefault();
};
/**
* Function to scroll to a given location on the page.
* @param {String} loc - A properly formatted jQuery id selector. Example: '#foo'
* @param {Object} options - The options to use.
* @param {Function} callback - The callback function.
* @static
* @function
*/
static scrollToLoc(loc, options = SmoothScroll.defaults, callback) {
const $loc = $(loc);
// Do nothing if target does not exist to prevent errors
if (!$loc.length) return false;
var scrollPos = Math.round($loc.offset().top - options.threshold / 2 - options.offset);
$('html, body').stop(true).animate(
{ scrollTop: scrollPos },
options.animationDuration,
options.animationEasing,
() => {
if (typeof callback === 'function'){
callback();
}
}
);
}
/**
* Destroys the SmoothScroll instance.
* @function
*/
_destroy() {
this.$element.off('click.zf.smoothScroll', this._handleLinkClick);
this.$element.off('click.zf.smoothScroll', 'a[href^="#"]', this._handleLinkClick);
}
}
/**
* Default settings for plugin.
*/
SmoothScroll.defaults = {
/**
* Amount of time, in ms, the animated scrolling should take between locations.
* @option
* @type {number}
* @default 500
*/
animationDuration: 500,
/**
* Animation style to use when scrolling between locations. Can be `'swing'` or `'linear'`.
* @option
* @type {string}
* @default 'linear'
* @see {@link https://api.jquery.com/animate|Jquery animate}
*/
animationEasing: 'linear',
/**
* Number of pixels to use as a marker for location changes.
* @option
* @type {number}
* @default 50
*/
threshold: 50,
/**
* Number of pixels to offset the scroll of the page on item click if using a sticky nav bar.
* @option
* @type {number}
* @default 0
*/
offset: 0
};
/**
* Magellan module.
* @module foundation.magellan
* @requires foundation.smoothScroll
*/
class Magellan extends Plugin {
/**
* Creates a new instance of Magellan.
* @class
* @name Magellan
* @fires Magellan#init
* @param {Object} element - jQuery object to add the trigger to.
* @param {Object} options - Overrides to the default plugin settings.
*/
_setup(element, options) {
this.$element = element;
this.options = $.extend({}, Magellan.defaults, this.$element.data(), options);
this.className = 'Magellan'; // ie9 back compat
this._init();
this.calcPoints();
}
/**
* Initializes the Magellan plugin and calls functions to get equalizer functioning on load.
* @private
*/
_init() {
var id = this.$element[0].id || GetYoDigits(6, 'magellan');
this.$targets = $('[data-magellan-target]');
this.$links = this.$element.find('a');
this.$element.attr({
'data-resize': id,
'data-scroll': id,
'id': id
});
this.$active = $();
this.scrollPos = parseInt(window.pageYOffset, 10);
this._events();
}
/**
* Calculates an array of pixel values that are the demarcation lines between locations on the page.
* Can be invoked if new elements are added or the size of a location changes.
* @function
*/
calcPoints() {
var _this = this,
body = document.body,
html = document.documentElement;
this.points = [];
this.winHeight = Math.round(Math.max(window.innerHeight, html.clientHeight));
this.docHeight = Math.round(Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight));
this.$targets.each(function(){
var $tar = $(this),
pt = Math.round($tar.offset().top - _this.options.threshold);
$tar.targetPoint = pt;
_this.points.push(pt);
});
}
/**
* Initializes events for Magellan.
* @private
*/
_events() {
var _this = this,
$body = $('html, body'),
opts = {
duration: _this.options.animationDuration,
easing: _this.options.animationEasing
};
$(window).one('load', function(){
if(_this.options.deepLinking){
if(location.hash){
_this.scrollToLoc(location.hash);
}
}
_this.calcPoints();
_this._updateActive();
});
_this.onLoadListener = onLoad($(window), function () {
_this.$element
.on({
'resizeme.zf.trigger': _this.reflow.bind(_this),
'scrollme.zf.trigger': _this._updateActive.bind(_this)
})
.on('click.zf.magellan', 'a[href^="#"]', function (e) {
e.preventDefault();
var arrival = this.getAttribute('href');
_this.scrollToLoc(arrival);
});
});
this._deepLinkScroll = function(e) {
if(_this.options.deepLinking) {
_this.scrollToLoc(window.location.hash);
}
};
$(window).on('hashchange', this._deepLinkScroll);
}
/**
* Function to scroll to a given location on the page.
* @param {String} loc - a properly formatted jQuery id selector. Example: '#foo'
* @function
*/
scrollToLoc(loc) {
this._inTransition = true;
var _this = this;
var options = {
animationEasing: this.options.animationEasing,
animationDuration: this.options.animationDuration,
threshold: this.options.threshold,
offset: this.options.offset
};
SmoothScroll.scrollToLoc(loc, options, function() {
_this._inTransition = false;
});
}
/**
* Calls necessary functions to update Magellan upon DOM change
* @function
*/
reflow() {
this.calcPoints();
this._updateActive();
}
/**
* Updates the visibility of an active location link, and updates the url hash for the page, if deepLinking enabled.
* @private
* @function
* @fires Magellan#update
*/
_updateActive(/*evt, elem, scrollPos*/) {
if(this._inTransition) return;
const newScrollPos = parseInt(window.pageYOffset, 10);
const isScrollingUp = this.scrollPos > newScrollPos;
this.scrollPos = newScrollPos;
let activeIdx;
// Before the first point: no link
if(newScrollPos < this.points[0]);
// At the bottom of the page: last link
else if(newScrollPos + this.winHeight === this.docHeight){ activeIdx = this.points.length - 1; }
// Otherwhise, use the last visible link
else{
const visibleLinks = this.points.filter((p, i) => {
return (p - this.options.offset - (isScrollingUp ? this.options.threshold : 0)) <= newScrollPos;
});
activeIdx = visibleLinks.length ? visibleLinks.length - 1 : 0;
}
// Get the new active link
const $oldActive = this.$active;
let activeHash = '';
if(typeof activeIdx !== 'undefined'){
this.$active = this.$links.filter('[href="#' + this.$targets.eq(activeIdx).data('magellan-target') + '"]');
if (this.$active.length) activeHash = this.$active[0].getAttribute('href');
}else{
this.$active = $();
}
const isNewActive = !(!this.$active.length && !$oldActive.length) && !this.$active.is($oldActive);
const isNewHash = activeHash !== window.location.hash;
// Update the active link element
if(isNewActive) {
$oldActive.removeClass(this.options.activeClass);
this.$active.addClass(this.options.activeClass);
}
// Update the hash (it may have changed with the same active link)
if(this.options.deepLinking && isNewHash){
if(window.history.pushState){
// Set or remove the hash (see: https://stackoverflow.com/a/5298684/4317384
const url = activeHash ? activeHash : window.location.pathname + window.location.search;
window.history.pushState(null, null, url);
}else{
window.location.hash = activeHash;
}
}
if (isNewActive) {
/**
* Fires when magellan is finished updating to the new active element.
* @event Magellan#update
*/
this.$element.trigger('update.zf.magellan', [this.$active]);
}
}
/**
* Destroys an instance of Magellan and resets the url of the window.
* @function
*/
_destroy() {
this.$element.off('.zf.trigger .zf.magellan')
.find(`.${this.options.activeClass}`).removeClass(this.options.activeClass);
if(this.options.deepLinking){
var hash = this.$active[0].getAttribute('href');
window.location.hash.replace(hash, '');
}
$(window).off('hashchange', this._deepLinkScroll);
if (this.onLoadListener) $(window).off(this.onLoadListener);
}
}
/**
* Default settings for plugin
*/
Magellan.defaults = {
/**
* Amount of time, in ms, the animated scrolling should take between locations.
* @option
* @type {number}
* @default 500
*/
animationDuration: 500,
/**
* Animation style to use when scrolling between locations. Can be `'swing'` or `'linear'`.
* @option
* @type {string}
* @default 'linear'
* @see {@link https://api.jquery.com/animate|Jquery animate}
*/
animationEasing: 'linear',
/**
* Number of pixels to use as a marker for location changes.
* @option
* @type {number}
* @default 50
*/
threshold: 50,
/**
* Class applied to the active locations link on the magellan container.
* @option
* @type {string}
* @default 'is-active'
*/
activeClass: 'is-active',
/**
* Allows the script to manipulate the url of the current page, and if supported, alter the history.
* @option
* @type {boolean}
* @default false
*/
deepLinking: false,
/**
* Number of pixels to offset the scroll of the page on item click if using a sticky nav bar.
* @option
* @type {number}
* @default 0
*/
offset: 0
};
/**
* OffCanvas module.
* @module foundation.offcanvas
* @requires foundation.util.keyboard
* @requires foundation.util.mediaQuery
* @requires foundation.util.triggers
*/
class OffCanvas extends Plugin {
/**
* Creates a new instance of an off-canvas wrapper.
* @class
* @name OffCanvas
* @fires OffCanvas#init
* @param {Object} element - jQuery object to initialize.
* @param {Object} options - Overrides to the default plugin settings.
*/
_setup(element, options) {
this.className = 'OffCanvas'; // ie9 back compat
this.$element = element;
this.options = $.extend({}, OffCanvas.defaults, this.$element.data(), options);
this.contentClasses = { base: [], reveal: [] };
this.$lastTrigger = $();
this.$triggers = $();
this.position = 'left';
this.$content = $();
this.nested = !!(this.options.nested);
// Defines the CSS transition/position classes of the off-canvas content container.
$(['push', 'overlap']).each((index, val) => {
this.contentClasses.base.push('has-transition-'+val);
});
$(['left', 'right', 'top', 'bottom']).each((index, val) => {
this.contentClasses.base.push('has-position-'+val);
this.contentClasses.reveal.push('has-reveal-'+val);
});
// Triggers init is idempotent, just need to make sure it is initialized
Triggers.init($);
MediaQuery._init();
this._init();
this._events();
Keyboard.register('OffCanvas', {
'ESCAPE': 'close'
});
}
/**
* Initializes the off-canvas wrapper by adding the exit overlay (if needed).
* @function
* @private
*/
_init() {
var id = this.$element.attr('id');
this.$element.attr('aria-hidden', 'true');
// Find off-canvas content, either by ID (if specified), by siblings or by closest selector (fallback)
if (this.options.contentId) {
this.$content = $('#'+this.options.contentId);
} else if (this.$element.siblings('[data-off-canvas-content]').length) {
this.$content = this.$element.siblings('[data-off-canvas-content]').first();
} else {
this.$content = this.$element.closest('[data-off-canvas-content]').first();
}
if (!this.options.contentId) {
// Assume that the off-canvas element is nested if it isn't a sibling of the content
this.nested = this.$element.siblings('[data-off-canvas-content]').length === 0;
} else if (this.options.contentId && this.options.nested === null) {
// Warning if using content ID without setting the nested option
// Once the element is nested it is required to work properly in this case
console.warn('Remember to use the nested option if using the content ID option!');
}
if (this.nested === true) {
// Force transition overlap if nested
this.options.transition = 'overlap';
// Remove appropriate classes if already assigned in markup
this.$element.removeClass('is-transition-push');
}
this.$element.addClass(`is-transition-${this.options.transition} is-closed`);
// Find triggers that affect this element and add aria-expanded to them
this.$triggers = $(document)
.find('[data-open="'+id+'"], [data-close="'+id+'"], [data-toggle="'+id+'"]')
.attr('aria-expanded', 'false')
.attr('aria-controls', id);
// Get position by checking for related CSS class
this.position = this.$element.is('.position-left, .position-top, .position-right, .position-bottom') ? this.$element.attr('class').match(/position\-(left|top|right|bottom)/)[1] : this.position;
// Add an overlay over the content if necessary
if (this.options.contentOverlay === true) {
var overlay = document.createElement('div');
var overlayPosition = $(this.$element).css("position") === 'fixed' ? 'is-overlay-fixed' : 'is-overlay-absolute';
overlay.setAttribute('class', 'js-off-canvas-overlay ' + overlayPosition);
this.$overlay = $(overlay);
if(overlayPosition === 'is-overlay-fixed') {
$(this.$overlay).insertAfter(this.$element);
} else {
this.$content.append(this.$overlay);
}
}
// Get the revealOn option from the class.
var revealOnRegExp = new RegExp(RegExpEscape(this.options.revealClass) + '([^\\s]+)', 'g');
var revealOnClass = revealOnRegExp.exec(this.$element[0].className);
if (revealOnClass) {
this.options.isRevealed = true;
this.options.revealOn = this.options.revealOn || revealOnClass[1];
}
// Ensure the `reveal-on-*` class is set.
if (this.options.isRevealed === true && this.options.revealOn) {
this.$element.first().addClass(`${this.options.revealClass}${this.options.revealOn}`);
this._setMQChecker();
}
if (this.options.transitionTime) {
this.$element.css('transition-duration', this.options.transitionTime);
}
// Initally remove all transition/position CSS classes from off-canvas content container.
this._removeContentClasses();
}
/**
* Adds event handlers to the off-canvas wrapper and the exit overlay.
* @function
* @private
*/
_events() {
this.$element.off('.zf.trigger .zf.offcanvas').on({
'open.zf.trigger': this.open.bind(this),
'close.zf.trigger': this.close.bind(this),
'toggle.zf.trigger': this.toggle.bind(this),
'keydown.zf.offcanvas': this._handleKeyboard.bind(this)
});
if (this.options.closeOnClick === true) {
var $target = this.options.contentOverlay ? this.$overlay : this.$content;
$target.on({'click.zf.offcanvas': this.close.bind(this)});
}
}
/**
* Applies event listener for elements that will reveal at certain breakpoints.
* @private
*/
_setMQChecker() {
var _this = this;
this.onLoadListener = onLoad($(window), function () {
if (MediaQuery.atLeast(_this.options.revealOn)) {
_this.reveal(true);
}
});
$(window).on('changed.zf.mediaquery', function () {
if (MediaQuery.atLeast(_this.options.revealOn)) {
_this.reveal(true);
} else {
_this.reveal(false);
}
});
}
/**
* Removes the CSS transition/position classes of the off-canvas content container.
* Removing the classes is important when another off-canvas gets opened that uses the same content container.
* @param {Boolean} hasReveal - true if related off-canvas element is revealed.
* @private
*/
_removeContentClasses(hasReveal) {
if (typeof hasReveal !== 'boolean') {
this.$content.removeClass(this.contentClasses.base.join(' '));
} else if (hasReveal === false) {
this.$content.removeClass(`has-reveal-${this.position}`);
}
}
/**
* Adds the CSS transition/position classes of the off-canvas content container, based on the opening off-canvas element.
* Beforehand any transition/position class gets removed.
* @param {Boolean} hasReveal - true if related off-canvas element is revealed.
* @private
*/
_addContentClasses(hasReveal) {
this._removeContentClasses(hasReveal);
if (typeof hasReveal !== 'boolean') {
this.$content.addClass(`has-transition-${this.options.transition} has-position-${this.position}`);
} else if (hasReveal === true) {
this.$content.addClass(`has-reveal-${this.position}`);
}
}
/**
* Handles the revealing/hiding the off-canvas at breakpoints, not the same as open.
* @param {Boolean} isRevealed - true if element should be revealed.
* @function
*/
reveal(isRevealed) {
if (isRevealed) {
this.close();
this.isRevealed = true;
this.$element.attr('aria-hidden', 'false');
this.$element.off('open.zf.trigger toggle.zf.trigger');
this.$element.removeClass('is-closed');
} else {
this.isRevealed = false;
this.$element.attr('aria-hidden', 'true');
this.$element.off('open.zf.trigger toggle.zf.trigger').on({
'open.zf.trigger': this.open.bind(this),
'toggle.zf.trigger': this.toggle.bind(this)
});
this.$element.addClass('is-closed');
}
this._addContentClasses(isRevealed);
}
/**
* Stops scrolling of the body when offcanvas is open on mobile Safari and other troublesome browsers.
* @private
*/
_stopScrolling(event) {
return false;
}
// Taken and adapted from http://stackoverflow.com/questions/16889447/prevent-full-page-scrolling-ios
// Only really works for y, not sure how to extend to x or if we need to.
_recordScrollable(event) {
let elem = this; // called from event handler context with this as elem
// If the element is scrollable (content overflows), then...
if (elem.scrollHeight !== elem.clientHeight) {
// If we're at the top, scroll down one pixel to allow scrolling up
if (elem.scrollTop === 0) {
elem.scrollTop = 1;
}
// If we're at the bottom, scroll up one pixel to allow scrolling down
if (elem.scrollTop === elem.scrollHeight - elem.clientHeight) {
elem.scrollTop = elem.scrollHeight - elem.clientHeight - 1;
}
}
elem.allowUp = elem.scrollTop > 0;
elem.allowDown = elem.scrollTop < (elem.scrollHeight - elem.clientHeight);
elem.lastY = event.originalEvent.pageY;
}
_stopScrollPropagation(event) {
let elem = this; // called from event handler context with this as elem
let up = event.pageY < elem.lastY;
let down = !up;
elem.lastY = event.pageY;
if((up && elem.allowUp) || (down && elem.allowDown)) {
event.stopPropagation();
} else {
event.preventDefault();
}
}
/**
* Opens the off-canvas menu.
* @function
* @param {Object} event - Event object passed from listener.
* @param {jQuery} trigger - element that triggered the off-canvas to open.
* @fires Offcanvas#opened
* @todo also trigger 'open' event?
*/
open(event, trigger) {
if (this.$element.hasClass('is-open') || this.isRevealed) { return; }
var _this = this;
if (trigger) {
this.$lastTrigger = trigger;
}
if (this.options.forceTo === 'top') {
window.scrollTo(0, 0);
} else if (this.options.forceTo === 'bottom') {
window.scrollTo(0,document.body.scrollHeight);
}
if (this.options.transitionTime && this.options.transition !== 'overlap') {
this.$element.siblings('[data-off-canvas-content]').css('transition-duration', this.options.transitionTime);
} else {
this.$element.siblings('[data-off-canvas-content]').css('transition-duration', '');
}
this.$element.addClass('is-open').removeClass('is-closed');
this.$triggers.attr('aria-expanded', 'true');
this.$element.attr('aria-hidden', 'false');
this.$content.addClass('is-open-' + this.position);
// If `contentScroll` is set to false, add class and disable scrolling on touch devices.
if (this.options.contentScroll === false) {
$('body').addClass('is-off-canvas-open').on('touchmove', this._stopScrolling);
this.$element.on('touchstart', this._recordScrollable);
this.$element.on('touchmove', this._stopScrollPropagation);
}
if (this.options.contentOverlay === true) {
this.$overlay.addClass('is-visible');
}
if (this.options.closeOnClick === true && this.options.contentOverlay === true) {
this.$overlay.addClass('is-closable');
}
if (this.options.autoFocus === true) {
this.$element.one(transitionend(this.$element), function() {
if (!_this.$element.hasClass('is-open')) {
return; // exit if prematurely closed
}
var canvasFocus = _this.$element.find('[data-autofocus]');
if (canvasFocus.length) {
canvasFocus.eq(0).focus();
} else {
_this.$element.find('a, button').eq(0).focus();
}
});
}
if (this.options.trapFocus === true) {
this.$content.attr('tabindex', '-1');
Keyboard.trapFocus(this.$element);
}
this._addContentClasses();
/**
* Fires when the off-canvas menu opens.
* @event Offcanvas#opened
*/
this.$element.trigger('opened.zf.offcanvas');
}
/**
* Closes the off-canvas menu.
* @function
* @param {Function} cb - optional cb to fire after closure.
* @fires Offcanvas#closed
*/
close(cb) {
if (!this.$element.hasClass('is-open') || this.isRevealed) { return; }
var _this = this;
this.$element.removeClass('is-open');
this.$element.attr('aria-hidden', 'true')
/**
* Fires when the off-canvas menu opens.
* @event Offcanvas#closed
*/
.trigger('closed.zf.offcanvas');
this.$content.removeClass('is-open-left is-open-top is-open-right is-open-bottom');
// If `contentScroll` is set to false, remove class and re-enable scrolling on touch devices.
if (this.options.contentScroll === false) {
$('body').removeClass('is-off-canvas-open').off('touchmove', this._stopScrolling);
this.$element.off('touchstart', this._recordScrollable);
this.$element.off('touchmove', this._stopScrollPropagation);
}
if (this.options.contentOverlay === true) {
this.$overlay.removeClass('is-visible');
}
if (this.options.closeOnClick === true && this.options.contentOverlay === true) {
this.$overlay.removeClass('is-closable');
}
this.$triggers.attr('aria-expanded', 'false');
if (this.options.trapFocus === true) {
this.$content.removeAttr('tabindex');
Keyboard.releaseFocus(this.$element);
}
// Listen to transitionEnd and add class when done.
this.$element.one(transitionend(this.$element), function(e) {
_this.$element.addClass('is-closed');
_this._removeContentClasses();
});
}
/**
* Toggles the off-canvas menu open or closed.
* @function
* @param {Object} event - Event object passed from listener.
* @param {jQuery} trigger - element that triggered the off-canvas to open.
*/
toggle(event, trigger) {
if (this.$element.hasClass('is-open')) {
this.close(event, trigger);
}
else {
this.open(event, trigger);
}
}
/**
* Handles keyboard input when detected. When the escape key is pressed, the off-canvas menu closes, and focus is restored to the element that opened the menu.
* @function
* @private
*/
_handleKeyboard(e) {
Keyboard.handleKey(e, 'OffCanvas', {
close: () => {
this.close();
this.$lastTrigger.focus();
return true;
},
handled: () => {
e.stopPropagation();
e.preventDefault();
}
});
}
/**
* Destroys the offcanvas plugin.
* @function
*/
_destroy() {
this.close();
this.$element.off('.zf.trigger .zf.offcanvas');
this.$overlay.off('.zf.offcanvas');
if (this.onLoadListener) $(window).off(this.onLoadListener);
}
}
OffCanvas.defaults = {
/**
* Allow the user to click outside of the menu to close it.
* @option
* @type {boolean}
* @default true
*/
closeOnClick: true,
/**
* Adds an overlay on top of `[data-off-canvas-content]`.
* @option
* @type {boolean}
* @default true
*/
contentOverlay: true,
/**
* Target an off-canvas content container by ID that may be placed anywhere. If null the closest content container will be taken.
* @option
* @type {?string}
* @default null
*/
contentId: null,
/**
* Define the off-canvas element is nested in an off-canvas content. This is required when using the contentId option for a nested element.
* @option
* @type {boolean}
* @default null
*/
nested: null,
/**
* Enable/disable scrolling of the main content when an off canvas panel is open.
* @option
* @type {boolean}
* @default true
*/
contentScroll: true,
/**
* Amount of time in ms the open and close transition requires. If none selected, pulls from body style.
* @option
* @type {number}
* @default null
*/
transitionTime: null,
/**
* Type of transition for the offcanvas menu. Options are 'push', 'detached' or 'slide'.
* @option
* @type {string}
* @default push
*/
transition: 'push',
/**
* Force the page to scroll to top or bottom on open.
* @option
* @type {?string}
* @default null
*/
forceTo: null,
/**
* Allow the offcanvas to remain open for certain breakpoints.
* @option
* @type {boolean}
* @default false
*/
isRevealed: false,
/**
* Breakpoint at which to reveal. JS will use a RegExp to target standard classes, if changing classnames, pass your class with the `revealClass` option.
* @option
* @type {?string}
* @default null
*/
revealOn: null,
/**
* Force focus to the offcanvas on open. If true, will focus the opening trigger on close.
* @option
* @type {boolean}
* @default true
*/
autoFocus: true,
/**
* Class used to force an offcanvas to remain open. Foundation defaults for this are `reveal-for-large` & `reveal-for-medium`.
* @option
* @type {string}
* @default reveal-for-
* @todo improve the regex testing for this.
*/
revealClass: 'reveal-for-',
/**
* Triggers optional focus trapping when opening an offcanvas. Sets tabindex of [data-off-canvas-content] to -1 for accessibility purposes.
* @option
* @type {boolean}
* @default false
*/
trapFocus: false
};
/**
* Orbit module.
* @module foundation.orbit
* @requires foundation.util.keyboard
* @requires foundation.util.motion
* @requires foundation.util.timer
* @requires foundation.util.imageLoader
* @requires foundation.util.touch
*/
class Orbit extends Plugin {
/**
* Creates a new instance of an orbit carousel.
* @class
* @name Orbit
* @param {jQuery} element - jQuery object to make into an Orbit Carousel.
* @param {Object} options - Overrides to the default plugin settings.
*/
_setup(element, options){
this.$element = element;
this.options = $.extend({}, Orbit.defaults, this.$element.data(), options);
this.className = 'Orbit'; // ie9 back compat
Touch.init($); // Touch init is idempotent, we just need to make sure it's initialied.
this._init();
Keyboard.register('Orbit', {
'ltr': {
'ARROW_RIGHT': 'next',
'ARROW_LEFT': 'previous'
},
'rtl': {
'ARROW_LEFT': 'next',
'ARROW_RIGHT': 'previous'
}
});
}
/**
* Initializes the plugin by creating jQuery collections, setting attributes, and starting the animation.
* @function
* @private
*/
_init() {
// @TODO: consider discussion on PR #9278 about DOM pollution by changeSlide
this._reset();
this.$wrapper = this.$element.find(`.${this.options.containerClass}`);
this.$slides = this.$element.find(`.${this.options.slideClass}`);
var $images = this.$element.find('img'),
initActive = this.$slides.filter('.is-active'),
id = this.$element[0].id || GetYoDigits(6, 'orbit');
this.$element.attr({
'data-resize': id,
'id': id
});
if (!initActive.length) {
this.$slides.eq(0).addClass('is-active');
}
if (!this.options.useMUI) {
this.$slides.addClass('no-motionui');
}
if ($images.length) {
onImagesLoaded($images, this._prepareForOrbit.bind(this));
} else {
this._prepareForOrbit();//hehe
}
if (this.options.bullets) {
this._loadBullets();
}
this._events();
if (this.options.autoPlay && this.$slides.length > 1) {
this.geoSync();
}
if (this.options.accessible) { // allow wrapper to be focusable to enable arrow navigation
this.$wrapper.attr('tabindex', 0);
}
}
/**
* Creates a jQuery collection of bullets, if they are being used.
* @function
* @private
*/
_loadBullets() {
this.$bullets = this.$element.find(`.${this.options.boxOfBullets}`).find('button');
}
/**
* Sets a `timer` object on the orbit, and starts the counter for the next slide.
* @function
*/
geoSync() {
var _this = this;
this.timer = new Timer(
this.$element,
{
duration: this.options.timerDelay,
infinite: false
},
function() {
_this.changeSlide(true);
});
this.timer.start();
}
/**
* Sets wrapper and slide heights for the orbit.
* @function
* @private
*/
_prepareForOrbit() {
this._setWrapperHeight();
}
/**
* Calulates the height of each slide in the collection, and uses the tallest one for the wrapper height.
* @function
* @private
* @param {Function} cb - a callback function to fire when complete.
*/
_setWrapperHeight(cb) {//rewrite this to `for` loop
var max = 0, temp, counter = 0, _this = this;
this.$slides.each(function() {
temp = this.getBoundingClientRect().height;
$(this).attr('data-slide', counter);
// hide all slides but the active one
if (!/mui/g.test($(this)[0].className) && _this.$slides.filter('.is-active')[0] !== _this.$slides.eq(counter)[0]) {
$(this).css({'display': 'none'});
}
max = temp > max ? temp : max;
counter++;
});
if (counter === this.$slides.length) {
this.$wrapper.css({'height': max}); //only change the wrapper height property once.
if(cb) {cb(max);} //fire callback with max height dimension.
}
}
/**
* Sets the max-height of each slide.
* @function
* @private
*/
_setSlideHeight(height) {
this.$slides.each(function() {
$(this).css('max-height', height);
});
}
/**
* Adds event listeners to basically everything within the element.
* @function
* @private
*/
_events() {
var _this = this;
//***************************************
//**Now using custom event - thanks to:**
//** Yohai Ararat of Toronto **
//***************************************
//
this.$element.off('.resizeme.zf.trigger').on({
'resizeme.zf.trigger': this._prepareForOrbit.bind(this)
});
if (this.$slides.length > 1) {
if (this.options.swipe) {
this.$slides.off('swipeleft.zf.orbit swiperight.zf.orbit')
.on('swipeleft.zf.orbit', function(e){
e.preventDefault();
_this.changeSlide(true);
}).on('swiperight.zf.orbit', function(e){
e.preventDefault();
_this.changeSlide(false);
});
}
//***************************************
if (this.options.autoPlay) {
this.$slides.on('click.zf.orbit', function() {
_this.$element.data('clickedOn', _this.$element.data('clickedOn') ? false : true);
_this.timer[_this.$element.data('clickedOn') ? 'pause' : 'start']();
});
if (this.options.pauseOnHover) {
this.$element.on('mouseenter.zf.orbit', function() {
_this.timer.pause();
}).on('mouseleave.zf.orbit', function() {
if (!_this.$element.data('clickedOn')) {
_this.timer.start();
}
});
}
}
if (this.options.navButtons) {
var $controls = this.$element.find(`.${this.options.nextClass}, .${this.options.prevClass}`);
$controls.attr('tabindex', 0)
//also need to handle enter/return and spacebar key presses
.on('click.zf.orbit touchend.zf.orbit', function(e){
e.preventDefault();
_this.changeSlide($(this).hasClass(_this.options.nextClass));
});
}
if (this.options.bullets) {
this.$bullets.on('click.zf.orbit touchend.zf.orbit', function() {
if (/is-active/g.test(this.className)) { return false; }//if this is active, kick out of function.
var idx = $(this).data('slide'),
ltr = idx > _this.$slides.filter('.is-active').data('slide'),
$slide = _this.$slides.eq(idx);
_this.changeSlide(ltr, $slide, idx);
});
}
if (this.options.accessible) {
this.$wrapper.add(this.$bullets).on('keydown.zf.orbit', function(e) {
// handle keyboard event with keyboard util
Keyboard.handleKey(e, 'Orbit', {
next: function() {
_this.changeSlide(true);
},
previous: function() {
_this.changeSlide(false);
},
handled: function() { // if bullet is focused, make sure focus moves
if ($(e.target).is(_this.$bullets)) {
_this.$bullets.filter('.is-active').focus();
}
}
});
});
}
}
}
/**
* Resets Orbit so it can be reinitialized
*/
_reset() {
// Don't do anything if there are no slides (first run)
if (typeof this.$slides == 'undefined') {
return;
}
if (this.$slides.length > 1) {
// Remove old events
this.$element.off('.zf.orbit').find('*').off('.zf.orbit');
// Restart timer if autoPlay is enabled
if (this.options.autoPlay) {
this.timer.restart();
}
// Reset all sliddes
this.$slides.each(function(el) {
$(el).removeClass('is-active is-active is-in')
.removeAttr('aria-live')
.hide();
});
// Show the first slide
this.$slides.first().addClass('is-active').show();
// Triggers when the slide has finished animating
this.$element.trigger('slidechange.zf.orbit', [this.$slides.first()]);
// Select first bullet if bullets are present
if (this.options.bullets) {
this._updateBullets(0);
}
}
}
/**
* Changes the current slide to a new one.
* @function
* @param {Boolean} isLTR - if true the slide moves from right to left, if false the slide moves from left to right.
* @param {jQuery} chosenSlide - the jQuery element of the slide to show next, if one is selected.
* @param {Number} idx - the index of the new slide in its collection, if one chosen.
* @fires Orbit#slidechange
*/
changeSlide(isLTR, chosenSlide, idx) {
if (!this.$slides) {return; } // Don't freak out if we're in the middle of cleanup
var $curSlide = this.$slides.filter('.is-active').eq(0);
if (/mui/g.test($curSlide[0].className)) { return false; } //if the slide is currently animating, kick out of the function
var $firstSlide = this.$slides.first(),
$lastSlide = this.$slides.last(),
dirIn = isLTR ? 'Right' : 'Left',
dirOut = isLTR ? 'Left' : 'Right',
_this = this,
$newSlide;
if (!chosenSlide) { //most of the time, this will be auto played or clicked from the navButtons.
$newSlide = isLTR ? //if wrapping enabled, check to see if there is a `next` or `prev` sibling, if not, select the first or last slide to fill in. if wrapping not enabled, attempt to select `next` or `prev`, if there's nothing there, the function will kick out on next step. CRAZY NESTED TERNARIES!!!!!
(this.options.infiniteWrap ? $curSlide.next(`.${this.options.slideClass}`).length ? $curSlide.next(`.${this.options.slideClass}`) : $firstSlide : $curSlide.next(`.${this.options.slideClass}`))//pick next slide if moving left to right
:
(this.options.infiniteWrap ? $curSlide.prev(`.${this.options.slideClass}`).length ? $curSlide.prev(`.${this.options.slideClass}`) : $lastSlide : $curSlide.prev(`.${this.options.slideClass}`));//pick prev slide if moving right to left
} else {
$newSlide = chosenSlide;
}
if ($newSlide.length) {
/**
* Triggers before the next slide starts animating in and only if a next slide has been found.
* @event Orbit#beforeslidechange
*/
this.$element.trigger('beforeslidechange.zf.orbit', [$curSlide, $newSlide]);
if (this.options.bullets) {
idx = idx || this.$slides.index($newSlide); //grab index to update bullets
this._updateBullets(idx);
}
if (this.options.useMUI && !this.$element.is(':hidden')) {
Motion.animateIn(
$newSlide.addClass('is-active'),
this.options[`animInFrom${dirIn}`],
function(){
$newSlide.css({'display': 'block'}).attr('aria-live', 'polite');
});
Motion.animateOut(
$curSlide.removeClass('is-active'),
this.options[`animOutTo${dirOut}`],
function(){
$curSlide.removeAttr('aria-live');
if(_this.options.autoPlay && !_this.timer.isPaused){
_this.timer.restart();
}
//do stuff?
});
} else {
$curSlide.removeClass('is-active is-in').removeAttr('aria-live').hide();
$newSlide.addClass('is-active is-in').attr('aria-live', 'polite').show();
if (this.options.autoPlay && !this.timer.isPaused) {
this.timer.restart();
}
}
/**
* Triggers when the slide has finished animating in.
* @event Orbit#slidechange
*/
this.$element.trigger('slidechange.zf.orbit', [$newSlide]);
}
}
/**
* Updates the active state of the bullets, if displayed.
* @function
* @private
* @param {Number} idx - the index of the current slide.
*/
_updateBullets(idx) {
var $oldBullet = this.$element.find(`.${this.options.boxOfBullets}`)
.find('.is-active').removeClass('is-active').blur(),
span = $oldBullet.find('span:last').detach(),
$newBullet = this.$bullets.eq(idx).addClass('is-active').append(span);
}
/**
* Destroys the carousel and hides the element.
* @function
*/
_destroy() {
this.$element.off('.zf.orbit').find('*').off('.zf.orbit').end().hide();
}
}
Orbit.defaults = {
/**
* Tells the JS to look for and loadBullets.
* @option
* @type {boolean}
* @default true
*/
bullets: true,
/**
* Tells the JS to apply event listeners to nav buttons
* @option
* @type {boolean}
* @default true
*/
navButtons: true,
/**
* motion-ui animation class to apply
* @option
* @type {string}
* @default 'slide-in-right'
*/
animInFromRight: 'slide-in-right',
/**
* motion-ui animation class to apply
* @option
* @type {string}
* @default 'slide-out-right'
*/
animOutToRight: 'slide-out-right',
/**
* motion-ui animation class to apply
* @option
* @type {string}
* @default 'slide-in-left'
*
*/
animInFromLeft: 'slide-in-left',
/**
* motion-ui animation class to apply
* @option
* @type {string}
* @default 'slide-out-left'
*/
animOutToLeft: 'slide-out-left',
/**
* Allows Orbit to automatically animate on page load.
* @option
* @type {boolean}
* @default true
*/
autoPlay: true,
/**
* Amount of time, in ms, between slide transitions
* @option
* @type {number}
* @default 5000
*/
timerDelay: 5000,
/**
* Allows Orbit to infinitely loop through the slides
* @option
* @type {boolean}
* @default true
*/
infiniteWrap: true,
/**
* Allows the Orbit slides to bind to swipe events for mobile, requires an additional util library
* @option
* @type {boolean}
* @default true
*/
swipe: true,
/**
* Allows the timing function to pause animation on hover.
* @option
* @type {boolean}
* @default true
*/
pauseOnHover: true,
/**
* Allows Orbit to bind keyboard events to the slider, to animate frames with arrow keys
* @option
* @type {boolean}
* @default true
*/
accessible: true,
/**
* Class applied to the container of Orbit
* @option
* @type {string}
* @default 'orbit-container'
*/
containerClass: 'orbit-container',
/**
* Class applied to individual slides.
* @option
* @type {string}
* @default 'orbit-slide'
*/
slideClass: 'orbit-slide',
/**
* Class applied to the bullet container. You're welcome.
* @option
* @type {string}
* @default 'orbit-bullets'
*/
boxOfBullets: 'orbit-bullets',
/**
* Class applied to the `next` navigation button.
* @option
* @type {string}
* @default 'orbit-next'
*/
nextClass: 'orbit-next',
/**
* Class applied to the `previous` navigation button.
* @option
* @type {string}
* @default 'orbit-previous'
*/
prevClass: 'orbit-previous',
/**
* Boolean to flag the js to use motion ui classes or not. Default to true for backwards compatibility.
* @option
* @type {boolean}
* @default true
*/
useMUI: true
};
let MenuPlugins = {
dropdown: {
cssClass: 'dropdown',
plugin: DropdownMenu
},
drilldown: {
cssClass: 'drilldown',
plugin: Drilldown
},
accordion: {
cssClass: 'accordion-menu',
plugin: AccordionMenu
}
};
// import "foundation.util.triggers.js";
/**
* ResponsiveMenu module.
* @module foundation.responsiveMenu
* @requires foundation.util.triggers
* @requires foundation.util.mediaQuery
*/
class ResponsiveMenu extends Plugin {
/**
* Creates a new instance of a responsive menu.
* @class
* @name ResponsiveMenu
* @fires ResponsiveMenu#init
* @param {jQuery} element - jQuery object to make into a dropdown menu.
* @param {Object} options - Overrides to the default plugin settings.
*/
_setup(element, options) {
this.$element = $(element);
this.rules = this.$element.data('responsive-menu');
this.currentMq = null;
this.currentPlugin = null;
this.className = 'ResponsiveMenu'; // ie9 back compat
this._init();
this._events();
}
/**
* Initializes the Menu by parsing the classes from the 'data-ResponsiveMenu' attribute on the element.
* @function
* @private
*/
_init() {
MediaQuery._init();
// The first time an Interchange plugin is initialized, this.rules is converted from a string of "classes" to an object of rules
if (typeof this.rules === 'string') {
let rulesTree = {};
// Parse rules from "classes" pulled from data attribute
let rules = this.rules.split(' ');
// Iterate through every rule found
for (let i = 0; i < rules.length; i++) {
let rule = rules[i].split('-');
let ruleSize = rule.length > 1 ? rule[0] : 'small';
let rulePlugin = rule.length > 1 ? rule[1] : rule[0];
if (MenuPlugins[rulePlugin] !== null) {
rulesTree[ruleSize] = MenuPlugins[rulePlugin];
}
}
this.rules = rulesTree;
}
if (!$.isEmptyObject(this.rules)) {
this._checkMediaQueries();
}
// Add data-mutate since children may need it.
this.$element.attr('data-mutate', (this.$element.attr('data-mutate') || GetYoDigits(6, 'responsive-menu')));
}
/**
* Initializes events for the Menu.
* @function
* @private
*/
_events() {
var _this = this;
$(window).on('changed.zf.mediaquery', function() {
_this._checkMediaQueries();
});
// $(window).on('resize.zf.ResponsiveMenu', function() {
// _this._checkMediaQueries();
// });
}
/**
* Checks the current screen width against available media queries. If the media query has changed, and the plugin needed has changed, the plugins will swap out.
* @function
* @private
*/
_checkMediaQueries() {
var matchedMq, _this = this;
// Iterate through each rule and find the last matching rule
$.each(this.rules, function(key) {
if (MediaQuery.atLeast(key)) {
matchedMq = key;
}
});
// No match? No dice
if (!matchedMq) return;
// Plugin already initialized? We good
if (this.currentPlugin instanceof this.rules[matchedMq].plugin) return;
// Remove existing plugin-specific CSS classes
$.each(MenuPlugins, function(key, value) {
_this.$element.removeClass(value.cssClass);
});
// Add the CSS class for the new plugin
this.$element.addClass(this.rules[matchedMq].cssClass);
// Create an instance of the new plugin
if (this.currentPlugin) this.currentPlugin.destroy();
this.currentPlugin = new this.rules[matchedMq].plugin(this.$element, {});
}
/**
* Destroys the instance of the current plugin on this element, as well as the window resize handler that switches the plugins out.
* @function
*/
_destroy() {
this.currentPlugin.destroy();
$(window).off('.zf.ResponsiveMenu');
}
}
ResponsiveMenu.defaults = {};
/**
* ResponsiveToggle module.
* @module foundation.responsiveToggle
* @requires foundation.util.mediaQuery
* @requires foundation.util.motion
*/
class ResponsiveToggle extends Plugin {
/**
* Creates a new instance of Tab Bar.
* @class
* @name ResponsiveToggle
* @fires ResponsiveToggle#init
* @param {jQuery} element - jQuery object to attach tab bar functionality to.
* @param {Object} options - Overrides to the default plugin settings.
*/
_setup(element, options) {
this.$element = $(element);
this.options = $.extend({}, ResponsiveToggle.defaults, this.$element.data(), options);
this.className = 'ResponsiveToggle'; // ie9 back compat
this._init();
this._events();
}
/**
* Initializes the tab bar by finding the target element, toggling element, and running update().
* @function
* @private
*/
_init() {
MediaQuery._init();
var targetID = this.$element.data('responsive-toggle');
if (!targetID) {
console.error('Your tab bar needs an ID of a Menu as the value of data-tab-bar.');
}
this.$targetMenu = $(`#${targetID}`);
this.$toggler = this.$element.find('[data-toggle]').filter(function() {
var target = $(this).data('toggle');
return (target === targetID || target === "");
});
this.options = $.extend({}, this.options, this.$targetMenu.data());
// If they were set, parse the animation classes
if(this.options.animate) {
let input = this.options.animate.split(' ');
this.animationIn = input[0];
this.animationOut = input[1] || null;
}
this._update();
}
/**
* Adds necessary event handlers for the tab bar to work.
* @function
* @private
*/
_events() {
this._updateMqHandler = this._update.bind(this);
$(window).on('changed.zf.mediaquery', this._updateMqHandler);
this.$toggler.on('click.zf.responsiveToggle', this.toggleMenu.bind(this));
}
/**
* Checks the current media query to determine if the tab bar should be visible or hidden.
* @function
* @private
*/
_update() {
// Mobile
if (!MediaQuery.atLeast(this.options.hideFor)) {
this.$element.show();
this.$targetMenu.hide();
}
// Desktop
else {
this.$element.hide();
this.$targetMenu.show();
}
}
/**
* Toggles the element attached to the tab bar. The toggle only happens if the screen is small enough to allow it.
* @function
* @fires ResponsiveToggle#toggled
*/
toggleMenu() {
if (!MediaQuery.atLeast(this.options.hideFor)) {
/**
* Fires when the element attached to the tab bar toggles.
* @event ResponsiveToggle#toggled
*/
if(this.options.animate) {
if (this.$targetMenu.is(':hidden')) {
Motion.animateIn(this.$targetMenu, this.animationIn, () => {
this.$element.trigger('toggled.zf.responsiveToggle');
this.$targetMenu.find('[data-mutate]').triggerHandler('mutateme.zf.trigger');
});
}
else {
Motion.animateOut(this.$targetMenu, this.animationOut, () => {
this.$element.trigger('toggled.zf.responsiveToggle');
});
}
}
else {
this.$targetMenu.toggle(0);
this.$targetMenu.find('[data-mutate]').trigger('mutateme.zf.trigger');
this.$element.trigger('toggled.zf.responsiveToggle');
}
}
};
_destroy() {
this.$element.off('.zf.responsiveToggle');
this.$toggler.off('.zf.responsiveToggle');
$(window).off('changed.zf.mediaquery', this._updateMqHandler);
}
}
ResponsiveToggle.defaults = {
/**
* The breakpoint after which the menu is always shown, and the tab bar is hidden.
* @option
* @type {string}
* @default 'medium'
*/
hideFor: 'medium',
/**
* To decide if the toggle should be animated or not.
* @option
* @type {boolean}
* @default false
*/
animate: false
};
/**
* Reveal module.
* @module foundation.reveal
* @requires foundation.util.keyboard
* @requires foundation.util.triggers
* @requires foundation.util.mediaQuery
* @requires foundation.util.motion if using animations
*/
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.
*/
_setup(element, options) {
this.$element = element;
this.options = $.extend({}, Reveal.defaults, this.$element.data(), options);
this.className = 'Reveal'; // ie9 back compat
this._init();
// 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: MediaQuery.current};
this.$anchor = $(`[data-open="${this.id}"]`).length ? $(`[data-open="${this.id}"]`) : $(`[data-toggle="${this.id}"]`);
this.$anchor.attr({
'aria-controls': this.id,
'aria-haspopup': true,
'tabindex': 0
});
if (this.options.fullScreen || this.$element.hasClass('full')) {
this.options.fullScreen = true;
this.options.overlay = false;
}
if (this.options.overlay && !this.$overlay) {
this.$overlay = this._makeOverlay(this.id);
}
this.$element.attr({
'role': 'dialog',
'aria-hidden': true,
'data-yeti-box': this.id,
'data-resize': this.id
});
if(this.$overlay) {
this.$element.detach().appendTo(this.$overlay);
} else {
this.$element.detach().appendTo($(this.options.appendTo));
this.$element.addClass('without-overlay');
}
this._events();
if (this.options.deepLink && window.location.hash === ( `#${this.id}`)) {
this.onLoadListener = onLoad($(window), () => this.open());
}
}
/**
* Creates an overlay div to display behind the modal.
* @private
*/
_makeOverlay() {
var additionalOverlayClasses = '';
if (this.options.additionalOverlayClasses) {
additionalOverlayClasses = ' ' + this.options.additionalOverlayClasses;
}
return $('
')
.addClass('reveal-overlay' + additionalOverlayClasses)
.appendTo(this.options.appendTo);
}
/**
* Updates position of modal
* TODO: Figure out if we actually need to cache these values or if it doesn't matter
* @private
*/
_updatePosition() {
var width = this.$element.outerWidth();
var outerWidth = $(window).width();
var height = this.$element.outerHeight();
var outerHeight = $(window).height();
var left, top = null;
if (this.options.hOffset === 'auto') {
left = parseInt((outerWidth - width) / 2, 10);
} else {
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 if (this.options.vOffset !== null) {
top = parseInt(this.options.vOffset, 10);
}
if (top !== null) {
this.$element.css({top: top + 'px'});
}
// only worry about left if we don't have an overlay or we have a 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'});
}
}
/**
* Adds event handlers for the modal.
* @private
*/
_events() {
var _this = this;
this.$element.on({
'open.zf.trigger': this.open.bind(this),
'close.zf.trigger': (event, $element) => {
if ((event.target === _this.$element[0]) ||
($(event.target).parents('[data-closable]')[0] === $element)) { // only close reveal when it's explicitly called
return this.close.apply(this);
}
},
'toggle.zf.trigger': this.toggle.bind(this),
'resizeme.zf.trigger': function() {
_this._updatePosition();
}
});
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)) {
return;
}
_this.close();
});
}
if (this.options.deepLink) {
$(window).on(`hashchange.zf.reveal:${this.id}`, this._handleState.bind(this));
}
}
/**
* Handles modal methods on back/forward button clicks or any other event that triggers hashchange.
* @private
*/
_handleState(e) {
if(window.location.hash === ( '#' + this.id) && !this.isActive){ this.open(); }
else{ this.close(); }
}
/**
* Disables the scroll when Reveal is shown to prevent the background from shifting
* @param {number} scrollTop - Scroll to visually apply, window current scroll by default
*/
_disableScroll(scrollTop) {
scrollTop = scrollTop || $(window).scrollTop();
if ($(document).height() > $(window).height()) {
$("html")
.css("top", -scrollTop);
}
}
/**
* Reenables the scroll when Reveal closes
* @param {number} scrollTop - Scroll to restore, html "top" property by default (as set by `_disableScroll`)
*/
_enableScroll(scrollTop) {
scrollTop = scrollTop || parseInt($("html").css("top"));
if ($(document).height() > $(window).height()) {
$("html")
.css("top", "");
$(window).scrollTop(-scrollTop);
}
}
/**
* Opens the modal controlled by `this.$anchor`, and closes all others by default.
* @function
* @fires Reveal#closeme
* @fires Reveal#open
*/
open() {
// either update or replace browser history
const hash = `#${this.id}`;
if (this.options.deepLink && window.location.hash !== hash) {
if (window.history.pushState) {
if (this.options.updateHistory) {
window.history.pushState({}, '', hash);
} else {
window.history.replaceState({}, '', hash);
}
} else {
window.location.hash = hash;
}
}
// Remember anchor that opened it to set focus back later, have general anchors as fallback
this.$activeAnchor = $(document.activeElement).is(this.$anchor) ? $(document.activeElement) : this.$anchor;
this.isActive = true;
// Make elements invisible, but remove display: none so we can get size and positioning
this.$element
.css({ 'visibility': 'hidden' })
.show()
.scrollTop(0);
if (this.options.overlay) {
this.$overlay.css({'visibility': 'hidden'}).show();
}
this._updatePosition();
this.$element
.hide()
.css({ 'visibility': '' });
if(this.$overlay) {
this.$overlay.css({'visibility': ''}).hide();
if(this.$element.hasClass('fast')) {
this.$overlay.addClass('fast');
} else if (this.$element.hasClass('slow')) {
this.$overlay.addClass('slow');
}
}
if (!this.options.multipleOpened) {
/**
* Fires immediately before the modal opens.
* Closes any other modals that are currently open
* @event Reveal#closeme
*/
this.$element.trigger('closeme.zf.reveal', this.id);
}
this._disableScroll();
var _this = this;
// Motion UI method of reveal
if (this.options.animationIn) {
function afterAnimation(){
_this.$element
.attr({
'aria-hidden': false,
'tabindex': -1
})
.focus();
_this._addGlobalClasses();
Keyboard.trapFocus(_this.$element);
}
if (this.options.overlay) {
Motion.animateIn(this.$overlay, 'fade-in');
}
Motion.animateIn(this.$element, this.options.animationIn, () => {
if(this.$element) { // protect against object having been removed
this.focusableElements = Keyboard.findFocusable(this.$element);
afterAnimation();
}
});
}
// jQuery method of reveal
else {
if (this.options.overlay) {
this.$overlay.show(0);
}
this.$element.show(this.options.showDelay);
}
// handle accessibility
this.$element
.attr({
'aria-hidden': false,
'tabindex': -1
})
.focus();
Keyboard.trapFocus(this.$element);
this._addGlobalClasses();
this._addGlobalListeners();
/**
* Fires when the modal has successfully opened.
* @event Reveal#open
*/
this.$element.trigger('open.zf.reveal');
}
/**
* Adds classes and listeners on document required by open modals.
*
* The following classes are added and updated:
* - `.is-reveal-open` - Prevents the scroll on document
* - `.zf-has-scroll` - Displays a disabled scrollbar on document if required like if the
* scroll was not disabled. This prevent a "shift" of the page content due
* the scrollbar disappearing when the modal opens.
*
* @private
*/
_addGlobalClasses() {
const updateScrollbarClass = () => {
$('html').toggleClass('zf-has-scroll', !!($(document).height() > $(window).height()));
};
this.$element.on('resizeme.zf.trigger.revealScrollbarListener', () => updateScrollbarClass());
updateScrollbarClass();
$('html').addClass('is-reveal-open');
}
/**
* Removes classes and listeners on document that were required by open modals.
* @private
*/
_removeGlobalClasses() {
this.$element.off('resizeme.zf.trigger.revealScrollbarListener');
$('html').removeClass('is-reveal-open');
$('html').removeClass('zf-has-scroll');
}
/**
* Adds extra event handlers for the body and window if necessary.
* @private
*/
_addGlobalListeners() {
var _this = this;
if(!this.$element) { return; } // If we're in the middle of cleanup, don't freak out
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) ||
!$.contains(document, e.target)) { return; }
_this.close();
});
}
if (this.options.closeOnEsc) {
$(window).on('keydown.zf.reveal', function(e) {
Keyboard.handleKey(e, 'Reveal', {
close: function() {
if (_this.options.closeOnEsc) {
_this.close();
}
}
});
});
}
}
/**
* Closes the modal.
* @function
* @fires Reveal#closed
*/
close() {
if (!this.isActive || !this.$element.is(':visible')) {
return false;
}
var _this = this;
// Motion UI method of hiding
if (this.options.animationOut) {
if (this.options.overlay) {
Motion.animateOut(this.$overlay, 'fade-out');
}
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);
}
else {
finishUp();
}
}
// Conditionals to remove extra event listeners added on open
if (this.options.closeOnEsc) {
$(window).off('keydown.zf.reveal');
}
if (!this.options.overlay && this.options.closeOnClick) {
$('body').off('click.zf.reveal');
}
this.$element.off('keydown.zf.reveal');
function finishUp() {
// Get the current top before the modal is closed and restore the scroll after.
// TODO: use component properties instead of HTML properties
// See https://github.com/zurb/foundation-sites/pull/10786
var scrollTop = parseInt($("html").css("top"));
if ($('.reveal:visible').length === 0) {
_this._removeGlobalClasses(); // also remove .is-reveal-open from the html element when there is no opened reveal
}
Keyboard.releaseFocus(_this.$element);
_this.$element.attr('aria-hidden', true);
_this._enableScroll(scrollTop);
/**
* Fires when the modal is done closing.
* @event Reveal#closed
*/
_this.$element.trigger('closed.zf.reveal');
}
/**
* Resets the modal content
* This prevents a running video to keep going in the background
*/
if (this.options.resetOnClose) {
this.$element.html(this.$element.html());
}
this.isActive = false;
// If deepLink and we did not switched to an other modal...
if (_this.options.deepLink && window.location.hash === `#${this.id}`) {
// Remove the history hash
if (window.history.replaceState) {
const urlWithoutHash = window.location.pathname + window.location.search;
if (this.options.updateHistory) {
window.history.pushState({}, '', urlWithoutHash); // remove the hash
} else {
window.history.replaceState('', document.title, urlWithoutHash);
}
} else {
window.location.hash = '';
}
}
this.$activeAnchor.focus();
}
/**
* Toggles the open/closed state of a modal.
* @function
*/
toggle() {
if (this.isActive) {
this.close();
} else {
this.open();
}
};
/**
* Destroys an instance of a modal.
* @function
*/
_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}`);
if (this.onLoadListener) $(window).off(this.onLoadListener);
if ($('.reveal:visible').length === 0) {
this._removeGlobalClasses(); // also remove .is-reveal-open from the html element when there is no opened reveal
}
};
}
Reveal.defaults = {
/**
* Motion-UI class to use for animated elements. If none used, defaults to simple show/hide.
* @option
* @type {string}
* @default ''
*/
animationIn: '',
/**
* Motion-UI class to use for animated elements. If none used, defaults to simple show/hide.
* @option
* @type {string}
* @default ''
*/
animationOut: '',
/**
* Time, in ms, to delay the opening of a modal after a click if no animation used.
* @option
* @type {number}
* @default 0
*/
showDelay: 0,
/**
* Time, in ms, to delay the closing of a modal after a click if no animation used.
* @option
* @type {number}
* @default 0
*/
hideDelay: 0,
/**
* Allows a click on the body/overlay to close the modal.
* @option
* @type {boolean}
* @default true
*/
closeOnClick: true,
/**
* Allows the modal to close if the user presses the `ESCAPE` key.
* @option
* @type {boolean}
* @default true
*/
closeOnEsc: true,
/**
* If true, allows multiple modals to be displayed at once.
* @option
* @type {boolean}
* @default false
*/
multipleOpened: false,
/**
* Distance, in pixels, the modal should push down from the top of the screen.
* @option
* @type {number|string}
* @default auto
*/
vOffset: 'auto',
/**
* Distance, in pixels, the modal should push in from the side of the screen.
* @option
* @type {number|string}
* @default auto
*/
hOffset: 'auto',
/**
* Allows the modal to be fullscreen, completely blocking out the rest of the view. JS checks for this as well.
* @option
* @type {boolean}
* @default false
*/
fullScreen: false,
/**
* Allows the modal to generate an overlay div, which will cover the view when modal opens.
* @option
* @type {boolean}
* @default true
*/
overlay: true,
/**
* Allows the modal to remove and reinject markup on close. Should be true if using video elements w/o using provider's api, otherwise, videos will continue to play in the background.
* @option
* @type {boolean}
* @default false
*/
resetOnClose: false,
/**
* Link the location hash to the modal.
* Set the location hash when the modal is opened/closed, and open/close the modal when the location changes.
* @option
* @type {boolean}
* @default false
*/
deepLink: false,
/**
* If `deepLink` is enabled, 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",
/**
* Allows adding additional class names to the reveal overlay.
* @option
* @type {string}
* @default ''
*/
additionalOverlayClasses: ''
};
/**
* Slider module.
* @module foundation.slider
* @requires foundation.util.motion
* @requires foundation.util.triggers
* @requires foundation.util.keyboard
* @requires foundation.util.touch
*/
class Slider extends Plugin {
/**
* Creates a new instance of a slider control.
* @class
* @name Slider
* @param {jQuery} element - jQuery object to make into a slider control.
* @param {Object} options - Overrides to the default plugin settings.
*/
_setup(element, options) {
this.$element = element;
this.options = $.extend({}, Slider.defaults, this.$element.data(), options);
this.className = 'Slider'; // ie9 back compat
// Touch and Triggers inits are idempotent, we just need to make sure it's initialied.
Touch.init($);
Triggers.init($);
this._init();
Keyboard.register('Slider', {
'ltr': {
'ARROW_RIGHT': 'increase',
'ARROW_UP': 'increase',
'ARROW_DOWN': 'decrease',
'ARROW_LEFT': 'decrease',
'SHIFT_ARROW_RIGHT': 'increase_fast',
'SHIFT_ARROW_UP': 'increase_fast',
'SHIFT_ARROW_DOWN': 'decrease_fast',
'SHIFT_ARROW_LEFT': 'decrease_fast',
'HOME': 'min',
'END': 'max'
},
'rtl': {
'ARROW_LEFT': 'increase',
'ARROW_RIGHT': 'decrease',
'SHIFT_ARROW_LEFT': 'increase_fast',
'SHIFT_ARROW_RIGHT': 'decrease_fast'
}
});
}
/**
* Initilizes the plugin by reading/setting attributes, creating collections and setting the initial position of the handle(s).
* @function
* @private
*/
_init() {
this.inputs = this.$element.find('input');
this.handles = this.$element.find('[data-slider-handle]');
this.$handle = this.handles.eq(0);
this.$input = this.inputs.length ? this.inputs.eq(0) : $(`#${this.$handle.attr('aria-controls')}`);
this.$fill = this.$element.find('[data-slider-fill]').css(this.options.vertical ? 'height' : 'width', 0);
if (this.options.disabled || this.$element.hasClass(this.options.disabledClass)) {
this.options.disabled = true;
this.$element.addClass(this.options.disabledClass);
}
if (!this.inputs.length) {
this.inputs = $().add(this.$input);
this.options.binding = true;
}
this._setInitAttr(0);
if (this.handles[1]) {
this.options.doubleSided = true;
this.$handle2 = this.handles.eq(1);
this.$input2 = this.inputs.length > 1 ? this.inputs.eq(1) : $(`#${this.$handle2.attr('aria-controls')}`);
if (!this.inputs[1]) {
this.inputs = this.inputs.add(this.$input2);
}
// this.$handle.triggerHandler('click.zf.slider');
this._setInitAttr(1);
}
// Set handle positions
this.setHandles();
this._events();
}
setHandles() {
if(this.handles[1]) {
this._setHandlePos(this.$handle, this.inputs.eq(0).val(), true, () => {
this._setHandlePos(this.$handle2, this.inputs.eq(1).val(), true);
});
} else {
this._setHandlePos(this.$handle, this.inputs.eq(0).val(), true);
}
}
_reflow() {
this.setHandles();
}
/**
* @function
* @private
* @param {Number} value - floating point (the value) to be transformed using to a relative position on the slider (the inverse of _value)
*/
_pctOfBar(value) {
var pctOfBar = percent(value - this.options.start, this.options.end - this.options.start);
switch(this.options.positionValueFunction) {
case "pow":
pctOfBar = this._logTransform(pctOfBar);
break;
case "log":
pctOfBar = this._powTransform(pctOfBar);
break;
}
return pctOfBar.toFixed(2)
}
/**
* @function
* @private
* @param {Number} pctOfBar - floating point, the relative position of the slider (typically between 0-1) to be transformed to a value
*/
_value(pctOfBar) {
switch(this.options.positionValueFunction) {
case "pow":
pctOfBar = this._powTransform(pctOfBar);
break;
case "log":
pctOfBar = this._logTransform(pctOfBar);
break;
}
var value = (this.options.end - this.options.start) * pctOfBar + parseFloat(this.options.start);
return value
}
/**
* @function
* @private
* @param {Number} value - floating point (typically between 0-1) to be transformed using the log function
*/
_logTransform(value) {
return baseLog(this.options.nonLinearBase, ((value*(this.options.nonLinearBase-1))+1))
}
/**
* @function
* @private
* @param {Number} value - floating point (typically between 0-1) to be transformed using the power function
*/
_powTransform(value) {
return (Math.pow(this.options.nonLinearBase, value) - 1) / (this.options.nonLinearBase - 1)
}
/**
* Sets the position of the selected handle and fill bar.
* @function
* @private
* @param {jQuery} $hndl - the selected handle to move.
* @param {Number} location - floating point between the start and end values of the slider bar.
* @param {Function} cb - callback function to fire on completion.
* @fires Slider#moved
* @fires Slider#changed
*/
_setHandlePos($hndl, location, noInvert, cb) {
// don't move if the slider has been disabled since its initialization
if (this.$element.hasClass(this.options.disabledClass)) {
return;
}
//might need to alter that slightly for bars that will have odd number selections.
location = parseFloat(location);//on input change events, convert string to number...grumble.
// prevent slider from running out of bounds, if value exceeds the limits set through options, override the value to min/max
if (location < this.options.start) { location = this.options.start; }
else if (location > this.options.end) { location = this.options.end; }
var isDbl = this.options.doubleSided;
//this is for single-handled vertical sliders, it adjusts the value to account for the slider being "upside-down"
//for click and drag events, it's weird due to the scale(-1, 1) css property
if (this.options.vertical && !noInvert) {
location = this.options.end - location;
}
if (isDbl) { //this block is to prevent 2 handles from crossing eachother. Could/should be improved.
if (this.handles.index($hndl) === 0) {
var h2Val = parseFloat(this.$handle2.attr('aria-valuenow'));
location = location >= h2Val ? h2Val - this.options.step : location;
} else {
var h1Val = parseFloat(this.$handle.attr('aria-valuenow'));
location = location <= h1Val ? h1Val + this.options.step : location;
}
}
var _this = this,
vert = this.options.vertical,
hOrW = vert ? 'height' : 'width',
lOrT = vert ? 'top' : 'left',
handleDim = $hndl[0].getBoundingClientRect()[hOrW],
elemDim = this.$element[0].getBoundingClientRect()[hOrW],
//percentage of bar min/max value based on click or drag point
pctOfBar = this._pctOfBar(location),
//number of actual pixels to shift the handle, based on the percentage obtained above
pxToMove = (elemDim - handleDim) * pctOfBar,
//percentage of bar to shift the handle
movement = (percent(pxToMove, elemDim) * 100).toFixed(this.options.decimal);
//fixing the decimal value for the location number, is passed to other methods as a fixed floating-point value
location = parseFloat(location.toFixed(this.options.decimal));
// declare empty object for css adjustments, only used with 2 handled-sliders
var css = {};
this._setValues($hndl, location);
// TODO update to calculate based on values set to respective inputs??
if (isDbl) {
var isLeftHndl = this.handles.index($hndl) === 0,
//empty variable, will be used for min-height/width for fill bar
dim,
//percentage w/h of the handle compared to the slider bar
handlePct = ~~(percent(handleDim, elemDim) * 100);
//if left handle, the math is slightly different than if it's the right handle, and the left/top property needs to be changed for the fill bar
if (isLeftHndl) {
//left or top percentage value to apply to the fill bar.
css[lOrT] = `${movement}%`;
//calculate the new min-height/width for the fill bar.
dim = parseFloat(this.$handle2[0].style[lOrT]) - movement + handlePct;
//this callback is necessary to prevent errors and allow the proper placement and initialization of a 2-handled slider
//plus, it means we don't care if 'dim' isNaN on init, it won't be in the future.
if (cb && typeof cb === 'function') { cb(); }//this is only needed for the initialization of 2 handled sliders
} else {
//just caching the value of the left/bottom handle's left/top property
var handlePos = parseFloat(this.$handle[0].style[lOrT]);
//calculate the new min-height/width for the fill bar. Use isNaN to prevent false positives for numbers <= 0
//based on the percentage of movement of the handle being manipulated, less the opposing handle's left/top position, plus the percentage w/h of the handle itself
dim = movement - (isNaN(handlePos) ? (this.options.initialStart - this.options.start)/((this.options.end-this.options.start)/100) : handlePos) + handlePct;
}
// assign the min-height/width to our css object
css[`min-${hOrW}`] = `${dim}%`;
}
this.$element.one('finished.zf.animate', function() {
/**
* Fires when the handle is done moving.
* @event Slider#moved
*/
_this.$element.trigger('moved.zf.slider', [$hndl]);
});
//because we don't know exactly how the handle will be moved, check the amount of time it should take to move.
var moveTime = this.$element.data('dragging') ? 1000/60 : this.options.moveTime;
Move(moveTime, $hndl, function() {
// adjusting the left/top property of the handle, based on the percentage calculated above
// if movement isNaN, that is because the slider is hidden and we cannot determine handle width,
// fall back to next best guess.
if (isNaN(movement)) {
$hndl.css(lOrT, `${pctOfBar * 100}%`);
}
else {
$hndl.css(lOrT, `${movement}%`);
}
if (!_this.options.doubleSided) {
//if single-handled, a simple method to expand the fill bar
_this.$fill.css(hOrW, `${pctOfBar * 100}%`);
} else {
//otherwise, use the css object we created above
_this.$fill.css(css);
}
});
/**
* Fires when the value has not been change for a given time.
* @event Slider#changed
*/
clearTimeout(_this.timeout);
_this.timeout = setTimeout(function(){
_this.$element.trigger('changed.zf.slider', [$hndl]);
}, _this.options.changedDelay);
}
/**
* Sets the initial attribute for the slider element.
* @function
* @private
* @param {Number} idx - index of the current handle/input to use.
*/
_setInitAttr(idx) {
var initVal = (idx === 0 ? this.options.initialStart : this.options.initialEnd);
var id = this.inputs.eq(idx).attr('id') || GetYoDigits(6, 'slider');
this.inputs.eq(idx).attr({
'id': id,
'max': this.options.end,
'min': this.options.start,
'step': this.options.step
});
this.inputs.eq(idx).val(initVal);
this.handles.eq(idx).attr({
'role': 'slider',
'aria-controls': id,
'aria-valuemax': this.options.end,
'aria-valuemin': this.options.start,
'aria-valuenow': initVal,
'aria-orientation': this.options.vertical ? 'vertical' : 'horizontal',
'tabindex': 0
});
}
/**
* Sets the input and `aria-valuenow` values for the slider element.
* @function
* @private
* @param {jQuery} $handle - the currently selected handle.
* @param {Number} val - floating point of the new value.
*/
_setValues($handle, val) {
var idx = this.options.doubleSided ? this.handles.index($handle) : 0;
this.inputs.eq(idx).val(val);
$handle.attr('aria-valuenow', val);
}
/**
* Handles events on the slider element.
* Calculates the new location of the current handle.
* If there are two handles and the bar was clicked, it determines which handle to move.
* @function
* @private
* @param {Object} e - the `event` object passed from the listener.
* @param {jQuery} $handle - the current handle to calculate for, if selected.
* @param {Number} val - floating point number for the new value of the slider.
* TODO clean this up, there's a lot of repeated code between this and the _setHandlePos fn.
*/
_handleEvent(e, $handle, val) {
var value, hasVal;
if (!val) {//click or drag events
e.preventDefault();
var _this = this,
vertical = this.options.vertical,
param = vertical ? 'height' : 'width',
direction = vertical ? 'top' : 'left',
eventOffset = vertical ? e.pageY : e.pageX,
halfOfHandle = this.$handle[0].getBoundingClientRect()[param] / 2,
barDim = this.$element[0].getBoundingClientRect()[param],
windowScroll = vertical ? $(window).scrollTop() : $(window).scrollLeft();
var elemOffset = this.$element.offset()[direction];
// touch events emulated by the touch util give position relative to screen, add window.scroll to event coordinates...
// best way to guess this is simulated is if clientY == pageY
if (e.clientY === e.pageY) { eventOffset = eventOffset + windowScroll; }
var eventFromBar = eventOffset - elemOffset;
var barXY;
if (eventFromBar < 0) {
barXY = 0;
} else if (eventFromBar > barDim) {
barXY = barDim;
} else {
barXY = eventFromBar;
}
var offsetPct = percent(barXY, barDim);
value = this._value(offsetPct);
// turn everything around for RTL, yay math!
if (rtl() && !this.options.vertical) {value = this.options.end - value;}
value = _this._adjustValue(null, value);
//boolean flag for the setHandlePos fn, specifically for vertical sliders
hasVal = false;
if (!$handle) {//figure out which handle it is, pass it to the next function.
var firstHndlPos = absPosition(this.$handle, direction, barXY, param),
secndHndlPos = absPosition(this.$handle2, direction, barXY, param);
$handle = firstHndlPos <= secndHndlPos ? this.$handle : this.$handle2;
}
} else {//change event on input
value = this._adjustValue(null, val);
hasVal = true;
}
this._setHandlePos($handle, value, hasVal);
}
/**
* Adjustes value for handle in regard to step value. returns adjusted value
* @function
* @private
* @param {jQuery} $handle - the selected handle.
* @param {Number} value - value to adjust. used if $handle is falsy
*/
_adjustValue($handle, value) {
var val,
step = this.options.step,
div = parseFloat(step/2),
left, prev_val, next_val;
if (!!$handle) {
val = parseFloat($handle.attr('aria-valuenow'));
}
else {
val = value;
}
if (val >= 0) {
left = val % step;
} else {
left = step + (val % step);
}
prev_val = val - left;
next_val = prev_val + step;
if (left === 0) {
return val;
}
val = val >= prev_val + div ? next_val : prev_val;
return val;
}
/**
* Adds event listeners to the slider elements.
* @function
* @private
*/
_events() {
this._eventsForHandle(this.$handle);
if(this.handles[1]) {
this._eventsForHandle(this.$handle2);
}
}
/**
* Adds event listeners a particular handle
* @function
* @private
* @param {jQuery} $handle - the current handle to apply listeners to.
*/
_eventsForHandle($handle) {
var _this = this,
curHandle;
const handleChangeEvent = function(e) {
const idx = _this.inputs.index($(this));
_this._handleEvent(e, _this.handles.eq(idx), $(this).val());
};
// IE only triggers the change event when the input loses focus which strictly follows the HTML specification
// listen for the enter key and trigger a change
// @see https://html.spec.whatwg.org/multipage/input.html#common-input-element-events
this.inputs.off('keyup.zf.slider').on('keyup.zf.slider', function (e) {
if(e.keyCode == 13) handleChangeEvent.call(this, e);
});
this.inputs.off('change.zf.slider').on('change.zf.slider', handleChangeEvent);
if (this.options.clickSelect) {
this.$element.off('click.zf.slider').on('click.zf.slider', function(e) {
if (_this.$element.data('dragging')) { return false; }
if (!$(e.target).is('[data-slider-handle]')) {
if (_this.options.doubleSided) {
_this._handleEvent(e);
} else {
_this._handleEvent(e, _this.$handle);
}
}
});
}
if (this.options.draggable) {
this.handles.addTouch();
var $body = $('body');
$handle
.off('mousedown.zf.slider')
.on('mousedown.zf.slider', function(e) {
$handle.addClass('is-dragging');
_this.$fill.addClass('is-dragging');//
_this.$element.data('dragging', true);
curHandle = $(e.currentTarget);
$body.on('mousemove.zf.slider', function(e) {
e.preventDefault();
_this._handleEvent(e, curHandle);
}).on('mouseup.zf.slider', function(e) {
_this._handleEvent(e, curHandle);
$handle.removeClass('is-dragging');
_this.$fill.removeClass('is-dragging');
_this.$element.data('dragging', false);
$body.off('mousemove.zf.slider mouseup.zf.slider');
});
})
// prevent events triggered by touch
.on('selectstart.zf.slider touchmove.zf.slider', function(e) {
e.preventDefault();
});
}
$handle.off('keydown.zf.slider').on('keydown.zf.slider', function(e) {
var _$handle = $(this),
idx = _this.options.doubleSided ? _this.handles.index(_$handle) : 0,
oldValue = parseFloat(_this.inputs.eq(idx).val()),
newValue;
// handle keyboard event with keyboard util
Keyboard.handleKey(e, 'Slider', {
decrease: function() {
newValue = oldValue - _this.options.step;
},
increase: function() {
newValue = oldValue + _this.options.step;
},
decrease_fast: function() {
newValue = oldValue - _this.options.step * 10;
},
increase_fast: function() {
newValue = oldValue + _this.options.step * 10;
},
min: function() {
newValue = _this.options.start;
},
max: function() {
newValue = _this.options.end;
},
handled: function() { // only set handle pos when event was handled specially
e.preventDefault();
_this._setHandlePos(_$handle, newValue, true);
}
});
/*if (newValue) { // if pressed key has special function, update value
e.preventDefault();
_this._setHandlePos(_$handle, newValue);
}*/
});
}
/**
* Destroys the slider plugin.
*/
_destroy() {
this.handles.off('.zf.slider');
this.inputs.off('.zf.slider');
this.$element.off('.zf.slider');
clearTimeout(this.timeout);
}
}
Slider.defaults = {
/**
* Minimum value for the slider scale.
* @option
* @type {number}
* @default 0
*/
start: 0,
/**
* Maximum value for the slider scale.
* @option
* @type {number}
* @default 100
*/
end: 100,
/**
* Minimum value change per change event.
* @option
* @type {number}
* @default 1
*/
step: 1,
/**
* Value at which the handle/input *(left handle/first input)* should be set to on initialization.
* @option
* @type {number}
* @default 0
*/
initialStart: 0,
/**
* Value at which the right handle/second input should be set to on initialization.
* @option
* @type {number}
* @default 100
*/
initialEnd: 100,
/**
* Allows the input to be located outside the container and visible. Set to by the JS
* @option
* @type {boolean}
* @default false
*/
binding: false,
/**
* Allows the user to click/tap on the slider bar to select a value.
* @option
* @type {boolean}
* @default true
*/
clickSelect: true,
/**
* Set to true and use the `vertical` class to change alignment to vertical.
* @option
* @type {boolean}
* @default false
*/
vertical: false,
/**
* Allows the user to drag the slider handle(s) to select a value.
* @option
* @type {boolean}
* @default true
*/
draggable: true,
/**
* Disables the slider and prevents event listeners from being applied. Double checked by JS with `disabledClass`.
* @option
* @type {boolean}
* @default false
*/
disabled: false,
/**
* Allows the use of two handles. Double checked by the JS. Changes some logic handling.
* @option
* @type {boolean}
* @default false
*/
doubleSided: false,
/**
* Potential future feature.
*/
// steps: 100,
/**
* Number of decimal places the plugin should go to for floating point precision.
* @option
* @type {number}
* @default 2
*/
decimal: 2,
/**
* Time delay for dragged elements.
*/
// dragDelay: 0,
/**
* Time, in ms, to animate the movement of a slider handle if user clicks/taps on the bar. Needs to be manually set if updating the transition time in the Sass settings.
* @option
* @type {number}
* @default 200
*/
moveTime: 200,//update this if changing the transition time in the sass
/**
* Class applied to disabled sliders.
* @option
* @type {string}
* @default 'disabled'
*/
disabledClass: 'disabled',
/**
* Will invert the default layout for a vertical slider.
* @option
* @type {boolean}
* @default false
*/
invertVertical: false,
/**
* Milliseconds before the `changed.zf-slider` event is triggered after value change.
* @option
* @type {number}
* @default 500
*/
changedDelay: 500,
/**
* Basevalue for non-linear sliders
* @option
* @type {number}
* @default 5
*/
nonLinearBase: 5,
/**
* Basevalue for non-linear sliders, possible values are: `'linear'`, `'pow'` & `'log'`. Pow and Log use the nonLinearBase setting.
* @option
* @type {string}
* @default 'linear'
*/
positionValueFunction: 'linear',
};
function percent(frac, num) {
return (frac / num);
}
function absPosition($handle, dir, clickPos, param) {
return Math.abs(($handle.position()[dir] + ($handle[param]() / 2)) - clickPos);
}
function baseLog(base, value) {
return Math.log(value)/Math.log(base)
}
/**
* Sticky module.
* @module foundation.sticky
* @requires foundation.util.triggers
* @requires foundation.util.mediaQuery
*/
class Sticky extends Plugin {
/**
* Creates a new instance of a sticky thing.
* @class
* @name Sticky
* @param {jQuery} element - jQuery object to make sticky.
* @param {Object} options - options object passed when creating the element programmatically.
*/
_setup(element, options) {
this.$element = element;
this.options = $.extend({}, Sticky.defaults, this.$element.data(), options);
this.className = 'Sticky'; // ie9 back compat
// Triggers init is idempotent, just need to make sure it is initialized
Triggers.init($);
this._init();
}
/**
* Initializes the sticky element by adding classes, getting/setting dimensions, breakpoints and attributes
* @function
* @private
*/
_init() {
MediaQuery._init();
var $parent = this.$element.parent('[data-sticky-container]'),
id = this.$element[0].id || GetYoDigits(6, 'sticky'),
_this = this;
if($parent.length){
this.$container = $parent;
} else {
this.wasWrapped = true;
this.$element.wrap(this.options.container);
this.$container = this.$element.parent();
}
this.$container.addClass(this.options.containerClass);
this.$element.addClass(this.options.stickyClass).attr({ 'data-resize': id, 'data-mutate': id });
if (this.options.anchor !== '') {
$('#' + _this.options.anchor).attr({ 'data-mutate': id });
}
this.scrollCount = this.options.checkEvery;
this.isStuck = false;
this.onLoadListener = onLoad($(window), function () {
//We calculate the container height to have correct values for anchor points offset calculation.
_this.containerHeight = _this.$element.css("display") == "none" ? 0 : _this.$element[0].getBoundingClientRect().height;
_this.$container.css('height', _this.containerHeight);
_this.elemHeight = _this.containerHeight;
if (_this.options.anchor !== '') {
_this.$anchor = $('#' + _this.options.anchor);
} else {
_this._parsePoints();
}
_this._setSizes(function () {
var scroll = window.pageYOffset;
_this._calc(false, scroll);
//Unstick the element will ensure that proper classes are set.
if (!_this.isStuck) {
_this._removeSticky((scroll >= _this.topPoint) ? false : true);
}
});
_this._events(id.split('-').reverse().join('-'));
});
}
/**
* If using multiple elements as anchors, calculates the top and bottom pixel values the sticky thing should stick and unstick on.
* @function
* @private
*/
_parsePoints() {
var top = this.options.topAnchor == "" ? 1 : this.options.topAnchor,
btm = this.options.btmAnchor== "" ? document.documentElement.scrollHeight : this.options.btmAnchor,
pts = [top, btm],
breaks = {};
for (var i = 0, len = pts.length; i < len && pts[i]; i++) {
var pt;
if (typeof pts[i] === 'number') {
pt = pts[i];
} else {
var place = pts[i].split(':'),
anchor = $(`#${place[0]}`);
pt = anchor.offset().top;
if (place[1] && place[1].toLowerCase() === 'bottom') {
pt += anchor[0].getBoundingClientRect().height;
}
}
breaks[i] = pt;
}
this.points = breaks;
return;
}
/**
* Adds event handlers for the scrolling element.
* @private
* @param {String} id - pseudo-random id for unique scroll event listener.
*/
_events(id) {
var _this = this,
scrollListener = this.scrollListener = `scroll.zf.${id}`;
if (this.isOn) { return; }
if (this.canStick) {
this.isOn = true;
$(window).off(scrollListener)
.on(scrollListener, function(e) {
if (_this.scrollCount === 0) {
_this.scrollCount = _this.options.checkEvery;
_this._setSizes(function() {
_this._calc(false, window.pageYOffset);
});
} else {
_this.scrollCount--;
_this._calc(false, window.pageYOffset);
}
});
}
this.$element.off('resizeme.zf.trigger')
.on('resizeme.zf.trigger', function(e, el) {
_this._eventsHandler(id);
});
this.$element.on('mutateme.zf.trigger', function (e, el) {
_this._eventsHandler(id);
});
if(this.$anchor) {
this.$anchor.on('mutateme.zf.trigger', function (e, el) {
_this._eventsHandler(id);
});
}
}
/**
* Handler for events.
* @private
* @param {String} id - pseudo-random id for unique scroll event listener.
*/
_eventsHandler(id) {
var _this = this,
scrollListener = this.scrollListener = `scroll.zf.${id}`;
_this._setSizes(function() {
_this._calc(false);
if (_this.canStick) {
if (!_this.isOn) {
_this._events(id);
}
} else if (_this.isOn) {
_this._pauseListeners(scrollListener);
}
});
}
/**
* Removes event handlers for scroll and change events on anchor.
* @fires Sticky#pause
* @param {String} scrollListener - unique, namespaced scroll listener attached to `window`
*/
_pauseListeners(scrollListener) {
this.isOn = false;
$(window).off(scrollListener);
/**
* Fires when the plugin is paused due to resize event shrinking the view.
* @event Sticky#pause
* @private
*/
this.$element.trigger('pause.zf.sticky');
}
/**
* Called on every `scroll` event and on `_init`
* fires functions based on booleans and cached values
* @param {Boolean} checkSizes - true if plugin should recalculate sizes and breakpoints.
* @param {Number} scroll - current scroll position passed from scroll event cb function. If not passed, defaults to `window.pageYOffset`.
*/
_calc(checkSizes, scroll) {
if (checkSizes) { this._setSizes(); }
if (!this.canStick) {
if (this.isStuck) {
this._removeSticky(true);
}
return false;
}
if (!scroll) { scroll = window.pageYOffset; }
if (scroll >= this.topPoint) {
if (scroll <= this.bottomPoint) {
if (!this.isStuck) {
this._setSticky();
}
} else {
if (this.isStuck) {
this._removeSticky(false);
}
}
} else {
if (this.isStuck) {
this._removeSticky(true);
}
}
}
/**
* Causes the $element to become stuck.
* Adds `position: fixed;`, and helper classes.
* @fires Sticky#stuckto
* @function
* @private
*/
_setSticky() {
var _this = this,
stickTo = this.options.stickTo,
mrgn = stickTo === 'top' ? 'marginTop' : 'marginBottom',
notStuckTo = stickTo === 'top' ? 'bottom' : 'top',
css = {};
css[mrgn] = `${this.options[mrgn]}em`;
css[stickTo] = 0;
css[notStuckTo] = 'auto';
this.isStuck = true;
this.$element.removeClass(`is-anchored is-at-${notStuckTo}`)
.addClass(`is-stuck is-at-${stickTo}`)
.css(css)
/**
* Fires when the $element has become `position: fixed;`
* Namespaced to `top` or `bottom`, e.g. `sticky.zf.stuckto:top`
* @event Sticky#stuckto
*/
.trigger(`sticky.zf.stuckto:${stickTo}`);
this.$element.on("transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd", function() {
_this._setSizes();
});
}
/**
* Causes the $element to become unstuck.
* Removes `position: fixed;`, and helper classes.
* Adds other helper classes.
* @param {Boolean} isTop - tells the function if the $element should anchor to the top or bottom of its $anchor element.
* @fires Sticky#unstuckfrom
* @private
*/
_removeSticky(isTop) {
var stickTo = this.options.stickTo,
stickToTop = stickTo === 'top',
css = {},
anchorPt = (this.points ? this.points[1] - this.points[0] : this.anchorHeight) - this.elemHeight,
mrgn = stickToTop ? 'marginTop' : 'marginBottom',
topOrBottom = isTop ? 'top' : 'bottom';
css[mrgn] = 0;
css['bottom'] = 'auto';
if(isTop) {
css['top'] = 0;
} else {
css['top'] = anchorPt;
}
this.isStuck = false;
this.$element.removeClass(`is-stuck is-at-${stickTo}`)
.addClass(`is-anchored is-at-${topOrBottom}`)
.css(css)
/**
* Fires when the $element has become anchored.
* Namespaced to `top` or `bottom`, e.g. `sticky.zf.unstuckfrom:bottom`
* @event Sticky#unstuckfrom
*/
.trigger(`sticky.zf.unstuckfrom:${topOrBottom}`);
}
/**
* Sets the $element and $container sizes for plugin.
* Calls `_setBreakPoints`.
* @param {Function} cb - optional callback function to fire on completion of `_setBreakPoints`.
* @private
*/
_setSizes(cb) {
this.canStick = MediaQuery.is(this.options.stickyOn);
if (!this.canStick) {
if (cb && typeof cb === 'function') { cb(); }
}
var newElemWidth = this.$container[0].getBoundingClientRect().width,
comp = window.getComputedStyle(this.$container[0]),
pdngl = parseInt(comp['padding-left'], 10),
pdngr = parseInt(comp['padding-right'], 10);
if (this.$anchor && this.$anchor.length) {
this.anchorHeight = this.$anchor[0].getBoundingClientRect().height;
} else {
this._parsePoints();
}
this.$element.css({
'max-width': `${newElemWidth - pdngl - pdngr}px`
});
var newContainerHeight = this.$element[0].getBoundingClientRect().height || this.containerHeight;
if (this.$element.css("display") == "none") {
newContainerHeight = 0;
}
this.containerHeight = newContainerHeight;
this.$container.css({
height: newContainerHeight
});
this.elemHeight = newContainerHeight;
if (!this.isStuck) {
if (this.$element.hasClass('is-at-bottom')) {
var anchorPt = (this.points ? this.points[1] - this.$container.offset().top : this.anchorHeight) - this.elemHeight;
this.$element.css('top', anchorPt);
}
}
this._setBreakPoints(newContainerHeight, function() {
if (cb && typeof cb === 'function') { cb(); }
});
}
/**
* Sets the upper and lower breakpoints for the element to become sticky/unsticky.
* @param {Number} elemHeight - px value for sticky.$element height, calculated by `_setSizes`.
* @param {Function} cb - optional callback function to be called on completion.
* @private
*/
_setBreakPoints(elemHeight, cb) {
if (!this.canStick) {
if (cb && typeof cb === 'function') { cb(); }
else { return false; }
}
var mTop = emCalc(this.options.marginTop),
mBtm = emCalc(this.options.marginBottom),
topPoint = this.points ? this.points[0] : this.$anchor.offset().top,
bottomPoint = this.points ? this.points[1] : topPoint + this.anchorHeight,
// topPoint = this.$anchor.offset().top || this.points[0],
// bottomPoint = topPoint + this.anchorHeight || this.points[1],
winHeight = window.innerHeight;
if (this.options.stickTo === 'top') {
topPoint -= mTop;
bottomPoint -= (elemHeight + mTop);
} else if (this.options.stickTo === 'bottom') {
topPoint -= (winHeight - (elemHeight + mBtm));
bottomPoint -= (winHeight - mBtm);
}
this.topPoint = topPoint;
this.bottomPoint = bottomPoint;
if (cb && typeof cb === 'function') { cb(); }
}
/**
* Destroys the current sticky element.
* Resets the element to the top position first.
* Removes event listeners, JS-added css properties and classes, and unwraps the $element if the JS added the $container.
* @function
*/
_destroy() {
this._removeSticky(true);
this.$element.removeClass(`${this.options.stickyClass} is-anchored is-at-top`)
.css({
height: '',
top: '',
bottom: '',
'max-width': ''
})
.off('resizeme.zf.trigger')
.off('mutateme.zf.trigger');
if (this.$anchor && this.$anchor.length) {
this.$anchor.off('change.zf.sticky');
}
if (this.scrollListener) $(window).off(this.scrollListener);
if (this.onLoadListener) $(window).off(this.onLoadListener);
if (this.wasWrapped) {
this.$element.unwrap();
} else {
this.$container.removeClass(this.options.containerClass)
.css({
height: ''
});
}
}
}
Sticky.defaults = {
/**
* Customizable container template. Add your own classes for styling and sizing.
* @option
* @type {string}
* @default '<div data-sticky-container></div>'
*/
container: '
',
/**
* Location in the view the element sticks to. Can be `'top'` or `'bottom'`.
* @option
* @type {string}
* @default 'top'
*/
stickTo: 'top',
/**
* If anchored to a single element, the id of that element.
* @option
* @type {string}
* @default ''
*/
anchor: '',
/**
* If using more than one element as anchor points, the id of the top anchor.
* @option
* @type {string}
* @default ''
*/
topAnchor: '',
/**
* If using more than one element as anchor points, the id of the bottom anchor.
* @option
* @type {string}
* @default ''
*/
btmAnchor: '',
/**
* Margin, in `em`'s to apply to the top of the element when it becomes sticky.
* @option
* @type {number}
* @default 1
*/
marginTop: 1,
/**
* Margin, in `em`'s to apply to the bottom of the element when it becomes sticky.
* @option
* @type {number}
* @default 1
*/
marginBottom: 1,
/**
* Breakpoint string that is the minimum screen size an element should become sticky.
* @option
* @type {string}
* @default 'medium'
*/
stickyOn: 'medium',
/**
* Class applied to sticky element, and removed on destruction. Foundation defaults to `sticky`.
* @option
* @type {string}
* @default 'sticky'
*/
stickyClass: 'sticky',
/**
* Class applied to sticky container. Foundation defaults to `sticky-container`.
* @option
* @type {string}
* @default 'sticky-container'
*/
containerClass: 'sticky-container',
/**
* Number of scroll events between the plugin's recalculating sticky points. Setting it to `0` will cause it to recalc every scroll event, setting it to `-1` will prevent recalc on scroll.
* @option
* @type {number}
* @default -1
*/
checkEvery: -1
};
/**
* Helper function to calculate em values
* @param Number {em} - number of em's to calculate into pixels
*/
function emCalc(em) {
return parseInt(window.getComputedStyle(document.body, null).fontSize, 10) * em;
}
/**
* Tabs module.
* @module foundation.tabs
* @requires foundation.util.keyboard
* @requires foundation.util.imageLoader if tabs contain images
*/
class Tabs extends Plugin {
/**
* Creates a new instance of tabs.
* @class
* @name Tabs
* @fires Tabs#init
* @param {jQuery} element - jQuery object to make into tabs.
* @param {Object} options - Overrides to the default plugin settings.
*/
_setup(element, options) {
this.$element = element;
this.options = $.extend({}, Tabs.defaults, this.$element.data(), options);
this.className = 'Tabs'; // ie9 back compat
this._init();
Keyboard.register('Tabs', {
'ENTER': 'open',
'SPACE': 'open',
'ARROW_RIGHT': 'next',
'ARROW_UP': 'previous',
'ARROW_DOWN': 'next',
'ARROW_LEFT': 'previous'
// 'TAB': 'next',
// 'SHIFT_TAB': 'previous'
});
}
/**
* Initializes the tabs by showing and focusing (if autoFocus=true) the preset active tab.
* @private
*/
_init() {
var _this = this;
this._isInitializing = true;
this.$element.attr({'role': 'tablist'});
this.$tabTitles = this.$element.find(`.${this.options.linkClass}`);
this.$tabContent = $(`[data-tabs-content="${this.$element[0].id}"]`);
this.$tabTitles.each(function(){
var $elem = $(this),
$link = $elem.find('a'),
isActive = $elem.hasClass(`${_this.options.linkActiveClass}`),
hash = $link.attr('data-tabs-target') || $link[0].hash.slice(1),
linkId = $link[0].id ? $link[0].id : `${hash}-label`,
$tabContent = $(`#${hash}`);
$elem.attr({'role': 'presentation'});
$link.attr({
'role': 'tab',
'aria-controls': hash,
'aria-selected': isActive,
'id': linkId,
'tabindex': isActive ? '0' : '-1'
});
$tabContent.attr({
'role': 'tabpanel',
'aria-labelledby': linkId
});
// Save up the initial hash to return to it later when going back in history
if (isActive) {
_this._initialAnchor = `#${hash}`;
}
if(!isActive) {
$tabContent.attr('aria-hidden', 'true');
}
if(isActive && _this.options.autoFocus){
_this.onLoadListener = onLoad($(window), function() {
$('html, body').animate({ scrollTop: $elem.offset().top }, _this.options.deepLinkSmudgeDelay, () => {
$link.focus();
});
});
}
});
if(this.options.matchHeight) {
var $images = this.$tabContent.find('img');
if ($images.length) {
onImagesLoaded($images, this._setHeight.bind(this));
} else {
this._setHeight();
}
}
// Current context-bound function to open tabs on page load or history hashchange
this._checkDeepLink = () => {
var anchor = window.location.hash;
if (!anchor.length) {
// If we are still initializing and there is no anchor, then there is nothing to do
if (this._isInitializing) return;
// Otherwise, move to the initial anchor
if (this._initialAnchor) anchor = this._initialAnchor;
}
var $anchor = anchor && $(anchor);
var $link = anchor && this.$element.find('[href$="'+anchor+'"]');
// Whether the anchor element that has been found is part of this element
var isOwnAnchor = !!($anchor.length && $link.length);
// If there is an anchor for the hash, select it
if ($anchor && $anchor.length && $link && $link.length) {
this.selectTab($anchor, true);
}
// Otherwise, collapse everything
else {
this._collapse();
}
if (isOwnAnchor) {
// Roll up a little to show the titles
if (this.options.deepLinkSmudge) {
var offset = this.$element.offset();
$('html, body').animate({ scrollTop: offset.top }, this.options.deepLinkSmudgeDelay);
}
/**
* Fires when the plugin has deeplinked at pageload
* @event Tabs#deeplink
*/
this.$element.trigger('deeplink.zf.tabs', [$link, $anchor]);
}
};
//use browser to open a tab, if it exists in this tabset
if (this.options.deepLink) {
this._checkDeepLink();
}
this._events();
this._isInitializing = false;
}
/**
* Adds event handlers for items within the tabs.
* @private
*/
_events() {
this._addKeyHandler();
this._addClickHandler();
this._setHeightMqHandler = null;
if (this.options.matchHeight) {
this._setHeightMqHandler = this._setHeight.bind(this);
$(window).on('changed.zf.mediaquery', this._setHeightMqHandler);
}
if(this.options.deepLink) {
$(window).on('hashchange', this._checkDeepLink);
}
}
/**
* Adds click handlers for items within the tabs.
* @private
*/
_addClickHandler() {
var _this = this;
this.$element
.off('click.zf.tabs')
.on('click.zf.tabs', `.${this.options.linkClass}`, function(e){
e.preventDefault();
e.stopPropagation();
_this._handleTabChange($(this));
});
}
/**
* Adds keyboard event handlers for items within the tabs.
* @private
*/
_addKeyHandler() {
var _this = this;
this.$tabTitles.off('keydown.zf.tabs').on('keydown.zf.tabs', function(e){
if (e.which === 9) return;
var $element = $(this),
$elements = $element.parent('ul').children('li'),
$prevElement,
$nextElement;
$elements.each(function(i) {
if ($(this).is($element)) {
if (_this.options.wrapOnKeys) {
$prevElement = i === 0 ? $elements.last() : $elements.eq(i-1);
$nextElement = i === $elements.length -1 ? $elements.first() : $elements.eq(i+1);
} else {
$prevElement = $elements.eq(Math.max(0, i-1));
$nextElement = $elements.eq(Math.min(i+1, $elements.length-1));
}
return;
}
});
// handle keyboard event with keyboard util
Keyboard.handleKey(e, 'Tabs', {
open: function() {
$element.find('[role="tab"]').focus();
_this._handleTabChange($element);
},
previous: function() {
$prevElement.find('[role="tab"]').focus();
_this._handleTabChange($prevElement);
},
next: function() {
$nextElement.find('[role="tab"]').focus();
_this._handleTabChange($nextElement);
},
handled: function() {
e.stopPropagation();
e.preventDefault();
}
});
});
}
/**
* Opens the tab `$targetContent` defined by `$target`. Collapses active tab.
* @param {jQuery} $target - Tab to open.
* @param {boolean} historyHandled - browser has already handled a history update
* @fires Tabs#change
* @function
*/
_handleTabChange($target, historyHandled) {
// With `activeCollapse`, if the target is the active Tab, collapse it.
if ($target.hasClass(`${this.options.linkActiveClass}`)) {
if(this.options.activeCollapse) {
this._collapse();
}
return;
}
var $oldTab = this.$element.
find(`.${this.options.linkClass}.${this.options.linkActiveClass}`),
$tabLink = $target.find('[role="tab"]'),
target = $tabLink.attr('data-tabs-target'),
anchor = target && target.length ? `#${target}` : $tabLink[0].hash,
$targetContent = this.$tabContent.find(anchor);
//close old tab
this._collapseTab($oldTab);
//open new tab
this._openTab($target);
//either replace or update browser history
if (this.options.deepLink && !historyHandled) {
if (this.options.updateHistory) {
history.pushState({}, '', anchor);
} else {
history.replaceState({}, '', anchor);
}
}
/**
* Fires when the plugin has successfully changed tabs.
* @event Tabs#change
*/
this.$element.trigger('change.zf.tabs', [$target, $targetContent]);
//fire to children a mutation event
$targetContent.find("[data-mutate]").trigger("mutateme.zf.trigger");
}
/**
* Opens the tab `$targetContent` defined by `$target`.
* @param {jQuery} $target - Tab to open.
* @function
*/
_openTab($target) {
var $tabLink = $target.find('[role="tab"]'),
hash = $tabLink.attr('data-tabs-target') || $tabLink[0].hash.slice(1),
$targetContent = this.$tabContent.find(`#${hash}`);
$target.addClass(`${this.options.linkActiveClass}`);
$tabLink.attr({
'aria-selected': 'true',
'tabindex': '0'
});
$targetContent
.addClass(`${this.options.panelActiveClass}`).removeAttr('aria-hidden');
}
/**
* Collapses `$targetContent` defined by `$target`.
* @param {jQuery} $target - Tab to collapse.
* @function
*/
_collapseTab($target) {
var $target_anchor = $target
.removeClass(`${this.options.linkActiveClass}`)
.find('[role="tab"]')
.attr({
'aria-selected': 'false',
'tabindex': -1
});
$(`#${$target_anchor.attr('aria-controls')}`)
.removeClass(`${this.options.panelActiveClass}`)
.attr({ 'aria-hidden': 'true' });
}
/**
* Collapses the active Tab.
* @fires Tabs#collapse
* @function
*/
_collapse() {
var $activeTab = this.$element.find(`.${this.options.linkClass}.${this.options.linkActiveClass}`);
if ($activeTab.length) {
this._collapseTab($activeTab);
/**
* Fires when the plugin has successfully collapsed tabs.
* @event Tabs#collapse
*/
this.$element.trigger('collapse.zf.tabs', [$activeTab]);
}
}
/**
* Public method for selecting a content pane to display.
* @param {jQuery | String} elem - jQuery object or string of the id of the pane to display.
* @param {boolean} historyHandled - browser has already handled a history update
* @function
*/
selectTab(elem, historyHandled) {
var idStr;
if (typeof elem === 'object') {
idStr = elem[0].id;
} else {
idStr = elem;
}
if (idStr.indexOf('#') < 0) {
idStr = `#${idStr}`;
}
var $target = this.$tabTitles.has(`[href$="${idStr}"]`);
this._handleTabChange($target, historyHandled);
};
/**
* Sets the height of each panel to the height of the tallest panel.
* If enabled in options, gets called on media query change.
* If loading content via external source, can be called directly or with _reflow.
* If enabled with `data-match-height="true"`, tabs sets to equal height
* @function
* @private
*/
_setHeight() {
var max = 0,
_this = this; // Lock down the `this` value for the root tabs object
this.$tabContent
.find(`.${this.options.panelClass}`)
.css('height', '')
.each(function() {
var panel = $(this),
isActive = panel.hasClass(`${_this.options.panelActiveClass}`); // get the options from the parent instead of trying to get them from the child
if (!isActive) {
panel.css({'visibility': 'hidden', 'display': 'block'});
}
var temp = this.getBoundingClientRect().height;
if (!isActive) {
panel.css({
'visibility': '',
'display': ''
});
}
max = temp > max ? temp : max;
})
.css('height', `${max}px`);
}
/**
* Destroys an instance of tabs.
* @fires Tabs#destroyed
*/
_destroy() {
this.$element
.find(`.${this.options.linkClass}`)
.off('.zf.tabs').hide().end()
.find(`.${this.options.panelClass}`)
.hide();
if (this.options.matchHeight) {
if (this._setHeightMqHandler != null) {
$(window).off('changed.zf.mediaquery', this._setHeightMqHandler);
}
}
if (this.options.deepLink) {
$(window).off('hashchange', this._checkDeepLink);
}
if (this.onLoadListener) {
$(window).off(this.onLoadListener);
}
}
}
Tabs.defaults = {
/**
* Link the location hash to the active pane.
* Set the location hash when the active pane changes, and open the corresponding pane when the location changes.
* @option
* @type {boolean}
* @default false
*/
deepLink: false,
/**
* If `deepLink` is enabled, adjust the deep link scroll to make sure the top of the tab panel is visible
* @option
* @type {boolean}
* @default false
*/
deepLinkSmudge: false,
/**
* If `deepLinkSmudge` is enabled, animation time (ms) for the deep link adjustment
* @option
* @type {number}
* @default 300
*/
deepLinkSmudgeDelay: 300,
/**
* If `deepLink` is enabled, update the browser history with the open tab
* @option
* @type {boolean}
* @default false
*/
updateHistory: false,
/**
* Allows the window to scroll to content of active pane on load.
* Not recommended if more than one tab panel per page.
* @option
* @type {boolean}
* @default false
*/
autoFocus: false,
/**
* Allows keyboard input to 'wrap' around the tab links.
* @option
* @type {boolean}
* @default true
*/
wrapOnKeys: true,
/**
* Allows the tab content panes to match heights if set to true.
* @option
* @type {boolean}
* @default false
*/
matchHeight: false,
/**
* Allows active tabs to collapse when clicked.
* @option
* @type {boolean}
* @default false
*/
activeCollapse: false,
/**
* Class applied to `li`'s in tab link list.
* @option
* @type {string}
* @default 'tabs-title'
*/
linkClass: 'tabs-title',
/**
* Class applied to the active `li` in tab link list.
* @option
* @type {string}
* @default 'is-active'
*/
linkActiveClass: 'is-active',
/**
* Class applied to the content containers.
* @option
* @type {string}
* @default 'tabs-panel'
*/
panelClass: 'tabs-panel',
/**
* Class applied to the active content container.
* @option
* @type {string}
* @default 'is-active'
*/
panelActiveClass: 'is-active'
};
/**
* Toggler module.
* @module foundation.toggler
* @requires foundation.util.motion
* @requires foundation.util.triggers
*/
class Toggler extends Plugin {
/**
* Creates a new instance of Toggler.
* @class
* @name Toggler
* @fires Toggler#init
* @param {Object} element - jQuery object to add the trigger to.
* @param {Object} options - Overrides to the default plugin settings.
*/
_setup(element, options) {
this.$element = element;
this.options = $.extend({}, Toggler.defaults, element.data(), options);
this.className = '';
this.className = 'Toggler'; // ie9 back compat
// Triggers init is idempotent, just need to make sure it is initialized
Triggers.init($);
this._init();
this._events();
}
/**
* Initializes the Toggler plugin by parsing the toggle class from data-toggler, or animation classes from data-animate.
* @function
* @private
*/
_init() {
var input;
// Parse animation classes if they were set
if (this.options.animate) {
input = this.options.animate.split(' ');
this.animationIn = input[0];
this.animationOut = input[1] || null;
}
// Otherwise, parse toggle class
else {
input = this.$element.data('toggler');
// Allow for a . at the beginning of the string
this.className = input[0] === '.' ? input.slice(1) : input;
}
// Add ARIA attributes to triggers:
var id = this.$element[0].id,
$triggers = $(`[data-open~="${id}"], [data-close~="${id}"], [data-toggle~="${id}"]`);
// - aria-expanded: according to the element visibility.
$triggers.attr('aria-expanded', !this.$element.is(':hidden'));
// - aria-controls: adding the element id to it if not already in it.
$triggers.each((index, trigger) => {
const $trigger = $(trigger);
const controls = $trigger.attr('aria-controls') || '';
const containsId = new RegExp(`\\b${RegExpEscape(id)}\\b`).test(controls);
if (!containsId) $trigger.attr('aria-controls', controls ? `${controls} ${id}` : id);
});
}
/**
* Initializes events for the toggle trigger.
* @function
* @private
*/
_events() {
this.$element.off('toggle.zf.trigger').on('toggle.zf.trigger', this.toggle.bind(this));
}
/**
* Toggles the target class on the target element. An event is fired from the original trigger depending on if the resultant state was "on" or "off".
* @function
* @fires Toggler#on
* @fires Toggler#off
*/
toggle() {
this[ this.options.animate ? '_toggleAnimate' : '_toggleClass']();
}
_toggleClass() {
this.$element.toggleClass(this.className);
var isOn = this.$element.hasClass(this.className);
if (isOn) {
/**
* Fires if the target element has the class after a toggle.
* @event Toggler#on
*/
this.$element.trigger('on.zf.toggler');
}
else {
/**
* Fires if the target element does not have the class after a toggle.
* @event Toggler#off
*/
this.$element.trigger('off.zf.toggler');
}
this._updateARIA(isOn);
this.$element.find('[data-mutate]').trigger('mutateme.zf.trigger');
}
_toggleAnimate() {
var _this = this;
if (this.$element.is(':hidden')) {
Motion.animateIn(this.$element, this.animationIn, function() {
_this._updateARIA(true);
this.trigger('on.zf.toggler');
this.find('[data-mutate]').trigger('mutateme.zf.trigger');
});
}
else {
Motion.animateOut(this.$element, this.animationOut, function() {
_this._updateARIA(false);
this.trigger('off.zf.toggler');
this.find('[data-mutate]').trigger('mutateme.zf.trigger');
});
}
}
_updateARIA(isOn) {
var id = this.$element[0].id;
$(`[data-open="${id}"], [data-close="${id}"], [data-toggle="${id}"]`)
.attr({
'aria-expanded': isOn ? true : false
});
}
/**
* Destroys the instance of Toggler on the element.
* @function
*/
_destroy() {
this.$element.off('.zf.toggler');
}
}
Toggler.defaults = {
/**
* Tells the plugin if the element should animated when toggled.
* @option
* @type {boolean}
* @default false
*/
animate: false
};
/**
* Tooltip module.
* @module foundation.tooltip
* @requires foundation.util.box
* @requires foundation.util.mediaQuery
* @requires foundation.util.triggers
*/
class Tooltip extends Positionable {
/**
* Creates a new instance of a Tooltip.
* @class
* @name Tooltip
* @fires Tooltip#init
* @param {jQuery} element - jQuery object to attach a tooltip to.
* @param {Object} options - object to extend the default configuration.
*/
_setup(element, options) {
this.$element = element;
this.options = $.extend({}, Tooltip.defaults, this.$element.data(), options);
this.className = 'Tooltip'; // ie9 back compat
this.isActive = false;
this.isClick = false;
// Triggers init is idempotent, just need to make sure it is initialized
Triggers.init($);
this._init();
}
/**
* Initializes the tooltip by setting the creating the tip element, adding it's text, setting private variables and setting attributes on the anchor.
* @private
*/
_init() {
MediaQuery._init();
var elemId = this.$element.attr('aria-describedby') || GetYoDigits(6, 'tooltip');
this.options.tipText = this.options.tipText || this.$element.attr('title');
this.template = this.options.template ? $(this.options.template) : this._buildTemplate(elemId);
if (this.options.allowHtml) {
this.template.appendTo(document.body)
.html(this.options.tipText)
.hide();
} else {
this.template.appendTo(document.body)
.text(this.options.tipText)
.hide();
}
this.$element.attr({
'title': '',
'aria-describedby': elemId,
'data-yeti-box': elemId,
'data-toggle': elemId,
'data-resize': elemId
}).addClass(this.options.triggerClass);
super._init();
this._events();
}
_getDefaultPosition() {
// handle legacy classnames
var position = this.$element[0].className.match(/\b(top|left|right|bottom)\b/g);
return position ? position[0] : 'top';
}
_getDefaultAlignment() {
return 'center';
}
_getHOffset() {
if(this.position === 'left' || this.position === 'right') {
return this.options.hOffset + this.options.tooltipWidth;
} else {
return this.options.hOffset
}
}
_getVOffset() {
if(this.position === 'top' || this.position === 'bottom') {
return this.options.vOffset + this.options.tooltipHeight;
} else {
return this.options.vOffset
}
}
/**
* builds the tooltip element, adds attributes, and returns the template.
* @private
*/
_buildTemplate(id) {
var templateClasses = (`${this.options.tooltipClass} ${this.options.templateClasses}`).trim();
var $template = $('
').addClass(templateClasses).attr({
'role': 'tooltip',
'aria-hidden': true,
'data-is-active': false,
'data-is-focus': false,
'id': id
});
return $template;
}
/**
* sets the position class of an element and recursively calls itself until there are no more possible positions to attempt, or the tooltip element is no longer colliding.
* if the tooltip is larger than the screen width, default to full width - any user selected margin
* @private
*/
_setPosition() {
super._setPosition(this.$element, this.template);
}
/**
* reveals the tooltip, and fires an event to close any other open tooltips on the page
* @fires Tooltip#closeme
* @fires Tooltip#show
* @function
*/
show() {
if (this.options.showOn !== 'all' && !MediaQuery.is(this.options.showOn)) {
// console.error('The screen is too small to display this tooltip');
return false;
}
var _this = this;
this.template.css('visibility', 'hidden').show();
this._setPosition();
this.template.removeClass('top bottom left right').addClass(this.position);
this.template.removeClass('align-top align-bottom align-left align-right align-center').addClass('align-' + this.alignment);
/**
* Fires to close all other open tooltips on the page
* @event Closeme#tooltip
*/
this.$element.trigger('closeme.zf.tooltip', this.template.attr('id'));
this.template.attr({
'data-is-active': true,
'aria-hidden': false
});
_this.isActive = true;
// console.log(this.template);
this.template.stop().hide().css('visibility', '').fadeIn(this.options.fadeInDuration, function() {
//maybe do stuff?
});
/**
* Fires when the tooltip is shown
* @event Tooltip#show
*/
this.$element.trigger('show.zf.tooltip');
}
/**
* Hides the current tooltip, and resets the positioning class if it was changed due to collision
* @fires Tooltip#hide
* @function
*/
hide() {
// console.log('hiding', this.$element.data('yeti-box'));
var _this = this;
this.template.stop().attr({
'aria-hidden': true,
'data-is-active': false
}).fadeOut(this.options.fadeOutDuration, function() {
_this.isActive = false;
_this.isClick = false;
});
/**
* fires when the tooltip is hidden
* @event Tooltip#hide
*/
this.$element.trigger('hide.zf.tooltip');
}
/**
* adds event listeners for the tooltip and its anchor
* TODO combine some of the listeners like focus and mouseenter, etc.
* @private
*/
_events() {
var _this = this;
var $template = this.template;
var isFocus = false;
if (!this.options.disableHover) {
this.$element
.on('mouseenter.zf.tooltip', function(e) {
if (!_this.isActive) {
_this.timeout = setTimeout(function() {
_this.show();
}, _this.options.hoverDelay);
}
})
.on('mouseleave.zf.tooltip', ignoreMousedisappear(function(e) {
clearTimeout(_this.timeout);
if (!isFocus || (_this.isClick && !_this.options.clickOpen)) {
_this.hide();
}
}));
}
if (this.options.clickOpen) {
this.$element.on('mousedown.zf.tooltip', function(e) {
e.stopImmediatePropagation();
if (_this.isClick) ; else {
_this.isClick = true;
if ((_this.options.disableHover || !_this.$element.attr('tabindex')) && !_this.isActive) {
_this.show();
}
}
});
} else {
this.$element.on('mousedown.zf.tooltip', function(e) {
e.stopImmediatePropagation();
_this.isClick = true;
});
}
if (!this.options.disableForTouch) {
this.$element
.on('tap.zf.tooltip touchend.zf.tooltip', function(e) {
_this.isActive ? _this.hide() : _this.show();
});
}
this.$element.on({
// 'toggle.zf.trigger': this.toggle.bind(this),
// 'close.zf.trigger': this.hide.bind(this)
'close.zf.trigger': this.hide.bind(this)
});
this.$element
.on('focus.zf.tooltip', function(e) {
isFocus = true;
if (_this.isClick) {
// If we're not showing open on clicks, we need to pretend a click-launched focus isn't
// a real focus, otherwise on hover and come back we get bad behavior
if(!_this.options.clickOpen) { isFocus = false; }
return false;
} else {
_this.show();
}
})
.on('focusout.zf.tooltip', function(e) {
isFocus = false;
_this.isClick = false;
_this.hide();
})
.on('resizeme.zf.trigger', function() {
if (_this.isActive) {
_this._setPosition();
}
});
}
/**
* adds a toggle method, in addition to the static show() & hide() functions
* @function
*/
toggle() {
if (this.isActive) {
this.hide();
} else {
this.show();
}
}
/**
* Destroys an instance of tooltip, removes template element from the view.
* @function
*/
_destroy() {
this.$element.attr('title', this.template.text())
.off('.zf.trigger .zf.tooltip')
.removeClass(this.options.triggerClass)
.removeClass('top right left bottom')
.removeAttr('aria-describedby data-disable-hover data-resize data-toggle data-tooltip data-yeti-box');
this.template.remove();
}
}
Tooltip.defaults = {
disableForTouch: false,
/**
* Time, in ms, before a tooltip should open on hover.
* @option
* @type {number}
* @default 200
*/
hoverDelay: 200,
/**
* Time, in ms, a tooltip should take to fade into view.
* @option
* @type {number}
* @default 150
*/
fadeInDuration: 150,
/**
* Time, in ms, a tooltip should take to fade out of view.
* @option
* @type {number}
* @default 150
*/
fadeOutDuration: 150,
/**
* Disables hover events from opening the tooltip if set to true
* @option
* @type {boolean}
* @default false
*/
disableHover: false,
/**
* Optional addtional classes to apply to the tooltip template on init.
* @option
* @type {string}
* @default ''
*/
templateClasses: '',
/**
* Non-optional class added to tooltip templates. Foundation default is 'tooltip'.
* @option
* @type {string}
* @default 'tooltip'
*/
tooltipClass: 'tooltip',
/**
* Class applied to the tooltip anchor element.
* @option
* @type {string}
* @default 'has-tip'
*/
triggerClass: 'has-tip',
/**
* Minimum breakpoint size at which to open the tooltip.
* @option
* @type {string}
* @default 'small'
*/
showOn: 'small',
/**
* Custom template to be used to generate markup for tooltip.
* @option
* @type {string}
* @default ''
*/
template: '',
/**
* Text displayed in the tooltip template on open.
* @option
* @type {string}
* @default ''
*/
tipText: '',
touchCloseText: 'Tap to close.',
/**
* Allows the tooltip to remain open if triggered with a click or touch event.
* @option
* @type {boolean}
* @default true
*/
clickOpen: true,
/**
* Position of tooltip. Can be left, right, bottom, top, or auto.
* @option
* @type {string}
* @default 'auto'
*/
position: 'auto',
/**
* Alignment of tooltip relative to anchor. Can be left, right, bottom, top, center, or auto.
* @option
* @type {string}
* @default 'auto'
*/
alignment: 'auto',
/**
* Allow overlap of container/window. If false, tooltip will first try to
* position as defined by data-position and data-alignment, but reposition if
* it would cause an overflow. @option
* @type {boolean}
* @default false
*/
allowOverlap: false,
/**
* Allow overlap of only the bottom of the container. This is the most common
* behavior for dropdowns, allowing the dropdown to extend the bottom of the
* screen but not otherwise influence or break out of the container.
* Less common for tooltips.
* @option
* @type {boolean}
* @default false
*/
allowBottomOverlap: false,
/**
* Distance, in pixels, the template should push away from the anchor on the Y axis.
* @option
* @type {number}
* @default 0
*/
vOffset: 0,
/**
* Distance, in pixels, the template should push away from the anchor on the X axis
* @option
* @type {number}
* @default 0
*/
hOffset: 0,
/**
* Distance, in pixels, the template spacing auto-adjust for a vertical tooltip
* @option
* @type {number}
* @default 14
*/
tooltipHeight: 14,
/**
* Distance, in pixels, the template spacing auto-adjust for a horizontal tooltip
* @option
* @type {number}
* @default 12
*/
tooltipWidth: 12,
/**
* Allow HTML in tooltip. Warning: If you are loading user-generated content into tooltips,
* allowing HTML may open yourself up to XSS attacks.
* @option
* @type {boolean}
* @default false
*/
allowHtml: false
};
// The plugin matches the plugin classes with these plugin instances.
var MenuPlugins$1 = {
tabs: {
cssClass: 'tabs',
plugin: Tabs
},
accordion: {
cssClass: 'accordion',
plugin: Accordion
}
};
/**
* ResponsiveAccordionTabs module.
* @module foundation.responsiveAccordionTabs
* @requires foundation.util.motion
* @requires foundation.accordion
* @requires foundation.tabs
*/
class ResponsiveAccordionTabs extends Plugin{
/**
* Creates a new instance of a responsive accordion tabs.
* @class
* @name ResponsiveAccordionTabs
* @fires ResponsiveAccordionTabs#init
* @param {jQuery} element - jQuery object to make into Responsive Accordion Tabs.
* @param {Object} options - Overrides to the default plugin settings.
*/
_setup(element, options) {
this.$element = $(element);
this.options = $.extend({}, this.$element.data(), options);
this.rules = this.$element.data('responsive-accordion-tabs');
this.currentMq = null;
this.currentPlugin = null;
this.className = 'ResponsiveAccordionTabs'; // ie9 back compat
if (!this.$element.attr('id')) {
this.$element.attr('id',GetYoDigits(6, 'responsiveaccordiontabs'));
}
this._init();
this._events();
}
/**
* Initializes the Menu by parsing the classes from the 'data-responsive-accordion-tabs' attribute on the element.
* @function
* @private
*/
_init() {
MediaQuery._init();
// The first time an Interchange plugin is initialized, this.rules is converted from a string of "classes" to an object of rules
if (typeof this.rules === 'string') {
let rulesTree = {};
// Parse rules from "classes" pulled from data attribute
let rules = this.rules.split(' ');
// Iterate through every rule found
for (let i = 0; i < rules.length; i++) {
let rule = rules[i].split('-');
let ruleSize = rule.length > 1 ? rule[0] : 'small';
let rulePlugin = rule.length > 1 ? rule[1] : rule[0];
if (MenuPlugins$1[rulePlugin] !== null) {
rulesTree[ruleSize] = MenuPlugins$1[rulePlugin];
}
}
this.rules = rulesTree;
}
this._getAllOptions();
if (!$.isEmptyObject(this.rules)) {
this._checkMediaQueries();
}
}
_getAllOptions() {
//get all defaults and options
var _this = this;
_this.allOptions = {};
for (var key in MenuPlugins$1) {
if (MenuPlugins$1.hasOwnProperty(key)) {
var obj = MenuPlugins$1[key];
try {
var dummyPlugin = $('');
var tmpPlugin = new obj.plugin(dummyPlugin,_this.options);
for (var keyKey in tmpPlugin.options) {
if (tmpPlugin.options.hasOwnProperty(keyKey) && keyKey !== 'zfPlugin') {
var objObj = tmpPlugin.options[keyKey];
_this.allOptions[keyKey] = objObj;
}
}
tmpPlugin.destroy();
}
catch(e) {
}
}
}
}
/**
* Initializes events for the Menu.
* @function
* @private
*/
_events() {
this._changedZfMediaQueryHandler = this._checkMediaQueries.bind(this);
$(window).on('changed.zf.mediaquery', this._changedZfMediaQueryHandler);
}
/**
* Checks the current screen width against available media queries. If the media query has changed, and the plugin needed has changed, the plugins will swap out.
* @function
* @private
*/
_checkMediaQueries() {
var matchedMq, _this = this;
// Iterate through each rule and find the last matching rule
$.each(this.rules, function(key) {
if (MediaQuery.atLeast(key)) {
matchedMq = key;
}
});
// No match? No dice
if (!matchedMq) return;
// Plugin already initialized? We good
if (this.currentPlugin instanceof this.rules[matchedMq].plugin) return;
// Remove existing plugin-specific CSS classes
$.each(MenuPlugins$1, function(key, value) {
_this.$element.removeClass(value.cssClass);
});
// Add the CSS class for the new plugin
this.$element.addClass(this.rules[matchedMq].cssClass);
// Create an instance of the new plugin
if (this.currentPlugin) {
//don't know why but on nested elements data zfPlugin get's lost
if (!this.currentPlugin.$element.data('zfPlugin') && this.storezfData) this.currentPlugin.$element.data('zfPlugin',this.storezfData);
this.currentPlugin.destroy();
}
this._handleMarkup(this.rules[matchedMq].cssClass);
this.currentPlugin = new this.rules[matchedMq].plugin(this.$element, {});
this.storezfData = this.currentPlugin.$element.data('zfPlugin');
}
_handleMarkup(toSet){
var _this = this, fromString = 'accordion';
var $panels = $('[data-tabs-content='+this.$element.attr('id')+']');
if ($panels.length) fromString = 'tabs';
if (fromString === toSet) {
return;
}
var tabsTitle = _this.allOptions.linkClass?_this.allOptions.linkClass:'tabs-title';
var tabsPanel = _this.allOptions.panelClass?_this.allOptions.panelClass:'tabs-panel';
this.$element.removeAttr('role');
var $liHeads = this.$element.children('.'+tabsTitle+',[data-accordion-item]').removeClass(tabsTitle).removeClass('accordion-item').removeAttr('data-accordion-item');
var $liHeadsA = $liHeads.children('a').removeClass('accordion-title');
if (fromString === 'tabs') {
$panels = $panels.children('.'+tabsPanel).removeClass(tabsPanel).removeAttr('role').removeAttr('aria-hidden').removeAttr('aria-labelledby');
$panels.children('a').removeAttr('role').removeAttr('aria-controls').removeAttr('aria-selected');
}else{
$panels = $liHeads.children('[data-tab-content]').removeClass('accordion-content');
}
$panels.css({display:'',visibility:''});
$liHeads.css({display:'',visibility:''});
if (toSet === 'accordion') {
$panels.each(function(key,value){
$(value).appendTo($liHeads.get(key)).addClass('accordion-content').attr('data-tab-content','').removeClass('is-active').css({height:''});
$('[data-tabs-content='+_this.$element.attr('id')+']').after('
').detach();
$liHeads.addClass('accordion-item').attr('data-accordion-item','');
$liHeadsA.addClass('accordion-title');
});
}else if (toSet === 'tabs'){
var $tabsContent = $('[data-tabs-content='+_this.$element.attr('id')+']');
var $placeholder = $('#tabs-placeholder-'+_this.$element.attr('id'));
if ($placeholder.length) {
$tabsContent = $('
').insertAfter($placeholder).attr('data-tabs-content',_this.$element.attr('id'));
$placeholder.remove();
}else{
$tabsContent = $('
').insertAfter(_this.$element).attr('data-tabs-content',_this.$element.attr('id'));
} $panels.each(function(key,value){
var tempValue = $(value).appendTo($tabsContent).addClass(tabsPanel);
var hash = $liHeadsA.get(key).hash.slice(1);
var id = $(value).attr('id') || GetYoDigits(6, 'accordion');
if (hash !== id) {
if (hash !== '') {
$(value).attr('id',hash);
}else{
hash = id;
$(value).attr('id',hash);
$($liHeadsA.get(key)).attr('href',$($liHeadsA.get(key)).attr('href').replace('#','')+'#'+hash);
} } var isActive = $($liHeads.get(key)).hasClass('is-active');
if (isActive) {
tempValue.addClass('is-active');
} });
$liHeads.addClass(tabsTitle);
} }
/**
* Destroys the instance of the current plugin on this element, as well as the window resize handler that switches the plugins out.
* @function
*/
_destroy() {
if (this.currentPlugin) this.currentPlugin.destroy();
$(window).off('changed.zf.mediaquery', this._changedZfMediaQueryHandler);
}
}
ResponsiveAccordionTabs.defaults = {};
Foundation.addToJquery($);
// Add Foundation Utils to Foundation global namespace for backwards
// compatibility.
Foundation.rtl = rtl;
Foundation.GetYoDigits = GetYoDigits;
Foundation.transitionend = transitionend;
Foundation.RegExpEscape = RegExpEscape;
Foundation.onLoad = onLoad;
Foundation.Box = Box;
Foundation.onImagesLoaded = onImagesLoaded;
Foundation.Keyboard = Keyboard;
Foundation.MediaQuery = MediaQuery;
Foundation.Motion = Motion;
Foundation.Move = Move;
Foundation.Nest = Nest;
Foundation.Timer = Timer;
// Touch and Triggers previously were almost purely sede effect driven,
// so no need to add it to Foundation, just init them.
Touch.init($);
Triggers.init($, Foundation);
MediaQuery._init();
Foundation.plugin(Abide, 'Abide');
Foundation.plugin(Accordion, 'Accordion');
Foundation.plugin(AccordionMenu, 'AccordionMenu');
Foundation.plugin(Drilldown, 'Drilldown');
Foundation.plugin(Dropdown, 'Dropdown');
Foundation.plugin(DropdownMenu, 'DropdownMenu');
Foundation.plugin(Equalizer, 'Equalizer');
Foundation.plugin(Interchange, 'Interchange');
Foundation.plugin(Magellan, 'Magellan');
Foundation.plugin(OffCanvas, 'OffCanvas');
Foundation.plugin(Orbit, 'Orbit');
Foundation.plugin(ResponsiveMenu, 'ResponsiveMenu');
Foundation.plugin(ResponsiveToggle, 'ResponsiveToggle');
Foundation.plugin(Reveal, 'Reveal');
Foundation.plugin(Slider, 'Slider');
Foundation.plugin(SmoothScroll, 'SmoothScroll');
Foundation.plugin(Sticky, 'Sticky');
Foundation.plugin(Tabs, 'Tabs');
Foundation.plugin(Toggler, 'Toggler');
Foundation.plugin(Tooltip, 'Tooltip');
Foundation.plugin(ResponsiveAccordionTabs, 'ResponsiveAccordionTabs');
export default Foundation;
export { foundation_core_utils as CoreUtils, Foundation as Core, Box, onImagesLoaded, Keyboard, MediaQuery, Motion, Move, Nest, Timer, Touch, Triggers, Abide, Accordion, AccordionMenu, Drilldown, Dropdown, DropdownMenu, Equalizer, Interchange, Magellan, OffCanvas, Orbit, ResponsiveMenu, ResponsiveToggle, Reveal, Slider, SmoothScroll, Sticky, Tabs, Toggler, Tooltip, ResponsiveAccordionTabs, Foundation };
//# sourceMappingURL=foundation.es6.js.map