From: Kevin Ball Date: Thu, 5 Jan 2017 00:49:40 +0000 (-0800) Subject: Initial work to isolate global references X-Git-Tag: v6.4.0-rc1~51^2~41 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=28f48580e7dc476aeb82043607651044bd0131e9;p=thirdparty%2Ffoundation%2Ffoundation-sites.git Initial work to isolate global references --- diff --git a/js/foundation.accordion.js b/js/foundation.accordion.js index 13977624f..19fcd0898 100644 --- a/js/foundation.accordion.js +++ b/js/foundation.accordion.js @@ -2,11 +2,13 @@ !function($) { + let Keyboard = Foundation.Keyboard; // import Keyboard from 'foundation.util.keyboard' + let GetYoDigits = Foundation.GetYoDigits; // currently part of foundation.core. Refactor? + /** * Accordion module. * @module foundation.accordion * @requires foundation.util.keyboard - * @requires foundation.util.motion */ class Accordion { @@ -24,7 +26,7 @@ class Accordion { this._init(); Foundation.registerPlugin(this, 'Accordion'); - Foundation.Keyboard.register('Accordion', { + Keyboard.register('Accordion', { 'ENTER': 'toggle', 'SPACE': 'toggle', 'ARROW_DOWN': 'next', @@ -43,7 +45,7 @@ class Accordion { this.$tabs.each(function(idx, el) { var $el = $(el), $content = $el.children('[data-tab-content]'), - id = $content[0].id || Foundation.GetYoDigits(6, 'accordion'), + id = $content[0].id || GetYoDigits(6, 'accordion'), linkId = el.id || `${id}-label`; $el.find('a:first').attr({ @@ -118,7 +120,7 @@ class Accordion { e.preventDefault(); _this.toggle($tabContent); }).on('keydown.zf.accordion', function(e){ - Foundation.Keyboard.handleKey(e, 'Accordion', { + Keyboard.handleKey(e, 'Accordion', { toggle: function() { _this.toggle($tabContent); }, @@ -219,15 +221,13 @@ class Accordion { return; } - // Foundation.Move(this.options.slideSpeed, $target, function(){ - $target.slideUp(_this.options.slideSpeed, function () { - /** - * Fires when the tab is done collapsing up. - * @event Accordion#up - */ - _this.$element.trigger('up.zf.accordion', [$target]); - }); - // }); + $target.slideUp(_this.options.slideSpeed, function () { + /** + * Fires when the tab is done collapsing up. + * @event Accordion#up + */ + _this.$element.trigger('up.zf.accordion', [$target]); + }); $target.attr('aria-hidden', true) .parent().removeClass('is-active'); diff --git a/js/foundation.accordionMenu.js b/js/foundation.accordionMenu.js index e607b158a..05fdbcb8c 100644 --- a/js/foundation.accordionMenu.js +++ b/js/foundation.accordionMenu.js @@ -2,11 +2,14 @@ !function($) { + let Keyboard = Foundation.Keyboard; // import Keyboard from "foundation.util.keyboard" + let Nest = Foundation.Nest; // import Nest from "foundation.util.nest" + let GetYoDigits = Foundation.GetYoDigits; // add import after refactor + /** * AccordionMenu module. * @module foundation.accordionMenu * @requires foundation.util.keyboard - * @requires foundation.util.motion * @requires foundation.util.nest */ @@ -22,12 +25,12 @@ class AccordionMenu { this.$element = element; this.options = $.extend({}, AccordionMenu.defaults, this.$element.data(), options); - Foundation.Nest.Feather(this.$element, 'accordion'); + Nest.Feather(this.$element, 'accordion'); this._init(); Foundation.registerPlugin(this, 'AccordionMenu'); - Foundation.Keyboard.register('AccordionMenu', { + Keyboard.register('AccordionMenu', { 'ENTER': 'toggle', 'SPACE': 'toggle', 'ARROW_RIGHT': 'open', @@ -53,10 +56,10 @@ class AccordionMenu { this.$menuLinks = this.$element.find('.is-accordion-submenu-parent'); this.$menuLinks.each(function(){ - var linkId = this.id || Foundation.GetYoDigits(6, 'acc-menu-link'), + var linkId = this.id || GetYoDigits(6, 'acc-menu-link'), $elem = $(this), $sub = $elem.children('[data-submenu]'), - subId = $sub[0].id || Foundation.GetYoDigits(6, 'acc-menu'), + subId = $sub[0].id || GetYoDigits(6, 'acc-menu'), isActive = $sub.hasClass('is-active'); $elem.attr({ 'aria-controls': subId, @@ -126,7 +129,7 @@ class AccordionMenu { } }); - Foundation.Keyboard.handleKey(e, 'AccordionMenu', { + Keyboard.handleKey(e, 'AccordionMenu', { open: function() { if ($target.is(':hidden')) { _this.down($target); @@ -214,15 +217,13 @@ class AccordionMenu { $target.addClass('is-active').attr({'aria-hidden': false}) .parent('.is-accordion-submenu-parent').attr({'aria-expanded': true}); - //Foundation.Move(this.options.slideSpeed, $target, function() { - $target.slideDown(_this.options.slideSpeed, function () { - /** - * Fires when the menu is done opening. - * @event AccordionMenu#down - */ - _this.$element.trigger('down.zf.accordionMenu', [$target]); - }); - //}); + $target.slideDown(_this.options.slideSpeed, function () { + /** + * Fires when the menu is done opening. + * @event AccordionMenu#down + */ + _this.$element.trigger('down.zf.accordionMenu', [$target]); + }); } /** @@ -232,15 +233,13 @@ class AccordionMenu { */ up($target) { var _this = this; - //Foundation.Move(this.options.slideSpeed, $target, function(){ - $target.slideUp(_this.options.slideSpeed, function () { - /** - * Fires when the menu is done collapsing up. - * @event AccordionMenu#up - */ - _this.$element.trigger('up.zf.accordionMenu', [$target]); - }); - //}); + $target.slideUp(_this.options.slideSpeed, function () { + /** + * Fires when the menu is done collapsing up. + * @event AccordionMenu#up + */ + _this.$element.trigger('up.zf.accordionMenu', [$target]); + }); var $menus = $target.find('[data-submenu]').slideUp(0).addBack().attr('aria-hidden', true); @@ -255,7 +254,7 @@ class AccordionMenu { this.$element.find('[data-submenu]').slideDown(0).css('display', ''); this.$element.find('a').off('click.zf.accordionMenu'); - Foundation.Nest.Burn(this.$element, 'accordion'); + Nest.Burn(this.$element, 'accordion'); Foundation.unregisterPlugin(this); } } diff --git a/js/foundation.drilldown.js b/js/foundation.drilldown.js index 3e5f72da4..fb7fd2553 100644 --- a/js/foundation.drilldown.js +++ b/js/foundation.drilldown.js @@ -2,12 +2,18 @@ !function($) { + let Keyboard = Foundation.Keyboard; // import Keyboard from "foundation.util.keyboard"; + let Nest = Foundation.Nest; // import Nest from "foundation.util.nest"; + let GetYoDigits = Foundation.GetYoDigits; // figure out import after refactor + let transitionend = Foundation.transitionend; // figure out import after refactor + let Box = Foundation.Box; // import Box from "foundation.util.box"; + /** * Drilldown module. * @module foundation.drilldown * @requires foundation.util.keyboard - * @requires foundation.util.motion * @requires foundation.util.nest + * @requires foundation.util.box */ class Drilldown { @@ -21,12 +27,12 @@ class Drilldown { this.$element = element; this.options = $.extend({}, Drilldown.defaults, this.$element.data(), options); - Foundation.Nest.Feather(this.$element, 'drilldown'); + Nest.Feather(this.$element, 'drilldown'); this._init(); Foundation.registerPlugin(this, 'Drilldown'); - Foundation.Keyboard.register('Drilldown', { + Keyboard.register('Drilldown', { 'ENTER': 'open', 'SPACE': 'open', 'ARROW_RIGHT': 'next', @@ -47,7 +53,7 @@ class Drilldown { this.$submenuAnchors = this.$element.find('li.is-drilldown-submenu-parent').children('a'); this.$submenus = this.$submenuAnchors.parent('li').children('[data-submenu]'); this.$menuItems = this.$element.find('li').not('.js-drilldown-back').attr('role', 'menuitem').find('a'); - this.$element.attr('data-mutate', (this.$element.attr('data-drilldown') || Foundation.GetYoDigits(6, 'drilldown'))); + this.$element.attr('data-mutate', (this.$element.attr('data-drilldown') || GetYoDigits(6, 'drilldown'))); this._prepareMenu(); this._registerEvents(); @@ -207,11 +213,11 @@ class Drilldown { } }); - Foundation.Keyboard.handleKey(e, 'Drilldown', { + Keyboard.handleKey(e, 'Drilldown', { next: function() { if ($element.is(_this.$submenuAnchors)) { _this._show($element.parent('li')); - $element.parent('li').one(Foundation.transitionend($element), function(){ + $element.parent('li').one(transitionend($element), function(){ $element.parent('li').find('ul li a').filter(_this.$menuItems).first().focus(); }); return true; @@ -219,7 +225,7 @@ class Drilldown { }, previous: function() { _this._hide($element.parent('li').parent('ul')); - $element.parent('li').parent('ul').one(Foundation.transitionend($element), function(){ + $element.parent('li').parent('ul').one(transitionend($element), function(){ setTimeout(function() { $element.parent('li').parent('ul').parent('li').children('a').first().focus(); }, 1); @@ -246,7 +252,7 @@ class Drilldown { open: function() { if (!$element.is(_this.$menuItems)) { // not menu item means back button _this._hide($element.parent('li').parent('ul')); - $element.parent('li').parent('ul').one(Foundation.transitionend($element), function(){ + $element.parent('li').parent('ul').one(transitionend($element), function(){ setTimeout(function() { $element.parent('li').parent('ul').parent('li').children('a').first().focus(); }, 1); @@ -254,7 +260,7 @@ class Drilldown { return true; } else if ($element.is(_this.$submenuAnchors)) { _this._show($element.parent('li')); - $element.parent('li').one(Foundation.transitionend($element), function(){ + $element.parent('li').one(transitionend($element), function(){ $element.parent('li').find('ul li a').filter(_this.$menuItems).first().focus(); }); return true; @@ -278,7 +284,7 @@ class Drilldown { _hideAll() { var $elem = this.$element.find('.is-drilldown-submenu.is-active').addClass('is-closing'); if(this.options.autoHeight) this.$wrapper.css({height:$elem.parent().closest('ul').data('calcHeight')}); - $elem.one(Foundation.transitionend($elem), function(e){ + $elem.one(transitionend($elem), function(e){ $elem.removeClass('is-active is-closing'); }); /** @@ -357,7 +363,7 @@ class Drilldown { $elem.parent('li').attr('aria-expanded', false); $elem.attr('aria-hidden', true).addClass('is-closing') $elem.addClass('is-closing') - .one(Foundation.transitionend($elem), function(){ + .one(transitionend($elem), function(){ $elem.removeClass('is-active is-closing'); $elem.blur().addClass('invisible'); }); @@ -378,7 +384,7 @@ class Drilldown { var maxHeight = 0, result = {}, _this = this; this.$submenus.add(this.$element).each(function(){ var numOfElems = $(this).children('li').length; - var height = Foundation.Box.GetDimensions(this).height; + var height = Box.GetDimensions(this).height; maxHeight = height > maxHeight ? height : maxHeight; if(_this.options.autoHeight) { $(this).data('calcHeight',height); @@ -401,7 +407,7 @@ class Drilldown { if(this.options.scrollTop) this.$element.off('.zf.drilldown',this._bindHandler); this._hideAll(); this.$element.off('mutateme.zf.trigger'); - Foundation.Nest.Burn(this.$element, 'drilldown'); + Nest.Burn(this.$element, 'drilldown'); this.$element.unwrap() .find('.js-drilldown-back, .is-submenu-parent-item').remove() .end().find('.is-active, .is-closing, .is-drilldown-submenu').removeClass('is-active is-closing is-drilldown-submenu') diff --git a/js/foundation.dropdown.js b/js/foundation.dropdown.js index ff70a1ce2..ed71969e4 100644 --- a/js/foundation.dropdown.js +++ b/js/foundation.dropdown.js @@ -2,6 +2,14 @@ !function($) { + let Keyboard = Foundation.Keyboard; // import Keyboard from "foundation.util.keyboard"; + let Box = Foundation.Box; // import Box from "foundation.util.box"; + let GetYoDigits = Foundation.GetYoDigits; // figure out import after refactor + + // import "foundation.util.triggers.js"; + // TODO: Figure out what a triggers import "means", since triggers are always accessed indirectly. + + /** * Dropdown module. * @module foundation.dropdown @@ -24,7 +32,7 @@ class Dropdown { this._init(); Foundation.registerPlugin(this, 'Dropdown'); - Foundation.Keyboard.register('Dropdown', { + Keyboard.register('Dropdown', { 'ENTER': 'open', 'SPACE': 'open', 'ESCAPE': 'close' @@ -61,7 +69,7 @@ class Dropdown { 'aria-hidden': 'true', 'data-yeti-box': $id, 'data-resize': $id, - 'aria-labelledby': this.$anchor[0].id || Foundation.GetYoDigits(6, 'dd-anchor') + 'aria-labelledby': this.$anchor[0].id || GetYoDigits(6, 'dd-anchor') }); this._events(); } @@ -130,25 +138,25 @@ class Dropdown { _setPosition() { if(this.$anchor.attr('aria-expanded') === 'false'){ return false; } var position = this.getPositionClass(), - $eleDims = Foundation.Box.GetDimensions(this.$element), - $anchorDims = Foundation.Box.GetDimensions(this.$anchor), + $eleDims = Box.GetDimensions(this.$element), + $anchorDims = Box.GetDimensions(this.$anchor), _this = this, direction = (position === 'left' ? 'left' : ((position === 'right') ? 'left' : 'top')), param = (direction === 'top') ? 'height' : 'width', offset = (param === 'height') ? this.options.vOffset : this.options.hOffset; - if(($eleDims.width >= $eleDims.windowDims.width) || (!this.counter && !Foundation.Box.ImNotTouchingYou(this.$element, this.$parent))){ + if(($eleDims.width >= $eleDims.windowDims.width) || (!this.counter && !Box.ImNotTouchingYou(this.$element, this.$parent))){ var newWidth = $eleDims.windowDims.width, parentHOffset = 0; if(this.$parent){ - var $parentDims = Foundation.Box.GetDimensions(this.$parent), + var $parentDims = Box.GetDimensions(this.$parent), parentHOffset = $parentDims.offset.left; if ($parentDims.width < newWidth){ newWidth = $parentDims.width; } } - this.$element.offset(Foundation.Box.GetOffsets(this.$element, this.$anchor, 'center bottom', this.options.vOffset, this.options.hOffset + parentHOffset, true)).css({ + this.$element.offset(Box.GetOffsets(this.$element, this.$anchor, 'center bottom', this.options.vOffset, this.options.hOffset + parentHOffset, true)).css({ 'width': newWidth - (this.options.hOffset * 2), 'height': 'auto' }); @@ -156,9 +164,9 @@ class Dropdown { return false; } - this.$element.offset(Foundation.Box.GetOffsets(this.$element, this.$anchor, position, this.options.vOffset, this.options.hOffset)); + this.$element.offset(Box.GetOffsets(this.$element, this.$anchor, position, this.options.vOffset, this.options.hOffset)); - while(!Foundation.Box.ImNotTouchingYou(this.$element, this.$parent, true) && this.counter){ + while(!Box.ImNotTouchingYou(this.$element, this.$parent, true) && this.counter){ this._reposition(position); this._setPosition(); } @@ -212,9 +220,9 @@ class Dropdown { this.$anchor.add(this.$element).on('keydown.zf.dropdown', function(e) { var $target = $(this), - visibleFocusableElements = Foundation.Keyboard.findFocusable(_this.$element); + visibleFocusableElements = Keyboard.findFocusable(_this.$element); - Foundation.Keyboard.handleKey(e, 'Dropdown', { + Keyboard.handleKey(e, 'Dropdown', { open: function() { if ($target.is(_this.$anchor)) { _this.open(); @@ -272,7 +280,7 @@ class Dropdown { .attr({'aria-hidden': false}); if(this.options.autoFocus){ - var $focusable = Foundation.Keyboard.findFocusable(this.$element); + var $focusable = Keyboard.findFocusable(this.$element); if($focusable.length){ $focusable.eq(0).focus(); } @@ -281,7 +289,7 @@ class Dropdown { if(this.options.closeOnClick){ this._addBodyHandler(); } if (this.options.trapFocus) { - Foundation.Keyboard.trapFocus(this.$element); + Keyboard.trapFocus(this.$element); } /** @@ -324,7 +332,7 @@ class Dropdown { this.$element.trigger('hide.zf.dropdown', [this.$element]); if (this.options.trapFocus) { - Foundation.Keyboard.releaseFocus(this.$element); + Keyboard.releaseFocus(this.$element); } } diff --git a/js/foundation.dropdownMenu.js b/js/foundation.dropdownMenu.js index 26b67a53d..c803f2a5d 100644 --- a/js/foundation.dropdownMenu.js +++ b/js/foundation.dropdownMenu.js @@ -2,6 +2,11 @@ !function($) { + let Keyboard = Foundation.Keyboard; // import Keyboard from "foundation.util.keyboard"; + let Nest = Foundation.Nest; // import Nest from "foundation.util.nest"; + let Box = Foundation.Box; // import Box from "foundation.util.box"; + let Rtl = Foundation.rtl; // Figure out import after refactor + /** * DropdownMenu module. * @module foundation.dropdown-menu @@ -22,11 +27,11 @@ class DropdownMenu { this.$element = element; this.options = $.extend({}, DropdownMenu.defaults, this.$element.data(), options); - Foundation.Nest.Feather(this.$element, 'dropdown'); + Nest.Feather(this.$element, 'dropdown'); this._init(); Foundation.registerPlugin(this, 'DropdownMenu'); - Foundation.Keyboard.register('DropdownMenu', { + Keyboard.register('DropdownMenu', { 'ENTER': 'open', 'SPACE': 'open', 'ARROW_RIGHT': 'next', @@ -50,7 +55,7 @@ class DropdownMenu { this.$tabs = this.$element.children('[role="menuitem"]'); this.$tabs.find('ul.is-dropdown-submenu').addClass(this.options.verticalClass); - if (this.$element.hasClass(this.options.rightClass) || this.options.alignment === 'right' || Foundation.rtl() || this.$element.parents('.top-bar-right').is('*')) { + if (this.$element.hasClass(this.options.rightClass) || this.options.alignment === 'right' || Rtl() || this.$element.parents('.top-bar-right').is('*')) { this.options.alignment = 'right'; subs.addClass('opens-left'); } else { @@ -189,7 +194,7 @@ class DropdownMenu { if (isTab) { if (_this._isVertical()) { // vertical menu - if (Foundation.rtl()) { // right aligned + if (Rtl()) { // right aligned $.extend(functions, { down: nextSibling, up: prevSibling, @@ -205,7 +210,7 @@ class DropdownMenu { }); } } else { // horizontal menu - if (Foundation.rtl()) { // right aligned + if (Rtl()) { // right aligned $.extend(functions, { next: prevSibling, previous: nextSibling, @@ -222,7 +227,7 @@ class DropdownMenu { } } } else { // not tabs -> one sub - if (Foundation.rtl()) { // right aligned + if (Rtl()) { // right aligned $.extend(functions, { next: closeSub, previous: openSub, @@ -238,7 +243,7 @@ class DropdownMenu { }); } } - Foundation.Keyboard.handleKey(e, 'DropdownMenu', functions); + Keyboard.handleKey(e, 'DropdownMenu', functions); }); } @@ -276,12 +281,12 @@ class DropdownMenu { this._hide($sibs, idx); $sub.css('visibility', 'hidden').addClass('js-dropdown-active') .parent('li.is-dropdown-submenu-parent').addClass('is-active'); - var clear = Foundation.Box.ImNotTouchingYou($sub, null, true); + 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 = Foundation.Box.ImNotTouchingYou($sub, null, true); + clear = Box.ImNotTouchingYou($sub, null, true); if (!clear) { $parentLi.removeClass(`opens-${this.options.alignment}`).addClass('opens-inner'); } @@ -347,7 +352,7 @@ class DropdownMenu { 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'); - Foundation.Nest.Burn(this.$element, 'dropdown'); + Nest.Burn(this.$element, 'dropdown'); Foundation.unregisterPlugin(this); } } diff --git a/js/foundation.equalizer.js b/js/foundation.equalizer.js index 771b3cd6f..08bc72374 100644 --- a/js/foundation.equalizer.js +++ b/js/foundation.equalizer.js @@ -2,6 +2,10 @@ !function($) { + let MediaQuery = Foundation.MediaQuery; // import MediaQuery from "foundation.util.mediaQuery.js"; + let onImagesLoaded = Foundation.onImagesLoaded; // TODO9438: Separate out foundation.util.timerAndImageLoader + let GetYoDigits = Foundation.GetYoDigits; // figure out import after refactor; + /** * Equalizer module. * @module foundation.equalizer @@ -35,8 +39,8 @@ class Equalizer { var $watched = this.$element.find(`[data-equalizer-watch="${eqId}"]`); this.$watched = $watched.length ? $watched : this.$element.find('[data-equalizer-watch]'); - this.$element.attr('data-resize', (eqId || Foundation.GetYoDigits(6, 'eq'))); - this.$element.attr('data-mutate', (eqId || Foundation.GetYoDigits(6, 'eq'))); + 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; @@ -56,7 +60,7 @@ class Equalizer { } if((tooSmall !== undefined && tooSmall === false) || tooSmall === undefined){ if(imgs.length){ - Foundation.onImagesLoaded(imgs, this._reflow.bind(this)); + onImagesLoaded(imgs, this._reflow.bind(this)); }else{ this._reflow(); } @@ -113,7 +117,7 @@ class Equalizer { * @private */ _checkMQ() { - var tooSmall = !Foundation.MediaQuery.is(this.options.equalizeOn); + var tooSmall = !MediaQuery.is(this.options.equalizeOn); if(tooSmall){ if(this.isOn){ this._pauseEvents(); diff --git a/js/foundation.interchange.js b/js/foundation.interchange.js index bd1407e7f..4d756fb78 100644 --- a/js/foundation.interchange.js +++ b/js/foundation.interchange.js @@ -2,11 +2,13 @@ !function($) { + let MediaQuery = Foundation.MediaQuery; // import MediaQuery from "foundation.util.mediaQuery.js"; + + /** * Interchange module. * @module foundation.interchange * @requires foundation.util.mediaQuery - * @requires foundation.util.timerAndImageLoader */ class Interchange { @@ -80,9 +82,9 @@ class Interchange { * @private */ _addBreakpoints() { - for (var i in Foundation.MediaQuery.queries) { - if (Foundation.MediaQuery.queries.hasOwnProperty(i)) { - var query = Foundation.MediaQuery.queries[i]; + for (var i in MediaQuery.queries) { + if (MediaQuery.queries.hasOwnProperty(i)) { + var query = MediaQuery.queries[i]; Interchange.SPECIAL_QUERIES[query.name] = query.value; } } @@ -105,7 +107,7 @@ class Interchange { else { rules = this.$element.data('interchange'); } - + rules = typeof rules === 'string' ? rules.match(/\[.*?\]/g) : rules; for (var i in rules) { diff --git a/js/foundation.magellan.js b/js/foundation.magellan.js index 688dfd0ae..ba854ee86 100644 --- a/js/foundation.magellan.js +++ b/js/foundation.magellan.js @@ -2,6 +2,8 @@ !function($) { + let GetYoDigits = Foundation.GetYoDigits; // TODO: Separate this out? + /** * Magellan module. * @module foundation.magellan @@ -31,7 +33,7 @@ class Magellan { * @private */ _init() { - var id = this.$element[0].id || Foundation.GetYoDigits(6, 'magellan'); + var id = this.$element[0].id || GetYoDigits(6, 'magellan'); var _this = this; this.$targets = $('[data-magellan-target]'); this.$links = this.$element.find('a'); diff --git a/js/foundation.offcanvas.js b/js/foundation.offcanvas.js index cfbed6f7d..38b195981 100644 --- a/js/foundation.offcanvas.js +++ b/js/foundation.offcanvas.js @@ -2,13 +2,20 @@ !function($) { + let Keyboard = Foundation.Keyboard; // import Keyboard from "foundation.util.keyboard"; + let MediaQuery = Foundation.MediaQuery; // import MediaQuery from "foundation.util.mediaQuery"; + + let transitionend = Foundation.transitionend; // Should transitionend be refactored into it's own module? + + // import "foundation.util.triggers.js"; + // TODO: Figure out what triggers import should actually do, given how indirect their use is + /** * OffCanvas module. * @module foundation.offcanvas * @requires foundation.util.keyboard * @requires foundation.util.mediaQuery * @requires foundation.util.triggers - * @requires foundation.util.motion */ class OffCanvas { @@ -29,7 +36,7 @@ class OffCanvas { this._events(); Foundation.registerPlugin(this, 'OffCanvas') - Foundation.Keyboard.register('OffCanvas', { + Keyboard.register('OffCanvas', { 'ESCAPE': 'close' }); @@ -104,13 +111,13 @@ class OffCanvas { var _this = this; $(window).on('changed.zf.mediaquery', function() { - if (Foundation.MediaQuery.atLeast(_this.options.revealOn)) { + if (MediaQuery.atLeast(_this.options.revealOn)) { _this.reveal(true); } else { _this.reveal(false); } }).one('load.zf.offcanvas', function() { - if (Foundation.MediaQuery.atLeast(_this.options.revealOn)) { + if (MediaQuery.atLeast(_this.options.revealOn)) { _this.reveal(true); } }); @@ -231,7 +238,7 @@ class OffCanvas { } if (this.options.autoFocus === true) { - this.$element.one(Foundation.transitionend(this.$element), function() { + this.$element.one(transitionend(this.$element), function() { var canvasFocus = _this.$element.find('[data-autofocus]'); if (canvasFocus.length) { canvasFocus.eq(0).focus(); @@ -243,7 +250,7 @@ class OffCanvas { if (this.options.trapFocus === true) { this.$element.siblings('[data-off-canvas-content]').attr('tabindex', '-1'); - Foundation.Keyboard.trapFocus(this.$element); + Keyboard.trapFocus(this.$element); } } @@ -286,7 +293,7 @@ class OffCanvas { if (this.options.trapFocus === true) { this.$element.siblings('[data-off-canvas-content]').removeAttr('tabindex'); - Foundation.Keyboard.releaseFocus(this.$element); + Keyboard.releaseFocus(this.$element); } } @@ -311,7 +318,7 @@ class OffCanvas { * @private */ _handleKeyboard(e) { - Foundation.Keyboard.handleKey(e, 'OffCanvas', { + Keyboard.handleKey(e, 'OffCanvas', { close: () => { this.close(); this.$lastTrigger.focus(); diff --git a/js/foundation.orbit.js b/js/foundation.orbit.js index 4519efd4d..b6db85af5 100644 --- a/js/foundation.orbit.js +++ b/js/foundation.orbit.js @@ -2,6 +2,16 @@ !function($) { + + let Keyboard = Foundation.Keyboard; // import Keyboard from "foundation.util.keyboard"; + let Motion = Foundation.Motion; // import { Motion } from "foundation.util.move" + let Timer = Foundation.Timer; // Add import after refactoring to separate timer & image loader + let onImagesLoaded = Foundation.onImagesLoaded; // Add import after refactoring to separate timer & image loader + let GetYoDigits = Foundation.GetYoDigits; // Add import after refactor + + // import "foundation.util.touch.js" + // TODO: Figure out what a touch import should really do. + /** * Orbit module. * @module foundation.orbit @@ -25,7 +35,7 @@ class Orbit { this._init(); Foundation.registerPlugin(this, 'Orbit'); - Foundation.Keyboard.register('Orbit', { + Keyboard.register('Orbit', { 'ltr': { 'ARROW_RIGHT': 'next', 'ARROW_LEFT': 'previous' @@ -51,7 +61,7 @@ class Orbit { var $images = this.$element.find('img'), initActive = this.$slides.filter('.is-active'), - id = this.$element[0].id || Foundation.GetYoDigits(6, 'orbit'); + id = this.$element[0].id || GetYoDigits(6, 'orbit'); this.$element.attr({ 'data-resize': id, @@ -67,7 +77,7 @@ class Orbit { } if ($images.length) { - Foundation.onImagesLoaded($images, this._prepareForOrbit.bind(this)); + onImagesLoaded($images, this._prepareForOrbit.bind(this)); } else { this._prepareForOrbit();//hehe } @@ -102,7 +112,7 @@ class Orbit { */ geoSync() { var _this = this; - this.timer = new Foundation.Timer( + this.timer = new Timer( this.$element, { duration: this.options.timerDelay, @@ -232,7 +242,7 @@ class Orbit { if (this.options.accessible) { this.$wrapper.add(this.$bullets).on('keydown.zf.orbit', function(e) { // handle keyboard event with keyboard util - Foundation.Keyboard.handleKey(e, 'Orbit', { + Keyboard.handleKey(e, 'Orbit', { next: function() { _this.changeSlide(true); }, @@ -331,7 +341,7 @@ class Orbit { } if (this.options.useMUI && !this.$element.is(':hidden')) { - Foundation.Motion.animateIn( + Motion.animateIn( $newSlide.addClass('is-active').css({'position': 'absolute', 'top': 0}), this.options[`animInFrom${dirIn}`], function(){ @@ -339,7 +349,7 @@ class Orbit { .attr('aria-live', 'polite'); }); - Foundation.Motion.animateOut( + Motion.animateOut( $curSlide.removeClass('is-active'), this.options[`animOutTo${dirOut}`], function(){ diff --git a/js/foundation.responsiveMenu.js b/js/foundation.responsiveMenu.js index a8f43a138..a4e49c60f 100644 --- a/js/foundation.responsiveMenu.js +++ b/js/foundation.responsiveMenu.js @@ -2,6 +2,12 @@ !function($) { + let MediaQuery = Foundation.MediaQuery; // import MediaQuery from "foundation.util.mediaQuery"; + let GetYoDigits = Foundation.GetYoDigits; // separate out GetYoDigits into util + + // import "foundation.util.triggers.js"; + + /** * ResponsiveMenu module. * @module foundation.responsiveMenu @@ -60,7 +66,7 @@ class ResponsiveMenu { this._checkMediaQueries(); } // Add data-mutate since children may need it. - this.$element.attr('data-mutate', (this.$element.attr('data-mutate') || Foundation.GetYoDigits(6, 'responsive-menu'))); + this.$element.attr('data-mutate', (this.$element.attr('data-mutate') || GetYoDigits(6, 'responsive-menu'))); } /** @@ -88,7 +94,7 @@ class ResponsiveMenu { var matchedMq, _this = this; // Iterate through each rule and find the last matching rule $.each(this.rules, function(key) { - if (Foundation.MediaQuery.atLeast(key)) { + if (MediaQuery.atLeast(key)) { matchedMq = key; } }); @@ -125,6 +131,8 @@ class ResponsiveMenu { ResponsiveMenu.defaults = {}; +// TODO9438: refactor this to happen on init, rather than as side effect. +// // The plugin matches the plugin classes with these plugin instances. var MenuPlugins = { dropdown: { diff --git a/js/foundation.responsiveToggle.js b/js/foundation.responsiveToggle.js index 6cb360856..c0ecc4680 100644 --- a/js/foundation.responsiveToggle.js +++ b/js/foundation.responsiveToggle.js @@ -2,10 +2,14 @@ !function($) { + let MediaQuery = Foundation.MediaQuery; // import MediaQuery from "foundation.util.mediaQuery"; + let Motion = Foundation.Motion; // import { Motion } from "foundation.util.motion"; + /** * ResponsiveToggle module. * @module foundation.responsiveToggle * @requires foundation.util.mediaQuery + * @requires foundation.util.motion */ class ResponsiveToggle { @@ -77,7 +81,7 @@ class ResponsiveToggle { */ _update() { // Mobile - if (!Foundation.MediaQuery.atLeast(this.options.hideFor)) { + if (!MediaQuery.atLeast(this.options.hideFor)) { this.$element.show(); this.$targetMenu.hide(); } @@ -95,7 +99,7 @@ class ResponsiveToggle { * @fires ResponsiveToggle#toggled */ toggleMenu() { - if (!Foundation.MediaQuery.atLeast(this.options.hideFor)) { + if (!MediaQuery.atLeast(this.options.hideFor)) { /** * Fires when the element attached to the tab bar toggles. * @event ResponsiveToggle#toggled @@ -108,7 +112,7 @@ class ResponsiveToggle { }); } else { - Foundation.Motion.animateOut(this.$targetMenu, this.animationOut, () => { + Motion.animateOut(this.$targetMenu, this.animationOut, () => { this.$element.trigger('toggled.zf.responsiveToggle'); }); } diff --git a/js/foundation.reveal.js b/js/foundation.reveal.js index 134babd65..863e6714a 100644 --- a/js/foundation.reveal.js +++ b/js/foundation.reveal.js @@ -2,11 +2,14 @@ !function($) { + let Keyboard = Foundation.Keyboard; // import Keyboard from "foundation.util.keyboard"; + let MediaQuery = Foundation.MediaQuery; // import MediaQuery from "foundation.util.mediaQuery"; + let Motion = Foundation.Motion; // import { Motion } from "foundation.util.motion"; + /** * Reveal module. * @module foundation.reveal * @requires foundation.util.keyboard - * @requires foundation.util.box * @requires foundation.util.triggers * @requires foundation.util.mediaQuery * @requires foundation.util.motion if using animations @@ -25,7 +28,7 @@ class Reveal { this._init(); Foundation.registerPlugin(this, 'Reveal'); - Foundation.Keyboard.register('Reveal', { + Keyboard.register('Reveal', { 'ENTER': 'open', 'SPACE': 'open', 'ESCAPE': 'close', @@ -39,7 +42,7 @@ class Reveal { _init() { this.id = this.$element.attr('id'); this.isActive = false; - this.cached = {mq: Foundation.MediaQuery.current}; + this.cached = {mq: MediaQuery.current}; this.isMobile = mobileSniff(); this.$anchor = $(`[data-open="${this.id}"]`).length ? $(`[data-open="${this.id}"]`) : $(`[data-toggle="${this.id}"]`); @@ -259,14 +262,14 @@ class Reveal { }) .focus(); addRevealOpenClasses(); - Foundation.Keyboard.trapFocus(_this.$element); + Keyboard.trapFocus(_this.$element); } if (this.options.overlay) { - Foundation.Motion.animateIn(this.$overlay, 'fade-in'); + Motion.animateIn(this.$overlay, 'fade-in'); } - Foundation.Motion.animateIn(this.$element, this.options.animationIn, () => { + Motion.animateIn(this.$element, this.options.animationIn, () => { if(this.$element) { // protect against object having been removed - this.focusableElements = Foundation.Keyboard.findFocusable(this.$element); + this.focusableElements = Keyboard.findFocusable(this.$element); afterAnimation(); } }); @@ -286,7 +289,7 @@ class Reveal { 'tabindex': -1 }) .focus(); - Foundation.Keyboard.trapFocus(this.$element); + Keyboard.trapFocus(this.$element); /** * Fires when the modal has successfully opened. @@ -308,7 +311,7 @@ class Reveal { _extraHandlers() { var _this = this; if(!this.$element) { return; } // If we're in the middle of cleanup, don't freak out - this.focusableElements = Foundation.Keyboard.findFocusable(this.$element); + this.focusableElements = Keyboard.findFocusable(this.$element); if (!this.options.overlay && this.options.closeOnClick && !this.options.fullScreen) { $('body').on('click.zf.reveal', function(e) { @@ -321,7 +324,7 @@ class Reveal { if (this.options.closeOnEsc) { $(window).on('keydown.zf.reveal', function(e) { - Foundation.Keyboard.handleKey(e, 'Reveal', { + Keyboard.handleKey(e, 'Reveal', { close: function() { if (_this.options.closeOnEsc) { _this.close(); @@ -336,7 +339,7 @@ class Reveal { this.$element.on('keydown.zf.reveal', function(e) { var $target = $(this); // handle keyboard event with keyboard util - Foundation.Keyboard.handleKey(e, 'Reveal', { + Keyboard.handleKey(e, 'Reveal', { open: function() { if (_this.$element.find(':focus').is(_this.$element.find('[data-close]'))) { setTimeout(function() { // set focus back to anchor if close button has been activated @@ -375,10 +378,10 @@ class Reveal { // Motion UI method of hiding if (this.options.animationOut) { if (this.options.overlay) { - Foundation.Motion.animateOut(this.$overlay, 'fade-out'); + Motion.animateOut(this.$overlay, 'fade-out'); } - Foundation.Motion.animateOut(this.$element, this.options.animationOut, finishUp); + Motion.animateOut(this.$element, this.options.animationOut, finishUp); } // jQuery method of hiding else { @@ -420,7 +423,7 @@ class Reveal { } - Foundation.Keyboard.releaseFocus(_this.$element); + Keyboard.releaseFocus(_this.$element); _this.$element.attr('aria-hidden', true); diff --git a/js/foundation.slider.js b/js/foundation.slider.js index e53f00e1f..f7aa700d1 100644 --- a/js/foundation.slider.js +++ b/js/foundation.slider.js @@ -2,6 +2,10 @@ !function($) { + let Keyboard = Foundation.Keyboard; // import Keyboard from "foundation.util.keyboard"; + let Move = Foundation.Move; // import { Move } from "foundation.util.motion"; + let GetYoDigits = Foundation.GetYoDigits; // figure out import after refactor TODO9438 + let Rtl = Foundation.rtl; // figure out import/refactor for encapsulation of rtl() TODO9438 /** * Slider module. * @module foundation.slider @@ -25,7 +29,7 @@ class Slider { this._init(); Foundation.registerPlugin(this, 'Slider'); - Foundation.Keyboard.register('Slider', { + Keyboard.register('Slider', { 'ltr': { 'ARROW_RIGHT': 'increase', 'ARROW_UP': 'increase', @@ -258,7 +262,7 @@ class Slider { //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; - Foundation.Move(moveTime, $hndl, function() { + 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. @@ -297,7 +301,7 @@ class Slider { */ _setInitAttr(idx) { var initVal = (idx === 0 ? this.options.initialStart : this.options.initialEnd) - var id = this.inputs.eq(idx).attr('id') || Foundation.GetYoDigits(6, 'slider'); + var id = this.inputs.eq(idx).attr('id') || GetYoDigits(6, 'slider'); this.inputs.eq(idx).attr({ 'id': id, 'max': this.options.end, @@ -373,7 +377,7 @@ class Slider { value = this._value(offsetPct); // turn everything around for RTL, yay math! - if (Foundation.rtl() && !this.options.vertical) {value = this.options.end - value;} + 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 @@ -504,7 +508,7 @@ class Slider { newValue; // handle keyboard event with keyboard util - Foundation.Keyboard.handleKey(e, 'Slider', { + Keyboard.handleKey(e, 'Slider', { decrease: function() { newValue = oldValue - _this.options.step; }, diff --git a/js/foundation.sticky.js b/js/foundation.sticky.js index cb12ac452..71ed662c0 100644 --- a/js/foundation.sticky.js +++ b/js/foundation.sticky.js @@ -2,6 +2,8 @@ !function($) { + let GetYoDigits = Foundation.GetYoDigits; // figure out import after refactor TODO9438 + let MediaQuery = Foundation.MediaQuery; // import MediaQuery from "foundation.util.mediaQuery"; /** * Sticky module. * @module foundation.sticky @@ -32,7 +34,7 @@ class Sticky { */ _init() { var $parent = this.$element.parent('[data-sticky-container]'), - id = this.$element[0].id || Foundation.GetYoDigits(6, 'sticky'), + id = this.$element[0].id || GetYoDigits(6, 'sticky'), _this = this; if($parent.length){ @@ -296,7 +298,7 @@ class Sticky { * @private */ _setSizes(cb) { - this.canStick = Foundation.MediaQuery.is(this.options.stickyOn); + this.canStick = MediaQuery.is(this.options.stickyOn); if (!this.canStick) { if (cb && typeof cb === 'function') { cb(); } } diff --git a/js/foundation.tabs.js b/js/foundation.tabs.js index bac091a11..e135bc5c7 100644 --- a/js/foundation.tabs.js +++ b/js/foundation.tabs.js @@ -2,6 +2,8 @@ !function($) { + let Keyboard = Foundation.Keyboard; // import Keyboard from "foundation.util.keyboard"; + let onImagesLoaded = Foundation.onImagesLoaded; // add import after refactor TODO9438; /** * Tabs module. * @module foundation.tabs @@ -23,7 +25,7 @@ class Tabs { this._init(); Foundation.registerPlugin(this, 'Tabs'); - Foundation.Keyboard.register('Tabs', { + Keyboard.register('Tabs', { 'ENTER': 'open', 'SPACE': 'open', 'ARROW_RIGHT': 'next', @@ -81,7 +83,7 @@ class Tabs { var $images = this.$tabContent.find('img'); if ($images.length) { - Foundation.onImagesLoaded($images, this._setHeight.bind(this)); + onImagesLoaded($images, this._setHeight.bind(this)); } else { this._setHeight(); } @@ -185,7 +187,7 @@ class Tabs { }); // handle keyboard event with keyboard util - Foundation.Keyboard.handleKey(e, 'Tabs', { + Keyboard.handleKey(e, 'Tabs', { open: function() { $element.find('[role="tab"]').focus(); _this._handleTabChange($element); diff --git a/js/foundation.toggler.js b/js/foundation.toggler.js index df53ae1da..77d7d704a 100644 --- a/js/foundation.toggler.js +++ b/js/foundation.toggler.js @@ -2,6 +2,10 @@ !function($) { + let Motion = Foundation.Motion; // import { Motion } from "foundation.util.motion"; + + // import "foundation.util.triggersjs"; + /** * Toggler module. * @module foundation.toggler @@ -103,14 +107,14 @@ class Toggler { var _this = this; if (this.$element.is(':hidden')) { - Foundation.Motion.animateIn(this.$element, this.animationIn, function() { + Motion.animateIn(this.$element, this.animationIn, function() { _this._updateARIA(true); this.trigger('on.zf.toggler'); this.find('[data-mutate]').trigger('mutateme.zf.trigger'); }); } else { - Foundation.Motion.animateOut(this.$element, this.animationOut, function() { + Motion.animateOut(this.$element, this.animationOut, function() { _this._updateARIA(false); this.trigger('off.zf.toggler'); this.find('[data-mutate]').trigger('mutateme.zf.trigger'); diff --git a/js/foundation.tooltip.js b/js/foundation.tooltip.js index e51d928dd..386810730 100644 --- a/js/foundation.tooltip.js +++ b/js/foundation.tooltip.js @@ -2,6 +2,12 @@ !function($) { + let Box = Foundation.Box; // import Box from "foundation.utils.box"; + let GetYoDigits = Foundation.GetYoDigits; // figure out import after refactor. TODO9438 + let MediaQuery = Foundation.MediaQuery; // import MediaQuery from "foundation.utils.mediaQuery"; + + // import "foundation.util.triggers"; + /** * Tooltip module. * @module foundation.tooltip @@ -34,7 +40,7 @@ class Tooltip { * @private */ _init() { - var elemId = this.$element.attr('aria-describedby') || Foundation.GetYoDigits(6, 'tooltip'); + var elemId = this.$element.attr('aria-describedby') || GetYoDigits(6, 'tooltip'); this.options.positionClass = this.options.positionClass || this._getPositionClass(this.$element); this.options.tipText = this.options.tipText || this.$element.attr('title'); @@ -140,25 +146,24 @@ class Tooltip { */ _setPosition() { var position = this._getPositionClass(this.template), - $tipDims = Foundation.Box.GetDimensions(this.template), - $anchorDims = Foundation.Box.GetDimensions(this.$element), + $tipDims = Box.GetDimensions(this.template), + $anchorDims = Box.GetDimensions(this.$element), direction = (position === 'left' ? 'left' : ((position === 'right') ? 'left' : 'top')), param = (direction === 'top') ? 'height' : 'width', offset = (param === 'height') ? this.options.vOffset : this.options.hOffset, _this = this; - if (($tipDims.width >= $tipDims.windowDims.width) || (!this.counter && !Foundation.Box.ImNotTouchingYou(this.template))) { - this.template.offset(Foundation.Box.GetOffsets(this.template, this.$element, 'center bottom', this.options.vOffset, this.options.hOffset, true)).css({ - // this.$element.offset(Foundation.GetOffsets(this.template, this.$element, 'center bottom', this.options.vOffset, this.options.hOffset, true)).css({ + if (($tipDims.width >= $tipDims.windowDims.width) || (!this.counter && !Box.ImNotTouchingYou(this.template))) { + this.template.offset(Box.GetOffsets(this.template, this.$element, 'center bottom', this.options.vOffset, this.options.hOffset, true)).css({ 'width': $anchorDims.windowDims.width - (this.options.hOffset * 2), 'height': 'auto' }); return false; } - this.template.offset(Foundation.Box.GetOffsets(this.template, this.$element,'center ' + (position || 'bottom'), this.options.vOffset, this.options.hOffset)); + this.template.offset(Box.GetOffsets(this.template, this.$element,'center ' + (position || 'bottom'), this.options.vOffset, this.options.hOffset)); - while(!Foundation.Box.ImNotTouchingYou(this.template) && this.counter) { + while(!Box.ImNotTouchingYou(this.template) && this.counter) { this._reposition(position); this._setPosition(); } @@ -171,7 +176,7 @@ class Tooltip { * @function */ show() { - if (this.options.showOn !== 'all' && !Foundation.MediaQuery.is(this.options.showOn)) { + if (this.options.showOn !== 'all' && !MediaQuery.is(this.options.showOn)) { // console.error('The screen is too small to display this tooltip'); return false; } diff --git a/js/foundation.util.box.js b/js/foundation.util.box.js index f734a0cfb..225a3abcf 100644 --- a/js/foundation.util.box.js +++ b/js/foundation.util.box.js @@ -2,6 +2,8 @@ !function($) { + let Rtl = Foundation.rtl; // Figure out imports after refactor + Foundation.Box = { ImNotTouchingYou: ImNotTouchingYou, GetDimensions: GetDimensions, @@ -115,7 +117,7 @@ function GetOffsets(element, anchor, position, vOffset, hOffset, isOverflow) { switch (position) { case 'top': return { - left: (Foundation.rtl() ? $anchorDims.offset.left - $eleDims.width + $anchorDims.width : $anchorDims.offset.left), + left: (Rtl() ? $anchorDims.offset.left - $eleDims.width + $anchorDims.width : $anchorDims.offset.left), top: $anchorDims.offset.top - ($eleDims.height + vOffset) } break; @@ -186,7 +188,7 @@ function GetOffsets(element, anchor, position, vOffset, hOffset, isOverflow) { break; default: return { - left: (Foundation.rtl() ? $anchorDims.offset.left - $eleDims.width + $anchorDims.width : $anchorDims.offset.left + hOffset), + left: (Rtl() ? $anchorDims.offset.left - $eleDims.width + $anchorDims.width : $anchorDims.offset.left + hOffset), top: $anchorDims.offset.top + $anchorDims.height + vOffset } } diff --git a/js/foundation.util.keyboard.js b/js/foundation.util.keyboard.js index 7e5a11fa2..b1d1c373e 100644 --- a/js/foundation.util.keyboard.js +++ b/js/foundation.util.keyboard.js @@ -10,6 +10,8 @@ !function($) { + let Rtl = Foundation.rtl; // Figure out import after refactor + const keyCodes = { 9: 'TAB', 13: 'ENTER', @@ -66,7 +68,7 @@ var Keyboard = { if (typeof commandList.ltr === 'undefined') { // this component does not differentiate between ltr and rtl cmds = commandList; // use plain list } else { // merge ltr and rtl: if document is rtl, rtl overwrites ltr and vice versa - if (Foundation.rtl()) cmds = $.extend({}, commandList.ltr, commandList.rtl); + if (Rtl()) cmds = $.extend({}, commandList.ltr, commandList.rtl); else cmds = $.extend({}, commandList.rtl, commandList.ltr); } @@ -106,8 +108,11 @@ var Keyboard = { register(componentName, cmds) { commands[componentName] = cmds; - }, + }, + + // TODO9438: These references to Keyboard need to not require global. Will 'this' work in this context? + // /** * Traps the focus in the given element. * @param {jQuery} $element jQuery object to trap the foucs into. diff --git a/js/foundation.util.triggers.js b/js/foundation.util.triggers.js index 8bee69966..63c1a9b13 100644 --- a/js/foundation.util.triggers.js +++ b/js/foundation.util.triggers.js @@ -2,6 +2,8 @@ !function($) { + let Motion = Foundation.Motion; // import { Motion } from "foundation.util.motion"; + const MutationObserver = (function () { var prefixes = ['WebKit', 'Moz', 'O', 'Ms', '']; for (var i=0; i < prefixes.length; i++) { @@ -50,7 +52,7 @@ $(document).on('close.zf.trigger', '[data-closable]', function(e){ let animation = $(this).data('closable'); if(animation !== ''){ - Foundation.Motion.animateOut($(this), animation, function() { + Motion.animateOut($(this), animation, function() { $(this).trigger('closed.zf'); }); }else{ diff --git a/js/foundation.zf.responsiveAccordionTabs.js b/js/foundation.zf.responsiveAccordionTabs.js index 0201924e6..96e2011af 100644 --- a/js/foundation.zf.responsiveAccordionTabs.js +++ b/js/foundation.zf.responsiveAccordionTabs.js @@ -2,10 +2,12 @@ !function($) { + let MediaQuery = Foundation.MediaQuery; // import MediaQuery from "foundation.util.mediaQuery"; + let GetYoDigits = Foundation.GetYoDigits; + /** * ResponsiveAccordionTabs module. * @module foundation.responsiveAccordionTabs - * @requires foundation.util.keyboard * @requires foundation.util.timerAndImageLoader * @requires foundation.util.motion * @requires foundation.accordion @@ -27,7 +29,7 @@ class ResponsiveAccordionTabs { this.currentMq = null; this.currentPlugin = null; if (!this.$element.attr('id')) { - this.$element.attr('id',Foundation.GetYoDigits(6, 'responsiveaccordiontabs')); + this.$element.attr('id',GetYoDigits(6, 'responsiveaccordiontabs')); }; this._init(); @@ -116,7 +118,7 @@ class ResponsiveAccordionTabs { var matchedMq, _this = this; // Iterate through each rule and find the last matching rule $.each(this.rules, function(key) { - if (Foundation.MediaQuery.atLeast(key)) { + if (MediaQuery.atLeast(key)) { matchedMq = key; } }); @@ -190,7 +192,7 @@ class ResponsiveAccordionTabs { $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') || Foundation.GetYoDigits(6, 'accordion'); + var id = $(value).attr('id') || GetYoDigits(6, 'accordion'); if (hash !== id) { if (hash !== '') { $(value).attr('id',hash); @@ -222,6 +224,8 @@ class ResponsiveAccordionTabs { ResponsiveAccordionTabs.defaults = {}; +// TODO9438 move this to initialize in order to eliminate side effects +// // The plugin matches the plugin classes with these plugin instances. var MenuPlugins = { tabs: {