Index: third_party/polymer/components/core-dropdown/core-dropdown.html |
diff --git a/third_party/polymer/components/core-dropdown/core-dropdown.html b/third_party/polymer/components/core-dropdown/core-dropdown.html |
deleted file mode 100644 |
index 1c5ecb77cd74971b359679f664a41406057dac2a..0000000000000000000000000000000000000000 |
--- a/third_party/polymer/components/core-dropdown/core-dropdown.html |
+++ /dev/null |
@@ -1,204 +0,0 @@ |
-<!-- |
-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` is a control where the user can choose from an array of options in a drop-down |
-menu. The currently selected option is displayed in the control. |
- |
-Example: |
- |
- <core-dropdown selected="Financier" valueattr="label"> |
- <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-dropdown> |
- |
-This example renders a drop-down menu with 4 options, with the option `Financier` pre-selected. |
- |
-Theming |
-------- |
- |
-Style the drop-down menu with the `core-dropdown::shadow #menu` selector. |
- |
-Example: |
- |
- core-dropdown::shadow #menu { |
- background-color: #eee; |
- border: 1px solid #ccc; |
- } |
- |
-@group Polymer Core Elements |
-@element core-dropdown |
-@status beta |
-@homepage github.io |
---> |
- |
-<!-- |
-Fired when an item's selection state is changed. This event is fired both |
-when an item is selected or deselected. The `isSelected` detail property |
-contains the selection state. |
- |
-@event core-select |
-@param {Object} detail |
- @param {boolean} detail.isSelected true for selection and false for deselection |
- @param {Object} detail.item the item element |
---> |
-<link href="../polymer/polymer.html" rel="import"> |
-<link href="../core-icon/core-icon.html" rel="import"> |
-<link href="../core-icons/core-icons.html" rel="import"> |
-<link href="../core-item/core-item.html" rel="import"> |
-<link href="../core-menu/core-menu.html" rel="import"> |
-<link href="../core-overlay/core-overlay.html" rel="import"> |
- |
-<polymer-element name="core-dropdown"> |
-<template> |
- |
- <link href="core-dropdown.css" rel="stylesheet"> |
- |
- <div id="control" layout horizontal center on-tap="{{toggle}}"> |
- <core-item flex src="{{selectedItem.src}}" icon="{{selectedItem.icon}}" label="{{selectedItem ? selectedItem.label : label}}"></core-item> |
- <core-icon id="arrow" icon="{{opened ? 'arrow-drop-up' : 'arrow-drop-down'}}"></core-icon> |
- </div> |
- |
- <core-overlay target="{{$.menu}}" opened="{{opened}}" on-core-overlay-open="{{openAction}}"></core-overlay> |
- |
- <core-menu id="menu" selected="{{selected}}" selectedItem="{{selectedItem}}" selectedClass="{{selectedClass}}" valueattr="{{valueattr}}" selectedProperty="{{selectedProperty}}" selectedAttribute="{{selectedAttribute}}" on-core-select="{{selectAction}}"> |
- <content select="*"></content> |
- </core-menu> |
- |
-</template> |
-<script> |
- |
- Polymer({ |
- |
- publish: { |
- |
- /** |
- * True if the menu is open. |
- * |
- * @attribute opened |
- * @type boolean |
- * @default false |
- */ |
- opened: false, |
- |
- /** |
- * 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 currently selected element. By default this is the index of the item element. |
- * If you want a specific attribute value of the element to be used instead of the |
- * index, set `valueattr` to that attribute name. |
- * |
- * @attribute selected |
- * @type Object |
- * @default null |
- */ |
- selected: null, |
- |
- /** |
- * Specifies the attribute to be used for "selected" attribute. |
- * |
- * @attribute valueattr |
- * @type string |
- * @default 'name' |
- */ |
- valueattr: 'name', |
- |
- /** |
- * Specifies the CSS class to be used to add to the selected element. |
- * |
- * @attribute selectedClass |
- * @type string |
- * @default 'core-selected' |
- */ |
- selectedClass: 'core-selected', |
- |
- /** |
- * Specifies the property to be used to set on the selected element |
- * to indicate its active state. |
- * |
- * @attribute selectedProperty |
- * @type string |
- * @default '' |
- */ |
- selectedProperty: '', |
- |
- /** |
- * Specifies the attribute to set on the selected element to indicate |
- * its active state. |
- * |
- * @attribute selectedAttribute |
- * @type string |
- * @default 'active' |
- */ |
- selectedAttribute: 'selected', |
- |
- /** |
- * The currently selected element. |
- * |
- * @attribute selectedItem |
- * @type Object |
- * @default null |
- */ |
- selectedItem: null, |
- |
- /** |
- * Horizontally align the overlay with the control. |
- * @attribute halign |
- * @type "left"|"right" |
- * @default "left" |
- */ |
- halign: {value: 'left', reflect: true}, |
- |
- /** |
- * Vertically align the dropdown menu with the control. |
- * @attribute valign |
- * @type "top"|"bottom" |
- * @default "bottom" |
- */ |
- valign: {value: 'bottom', reflect: true} |
- |
- }, |
- |
- toggle: function() { |
- this.opened = !this.opened; |
- }, |
- |
- openAction: function(e) { |
- if (e.detail) { |
- var rect = this.$.control.getBoundingClientRect(); |
- if (this.valign === 'top') { |
- this.$.menu.style.top = 'auto'; |
- this.$.menu.style.bottom = rect.height + 'px'; |
- this.$.menu.style.maxHeight = (window.innerHeight - (window.innerHeight - rect.top) - 12) + 'px'; |
- } else { |
- this.$.menu.style.top = rect.height + 'px'; |
- this.$.menu.style.bottom = 'auto'; |
- this.$.menu.style.maxHeight = (window.innerHeight - rect.height - rect.top - 12) + 'px'; |
- } |
- this.$.menu.style.minWidth = rect.width + 'px'; |
- } |
- }, |
- |
- selectAction: function() { |
- this.opened = false; |
- } |
- }); |
- |
-</script> |
-</polymer-element> |