third_party/polymer/components/core-label/core-label.html

   1 <!--
   2     @license
   3     Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
   4     This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
   5     The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
   6     The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
   7     Code distributed by Google as part of the polymer project is also
   8     subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
   9 -->
  10
  11 <!--
  12 `<core-label>` provides a version of the `<label>` element that works with Custom Elements as well as native elements.
  13
  14 All text in the `core-label` will be applied to the target element as a screen-reader accessible description.
  15
  16 There are two ways to use `core-label` to target an element:
  17
  18 1. place an element inside core-label with the `for` attribute:
  19
  20         <core-label>
  21           Context for the Button
  22           <paper-button for>button</paper-button>
  23         </core-label>
  24
  25 2. Set the `for` attribute on the `core-label` element to point to a target element in the same scope with a query
  26 string:
  27
  28         <core-label for=".foo">
  29           Context for the button witht the "foo" class"
  30         </core-label>
  31         <paper-button class="foo">Far away button</paper-button>
  32
  33 All taps on the `core-label` will be forwarded to the "target" element.
  34
  35 @group Core Elements
  36 @element core-label
  37 @homepage github.io
  38 -->
  39
  40 <link rel="import" href="../polymer/polymer.html">
  41
  42 <!-- Native <label> has cursor: default -->
  43 <style>
  44   html /deep/ core-label {
  45     cursor: default;
  46   }
  47 </style>
  48
  49 <polymer-element name="core-label">
  50   <script>
  51     (function() {
  52
  53       var ID = 0;
  54       function generate(node) {
  55         if (!node.id) {
  56           node.id = 'core-label-' + ID++;
  57         }
  58         return node.id;
  59       }
  60
  61       Polymer('core-label', {
  62         /**
  63          * A query selector string for a "target" element not nested in the `<core-label>`
  64          *
  65          * @attribute for
  66          * @type string
  67          * @default ''
  68          */
  69         publish: {
  70           'for': {reflect: true, value: ''}
  71         },
  72         eventDelegates: {
  73           'tap': 'tapHandler'
  74         },
  75         created: function() {
  76           generate(this);
  77           this._forElement = null;
  78         },
  79         ready: function() {
  80           if (!this.for) {
  81             this._forElement = this.querySelector('[for]');
  82             this._tie();
  83           }
  84         },
  85         tapHandler: function(ev) {
  86           if (!this._forElement) {
  87             return;
  88           }
  89           if (ev.target === this._forElement) {
  90             return;
  91           }
  92           this._forElement.focus();
  93           this._forElement.click();
  94           this.fire('tap', null, this._forElement);
  95         },
  96         _tie: function() {
  97           if (this._forElement) {
  98             this._forElement.setAttribute('aria-labelledby', this.id);
  99           }
 100         },
 101         _findScope: function() {
 102           var n = this.parentNode;
 103           while(n && n.parentNode) {
 104             n = n.parentNode;
 105           }
 106           return n;
 107         },
 108         forChanged: function(oldFor, newFor) {
 109           if (this._forElement) {
 110             this._forElement.removeAttribute('aria-labelledby');
 111           }
 112           var scope = this._findScope();
 113           if (!scope) {
 114             return;
 115           }
 116           this._forElement = scope.querySelector(newFor);
 117           if (this._forElement) {
 118             this._tie();
 119           }
 120         }
 121       });
 122     })();
 123   </script>
 124 </polymer-element>