<!-- Copyright (c) 2015 The Polymer Project Authors. All rights reserved. This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as part of the polymer project is also subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt --> <link rel="import" href="../polymer/polymer.html"> <!-- `iron-media-query` can be used to data bind to a CSS media query. The `query` property is a bare CSS media query. The `query-matches` property is a boolean representing whether the page matches that media query. Example: <iron-media-query query="(min-width: 600px)" query-matches="{{queryMatches}}"></iron-media-query> @group Iron Elements @demo demo/index.html @hero hero.svg @element iron-media-query --> <script> Polymer({ is: 'iron-media-query', properties: { /** * The Boolean return value of the media query. */ queryMatches: { type: Boolean, value: false, readOnly: true, notify: true }, /** * The CSS media query to evaluate. */ query: { type: String, observer: 'queryChanged' }, /** * @type {function(MediaQueryList)} */ _boundMQHandler: { value: function() { return this.queryHandler.bind(this); } }, /** * @type {MediaQueryList} */ _mq: { value: null } }, attached: function() { this.queryChanged(); }, detached: function() { this._remove(); }, _add: function() { if (this._mq) { this._mq.addListener(this._boundMQHandler); } }, _remove: function() { if (this._mq) { this._mq.removeListener(this._boundMQHandler); } this._mq = null; }, queryChanged: function() { this._remove(); var query = this.query; if (!query) { return; } if (query[0] !== '(') { query = '(' + query + ')'; } this._mq = window.matchMedia(query); this._add(); this.queryHandler(this._mq); }, queryHandler: function(mq) { this._setQueryMatches(mq.matches); } }); </script>