From d9b2a5cbf242d68ca3165c8878c99c7a5f32db18 Mon Sep 17 00:00:00 2001 From: Kevin Ball Date: Mon, 19 Jun 2017 11:16:51 -0700 Subject: [PATCH] Rework media query init --- js/foundation.core.js | 4 ---- js/foundation.equalizer.js | 4 +++- js/foundation.interchange.js | 2 ++ js/foundation.offcanvas.js | 1 + js/foundation.responsiveAccordionTabs.js | 2 ++ js/foundation.responsiveMenu.js | 2 ++ js/foundation.responsiveToggle.js | 1 + js/foundation.reveal.js | 1 + js/foundation.sticky.js | 2 ++ js/foundation.tooltip.js | 1 + js/foundation.util.mediaQuery.js | 7 ++++++- 11 files changed, 21 insertions(+), 6 deletions(-) diff --git a/js/foundation.core.js b/js/foundation.core.js index 6febe15c1..939dd0479 100644 --- a/js/foundation.core.js +++ b/js/foundation.core.js @@ -186,12 +186,8 @@ var Foundation = { */ var foundation = function(method) { var type = typeof method, - $meta = $('meta.foundation-mq'), $noJS = $('.no-js'); - if(!$meta.length){ - $('').appendTo(document.head); - } if($noJS.length){ $noJS.removeClass('no-js'); } diff --git a/js/foundation.equalizer.js b/js/foundation.equalizer.js index 2e4a5c9e0..41f45b14d 100644 --- a/js/foundation.equalizer.js +++ b/js/foundation.equalizer.js @@ -36,9 +36,11 @@ class Equalizer extends Plugin { 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.$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; diff --git a/js/foundation.interchange.js b/js/foundation.interchange.js index 3013c74af..8db4f84bc 100644 --- a/js/foundation.interchange.js +++ b/js/foundation.interchange.js @@ -35,6 +35,8 @@ class Interchange extends Plugin { * @private */ _init() { + MediaQuery._init(); + var id = this.$element[0].id || Foundation.GetYoDigits(6, 'interchange'); this.$element.attr({ 'data-resize': id, diff --git a/js/foundation.offcanvas.js b/js/foundation.offcanvas.js index 6716daf2f..924675efa 100644 --- a/js/foundation.offcanvas.js +++ b/js/foundation.offcanvas.js @@ -32,6 +32,7 @@ class OffCanvas extends Plugin { //Triggers init is idempotent, just need to make sure it is initialized Triggers.init($); + MediaQuery._init(); this._init(); this._events(); diff --git a/js/foundation.responsiveAccordionTabs.js b/js/foundation.responsiveAccordionTabs.js index e8e71c1fb..374c895fe 100644 --- a/js/foundation.responsiveAccordionTabs.js +++ b/js/foundation.responsiveAccordionTabs.js @@ -57,6 +57,8 @@ class ResponsiveAccordionTabs extends Plugin{ * @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 = {}; diff --git a/js/foundation.responsiveMenu.js b/js/foundation.responsiveMenu.js index 4d02f8117..737a0fa77 100644 --- a/js/foundation.responsiveMenu.js +++ b/js/foundation.responsiveMenu.js @@ -59,6 +59,8 @@ class ResponsiveMenu extends Plugin { * @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 = {}; diff --git a/js/foundation.responsiveToggle.js b/js/foundation.responsiveToggle.js index f77f54f84..798b1dbbf 100644 --- a/js/foundation.responsiveToggle.js +++ b/js/foundation.responsiveToggle.js @@ -35,6 +35,7 @@ class ResponsiveToggle extends Plugin { * @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.'); diff --git a/js/foundation.reveal.js b/js/foundation.reveal.js index afaca2658..8af83dca9 100644 --- a/js/foundation.reveal.js +++ b/js/foundation.reveal.js @@ -41,6 +41,7 @@ class Reveal extends Plugin { * @private */ _init() { + MediaQuery._init(); this.id = this.$element.attr('id'); this.isActive = false; this.cached = {mq: MediaQuery.current}; diff --git a/js/foundation.sticky.js b/js/foundation.sticky.js index 1217e4fa0..4b285815d 100644 --- a/js/foundation.sticky.js +++ b/js/foundation.sticky.js @@ -36,6 +36,8 @@ class Sticky extends Plugin { * @private */ _init() { + MediaQuery._init(); + var $parent = this.$element.parent('[data-sticky-container]'), id = this.$element[0].id || GetYoDigits(6, 'sticky'), _this = this; diff --git a/js/foundation.tooltip.js b/js/foundation.tooltip.js index 12fb8ec4a..5fa150e51 100644 --- a/js/foundation.tooltip.js +++ b/js/foundation.tooltip.js @@ -41,6 +41,7 @@ class Tooltip extends Positionable { * @private */ _init() { + MediaQuery._init(); var elemId = this.$element.attr('aria-describedby') || GetYoDigits(6, 'tooltip'); this.options.tipText = this.options.tipText || this.$element.attr('title'); diff --git a/js/foundation.util.mediaQuery.js b/js/foundation.util.mediaQuery.js index 20c30bcc6..23e1eb74b 100644 --- a/js/foundation.util.mediaQuery.js +++ b/js/foundation.util.mediaQuery.js @@ -75,6 +75,11 @@ var MediaQuery = { */ _init() { var self = this; + var $meta = $('meta.foundation-mq'); + if(!$meta.length){ + $('').appendTo(document.head); + } + var extractedStyles = $('.foundation-mq').css('font-family'); var namedQueries; @@ -173,7 +178,7 @@ var MediaQuery = { * @private */ _watcher() { - $(window).on('resize.zf.mediaquery', () => { + $(window).off('resize.zf.mediaquery').on('resize.zf.mediaquery', () => { var newSize = this._getCurrentSize(), currentSize = this.current; if (newSize !== currentSize) { -- 2.47.2