| Index: polymer_0.5.0/bower_components/core-dropdown-menu/core-dropdown-menu.html
|
| diff --git a/polymer_0.5.0/bower_components/core-dropdown-menu/core-dropdown-menu.html b/polymer_0.5.0/bower_components/core-dropdown-menu/core-dropdown-menu.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..c06f4c0fcbd953fd816fd33d3c2f839ade4b7f7b
|
| --- /dev/null
|
| +++ b/polymer_0.5.0/bower_components/core-dropdown-menu/core-dropdown-menu.html
|
| @@ -0,0 +1,141 @@
|
| +<!--
|
| +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-dropdown-menu` works together with `core-dropdown` and `core-selector` to
|
| +implement a drop-down menu. The currently selected item is displayed in the
|
| +control. If no item is selected, the `label` is displayed instead.
|
| +
|
| +The child element with the class `dropdown` will be used as the drop-down
|
| +menu. It should be a `core-dropdown` or other overlay element. You should
|
| +also provide a `core-selector` or other selector element, such as `core-menu`,
|
| +in the drop-down.
|
| +
|
| +Example:
|
| +
|
| + <core-dropdown-menu label="Choose a pastry">
|
| + <core-dropdown class="dropdown">
|
| + <core-selector>
|
| + <core-item label="Croissant"></core-item>
|
| + <core-item label="Donut"></core-item>
|
| + <core-item label="Financier"></core-item>
|
| + <core-item label="Madeleine"></core-item>
|
| + </core-selector>
|
| + </core-dropdown>
|
| + </core-dropdown-menu>
|
| +
|
| +@group Polymer Core Elements
|
| +@element core-dropdown-menu
|
| +@extends core-dropdown-base
|
| +@status unstable
|
| +@homepage github.io
|
| +-->
|
| +
|
| +<link href="../polymer/polymer.html" rel="import">
|
| +<link href="../core-a11y-keys/core-a11y-keys.html" rel="import">
|
| +<link href="../core-dropdown/core-dropdown-base.html" rel="import">
|
| +<link href="../core-focusable/core-focusable.html" rel="import">
|
| +<link href="../core-icon/core-icon.html" rel="import">
|
| +<link href="../core-icons/core-icons.html" rel="import">
|
| +
|
| +<polymer-element name="core-dropdown-menu" extends="core-dropdown-base" relative layout inline horizontal center tabindex="0">
|
| +<template>
|
| +
|
| + <style>
|
| + :host {
|
| + background-color: #fff;
|
| + }
|
| +
|
| + :host([disabled]) {
|
| + color: #a8a8a8;
|
| + }
|
| +
|
| + #label {
|
| + overflow: hidden;
|
| + white-space: nowrap;
|
| + text-overflow: ellipsis;
|
| + }
|
| + </style>
|
| +
|
| + <core-a11y-keys target="{{}}" keys="enter space" on-keys-pressed="{{toggleOverlay}}"></core-a11y-keys>
|
| +
|
| + <div flex auto id="label">{{selectedItemLabel || label}}</div>
|
| + <core-icon id="arrow" icon="{{opened ? openedIcon : closedIcon}}"></core-icon>
|
| +
|
| + <content></content>
|
| +
|
| +</template>
|
| +<script>
|
| +
|
| +(function() {
|
| +
|
| + var p = {
|
| +
|
| + publish: {
|
| +
|
| + /**
|
| + * A label for the control. The label is displayed if no item is selected.
|
| + *
|
| + * @attribute label
|
| + * @type string
|
| + * @default 'Select an item'
|
| + */
|
| + label: 'Select an item',
|
| +
|
| + /**
|
| + * The icon to display when the drop-down is opened.
|
| + *
|
| + * @attribute openedIcon
|
| + * @type string
|
| + * @default 'arrow-drop-up'
|
| + */
|
| + openedIcon: 'arrow-drop-up',
|
| +
|
| + /**
|
| + * The icon to display when the drop-down is closed.
|
| + *
|
| + * @attribute closedIcon
|
| + * @type string
|
| + * @default 'arrow-drop-down'
|
| + */
|
| + closedIcon: 'arrow-drop-down'
|
| +
|
| + },
|
| +
|
| + selectedItemLabel: '',
|
| +
|
| + overlayListeners: {
|
| + 'core-overlay-open': 'openAction',
|
| + 'core-activate': 'activateAction',
|
| + 'core-select': 'selectAction'
|
| + },
|
| +
|
| + activateAction: function(e) {
|
| + this.opened = false;
|
| + },
|
| +
|
| + selectAction: function(e) {
|
| + var detail = e.detail;
|
| + if (detail.isSelected) {
|
| + this.selectedItemLabel = detail.item.label || detail.item.textContent;
|
| + } else {
|
| + this.selectedItemLabel = '';
|
| + }
|
| + }
|
| +
|
| + };
|
| +
|
| + Polymer.mixin2(p, Polymer.CoreFocusable);
|
| + Polymer(p);
|
| +
|
| +})();
|
| +
|
| +</script>
|
| +</polymer-element>
|
|
|