jacopotarantino / angular-match-media Goto Github PK

I installed this plugin in Angular 1.3 and I am using the .on method like this:

Main Controller:

vm.desktop = screenSize.on('md, lg');
vm.mobile = screenSize.on('xs, sm');

Ng-View:

<div ng-if="main.desktop">
  Show Desktop
</div>

<div ng-if="main.mobile">
  Show Mobile
</div>

When the browser is resized, I keep getting this error in Google Chrome Console:

match-media.js:155 
Uncaught TypeError: callback is not a function
    at listenerFunc (match-media.js:155)

In the file https://github.com/jacopotarantino/angular-match-media/blob/0.6.0/bower.json, the version is 0.5.0. Is that a typo or a wrong version?

Please fix for version 0.6.0. Thanks.

Hi

I'm using this library because my client wants different views for desktop and mobile. I'm using library in routes and are making me a little bit crazy.

I have this:

angular
  .module('app', [
    'ngAnimate',
    'ngAria',
    'ngCookies',
    'ngMessages',
    'ngResource',
    'ngRoute',
    'ui.bootstrap',
    'ngSanitize',
    'ngTouch',
    'matchMedia',
    'ngMap'
  ])
  .config(function ($routeProvider, USER_ROLES) {
    $routeProvider
      .when('/', {
        redirectTo: '/entry',
        data: {
          authorizedRoles: [USER_ROLES.all]
        }
      })
      .when('/login', {
        templateUrl: 'views/login.html',
        controller: 'LoginCtrl',
        controllerAs: 'vm',
        data: {
          authorizedRoles: [USER_ROLES.all]
        }
      })
      .when('/entry', {
        templateUrl: 'views/entry_view.html',
        controller: 'EntryCtrl',
        controllerAs: 'entry',
        data: {
          authorizedRoles: [USER_ROLES.users, USER_ROLES.valid]
        },
        resolve: {
          mess: function($q, $location, $timeout, screenSize) {
            var deferred = $q.defer();

            $timeout(function() {
              if (screenSize.is('xs, sm')) {
                $location.path('/mobile/entry');
                deferred.reject();
              } else {
                deferred.resolve();
              }
            });

            return deferred.promise;
          }
        }
      })
      .when('/mobile/entry', {
        templateUrl: 'views/entry/mobile/lalala.html',
        controller: 'EntryMobileCtrl',
        controllerAs: 'entryMobile',
        data: {
          authorizedRoles: [USER_ROLES.teacher, USER_ROLES.valid]
        }
      })
      .when('/mobile/entry/members', {
        templateUrl: 'views/entry/mobile/members.html',
        controller: 'EntryMembersMobileCtrl',
        controllerAs: 'tmm',
        data: {
          authorizedRoles: [USER_ROLES.users]
        }
      })
/* and so on */
      .otherwise({
        redirectTo: '/',
        data: {
          authorizedRoles: [USER_ROLES.all]
        }
      });

  })
  .run(function($rootScope, $location, Authentication) {

    $rootScope.$on('$routeChangeStart', function(event, next, prev) {
      if ('$$route' in next && 'data' in next.$$route && 'authorizedRoles' in next.$$route.data) {
        var authorizedRoles = next.$$route.data.authorizedRoles;
        if (!Authentication.isAuthorized(authorizedRoles)) {
          $location.path('/login');
        }
      }

    });

    $rootScope.$on("$locationChangeSuccess",function(event,newUrl, oldUrl) {
      console.log("location: "+$location.path());
    });
  });

All works well but when i call $window.history.back() function from my headers screenSize.is is executed and user is moved to /mobile/entry

Anyone noticed about this?

Thanks

It looks like your master branch has the new on() method exposed in the service, but the Git tag for 2.3 that bower uses does not (so on() is not exposed). Looks like 2.3 tag is the same code as 2.2.

Please add a package.json file to the repo, so we can include this project with npm.

Thanks!

Hi,

This is a great library for AngularJS and thank you for all the effort you put into this project.

Can we please ask you a favor? Release the latest on npm. The onRuleChange() method is not available in the 0.6.1 package listed on npmjs.com (https://www.npmjs.com/package/angular-media-queries), which is shame as it's a very practical function.

Thank you!

in readme.md the onChange method should be

angular.module('myApp', ['matchMedia'])
.controller('mainController', ['screenSize', function (screenSize) {
  $scope.isMobile = screenSize.onChange($scope,'xs, sm', function(isMatch){
    $scope.isMobile = isMatch;
  });
}]);

Could be confusing.

In both the on() and onChange() APIs, the resize listener is cleaned up in scope.$destroy() event. However, the resize listener inside when() API is not cleaned up. Please add the appropriate code or I can submit a PR.

Please alias 'angular-media-queries' as the angular module name, this is for naming consistency when using with a module loader.

like so:

angular.module('angular-media-queries', [matchMedia]);

The var defaultRules can't be extended. When I create my own rules, I have to redeclare all the default rules too. This could cause problems if the default breakpoints change in a later version.

Example
screenSize.rules = {
lg: '(min-width: 1200px)', // default rule
md: '(min-width: 992px) and (max-width: 1199px)', // default rule
mobileLandscape: '(max-width: 768px) and (orientation: landscape)', // my custom rule
sm: '(min-width: 768px) and (max-width: 991px)', // default rule
xs: '(max-width: 767px)' // default rule
}

Hi, it looks like you have an old version number in the comment for the latest release.

Please add minified build file to your repository.

This help us to use minified files without the need to manually generate across development and production machines. Most libraries developers send the minified files together.

Thank you

Just wanted to ask if angular 2 support was in the road map? If not did you have any idea of how to solve this problem in angular 2?

Hello @jacopotarantino ,
I am the member of cdnjs project.
We want to host this library.
But I need some help.
Because I saw the latest version on github is v0.6.0, the latest version on npm is v0.5.1.
Could you help me release the latest version on npm?
Thanks for your help!

cdnjs/cdnjs#8629

Hi,

I've created the necessary TypeScript typings for your module. The pull request on DefinitelyTyped can be found here. Hopefully it'll be merged soon.

Proper credit was given, but do check if there's anything you'd like to change.

Having a CC license is rather atypical for software. Requiring attribution for a small module makes it difficult to use in some contexts.

Angular it self and many modules are licensed under the MIT license. Please consider to re-license your module and also provided it under the MIT license!

If anyone is interested in contributing heavily to the development of this plugin or would like to give back to the community in a meaningful way, I would love help maintaining this plugin. Comment here or send me an email if interested.

$scope.mobile = screenSize.is('xs');
$scope.desktop = screenSize.is('xm, md, lg');

These two variables are not changing if I'm resizing the browser screen on the fly.

Hello,

nice and clean utility. Very handy!

The only thing it misses is a onChange event that would trigger when you actually change t-shirt view port and not on every resize...

so like
screenSize.onChange(new, function(....)

but would also help to have an old value, so from->to

It would be great if 'screenSize' service would be implemented as provider with methods for customization 'rules' object, thus it would be very convenient to define all custom rules on the app configuration step

Hi, I was planning on making some improvements and submitting a PR, but once I started looking into the performance, and started thinking of new features I wanted, I ended up rewriting the entire code.

Subsequently I have no idea if I changed too much to make a PR, so I uploaded it to its own repository instead for now. I have zero experience publishing on Github so I'm not sure what the best way forward from here is? Should I still submit a PR?

If you want to check out what I've done it's at https://github.com/bensurman/angular-screenmatch

Hi Great service, is there a possibility to include a minified version?

Since screenSize.on is probably a watch, is there also a screenSize.off?