6.4.1: Foundation.MediaQuery.current empty when including foundation.util.mediaQuery separately

[kitsimons]

I'm importing foundation.core and foundation.util.mediaQuery separately. Subsequently using Foundation.MediaQuery.current returns an empty string.

If I import foundation (everything) rather than the components, using Foundation.MediaQuery.current returns the current breakpoint as expected.

So this;

import 'foundation-sites/dist/js/plugins/foundation.core'
import 'foundation-sites/dist/js/plugins/foundation.util.mediaQuery'

$(document).foundation()
console.log('Current: ' + Foundation.MediaQuery.current)

Returns an empty string.

Whereas this;

import 'foundation-sites/dist/js/foundation'

$(document).foundation()
console.log('Current: ' + Foundation.MediaQuery.current)

Returns the current breakpoint.

This appears to be an issue with 6.4.1 (everything works as expected in 6.3.1)

[kball]

Hi @kitsimons
Good catch - the distfile for MediaQuery is not running init right now... it should, as the distfiles are intended to give "drop in" functionality. For now you should be able to workaround by adding Foundation.MediaQuery._init()

[kitsimons]

Awesome, thanks @kball

[flyingL123]

@kball I just ran into this same issue using 6.4.3. I'm using webpack and am trying to import MediaQuery into one of my files, like this:

import { MediaQuery } from 'foundation-sites/js/foundation.util.mediaQuery';

Later in the file, MediaQuery.current will return an empty string unless I call MediaQuery._init(); first.

Should the call to _init actually be in the MediaQuery files so that it's already initiated when imported, or am I supposed to call that private _init method?

[DanielRuf]

@flyingL123 does this still occur in 6.5.0 RC1?

[flyingL123]

Yes @DanielRuf it still occurs because the _init method is not called in the foundation-sites/js/foundation.util.mediaQuery file, so you end up having go call _init yourself after importing it. Can't we just add some code to the file to call _init before it's exported?

[DanielRuf]

cc @ncoden should we reopen this?

[flyingL123]

@DanielRuf just to clarify, I am importing foundation-sites/js/foundation.util.mediaQuery.js, not foundation-sites/js/entries/plugins/foundation.util.mediaQuery.js. Maybe that's the problem? Are the entries/plugins files supposed to be used in order to import a specific plugin?

[kristiansp]

I seem to have this problem to, with v6.5.0-rc.2.

I load the MediaQuery module like this:

import { MediaQuery } from 'foundation-sites/js/foundation.util.mediaQuery';
Foundation.MediaQuery = MediaQuery;

Even if I call Foundation.MediaQuery._init(); and then alert(Foundation.MediaQuery.current); directly after, I still only get undefined back.

[ncoden]

@flyingL123 The entries files are dedicated to a "ready-to-use" import, like in a browser environment. So yes, you may need to import the entry plugin instead if you do not want to call ._init() manually.

[ncoden]

@kristiansp Did you imported the Foundation CSS or included the Sass mixin foundation-everything() or foundation-global-styles().

[kristiansp]

Yes, I do have the @include foundation-global-styles included. When I try to print out the Foundation.MediaQuery object with JSON.stringify, I get this back:

{
	"queries": [{
		"name": "ime",
		"value": "only screen and (min-width: null)"
	}, {
		"name": "ime",
		"value": "only screen and (min-width: null)"
	}, {
		"name": "ime",
		"value": "only screen and (min-width: null)"
	}]
        // Repeated a bunch of more times …
}

So I'm guessing that it's not able to read the breakpoints out of my settings.scss somehow? I am almost sure I had this working when I first set this up (I was struggling to get Webpack to work, as I was doing it for the first time), could it be I've updated some modules that could have caused this?

One more thing, and I'm a bit out of my depth here, but looking in the _init() function for foundation.util.mediaQuery, it seems to set the queries by looping through var extractedStyles = $('.foundation-mq').css('font-family');

I have no idea of the logic here, but I don't see how that would load my breakpoints?

[DanielRuf]

Can you provide a codepen or some info so we can see where you load your JS (at the bottom of body or in the head)?

[kristiansp]

@DanielRuf This is at the moment the very end of my HTML document (I moved the code below initialising Foundation from a custom.js file to here, to see if there was something with the order things were loaded). I've also tried initialising with and without $( document ).ready() (what is btw the recommended?):

<script>$( document ).ready(function() {
  $(document).foundation();
   
  Foundation.MediaQuery._init();
  console.log('Type of Foundation.MediaQuery: ' + typeof(Foundation.MediaQuery));
  console.log('Foundation.MediaQuery: ' + JSON.stringify(Foundation.MediaQuery));
  console.log('Type of Foundation.atLeast: ' + typeof(Foundation.atLeast));
  console.log("Foundation.MediaQuery.atLeast('medium'): " + Foundation.MediaQuery.atLeast('medium'));
  console.log('Type of Foundation.MediaQuery.current: ' + typeof(Foundation.MediaQuery.current));
  console.log('Foundation.MediaQuery.current: ' + Foundation.MediaQuery.current);
  if (Foundation.MediaQuery.atLeast('medium')) {
  // Disabling accordion on footer info elements for big screens
  $( ".footer .accordion" ).foundation('_destroy');
  $( ".footer .accordion .accordion-content" ).css('display', 'block');
  $( ".footer .accordion-title" ).contents().unwrap();
  }
  });</script></body>
</html>

[ncoden]

@kristiansp Also could you send the styles of the .foundation-mq meta element? It should be injected in head.

[kristiansp]

@ncoden What is the best way to extract the styles? I see the element with the inspector, but it actually doesn't seem to have any styles at all.

[ncoden]

$('.foundation-mq').css('font-family');

[kristiansp]

When I print it in the console that gives me:

$('.foundation-mq').css('font-family'); : Times

So it might seem to be going for some Times New Roman here? ;-) (Btw, that's not my website's font 😃)

[ncoden]

@kristiansp This means that the .foundation-mq styles are not applied. Please make sure that you indeed included the global styles mixin @include foundation-global-styles and imported in your HTML the CSS file generated with it. Then, check your SCSS breakpoint settings again. I don't see what else it could be.

[kristiansp]

@ncoden Turns out you were right. Adding @import 'node_modules/foundation-sites/scss/global'; in addition to […]/foundation at the top of my app.scss did the trick.

Btw, should I wrap $(document).foundation(); within $( document ).ready() at the end of my HTML document? I see conflicting advice.

Thanks for the help!

[ncoden]

Btw, should I wrap $(document).foundation(); within $( document ).ready() at the end of my HTML document? I see conflicting advice.

@kristiansp It depends on when you know your page is ready and if you have dynamically created component. Just try to initialize Foundation as soon as possible, but not before all component are there (or manually initialize them later).