← Back to branch summary

~didrocks/+junk/face-detection-15.04

« back to all changes in this revision

Viewing changes to facedetection/www/bower_components/iron-label/iron-label.html

  • Committer: Didier Roche
  • Date: 2016-05-10 23:09:11 UTC
  • Revision ID: didier.roche@canonical.com-20160510230911-c7xr490zrj3yrzxd
New version

Show diffs side-by-side

added added

removed removed

Lines of Context:
facedetection/www/bower_components/iron-label/iron-label.html
 
1
<!--
 
2
@license
 
3
Copyright (c) 2015 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
`<iron-label>` provides a version of the `<label>` element that works with Custom Elements as well as native elements.
 
12
 
 
13
All text in the `iron-label` will be applied to the target element as a screen-reader accessible description.
 
14
 
 
15
There are three ways to use `iron-label` to target an element:
 
16
 
 
17
1. place an element inside iron-label and some text:
 
18
 
 
19
        <iron-label>
 
20
          Label for the Button
 
21
          <paper-button>button</paper-button>
 
22
        </iron-label>
 
23
 
 
24
2. place some elements inside iron-label and target one with the `iron-label-target` attribute.
 
25
The other elements will provide the label for that element
 
26
Note: This is not necessary if the element you want to label is the first
 
27
element child of iron-label:
 
28
 
 
29
        <iron-label>
 
30
          <span>Label for the Button</span>
 
31
          <paper-button iron-label-target>button</paper-button>
 
32
        </iron-label>
 
33
 
 
34
        <iron-label>
 
35
          <paper-button>button</paper-button>
 
36
          <span>Label for the Button</span>
 
37
        </iron-label>
 
38
 
 
39
3. Set the `for` attribute on the `iron-label` element with the id of the target
 
40
element in the same document or ShadowRoot:
 
41
 
 
42
        <iron-label for="foo">
 
43
          Context for the button with the "foo" class"
 
44
        </iron-label>
 
45
        <paper-button id="foo">Far away button</paper-button>
 
46
 
 
47
All taps on the `iron-label` will be forwarded to the "target" element.
 
48
 
 
49
@group Iron Elements
 
50
@element iron-label
 
51
@demo demo/index.html
 
52
@homepage polymer.github.io
 
53
-->
 
54
<link rel="import" href="../polymer/polymer.html">
 
55
 
 
56
<dom-module id="iron-label">
 
57
  <script>
 
58
    Polymer.IronLabel = Polymer({
 
59
      is: 'iron-label',
 
60
 
 
61
      listeners: {
 
62
        'tap': '_tapHandler'
 
63
      },
 
64
 
 
65
      properties: {
 
66
        /**
 
67
          * An ID reference to another element that needs to be
 
68
          * labelled by this `iron-label` element.
 
69
          */
 
70
        for: {
 
71
          type: String,
 
72
          value: '',
 
73
          reflectToAttribute: true,
 
74
          observer: '_forChanged'
 
75
        },
 
76
        /**
 
77
         * @type {Element}
 
78
         */
 
79
        _forElement: Object
 
80
      },
 
81
 
 
82
      attached: function() {
 
83
        this._forChanged();
 
84
      },
 
85
 
 
86
      ready: function() {
 
87
        this._generateLabelId();
 
88
      },
 
89
 
 
90
      // generate a unique id for this element
 
91
      _generateLabelId: function() {
 
92
        if (!this.id) {
 
93
          var id = 'iron-label-' + Polymer.IronLabel._labelNumber++;
 
94
          Polymer.dom(this).setAttribute('id', id);
 
95
        }
 
96
      },
 
97
 
 
98
      _findTarget: function() {
 
99
        if (this.for) {
 
100
          // external target
 
101
          var scope = Polymer.dom(this).getOwnerRoot();
 
102
          return Polymer.dom(scope).querySelector('#' + this.for);
 
103
        } else {
 
104
          // explicit internal target
 
105
          var el = Polymer.dom(this).querySelector('[iron-label-target]');
 
106
          if (!el) {
 
107
            // implicit internal target
 
108
            el = Polymer.dom(this).firstElementChild;
 
109
          }
 
110
          return el;
 
111
        }
 
112
      },
 
113
 
 
114
      _tapHandler: function(ev) {
 
115
        if (!this._forElement) {
 
116
          return;
 
117
        }
 
118
        var target = Polymer.dom(ev).localTarget;
 
119
        if (target === this._forElement) {
 
120
          return;
 
121
        }
 
122
        this._forElement.focus();
 
123
        this._forElement.click();
 
124
      },
 
125
 
 
126
      _applyLabelledBy: function() {
 
127
        if (this._forElement) {
 
128
          Polymer.dom(this._forElement).setAttribute('aria-labelledby', this.id);
 
129
        }
 
130
      },
 
131
 
 
132
      _forChanged: function() {
 
133
        if (this._forElement) {
 
134
          Polymer.dom(this._forElement).removeAttribute('aria-labelledby');
 
135
        }
 
136
        this._forElement = this._findTarget();
 
137
        this._applyLabelledBy();
 
138
      }
 
139
    });
 
140
 
 
141
    // global counter for unique label ids
 
142
    Polymer.IronLabel._labelNumber = 0;
 
143
  </script>
 
144
</dom-module>