Sha256: 022e6b424afa8e2f69b9ee8a9f3d34f98a001c31b6e0d82361b7a517014787e7
Contents?: true
Size: 1.99 KB
Versions: 10
Compression:
Stored size: 1.99 KB
Contents
<!--
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 `queryMatches` property is a boolean representing if the page matches that media query.
Example:
<iron-media-query query="(min-width: 600px)" queryMatches="{{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.
*
* @attribute queryMatches
* @type Boolean
* @default false
*/
queryMatches: {
type: Boolean,
value: false,
readOnly: true,
notify: true
},
/**
* The CSS media query to evaluate.
*
* @attribute query
* @type String
*/
query: {
type: String,
observer: 'queryChanged'
}
},
created: function() {
this._mqHandler = this.queryHandler.bind(this);
},
queryChanged: function(query) {
if (this._mq) {
this._mq.removeListener(this._mqHandler);
}
if (query[0] !== '(') {
query = '(' + query + ')';
}
this._mq = window.matchMedia(query);
this._mq.addListener(this._mqHandler);
this.queryHandler(this._mq);
},
queryHandler: function(mq) {
this._setQueryMatches(mq.matches);
}
});
</script>
Version data entries
10 entries across 10 versions & 4 rubygems