OLD | NEW |
1 <!-- | 1 <!-- |
2 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. | 2 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. |
3 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt | 3 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt |
4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt | 4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
5 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt | 5 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt |
6 Code distributed by Google as part of the polymer project is also | 6 Code distributed by Google as part of the polymer project is also |
7 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt | 7 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt |
8 --> | 8 --> |
9 | 9 |
10 <link rel="import" href="../polymer/polymer.html"> | 10 <link rel="import" href="../polymer/polymer.html"> |
(...skipping 30 matching lines...) Expand all Loading... |
41 readOnly: true, | 41 readOnly: true, |
42 notify: true | 42 notify: true |
43 }, | 43 }, |
44 | 44 |
45 /** | 45 /** |
46 * The CSS media query to evaluate. | 46 * The CSS media query to evaluate. |
47 */ | 47 */ |
48 query: { | 48 query: { |
49 type: String, | 49 type: String, |
50 observer: 'queryChanged' | 50 observer: 'queryChanged' |
| 51 }, |
| 52 |
| 53 /** |
| 54 * If true, the query attribute is assumed to be a complete media query |
| 55 * string rather than a single media feature. |
| 56 */ |
| 57 full: { |
| 58 type: Boolean, |
| 59 value: false |
| 60 }, |
| 61 |
| 62 /** |
| 63 * @type {function(MediaQueryList)} |
| 64 */ |
| 65 _boundMQHandler: { |
| 66 value: function() { |
| 67 return this.queryHandler.bind(this); |
| 68 } |
| 69 }, |
| 70 |
| 71 /** |
| 72 * @type {MediaQueryList} |
| 73 */ |
| 74 _mq: { |
| 75 value: null |
51 } | 76 } |
52 | |
53 }, | 77 }, |
54 | 78 |
55 created: function() { | 79 attached: function() { |
56 this._mqHandler = this.queryHandler.bind(this); | 80 this.style.display = 'none'; |
| 81 this.queryChanged(); |
57 }, | 82 }, |
58 | 83 |
59 queryChanged: function(query) { | 84 detached: function() { |
| 85 this._remove(); |
| 86 }, |
| 87 |
| 88 _add: function() { |
60 if (this._mq) { | 89 if (this._mq) { |
61 this._mq.removeListener(this._mqHandler); | 90 this._mq.addListener(this._boundMQHandler); |
62 } | 91 } |
63 if (query[0] !== '(') { | 92 }, |
| 93 |
| 94 _remove: function() { |
| 95 if (this._mq) { |
| 96 this._mq.removeListener(this._boundMQHandler); |
| 97 } |
| 98 this._mq = null; |
| 99 }, |
| 100 |
| 101 queryChanged: function() { |
| 102 this._remove(); |
| 103 var query = this.query; |
| 104 if (!query) { |
| 105 return; |
| 106 } |
| 107 if (!this.full && query[0] !== '(') { |
64 query = '(' + query + ')'; | 108 query = '(' + query + ')'; |
65 } | 109 } |
66 this._mq = window.matchMedia(query); | 110 this._mq = window.matchMedia(query); |
67 this._mq.addListener(this._mqHandler); | 111 this._add(); |
68 this.queryHandler(this._mq); | 112 this.queryHandler(this._mq); |
69 }, | 113 }, |
70 | 114 |
71 queryHandler: function(mq) { | 115 queryHandler: function(mq) { |
72 this._setQueryMatches(mq.matches); | 116 this._setQueryMatches(mq.matches); |
73 } | 117 } |
74 | 118 |
75 }); | 119 }); |
76 | 120 |
77 </script> | 121 </script> |
OLD | NEW |