{"id":13673348,"url":"https://github.com/AnalogJ/matchmedia-ng","last_synced_at":"2025-04-28T09:30:39.641Z","repository":{"id":13067049,"uuid":"15747624","full_name":"AnalogJ/matchmedia-ng","owner":"AnalogJ","description":"matchmedia wrapper for angularjs","archived":false,"fork":false,"pushed_at":"2017-04-17T15:24:53.000Z","size":40,"stargazers_count":135,"open_issues_count":1,"forks_count":24,"subscribers_count":11,"default_branch":"master","last_synced_at":"2025-04-15T12:56:49.287Z","etag":null,"topics":["angularjs","javascript","matchmedia","responsive"],"latest_commit_sha":null,"homepage":"http://analogj.github.io/matchmedia-ng/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AnalogJ.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-01-08T20:46:14.000Z","updated_at":"2025-01-14T13:38:51.000Z","dependencies_parsed_at":"2022-09-09T13:21:35.476Z","dependency_job_id":null,"html_url":"https://github.com/AnalogJ/matchmedia-ng","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AnalogJ%2Fmatchmedia-ng","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AnalogJ%2Fmatchmedia-ng/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AnalogJ%2Fmatchmedia-ng/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AnalogJ%2Fmatchmedia-ng/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AnalogJ","download_url":"https://codeload.github.com/AnalogJ/matchmedia-ng/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251284865,"owners_count":21564682,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angularjs","javascript","matchmedia","responsive"],"created_at":"2024-08-02T10:00:37.621Z","updated_at":"2025-04-28T09:30:34.631Z","avatar_url":"https://github.com/AnalogJ.png","language":"JavaScript","funding_links":[],"categories":["Media queries","JavaScript"],"sub_categories":[],"readme":"matchmedia-ng\n============\n\nmatchmedia-ng is a set of [AngularJS](http://angularjs.org/) bindings and helper functions for the [matchMedia javascript api](https://developer.mozilla.org/en-US/docs/Web/API/Window.matchMedia).\nWith matchMedia, AngularJS and matchmedia-ng you can automatically respond to the orientation, browser height, width and other properties supported by CSS Media Queries.\n\nmatchmedia-ng provides two core methods `.is()` and `.on`.\n\n`.on()` is syntactically similar to the angular `.$on()` method, providing a way to listen on media queries and respond.\n`.is()` is just a simple alias for the `matchMedia().matches` method.\n\nBoth `on()` and `is()` have aliases provided for the following common media queries:\n\n- print - `print`\n- screen - `screen`\n- phone - `(max-width: 767px)`\n- tablet - `(min-width: 768px) and (max-width: 979px)`\n- desktop - `(min-width: 979px)`\n- portrait - `(orientation: portrait)`\n- landscape - `(orientation: landscape)`\n\nThey can be used as `onPrint()`, `isPortrait()`, `onLandscape()` etc. \n\n\n\n### Live Demo: \u003ca target=\"_blank\" href=\"http://analogj.github.io/matchmedia-ng/\"\u003eAngularJS Media Query App\u003c/a\u003e.\n\nCheck out the `github-pages` branch for more the live demo code.\n\nInstall\n-----\n\n    bower install matchmedia-ng\n\nUsage\n-----\nInclude [angular.js](//ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js) and mediastore-ng.js in your application.\nOptionally you can include the matchMedia polyfill if are worried about [browser compatibility](https://developer.mozilla.org/en-US/docs/Web/API/Window.matchMedia#Browser_compatibility) \n\n```html\n\u003cscript src=\"//ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"matchmedia.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"matchmedia-ng.js\"\u003e\u003c/script\u003e\n```\n\nAdd the module `matchmedia-ng` as a dependency to your app module:\n\n```js\nvar myapp = angular.module('myapp', ['matchmedia-ng']);\n```\n\nQuick Start\n----------------------------------\n\nSet `matchmedia` as a service dependency in your controller:\n\n```js\nmyapp.controller('MyCtrl', ['$scope', 'matchmedia',\n  function MyCtrl($scope, matchmedia) {\n    ...\n  }\n]);\n```\nIf you would like to execute javascript code to load a higher resolution image when the page loads on a tablet rather than a mobile phone, you could do something like the following in your controller:\n\n```js\n$scope.tablet = matchmedia.isTablet();\nif($scope.tablet){\n\t$scope.primaryImg = \"images/primary@2x.png\";\n}\n\n```\n\nIf you would like to do something a bit more complicated, such as detect when the user drags the page below the threshold of a mobile phone, you can do something like this:\n\n```js\nvar unregister = matchmedia.onPhone( function(mediaQueryList){\n  $scope.isPhone = mediaQueryList.matches;\n});\n\n```\n\nOr even execute javascript when the user attempts to print the page.\n```js\nvar unregister = matchmedia.onPrint( function(mediaQueryList){\n  $scope.isPrint = mediaQueryList.matches;\n  //hide ads, show water mark, pause animations/video, etc.\n});\n\n```\n\nSee the source for the\n[controller behind the demo app](http://analogj.github.io/matchmedia-ng/index.html)\nfor a working example code.\n\n\nCustom Media Queries\n-----------\nThough the common media query aliases are helpful, in some cases you will want to execute javascript on very specific media queries (maybe in tandem with a specific css media query). In that case you can use the core `.on()` and `.is()` functions;\n\n__on()__\n\n    /**\n     * @param {string} query Media query to listen on.\n     * @param {function(mediaQueryList)} listener Function to call when the media query is matched.\n     * @param {$scope} $scope Optional AngularJS scope, if not provided will use $rootScope\n     * @returns {function()} Returns a deregistration function for this listener.\n     */\n    matchmedia.on(query, listener, $scope)\n\n\t\n\tmatchmedia.on('tv and (min-width: 700px) and (orientation: landscape)', function(mediaQueryList){\n\t\tconsole.log(mediaQueryList.matches);\n\t})\n\n__is()__\n\n\t/**\n     * @param {string} query media query to test.\n     * @returns {boolean} Returns true if the media query matches.\n     */\n    matchmedia.is(query)\n\n\tvar resp = matchmedia.is('(min-width: 700px), handheld and (orientation: landscape)');\n\n\nAliases \u0026 Shortcuts\n-----------\nThe following is a comprehensive list of the media query aliases.\n \n\tmatchmedia.onPrint(listener, $scope)\n    matchmedia.onScreen(listener, $scope)\n    matchmedia.onPhone(listener, $scope)\n    matchmedia.onTablet(listener, $scope\n    matchmedia.onDesktop(listener, $scope)\n    matchmedia.onPortrait(listener, $scope)\n    matchmedia.onLandscape(listener, $scope)\n\n    matchmedia.isPrint()\n    matchmedia.isScreen()\n    matchmedia.isPhone()\n    matchmedia.isTablet()\n    matchmedia.isDesktop()\n    matchmedia.isPortrait()\n    matchmedia.isLandscape()\n\n### Override Aliases\nIt is possible to override the media queries given for the aliases above by using a `config` function.\n\n```js\nangular.module('myapp', ['matchmedia-ng']).config(['matchmediaProvider', function (matchmediaProvider) {\n      matchmediaProvider.rules.phone = \"(max-width: 500px)\";\n      matchmediaProvider.rules.desktop = \"(max-width: 1500px)\";\n   }]);\n\n```\n\nLogging\n-----------\nYou can enable logging by using the following snippet in your code.\n\n```js\n    .config(['loggerProvider',function(loggerProvider){\n        loggerProvider.setDEVMODE(true);\n    }])\n```\nTODO\n-----------\n- Add more documentaton regarding the matchmedia queries. (full options list).\n- Example with polyfill.\n- Tests for the matchmedia-ng framework are coming shortly.\n\nPull Requests\n-----------\nTo make a pull request, please do the following:\n\nMention what specific version matchmedia-ng.js you were using when you encountered the issue/added the feature. This can be accessed by looking at the matchmedia-ng.js file header.\nProvide a pastie or gist that demonstrates the bug/feature\nDo not modify the version header. I will modify that manually when merging the request\n\n\nLicense\n-------\nCopyright (c) 2013 Jason Kulatunga, released under the [MIT license](http://analogj.mit-license.org/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FAnalogJ%2Fmatchmedia-ng","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FAnalogJ%2Fmatchmedia-ng","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FAnalogJ%2Fmatchmedia-ng/lists"}