Introduce a polyfill for matchMedia

Nice work and I completely agree core needs some way to handle this. I'll try to make some time to test this in different browsers.

Important note that I didn't get right away: there aren't any browsers that only implement matchMedia without implementing the MediaQueryList interface.

+++ b/core/misc/matchMedia.jsundefined
@@ -0,0 +1,139 @@
+  var fakeBody = doc.createElement( "body" );
+  var div = doc.createElement( "div" );

No spaces around params. See JS coding standards: #172169: [Obsolete] JavaScript coding standards.

+++ b/core/misc/matchMedia.jsundefined
@@ -0,0 +1,139 @@
+  window.addEventListener = window.addEventListener || window.attachEvent || function () {};
+  window.removeEventListener = window.removeEventListener || window.detachEvent || function () {};

1) window is not yet available in the closure.
2) Only IE >=9 supports media queries. IE >=9 also supports addEventListener. So why do we need this then? To make media queries "kind of work" (i.e. only in JS) in IE8?

+++ b/core/misc/matchMedia.jsundefined
@@ -0,0 +1,139 @@
+  function MediaQueryList (q) {
...
+      }(this, debounce(callback, 250)));

JS coding standards.

+++ b/core/misc/matchMedia.jsundefined
@@ -0,0 +1,139 @@
+    /**

Prepend newline.

+++ b/core/misc/matchMedia.jsundefined
@@ -0,0 +1,139 @@
+      docElem.insertBefore( fakeBody, refNode );

JS coding standards.

+++ b/core/misc/matchMedia.jsundefined
@@ -0,0 +1,139 @@
+      docElem.removeChild( fakeBody );

JS coding standards.

+++ b/core/misc/matchMedia.jsundefined
@@ -0,0 +1,139 @@
+    /**

Prepend newline.

+++ b/core/misc/matchMedia.jsundefined
@@ -0,0 +1,139 @@
+     *   The callback to be invoked on screen resize or orientationchange.

This isn't about "screen resize or orientationchange", it's about "the associated media query list changes in evaluation".

+++ b/core/misc/matchMedia.jsundefined
@@ -0,0 +1,139 @@
+     *   query applies to the current screen dimenions and orientation. The

- s/dimenions/dimensions/
- Same as above: why mention screen resize and orientation change if you could just as well just say "media query evaluation has changed"?

+++ b/core/misc/matchMedia.jsundefined
@@ -0,0 +1,139 @@
+      }(this, debounce(callback, 250)));

Shouldn't the 250 be in overridable through Drupal.settings? It's okay to default to 250, but for whatever reason we don't know yet, people may want to increase this.

+++ b/core/misc/matchMedia.jsundefined
@@ -0,0 +1,139 @@
+    /**

Prepend newline.

+++ b/core/modules/system/system.moduleundefined
@@ -1380,6 +1380,15 @@ function system_library_info() {
+    'version' => '1.0',

s/'1.0'/VERSION/

Ugh.

FYI: http://caniuse.com/#search=MediaQueryList

Regarding IE8, picture (#1775530: Move picture into core), is having the same 'problem', it is using matchmedia.js, and it works depending on the media queries used.

Ok so the IE8 compatibility stuff is needed for e.g. responsive images in IE8 then? That's fine, but then please add a comment stating this should be dropped once IE8 support is dropped from Drupal.

@wim for the moment picture is using the original matchmedia.js, but we need a standardized way to handle this.

EDIT: picture polyfill.js binds for the moment directly to resize events, so maybe we can use the original match media.js and wrap it so JavaScript can bind to change events?

Here's a patch based on #11. It uses https://github.com/paulirish/matchMedia.js and wraps it to add the addEventListener and removeEventListener. The weird part is that when these functions exist natively (browser supports them), it stops working (evenlisteners aren't triggered for some reason).

Attached is the patch and the lines with which you can test them.

status...

"evenlisteners aren't triggered for some reason" it depends, it works in Chrome 23.0.1271.40 beta-m/FF 15.0.1, but latest Chromium only fires it at create time, so I guess you need to add them even if the browser supports matchMedia.addEventListener. A quick test can be found at http://robnyman.github.com/matchmedia/

Re-reading #11: pictfurefill is using matchmedia directyle and isn't (probably) going to use addEventListener to do the evaluation of the media queries, hence the question to not touch matchmedia.js and just add a wrapper.

@jessebeach is this approach/idea acceptable for you?

New patch based on #14.

#16 I agree, I rather see drupalSettings not being used in the polyfill, we'll need to keep it as clean as possible.

@jesse this is kind of blocking picture (#1775530: Move picture into core), because we need to decide where to add matchmedia.js, for the moment picture includes a copy of it own. Do you have time to work on this this week so we can move forward? Or do you want me to open a new issue just to add matchmedia.js?

Isn't this the same issue as #1621594: Media Query Detection?

Closed the other issue in favor of this one.

So I'm trying to make sense of all this and here is a brief comparison from what I have seen with the different libraries:

1. https://github.com/JoshBarr/js-media-queries - needs respond.js if supporting IE6-8, no need for matchmedia.js - built in throttling

2. https://github.com/ten1seven/jRespond - has IE6+ support, has built in throttling, checks are based off of screen size - not media query. Also uses respond.js for IE6-8 mediaquery support

3. https://github.com/paulirish/matchMedia.js - polyfill for browser that don't support matchmedia, no built in throttling but @jessebeach said she wrote in support

4. http://wickynilliams.github.com/enquire.js/ - uses matchmedia.js when matchmedia support is available, if IE6-8 support is needed, then include matchmedia.js - has built in throttling

5. http://harvesthq.github.com/harvey/ - not sure of the browser support, not enough information to make a good decision

6. http://xoxco.com/projects/code/breakpoints/ - checks are based off of screen size - not media query

7. http://rezitech.github.com/syze/ - it looks like check are against screen size not media query, built in throttling

8. https://github.com/martinmartinmartin/breakpoint - checks are against media queries using matchmedia.js similar to Enquire.js but less robust

So without having tested these, it looks like the best route to go is #4 Enquire.js + matchmedia.js (maybe even loaded in with Modernizr(yepnope)).

Here is the links to some issues that this could affect:
#1277352: Responsive vertical tabs
#1510532: [META] Implement the new create content page design
#1276908: Administrative tables are too wide for smaller screens
#1524414: Rewrite tabledrag.js to use jQuery UI
#1137920: Fix toolbar on small screen sizes and redesign toolbar for desktop

@jessebeach what do you think about Enquire.js? Is it needed in this case? Would it be helpful to be in core?

Thanks, It looks like Enquire.js is 2k without gzip, but it is MIT Licensed. I'm assuming it has to be GPL to be included in Drupal?

It doesn't require Modernizr/yepnope I was just suggesting to use if it ever becomes available in Drupal.

It also looks like http://wickynilliams.github.com/enquire.js/#legacy-support has good support for old IE.

I'm a little confused on what kind of support for IE does the version of matchmedia.js your working on provide?

-Thank you for everyone's help in pushing Drupal to become responsive!

Note: I've never tried any of these libraries. I'm about to start using them after I fully research them.

https://github.com/martinmartinmartin/breakpoint is the only other I think that uses matchmedia.js I'm not sure if it uses it's API?

#27 I'm fine with only matchMedia, MQ polyfill is nice but the patch in #4 doesn't work for picture, I don't get any output in IE8. The original matchMedia.js works with picture in IE8. Using the #4 patch the picturefill code is no longer executed in IE8.

What kind of breakpoints did you use in IE8 to make it work, the picturefill demo site is now running the patch from #4 so other people can test it.

FYI used picture source:

<picture class="resp-img-picture" alt="" title="">
  <source class="image-style-thumbnail" src="http://picturefill8.h011.attiks.com/sites/picturefill8.h011.attiks.com/files/styles/thumbnail/public/field/image/7893709730_6797c5de98_b.jpg" width="100" height="67" alt="">
  <source media="(min-width: 0px)" srcset="http://picturefill8.h011.attiks.com/sites/picturefill8.h011.attiks.com/files/styles/thumbnail/public/field/image/7893709730_6797c5de98_b.jpg 1x, http://picturefill8.h011.attiks.com/sites/picturefill8.h011.attiks.com/files/styles/medium/public/field/image/7893709730_6797c5de98_b.jpg 2x" class="image-style-thumbnail" width="100" height="67" alt="">
  <source media="screen, all and (min-width: 560px) and (max-width: 850px)" srcset="http://picturefill8.h011.attiks.com/sites/picturefill8.h011.attiks.com/files/styles/medium/public/field/image/7893709730_6797c5de98_b.jpg 1x, http://picturefill8.h011.attiks.com/sites/picturefill8.h011.attiks.com/files/styles/large/public/field/image/7893709730_6797c5de98_b.jpg 2x" class="image-style-medium" width="220" height="147" alt="">
  <source media="all and (min-width: 851px)" class="image-style-large" src="http://picturefill8.h011.attiks.com/sites/picturefill8.h011.attiks.com/files/styles/large/public/field/image/7893709730_6797c5de98_b.jpg" width="480" height="320" alt="">
</picture>

What is wrong with this solution: https://github.com/paulirish/matchMedia.js/blob/master/matchMedia.addLis...

#30: It's the inefficient polling approach. See #3.

If interested, here is good article that explains some of Enquire.js http://css-tricks.com/enquire-js-media-query-callbacks-in-javascript/

I knew I missed something ;-)

I have to agree with @gmclelland, enquire.js looks neat, it does what we need, without adding overhead.

I'm *very* strongly opposed to enquire.js, for the reasons Jesse outlines. It's a custom API, it is not a polyfill.

enquire.js is a lightweight, pure javascript framework for programmatically responding to CSS media queries.

https://github.com/wickynilliams/enquire.js

The problem is that the native listeners are still a bit buggy, that is way they are polling I guess
https://github.com/WickyNilliams/enquire.js/issues/3
https://github.com/paulirish/matchMedia.js/issues/9#issuecomment-8874235

Your assessment is correct and if we (you) build it from scratch it will be cleaner, but personally I think the performance impact will be acceptable and the custom API isn't really bothering me.

If you can adopt #4 so it behaves like standard matchmedia.js and it solves your problem for toolbar, great.

It doesn't back off to window.matchMedia when it's supported.

-Maybe this could raised in the enquire.js issue queue. My guess is because it is also checking for orientation changes which might be buggy? Not sure.

It introduces a custom API.

True

It uses setTimeout to poll for MQ changes -- in all browsers, even if
they support window.matchMedia. This imposes a processing cost on what
will most likely amount to all pages.

-My guess is because it is also checking for orientation changes which might be buggy? Not sure. I wonder how much processing is really used since the calls are throttled?

We have to add it in addition to the matchMedia polyfill (paulirish).

True.

I guess the question is "Is the flexibility it provides worth it and do you see it being used a lot with core and contrib?"

I'm not familar enough with matchmedia.js or enquire.js to make a decision, but I thought I would present it to see if it would be helpful.

If there is any more interest in Enquire.js, I would suggest pulling the author/s into this conversation for better feedback.

Maybe we should list what use cases/problems matchmedia.js and enquire.js could solve if implemented. We have already listed two which is the new toolbar and responsive images.

What others can you think of in core and contrib?

Seems I cross posted with #36 if the goal is to have a polyfill, then I guess we need to build it.

Let's stick with the patch in #4, I did some more testing on picture and the problem is that your matchMedia.js defines:

window.addEventListener = window.addEventListener || window.attachEvent || function () {};
window.removeEventListener = window.removeEventListener || window.detachEvent || function () {};

After removing them ie8 "works" again, it can detect the 'screen' media.

I tested your patch using http://robnyman.github.com/matchmedia/, adapted source can be found at https://github.com/attiks/robnyman.github.com/tree/master/matchmedia. It now works for all browsers even IE8

PS: Sorry for all the noise.

#42 is works, great job!

Attached patch:

• renames matchMedia.js to matchmedia.js.
• some minor coding styles and comment fixes.
• adds window to the closure.

#43:
- Why the rename? Just wondering, I have no idea if we have a policy on this sort of thing.
- window in closure: good catch.

Interdiff please? :)

#44 renamed because all files loaded by the browser are lowercase

Attaching interdiff

@jessebeach - Thank you for being courteous and asking.

I have seen the work that you, @attiks, and @Wim Leers have done and I respectfully know that everyone here has a far better js knowledge than I.

Just including matchmedia.js is fine with me. My goal was to present the alternatives I've came across so that everyone knows whats available to make an informed decision.

Since I only did some comment clean up, RTBC from me

Looks great (note I didn't test) to me. And yes, thank you, @gmclelland for your research — it was most helpful :)

Couple of comments, not enought for putting back in NR but would be nice:

in addListener:

          var self = mql;
          var cb = debounced;

any reason for creating temp variables?

IE8 is a terrible browser, might need a double check to see if we're not facilitating memory leaks on this poor browser.

The JS tests page needs a scenario to test this. No idea how to test properly right now http://drupal.org/node/1777342

Marking NW for nod_'s comments, then I'm happy to get this in. Thanks for all the thorough discussion in here.

New patch

Manual test added to http://drupal.org/node/1777342

Ok, confirmed the license of the upstream library as MIT, which is GPLv2+ compliant. Has sign off from the various JavaScript-ish folks. Is documented, including param documentation.

Committed and pushed to 8.x. Thanks!

Seems like we should have a change notice for this, to let people know about the existence of this library for use in their own modules. Tagging and such.

Change notice created at http://drupal.org/node/1825832, can somebody check if it makes sense?

@attiks: Looked great, I created a new revision with minor improvements: "Linked to the specs, s/javascript/JavaScript/, minor clarifications." Thanks! :)

Thanks

I did some more testing, and apparently the specs says that the callback gets executed whenever the state changes, in IE the callback was executed every 250ms, regardless of the state.

Attached patch should fix this.

Oops. Committed and pushed to 8.x. Thanks!

Follow up created #1848500: Use performance optimized matchmedia polyfill

Untagging. Please remove the "Needs change notification" tag when the change notice task is complete.

Those too.

added #1775530: Move picture into core