Index: pkg/polymer/lib/elements/polymer-media-query/polymer-media-query.html |
diff --git a/pkg/polymer/lib/elements/polymer-media-query/polymer-media-query.html b/pkg/polymer/lib/elements/polymer-media-query/polymer-media-query.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..d0323bcbb601821249866e573463a438b9185ec9 |
--- /dev/null |
+++ b/pkg/polymer/lib/elements/polymer-media-query/polymer-media-query.html |
@@ -0,0 +1,74 @@ |
+<!-- |
+Copyright 2013 The Polymer Authors. All rights reserved. |
+Use of this source code is governed by a BSD-style |
+license that can be found in the LICENSE file. |
+--> |
+<!-- |
+/** |
+ * @module Polymer Elements |
+ */ |
+/** |
+ * polymer-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. |
+ * |
+ * polymer-media-query uses media query listeners to dynamically update the "queryMatches" property. |
+ * A "polymer-mediachange" event also fires when queryMatches changes. |
+ * |
+ * Example: |
+ * |
+ * <polymer-media-query query="max-width: 640px" queryMatches="{{phoneScreen}}"></polymer-media-query> |
+ * |
+ * @class polymer-media-query |
+ */ |
+--> |
+<link rel="import" href="../polymer/polymer.html"> |
+ |
+<polymer-element name="polymer-media-query" attributes="query queryMatches"> |
+ <template> |
+ <style> |
+ :host { |
+ display: none; |
+ } |
+ </style> |
+ </template> |
+ <script> |
+ |
+ Polymer('polymer-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('polymer-mediachange', mq); |
+ } |
+ }); |
+ </script> |
+</polymer-element> |