third_party/polymer/v1_0/components/iron-media-query/iron-media-query.html

   1 <!--
   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.github.io/LICENSE.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/CONTRIBUTORS.txt
   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/PATENTS.txt
   8 -->
   9
  10 <link rel="import" href="../polymer/polymer.html">
  11
  12 <!--
  13 `iron-media-query` can be used to data bind to a CSS media query.
  14 The `query` property is a bare CSS media query.
  15 The `query-matches` property is a boolean representing whether the page matches that media query.
  16
  17 Example:
  18
  19     <iron-media-query query="(min-width: 600px)" query-matches="{{queryMatches}}"></iron-media-query>
  20
  21 @group Iron Elements
  22 @demo demo/index.html
  23 @hero hero.svg
  24 @element iron-media-query
  25 -->
  26
  27 <script>
  28
  29   Polymer({
  30
  31     is: 'iron-media-query',
  32
  33     properties: {
  34
  35       /**
  36        * The Boolean return value of the media query.
  37        */
  38       queryMatches: {
  39         type: Boolean,
  40         value: false,
  41         readOnly: true,
  42         notify: true
  43       },
  44
  45       /**
  46        * The CSS media query to evaluate.
  47        */
  48       query: {
  49         type: String,
  50         observer: 'queryChanged'
  51       }
  52
  53     },
  54
  55     created: function() {
  56       this._mqHandler = this.queryHandler.bind(this);
  57     },
  58
  59     queryChanged: function(query) {
  60       if (this._mq) {
  61         this._mq.removeListener(this._mqHandler);
  62       }
  63       if (query[0] !== '(') {
  64         query = '(' + query + ')';
  65       }
  66       this._mq = window.matchMedia(query);
  67       this._mq.addListener(this._mqHandler);
  68       this.queryHandler(this._mq);
  69     },
  70
  71     queryHandler: function(mq) {
  72       this._setQueryMatches(mq.matches);
  73     }
  74
  75   });
  76
  77 </script>