Re: [cssom] resize event and matchMedia

On Tue, 11 Feb 2014 10:21:58 +0100, Jonathan Fielding  
<jonthanfielding@gmail.com> wrote:

> Hi all
>
> I have been looking at the CSSOM View Module specification, in
> particular I have been doing a lot of research into the
> window.matchMedia API and I would like to suggest a potential extension
> to the API.
>
> At the moment we can create a mediaQueryList and add a listener, which
> will fire when the media query is matched or unmatched. A limitation
> however is that we cannot add individual resize methods to each of the
> media queries, I tried to handle this limitation as part of my js
> library SimpleStateManager (www.simplestatemanager.com
> <http://www.simplestatemanager.com/>) which is currently built on top of
> the resize method however soon we will be migrating it to use the
> matchMedia API, but will need to to retain the resize method for
> handling the resize events.
>
> With the current API's available in the browser, to have a different
> resize method for each of the mediaQueryLists we need to add an on
> resize event.
>
> var mqlSmall = window.matchMedia("screen and (max-width: 767px)");
> var mqlMedium = window.matchMedia("screen and (min-width: 768px) and
> (max-width: 991px)");
> var mqlLarge = window.matchMedia("screen and (min-width:
> 992px)");window.addEventListener("resize", function(){
> if(mqlSmall.matches){ console.log('resize small device'); }
> else if(mqlMedium.matches){ console.log('resize medium device'); }
> else if(mqlLarge.matches){ console.log('resize large device'); }}, true);
>
> The above example is very simple, as we would need to add a debounce on
> to the resize event, and add method calls instead of calling the
> console.log.
>
> My suggestion is to extend the addListener method so this will look more
> like
>
> var mqlSmall = window.matchMedia("screen and (max-width: 767px)");
> var mqlMedium = window.matchMedia("screen and (min-width: 768px) and
> (max-width: 991px)");
> var mqlLarge = window.matchMedia("screen and (min-width: 992px)");
>
> mqlSmall.addListener('resize', function(){
> console.log('resize small device');
> });
>
> mqlMedium.addListener('resize', function(){
> console.log('resize medium device');
> });
>
> mqlLarge.addListener('resize', function(){
> console.log('resize large device');
> });

This would give no new abilities, just be for convenience, right?

> The benefit being the browser could take away the need for this logic in
> our javascript, and this could potentially offer performance benefits as
> the browsers can optimise how this is implemented.

I think better performance is not a strong argument to support this  
feature. I'm also not convinced it would improve performance.

> I hope this email makes sense, I would love to discuss peoples thoughts
> on this an whether this could make it into the specification.

If checking .matching on each resize event is a performance problem for  
you, can you do something like this instead?

var mqlSmall = window.matchMedia("screen and (max-width: 767px)");
var mqlMedium = window.matchMedia("screen and (min-width: 768px) and  
(max-width: 991px)");
var mqlLarge = window.matchMedia("screen and (min-width: 992px)");
var currentMatching = mqlSmall.matches || mqlMedium.matches ||  
mqlLarge.matches;
function setCurrentMatching(mql) {
   currentMatching = mql;
}
[mqlSmall, mqlMedium, mqlLarge].forEach(function(mql) {
   mql.addListener(setCurrentMatching);
});
onresize = function(e) { console.log(currentMatching.media); };

-- 
Simon Pieters
Opera Software

Received on Tuesday, 11 February 2014 11:53:23 UTC