<!– Copyright © 2015 The Polymer Project Authors. All rights reserved. This code may only be used under the BSD style license found at polymer.github.io/LICENSE.txt The complete set of authors may be found at polymer.github.io/AUTHORS.txt The complete set of contributors may be found at 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 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' }, /** * If true, the query attribute is assumed to be a complete media query * string rather than a single media feature. */ full: { type: Boolean, value: false }, /** * @type {function(MediaQueryList)} */ _boundMQHandler: { value: function() { return this.queryHandler.bind(this); } }, /** * @type {MediaQueryList} */ _mq: { value: null } }, attached: function() { this.style.display = 'none'; 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 (!this.full && query[0] !== '(') { query = '(' + query + ')'; } this._mq = window.matchMedia(query); this._add(); this.queryHandler(this._mq); }, queryHandler: function(mq) { this._setQueryMatches(mq.matches); } });
</script>