← Back to branch summary

~didrocks/+junk/face-detection-15.04

« back to all changes in this revision

Viewing changes to facedetection/www/bower_components/paper-dropdown-menu/paper-dropdown-menu-light.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/paper-dropdown-menu/paper-dropdown-menu-light.html
 
1
<!--
 
2
@license
 
3
Copyright (c) 2016 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
<link rel="import" href="../polymer/polymer.html">
 
12
<link rel="import" href="../iron-a11y-keys-behavior/iron-a11y-keys-behavior.html">
 
13
<link rel="import" href="../iron-behaviors/iron-button-state.html">
 
14
<link rel="import" href="../iron-behaviors/iron-control-state.html">
 
15
<link rel="import" href="../iron-form-element-behavior/iron-form-element-behavior.html">
 
16
<link rel="import" href="../iron-validatable-behavior/iron-validatable-behavior.html">
 
17
<link rel="import" href="../paper-menu-button/paper-menu-button.html">
 
18
<link rel="import" href="../paper-behaviors/paper-ripple-behavior.html">
 
19
<link rel="import" href="../paper-styles/default-theme.html">
 
20
 
 
21
<link rel="import" href="paper-dropdown-menu-icons.html">
 
22
<link rel="import" href="paper-dropdown-menu-shared-styles.html">
 
23
 
 
24
<!--
 
25
Material design: [Dropdown menus](https://www.google.com/design/spec/components/buttons.html#buttons-dropdown-buttons)
 
26
 
 
27
This is a faster, lighter version of `paper-dropdown-menu`, that does not
 
28
use a `<paper-input>` internally. Use this element if you're concerned about
 
29
the performance of this element, i.e., if you plan on using many dropdowns on
 
30
the same page. Note that this element has a slightly different styling API
 
31
than `paper-dropdown-menu`.
 
32
 
 
33
`paper-dropdown-menu-light` is similar to a native browser select element.
 
34
`paper-dropdown-menu-light` works with selectable content. The currently selected
 
35
item is displayed in the control. If no item is selected, the `label` is
 
36
displayed instead.
 
37
 
 
38
Example:
 
39
 
 
40
    <paper-dropdown-menu-light label="Your favourite pastry">
 
41
      <paper-listbox class="dropdown-content">
 
42
        <paper-item>Croissant</paper-item>
 
43
        <paper-item>Donut</paper-item>
 
44
        <paper-item>Financier</paper-item>
 
45
        <paper-item>Madeleine</paper-item>
 
46
      </paper-listbox>
 
47
    </paper-dropdown-menu-light>
 
48
 
 
49
This example renders a dropdown menu with 4 options.
 
50
 
 
51
The child element with the class `dropdown-content` is used as the dropdown
 
52
menu. This can be a [`paper-listbox`](paper-listbox), or any other or
 
53
element that acts like an [`iron-selector`](iron-selector).
 
54
 
 
55
Specifically, the menu child must fire an
 
56
[`iron-select`](iron-selector#event-iron-select) event when one of its
 
57
children is selected, and an [`iron-deselect`](iron-selector#event-iron-deselect)
 
58
event when a child is deselected. The selected or deselected item must
 
59
be passed as the event's `detail.item` property.
 
60
 
 
61
Applications can listen for the `iron-select` and `iron-deselect` events
 
62
to react when options are selected and deselected.
 
63
 
 
64
### Styling
 
65
 
 
66
The following custom properties and mixins are also available for styling:
 
67
 
 
68
Custom property | Description | Default
 
69
----------------|-------------|----------
 
70
`--paper-dropdown-menu` | A mixin that is applied to the element host | `{}`
 
71
`--paper-dropdown-menu-disabled` | A mixin that is applied to the element host when disabled | `{}`
 
72
`--paper-dropdown-menu-ripple` | A mixin that is applied to the internal ripple | `{}`
 
73
`--paper-dropdown-menu-button` | A mixin that is applied to the internal menu button | `{}`
 
74
`--paper-dropdown-menu-icon` | A mixin that is applied to the internal icon | `{}`
 
75
`--paper-dropdown-menu-disabled-opacity` | The opacity of the dropdown when disabled  | `0.33`
 
76
`--paper-dropdown-menu-color` | The color of the input/label/underline when the dropdown is unfocused | `--primary-text-color`
 
77
`--paper-dropdown-menu-focus-color` | The color of the label/underline when the dropdown is focused  | `--primary-color`
 
78
`--paper-dropdown-error-color` | The color of the label/underline when the dropdown is invalid  | `--error-color`
 
79
`--paper-dropdown-menu-label` | Mixin applied to the label | `{}`
 
80
`--paper-dropdown-menu-input` | Mixin appled to the input | `{}`
 
81
 
 
82
Note that in this element, the underline is just the bottom border of the "input".
 
83
To style it:
 
84
 
 
85
    <style is=custom-style>
 
86
      paper-dropdown-menu-light.custom {
 
87
        --paper-dropdown-menu-input: {
 
88
          border-bottom: 2px dashed lavender;
 
89
        };
 
90
    </style>
 
91
 
 
92
@group Paper Elements
 
93
@element paper-dropdown-menu-light
 
94
@hero hero.svg
 
95
@demo demo/index.html
 
96
-->
 
97
 
 
98
<dom-module id="paper-dropdown-menu-light">
 
99
  <template>
 
100
    <style include="paper-dropdown-menu-shared-styles">
 
101
      /**
 
102
       * All of these styles below are for styling the fake-input display
 
103
       */
 
104
      .dropdown-trigger {
 
105
        box-sizing: border-box;
 
106
        position: relative;
 
107
        width: 100%;
 
108
        padding: 16px 0 8px 0;
 
109
      }
 
110
 
 
111
      :host([disabled]) .dropdown-trigger {
 
112
        pointer-events: none;
 
113
        opacity: var(--paper-dropdown-menu-disabled-opacity, 0.33);
 
114
      }
 
115
 
 
116
      :host([no-label-float]) .dropdown-trigger {
 
117
        padding-top: 8px;   /* If there's no label, we need less space up top. */
 
118
      }
 
119
 
 
120
      #input {
 
121
        @apply(--paper-font-subhead);
 
122
        @apply(--paper-font-common-nowrap);
 
123
        border-bottom: 1px solid var(--paper-dropdown-menu-color, --secondary-text-color);
 
124
        color: var(--paper-dropdown-menu-color, --primary-text-color);
 
125
        width: 200px;  /* Default size of an <input> */
 
126
        min-height: 24px;
 
127
        box-sizing: border-box;
 
128
        padding: 12px 20px 0 0;   /* Right padding so that text doesn't overlap the icon */
 
129
        outline: none;
 
130
        @apply(--paper-dropdown-menu-input);
 
131
      }
 
132
 
 
133
      :host-context([dir="rtl"]) #input {
 
134
        padding-right: 0px;
 
135
        padding-left: 20px;
 
136
      }
 
137
 
 
138
      :host([disabled]) #input {
 
139
        border-bottom: 1px dashed var(--paper-dropdown-menu-color, --secondary-text-color);
 
140
      }
 
141
 
 
142
      :host([invalid]) #input {
 
143
        border-bottom: 2px solid var(--paper-dropdown-error-color, --error-color);
 
144
      }
 
