diff options
Diffstat (limited to 'chromium/third_party/catapult/third_party/polymer/components/core-media-query/core-media-query.html')
-rw-r--r-- | chromium/third_party/catapult/third_party/polymer/components/core-media-query/core-media-query.html | 87 |
1 files changed, 87 insertions, 0 deletions
diff --git a/chromium/third_party/catapult/third_party/polymer/components/core-media-query/core-media-query.html b/chromium/third_party/catapult/third_party/polymer/components/core-media-query/core-media-query.html new file mode 100644 index 00000000000..20cfd09ef30 --- /dev/null +++ b/chromium/third_party/catapult/third_party/polymer/components/core-media-query/core-media-query.html @@ -0,0 +1,87 @@ +<!-- +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> |