analogj/matchmedia-ng

matchmedia wrapper for angularjs

matchmedia-ng's Issues

Feature: matchmedia directive

It would be useful to use matchmedia-ng as a directive.

An example with a custom media query (adapted from the README) could then be rewritten entirely in the template (pseudo-code):

<matchmedia ng-model="tablet" is="(min-width: 768px) and (max-width: 979px)"></matchmedia>
<img ng-src=""images/[email protected]" ng-if="{{tablet}}"/>

This feature was inspired by the Polymer core-media-query element.

onPrint is not detected on Chrom 38

Chrome 38 just came out and my onPrint is not getting called anymore. It used to work with Chrome 37. Any thoughts?

IE9 TypeError: Object doesn't support property or method 'addListener'

Line 68 where mediaQueryList.addListener(handler) is still blowing up even if you include the matchmedia polyfill from Paul Irish

.on function trigerred at wrong time

Hi there,

I just tried to play a bit with the lib and here is my setup:

In app.config I added the following custom rules:

matchmediaProvider.rules.phone = "(max-width: 799px)";
matchmediaProvider.rules.desktop = "(min-width: 800px)";

Then in my directive controller I have this:

                    matchmedia.onPhone(function() {
                            console.log("PHONE");
                        });

                    matchmedia.onDesktop(function() {
                            console.log("DESKTOP");
                        });

Result is that I get both PHONE and DESKTOP in the console at each transition between the states, meaning when I go under 800px and when I go above it. I expected to get PHONE when going under and DESKTOP when going above.
For the record, I also tried with the .on function and passing the "max-..." param and I get the same result.

There is no exception raised or errors in the console and setting the dev mode did not really gave much info besides:
["Creating matchmedia"]
["adding listener for query: (max-width: 799px)"]
["adding listener for query: (min-width: 800px)"]

I am using it wrong?

Thanks,

Typo in doc ('Override Aliases')

angular.module('myapp', ['matchmedia-ng']).config(['matchmediaProvider', function (matchmediaProvider) {
  matchmediaProvider.rules.phone = "(max-width: 500px)";
  matchmediaProvider.rules.desktop: = "(max-width: 1500px)";
}]);

should be:

matchmediaProvider.rules.desktop = "(max-width: 1500px)";

(no ':' after .desktop)

DEVMODE should be false by default

Currently a config block is used to activate DEVMODE within the matchmedia-ng module. This forces the application owner to explicitly turn DEVMODE off by utilizing a separate config module at the application level. This additional config block will always be needed for production instances where logging should be turned off.

I suggest removing the config block within matchmedia-ng and allowing the application developer the option to add a config block at the application level instead.

to clever when ask for printing

Hi.
When I ask for a print with google chrome (using $window.print, not with ctrl+p), it open the print preview (ok, normal behaviour).
At opening, lib is so clever, it analyse the new screen (the print preview one) and send event to application saying it's mobile format. this result by changing the website behind the print preview window.

Is there a way to avoid this to smart detection?
using google chrome on MAC

IE9 Object doesn't support property or method 'matchMedia'

I'm getting this error in IE 9. In all other browsers it's working.

I have this in my main controller

matchmedia.onLandscape(function(mediaQueryList){
if(mediaQueryList.matches){
$("html").removeClass("portrait").addClass("landscape");
}
});
matchmedia.onPortrait(function(mediaQueryList){
if(mediaQueryList.matches){
$("html").removeClass("landscape").addClass("portrait");
}
});

xl browser size

Is there a way to add a variable for an xl browser size without editing the match-media.js file directly?

eg.

var defaultRules = {
xl : '(min-width: 1600px)',
lg : '(min-width: 1200px) and (max-width:1599px)',
md : '(min-width: 992px) and (max-width: 1199px)',
sm : '(min-width: 768px) and (max-width: 991px)',
xs : '(max-width: 767px)'
};