145
 
 
146
      :host([no-label-float]) #input {
 
147
        padding-top: 0;   /* If there's no label, we need less space up top. */
 
148
      }
 
149
 
 
150
      label {
 
151
        @apply(--paper-font-subhead);
 
152
        @apply(--paper-font-common-nowrap);
 
153
        display: block;
 
154
        position: absolute;
 
155
        bottom: 0;
 
156
        left: 0;
 
157
        right: 0;
 
158
        /**
 
159
         * The container has a 16px top padding, and there's 12px of padding
 
160
         * between the input and the label (from the input's padding-top)
 
161
         */
 
162
        top: 28px;
 
163
        box-sizing: border-box;
 
164
        width: 100%;
 
165
        padding-right: 20px;    /* Right padding so that text doesn't overlap the icon */
 
166
        text-align: left;
 
167
        transition-duration: .2s;
 
168
        transition-timing-function: cubic-bezier(.4,0,.2,1);
 
169
        color: var(--paper-dropdown-menu-color, --secondary-text-color);
 
170
        @apply(--paper-dropdown-menu-label);
 
171
      }
 
172
 
 
173
      :host-context([dir="rtl"]) label {
 
174
        padding-right: 0px;
 
175
        padding-left: 20px;
 
176
      }
 
177
 
 
178
      :host([no-label-float]) label {
 
179
        top: 8px;
 
180
      }
 
181
 
 
182
      label.label-is-floating {
 
183
        font-size: 12px;
 
184
        top: 8px;
 
185
      }
 
186
 
 
187
      label.label-is-hidden {
 
188
        display: none;
 
189
      }
 
