124 lines
3.5 KiB
HTML
124 lines
3.5 KiB
HTML
<!--
|
|
@license
|
|
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
|
|
-->
|
|
|
|
<!--
|
|
`<core-label>` provides a version of the `<label>` element that works with Custom Elements as well as native elements.
|
|
|
|
All text in the `core-label` will be applied to the target element as a screen-reader accessible description.
|
|
|
|
There are two ways to use `core-label` to target an element:
|
|
|
|
1. place an element inside core-label with the `for` attribute:
|
|
|
|
<core-label>
|
|
Context for the Button
|
|
<paper-button for>button</paper-button>
|
|
</core-label>
|
|
|
|
2. Set the `for` attribute on the `core-label` element to point to a target element in the same scope with a query
|
|
string:
|
|
|
|
<core-label for=".foo">
|
|
Context for the button witht the "foo" class"
|
|
</core-label>
|
|
<paper-button class="foo">Far away button</paper-button>
|
|
|
|
All taps on the `core-label` will be forwarded to the "target" element.
|
|
|
|
@group Core Elements
|
|
@element core-label
|
|
@homepage github.io
|
|
-->
|
|
|
|
<link rel="import" href="../polymer/polymer.html">
|
|
|
|
<!-- Native <label> has cursor: default -->
|
|
<style>
|
|
html /deep/ core-label {
|
|
cursor: default;
|
|
}
|
|
</style>
|
|
|
|
<polymer-element name="core-label">
|
|
<script>
|
|
(function() {
|
|
|
|
var ID = 0;
|
|
function generate(node) {
|
|
if (!node.id) {
|
|
node.id = 'core-label-' + ID++;
|
|
}
|
|
return node.id;
|
|
}
|
|
|
|
Polymer('core-label', {
|
|
/**
|
|
* A query selector string for a "target" element not nested in the `<core-label>`
|
|
*
|
|
* @attribute for
|
|
* @type string
|
|
* @default ''
|
|
*/
|
|
publish: {
|
|
'for': {reflect: true, value: ''}
|
|
},
|
|
eventDelegates: {
|
|
'tap': 'tapHandler'
|
|
},
|
|
created: function() {
|
|
generate(this);
|
|
this._forElement = null;
|
|
},
|
|
ready: function() {
|
|
if (!this.for) {
|
|
this._forElement = this.querySelector('[for]');
|
|
this._tie();
|
|
}
|
|
},
|
|
tapHandler: function(ev) {
|
|
if (!this._forElement) {
|
|
return;
|
|
}
|
|
if (ev.target === this._forElement) {
|
|
return;
|
|
}
|
|
this._forElement.focus();
|
|
this._forElement.click();
|
|
this.fire('tap', null, this._forElement);
|
|
},
|
|
_tie: function() {
|
|
if (this._forElement) {
|
|
this._forElement.setAttribute('aria-labelledby', this.id);
|
|
}
|
|
},
|
|
_findScope: function() {
|
|
var n = this.parentNode;
|
|
while(n && n.parentNode) {
|
|
n = n.parentNode;
|
|
}
|
|
return n;
|
|
},
|
|
forChanged: function(oldFor, newFor) {
|
|
if (this._forElement) {
|
|
this._forElement.removeAttribute('aria-labelledby');
|
|
}
|
|
var scope = this._findScope();
|
|
if (!scope) {
|
|
return;
|
|
}
|
|
this._forElement = scope.querySelector(newFor);
|
|
if (this._forElement) {
|
|
this._tie();
|
|
}
|
|
}
|
|
});
|
|
})();
|
|
</script>
|
|
</polymer-element>
|