Blame view

bower_components/paper-badge/paper-badge.html 5.97 KB
73bcce88   luigser   COMPONENTS
1
2
3
4
5
6
7
8
9
10
11
  <!--
  @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">
73bcce88   luigser   COMPONENTS
12
  <link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
eb240478   Luigi Serra   public room cards...
13
  <link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html">
73bcce88   luigser   COMPONENTS
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
  <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>
eb240478   Luigi Serra   public room cards...
30
31
        <paper-button id="btn">Status</paper-button>
        <paper-badge for="btn" label="♥︎"></paper-badge>
73bcce88   luigser   COMPONENTS
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
      </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">
73bcce88   luigser   COMPONENTS
55
    <template>
eb240478   Luigi Serra   public room cards...
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
      <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>
  
73bcce88   luigser   COMPONENTS
82
83
      <div id="badge">{{label}}</div>
    </template>
eb240478   Luigi Serra   public room cards...
84
  
73bcce88   luigser   COMPONENTS
85
86
87
88
    <script>
      Polymer({
        is: 'paper-badge',
  
eb240478   Luigi Serra   public room cards...
89
90
91
92
93
        hostAttributes: {
          tabindex: '0',
          role: 'status'
        },
  
73bcce88   luigser   COMPONENTS
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
        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: {
eb240478   Luigi Serra   public room cards...
117
118
            type: String,
            observer: '_labelChanged'
73bcce88   luigser   COMPONENTS
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
          }
        },
  
        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();
        },
  
eb240478   Luigi Serra   public room cards...
135
136
137
138
        _labelChanged: function() {
          this.setAttribute('aria-label', this.label);
        },
  
73bcce88   luigser   COMPONENTS
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
        _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>