190
 
 
191
      :host([focused]) label.label-is-floating {
 
192
        color: var(--paper-dropdown-menu-focus-color, --primary-color);
 
193
      }
 
194
 
 
195
      :host([invalid]) label.label-is-floating {
 
196
        color: var(--paper-dropdown-error-color, --error-color);
 
197
      }
 
198
 
 
199
      /**
 
200
       * Sets up the focused underline. It's initially hidden, and becomes
 
201
       * visible when it's focused.
 
202
       */
 
203
      label:after {
 
204
        background-color: var(--paper-dropdown-menu-focus-color, --primary-color);
 
205
        bottom: 8px;    /* The container has an 8px bottom padding */
 
206
        content: '';
 
207
        height: 2px;
 
208
        left: 45%;
 
209
        position: absolute;
 
210
        transition-duration: .2s;
 
211
        transition-timing-function: cubic-bezier(.4,0,.2,1);
 
212
        visibility: hidden;
 
213
        width: 8px;
 
214
        z-index: 10;
 
215
      }
 
216
 
 
217
      :host([invalid]) label:after {
 
218
        background-color: var(--paper-dropdown-error-color, --error-color);
 
219
      }
 
220
 
 
221
      :host([no-label-float]) label:after {
 
222
        bottom: 8px;    /* The container has a 8px bottom padding */
 
223
      }
 
224
 
 
225
      :host([focused]:not([disabled])) label:after {
 
226
        left: 0;
 
227
        visibility: visible;
 
228
        width: 100%;
 
229
      }
 
230
 
 
231
      iron-icon {
 
232
        position: absolute;
 
233
        right: 0px;
 
234
        bottom: 8px;    /* The container has an 8px bottom padding */
 
235
        @apply(--paper-font-subhead);
 
236
        margin-top: 12px;
 
237
        color: var(--disabled-text-color);
 
238
        @apply(--paper-dropdown-menu-icon);
 
239
      }
 
240
 
 
241
      :host-context([dir="rtl"]) iron-icon {
 
242
        left: 0;
 
243
        right: auto;
 
244
      }
 
245
 
 
246
      :host([no-label-float]) iron-icon {
 
247
        margin-top: 0px;
 
248
      }
 
249
 
 
250
      .error {
 
251
        display: inline-block;
 
252
        visibility: hidden;
 
253
        color: var(--paper-dropdown-error-color, --error-color);
 
254
        @apply(--paper-font-caption);
 
255
        position: absolute;
 
256
        left:0;
 
257
        right:0;
 
258
        bottom: -12px;
 
259
      }
 
260
 
 
261
      :host([invalid]) .error {
 
262
        visibility: visible;
 
263
      }
 
264
    </style>
 
265
 
 
266
    <!-- this div fulfills an a11y requirement for combobox, do not remove -->
 
267
    <div role="button"></div>
 
268
    <paper-menu-button
 
269
      id="menuButton"
 
270
      vertical-align="[[verticalAlign]]"
 
271
      horizontal-align="[[horizontalAlign]]"
 
272
      vertical-offset="[[_computeMenuVerticalOffset(noLabelFloat)]]"
 
273
      disabled="[[disabled]]"
 
274
      no-animations="[[noAnimations]]"
 
275
      on-iron-select="_onIronSelect"
 
276
      on-iron-deselect="_onIronDeselect"
 
277
      opened="{{opened}}">
 
278
      <div class="dropdown-trigger">
 
279
        <label hidden$="[[!label]]"
 
280
            class$="[[_computeLabelClass(noLabelFloat,alwaysFloatLabel,hasContent)]]">[[label]]</label>
 
281
        <div id="input" tabindex="-1">&nbsp;</div>
 
282
        <iron-icon icon="paper-dropdown-menu:arrow-drop-down"></iron-icon>
 
283
        <span class="error">[[errorMessage]]</span>
 
284
      </div>
 
285
      <content id="content" select=".dropdown-content"></content>
 
286
    </paper-menu-button>
 
287
  </template>
 
288
 
 
289
  <script>
 
