OLD | NEW |
(Empty) | |
| 1 <!-- |
| 2 Copyright 2013 The Polymer Authors. All rights reserved. |
| 3 Use of this source code is governed by a BSD-style |
| 4 license that can be found in the LICENSE file. |
| 5 --> |
| 6 <!-- |
| 7 /** |
| 8 * @module Polymer Elements |
| 9 */ |
| 10 /** |
| 11 * polymer-media-query can be used to data bind to a CSS media query. |
| 12 * The "query" property is a bare CSS media query. |
| 13 * The "queryMatches" property will be a boolean representing if the page matche
s that media query. |
| 14 * |
| 15 * polymer-media-query uses media query listeners to dynamically update the "que
ryMatches" property. |
| 16 * A "polymer-mediachange" event also fires when queryMatches changes. |
| 17 * |
| 18 * Example: |
| 19 * |
| 20 * <polymer-media-query query="max-width: 640px" queryMatches="{{phoneScree
n}}"></polymer-media-query> |
| 21 * |
| 22 * @class polymer-media-query |
| 23 */ |
| 24 --> |
| 25 <link rel="import" href="../polymer/polymer.html"> |
| 26 |
| 27 <polymer-element name="polymer-media-query" attributes="query queryMatches"> |
| 28 <template> |
| 29 <style> |
| 30 :host { |
| 31 display: none; |
| 32 } |
| 33 </style> |
| 34 </template> |
| 35 <script> |
| 36 |
| 37 Polymer('polymer-media-query', { |
| 38 /** |
| 39 * The Boolean return value of the media query |
| 40 * @attribute queryMatches |
| 41 * @type Boolean |
| 42 * @default false |
| 43 */ |
| 44 queryMatches: false, |
| 45 /** |
| 46 * The CSS media query to evaulate |
| 47 * @attribute query |
| 48 * @type string |
| 49 * @default '' |
| 50 */ |
| 51 query: '', |
| 52 ready: function() { |
| 53 this._mqHandler = this.queryHandler.bind(this); |
| 54 this._mq = null; |
| 55 }, |
| 56 queryChanged: function() { |
| 57 if (this._mq) { |
| 58 this._mq.removeListener(this._mqHandler); |
| 59 } |
| 60 var query = this.query; |
| 61 if (query[0] !== '(') { |
| 62 query = '(' + this.query + ')'; |
| 63 } |
| 64 this._mq = window.matchMedia(query); |
| 65 this._mq.addListener(this._mqHandler); |
| 66 this.queryHandler(this._mq); |
| 67 }, |
| 68 queryHandler: function(mq) { |
| 69 this.queryMatches = mq.matches; |
| 70 this.asyncFire('polymer-mediachange', mq); |
| 71 } |
| 72 }); |
| 73 </script> |
| 74 </polymer-element> |
OLD | NEW |