| <!-- |
| Copyright (c) 2014 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 |
| --> |
| <!-- |
| /** |
| * @group Polymer Core Elements |
| * @element core-media-query |
| * @status beta |
| * @homepage github.io |
| * |
| * core-media-query can be used to data bind to a CSS media query. |
| * The "query" property is a bare CSS media query. |
| * The "queryMatches" property will be a boolean representing if the page matches that media query. |
| * |
| * core-media-query uses media query listeners to dynamically update the "queryMatches" property. |
| * A "core-media-change" event also fires when queryMatches changes. |
| * |
| * Example: |
| * |
| * <core-media-query query="max-width: 640px" queryMatches="{{phoneScreen}}"></core-media-query> |
| * |
| */ |
| |
| /** |
| * Fired when the media query state changes |
| * |
| * @event core-media-change |
| */ |
| --> |
| <link rel="import" href="../polymer/polymer.html"> |
| |
| <polymer-element name="core-media-query" attributes="query queryMatches"> |
| <template> |
| <style> |
| :host { |
| display: none; |
| } |
| </style> |
| </template> |
| <script> |
| Polymer('core-media-query', { |
| |
| /** |
| * The Boolean return value of the media query |
| * |
| * @attribute queryMatches |
| * @type Boolean |
| * @default false |
| */ |
| queryMatches: false, |
| |
| /** |
| * The CSS media query to evaulate |
| * |
| * @attribute query |
| * @type string |
| * @default '' |
| */ |
| query: '', |
| ready: function() { |
| this._mqHandler = this.queryHandler.bind(this); |
| this._mq = null; |
| }, |
| queryChanged: function() { |
| if (this._mq) { |
| this._mq.removeListener(this._mqHandler); |
| } |
| var query = this.query; |
| if (query[0] !== '(') { |
| query = '(' + this.query + ')'; |
| } |
| this._mq = window.matchMedia(query); |
| this._mq.addListener(this._mqHandler); |
| this.queryHandler(this._mq); |
| }, |
| queryHandler: function(mq) { |
| this.queryMatches = mq.matches; |
| this.asyncFire('core-media-change', mq); |
| } |
| }); |
| </script> |
| </polymer-element> |