290
    (function() {
 
291
      'use strict';
 
292
 
 
293
      Polymer({
 
294
        is: 'paper-dropdown-menu-light',
 
295
 
 
296
        behaviors: [
 
297
          Polymer.IronButtonState,
 
298
          Polymer.IronControlState,
 
299
          Polymer.PaperRippleBehavior,
 
300
          Polymer.IronFormElementBehavior,
 
301
          Polymer.IronValidatableBehavior
 
302
        ],
 
303
 
 
304
        properties: {
 
305
          /**
 
306
           * The derived "label" of the currently selected item. This value
 
307
           * is the `label` property on the selected item if set, or else the
 
308
           * trimmed text content of the selected item.
 
309
           */
 
310
          selectedItemLabel: {
 
311
            type: String,
 
312
            notify: true,
 
313
            readOnly: true
 
314
          },
 
315
 
 
316
          /**
 
317
           * The last selected item. An item is selected if the dropdown menu has
 
318
           * a child with class `dropdown-content`, and that child triggers an
 
319
           * `iron-select` event with the selected `item` in the `detail`.
 
320
           *
 
321
           * @type {?Object}
 
322
           */
 
323
          selectedItem: {
 
324
            type: Object,
 
325
            notify: true,
 
326
            readOnly: true
 
327
          },
 
328
 
 
329
          /**
 
330
           * The value for this element that will be used when submitting in
 
331
           * a form. It is read only, and will always have the same value
 
332
           * as `selectedItemLabel`.
 
333
           */
 
334
          value: {
 
335
            type: String,
 
336
            notify: true,
 
337
            readOnly: true,
 
338
            observer: '_valueChanged',
 
339
          },
 
340
 
 
341
          /**
 
342
           * The label for the dropdown.
 
343
           */
 
344
          label: {
 
345
            type: String
 
346
          },
 
347
 
 
348
          /**
 
349
           * The placeholder for the dropdown.
 
350
           */
 
351
          placeholder: {
 
352
            type: String
 
353
          },
 
354
 
 
355
          /**
 
356
           * True if the dropdown is open. Otherwise, false.
 
357
           */
 
358
          opened: {
 
359
            type: Boolean,
 
360
            notify: true,
 
361
            value: false,
 
362
            observer: '_openedChanged'
 
363
          },
 
364
 
 
365
          /**
 
366
           * Set to true to disable the floating label. Bind this to the
 
367
           * `<paper-input-container>`'s `noLabelFloat` property.
 
368
           */
 
369
          noLabelFloat: {
 
370
              type: Boolean,
 
371
              value: false,
 
372
              reflectToAttribute: true
 
373
          },
 
374
 
 
375
          /**
 
376
           * Set to true to always float the label. Bind this to the
 
377
           * `<paper-input-container>`'s `alwaysFloatLabel` property.
 
378
           */
 
379
          alwaysFloatLabel: {
 
380
            type: Boolean,
 
381
            value: false
 
382
          },
 
383
 
 
384
          /**
 
385
           * Set to true to disable animations when opening and closing the
 
386
           * dropdown.
 
387
           */
 
388
          noAnimations: {
 
389
            type: Boolean,
 
390
            value: false
 
391
          },
 
392
 
 
393
          /**
 
394
           * The orientation against which to align the menu dropdown
 
395
           * horizontally relative to the dropdown trigger.
 
396
           */
 
397
          horizontalAlign: {
 
398
            type: String,
 
399
            value: 'right'
 
400
          },
 
401
 
 
402
          /**
 
403
           * The orientation against which to align the menu dropdown
 
404
           * vertically relative to the dropdown trigger.
 
405
           */
 
406
          verticalAlign: {
 
407
            type: String,
 
408
            value: 'top'
 
409
          },
 
410
 
 
411
          hasContent: {
 
412
            type: Boolean,
 
413
            readOnly: true
 
414
          }
 
415
        },
 
416
 
 
417
        listeners: {
 
418
          'tap': '_onTap'
 
419
        },
 
420
 
 
421
        keyBindings: {
 
422
          'up down': 'open',
 
423
          'esc': 'close'
 
424
        },
 
425
 
 
426
        hostAttributes: {
 
427
          role: 'combobox',
 
428
          'aria-autocomplete': 'none',
 
429
          'aria-haspopup': 'true'
 
430
        },
 
431
 
 
432
        observers: [
 
433
          '_selectedItemChanged(selectedItem)'
 
434
        ],
 
435
 
 
436
        attached: function() {
 
437
          // NOTE(cdata): Due to timing, a preselected value in a `IronSelectable`
 
438
          // child will cause an `iron-select` event to fire while the element is
 
439
          // still in a `DocumentFragment`. This has the effect of causing
 
440
          // handlers not to fire. So, we double check this value on attached:
 
441
          var contentElement = this.contentElement;
 
442
          if (contentElement && contentElement.selectedItem) {
 
443
            this._setSelectedItem(contentElement.selectedItem);
 
444
          }
 
445
        },
 
446
 
 
447
        /**
 
448
         * The content element that is contained by the dropdown menu, if any.
 
449
         */
 
450
        get contentElement() {
 
451
          return Polymer.dom(this.$.content).getDistributedNodes()[0];
 
452
        },
 
453
 
 
454
        /**
 
455
         * Show the dropdown content.
 
456
         */
 
457
        open: function() {
 
458
          this.$.menuButton.open();
 
459
        },
 
460
 
 
461
        /**
 
462
         * Hide the dropdown content.
 
463
         */
 
464
        close: function() {
 
465
          this.$.menuButton.close();
 
466
        },
 
467
 
 
468
        /**
 
469
         * A handler that is called when `iron-select` is fired.
 
470
         *
 
471
         * @param {CustomEvent} event An `iron-select` event.
 
472
         */
 
473
        _onIronSelect: function(event) {
 
474
          this._setSelectedItem(event.detail.item);
 
475
        },
 
476
 
 
477
        /**
 
478
         * A handler that is called when `iron-deselect` is fired.
 
479
         *
 
480
         * @param {CustomEvent} event An `iron-deselect` event.
 
481
         */
 
482
        _onIronDeselect: function(event) {
 
483
          this._setSelectedItem(null);
 
484
        },
 
485
 
 
486
        /**
 
487
         * A handler that is called when the dropdown is tapped.
 
488
         *
 
489
         * @param {CustomEvent} event A tap event.
 
490
         */
 
491
        _onTap: function(event) {
 
492
          if (Polymer.Gestures.findOriginalTarget(event) === this) {
 
493
            this.open();
 
494
          }
 
495
        },
 
496
 
 
497
        /**
 
498
         * Compute the label for the dropdown given a selected item.
 
499
         *
 
500
         * @param {Element} selectedItem A selected Element item, with an
 
501
         * optional `label` property.
 
502
         */
 
503
        _selectedItemChanged: function(selectedItem) {
 
504
          var value = '';
 
505
          if (!selectedItem) {
 
506
            value = '';
 
507
          } else {
 
508
            value = selectedItem.label || selectedItem.textContent.trim();
 
509
          }
 
510
 
 
511
          this._setValue(value);
 
512
          this._setSelectedItemLabel(value);
 
513
        },
 
514
 
 
515
        /**
 
516
         * Compute the vertical offset of the menu based on the value of
 
517
         * `noLabelFloat`.
 
518
         *
 
519
         * @param {boolean} noLabelFloat True if the label should not float
 
520
         * above the input, otherwise false.
 
521
         */
 
522
        _computeMenuVerticalOffset: function(noLabelFloat) {
 
523
          // NOTE(cdata): These numbers are somewhat magical because they are
 
524
          // derived from the metrics of elements internal to `paper-input`'s
 
525
          // template. The metrics will change depending on whether or not the
 
526
          // input has a floating label.
 
527
          return noLabelFloat ? -4 : 8;
 
528
        },
 
529
 
 
530
        /**
 
531
         * Returns false if the element is required and does not have a selection,
 
532
         * and true otherwise.
 
533
         * @param {*=} _value Ignored.
 
534
         * @return {boolean} true if `required` is false, or if `required` is true
 
535
         * and the element has a valid selection.
 
536
         */
 
537
        _getValidity: function(_value) {
 
538
          return this.disabled || !this.required || (this.required && !!this.value);
 
539
        },
 
540
 
 
541
        _openedChanged: function() {
 
542
          var openState = this.opened ? 'true' : 'false';
 
543
          var e = this.contentElement;
 
544
          if (e) {
 
545
            e.setAttribute('aria-expanded', openState);
 
546
          }
 
547
        },
 
548
 
 
549
        _computeLabelClass: function(noLabelFloat, alwaysFloatLabel, hasContent) {
 
550
          var cls = '';
 
551
          if (noLabelFloat === true) {
 
552
            return hasContent ? 'label-is-hidden' : '';
 
553
          }
 
554
 
 
555
          if (hasContent || alwaysFloatLabel === true) {
 
556
            cls += ' label-is-floating';
 
557
          }
 
558
          return cls;
 
559
        },
 
560
 
 
561
        _valueChanged: function() {
 
562
          // Only update if it's actually different.
 
563
          if (this.$.input && this.$.input.textContent !== this.value) {
 
564
            this.$.input.textContent = this.value;
 
565
          }
 
566
          this._setHasContent(!!this.value);
 
567
        },
 
568
      });
 
569
    })();
 
570
  </script>
 
571
</dom-module>