paper-badge.html
5.97 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
<!--
@license
Copyright (c) 2015 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
-->
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html">
<link rel="import" href="../paper-styles/default-theme.html">
<!--
`<paper-badge>` is a circular text badge that is displayed on the top right
corner of an element, representing a status or a notification. It will badge
the anchor element specified in the `for` attribute, or, if that doesn't exist,
centered to the parent node containing it.
Example:
<div style="display:inline-block">
<span>Inbox</span>
<paper-badge label="3"></paper-badge>
</div>
<div>
<paper-button id="btn">Status</paper-button>
<paper-badge for="btn" label="♥︎"></paper-badge>
</div>
### Styling
The following custom properties and mixins are available for styling:
Custom property | Description | Default
----------------|-------------|----------
`--paper-badge-background` | The background color of the badge | `--accent-color`
`--paper-badge-opacity` | The opacity of the badge | `1.0`
`--paper-badge-text-color` | The color of the badge text | `white`
`--paper-badge-width` | The width of the badge circle | `22px`
`--paper-badge-height` | The height of the badge circle | `22px`
`--paper-badge-margin-left` | Optional spacing added to the left of the badge. | `0px`
`--paper-badge-margin-bottom` | TOptional spacing added to the bottom of the badge. | `0px`
`--paper-badge` | Mixin applied to the badge | `{}`
@group Paper Elements
@element paper-badge
@demo demo/index.html
-->
<dom-module id="paper-badge">
<template>
<style>
:host {
display: block;
position: absolute;
outline: none;
}
#badge {
@apply(--paper-font-common-base);
font-weight: 600;
font-size: 12px;
border-radius: 50%;
margin-left: var(--paper-badge-margin-left, 0px);
margin-bottom: var(--paper-badge-margin-bottom, 0px);
width: var(--paper-badge-width, 22px);
height: var(--paper-badge-height, 22px);
background-color: var(--paper-badge-background, --accent-color);
opacity: var(--paper-badge-opacity, 1.0);
color: var(--paper-badge-text-color, white);
@apply(--layout);
@apply(--layout-center-center);
@apply(--paper-badge);
}
</style>
<div id="badge">{{label}}</div>
</template>
<script>
Polymer({
is: 'paper-badge',
hostAttributes: {
tabindex: '0',
role: 'status'
},
behaviors: [
Polymer.IronResizableBehavior
],
listeners: {
'iron-resize': 'updatePosition'
},
properties: {
/**
* The id of the element that the badge is anchored to. This element
* must be a sibling of the badge.
*/
for: {
type: String,
observer: '_forChanged'
},
/**
* The label displayed in the badge. The label is centered, and ideally
* should have very few characters.
*/
label: {
type: String,
observer: '_labelChanged'
}
},
attached: function() {
this._updateTarget();
},
_forChanged: function() {
// The first time the property is set is before the badge is attached,
// which means we're not ready to position it yet.
if (!this.isAttached) {
return;
}
this._updateTarget();
},
_labelChanged: function() {
this.setAttribute('aria-label', this.label);
},
_updateTarget: function() {
this._target = this.target;
this.async(this.notifyResize, 1);
},
/**
* Returns the target element that this badge is anchored to. It is
* either the element given by the `for` attribute, or the immediate parent
* of the badge.
*/
get target () {
var parentNode = Polymer.dom(this).parentNode;
// If the parentNode is a document fragment, then we need to use the host.
var ownerRoot = Polymer.dom(this).getOwnerRoot();
var target;
if (this.for) {
target = Polymer.dom(ownerRoot).querySelector('#' + this.for);
} else {
target = parentNode.nodeType == Node.DOCUMENT_FRAGMENT_NODE ?
ownerRoot.host : parentNode;
}
return target;
},
/**
* Repositions the badge relative to its anchor element. This is called
* automatically when the badge is attached or an `iron-resize` event is
* fired (for exmaple if the window has resized, or your target is a
* custom element that implements IronResizableBehavior).
*
* You should call this in all other cases when the achor's position
* might have changed (for example, if it's visibility has changed, or
* you've manually done a page re-layout).
*/
updatePosition: function() {
if (!this._target)
return;
if (!this.offsetParent)
return;
var parentRect = this.offsetParent.getBoundingClientRect();
var targetRect = this._target.getBoundingClientRect();
var thisRect = this.getBoundingClientRect();
this.style.left = targetRect.left - parentRect.left +
(targetRect.width - thisRect.width / 2) + 'px';
this.style.top = targetRect.top - parentRect.top -
(thisRect.height / 2) + 'px';
}
})
</script>
</dom-module>