| Index: pkg/polymer/lib/elements/polymer-ui-submenu-item/polymer-ui-submenu-item.html
|
| diff --git a/pkg/polymer/lib/elements/polymer-ui-submenu-item/polymer-ui-submenu-item.html b/pkg/polymer/lib/elements/polymer-ui-submenu-item/polymer-ui-submenu-item.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..740523ea02f1c2acd1d4eb9cd7147b00b70b0bc6
|
| --- /dev/null
|
| +++ b/pkg/polymer/lib/elements/polymer-ui-submenu-item/polymer-ui-submenu-item.html
|
| @@ -0,0 +1,85 @@
|
| +<!--
|
| +Copyright 2013 The Toolkitchen Authors. All rights reserved.
|
| +Use of this source code is governed by a BSD-style
|
| +license that can be found in the LICENSE file.
|
| +-->
|
| +<!--
|
| +/**
|
| + * @module Polymer UI Elements
|
| + */
|
| +/**
|
| + * polymer-ui-submenu-item is a menu-item that can contains other menu-items.
|
| + * It should be used in conjunction with polymer-ui-menu or
|
| + * polymer-ui-sibebar-menu.
|
| + *
|
| + * Example:
|
| + *
|
| + * <polymer-ui-menu selected="0">
|
| + * <polymer-ui-submenu-item icon="settings" label="Topics">
|
| + * <polymer-ui-menu-item label="Topics 1"></polymer-ui-menu-item>
|
| + * <polymer-ui-menu-item label="Topics 2"></polymer-ui-menu-item>
|
| + * </polymer-ui-submenu-item>
|
| + * <polymer-ui-submenu-item icon="settings" label="Favorites">
|
| + * <polymer-ui-menu-item label="Favorites 1"></polymer-ui-menu-item>
|
| + * <polymer-ui-menu-item label="Favorites 2"></polymer-ui-menu-item>
|
| + * <polymer-ui-menu-item label="Favorites 3"></polymer-ui-menu-item>
|
| + * </polymer-ui-submenu-item>
|
| + * </polymer-ui-menu>
|
| + *
|
| + * @class polymer-ui-submenu-item
|
| + * @extends polymer-ui-menu-item
|
| + */
|
| +-->
|
| +<link rel="import" href="../polymer/polymer.html">
|
| +<link rel="import" href="../polymer-ui-theme-aware/polymer-ui-theme-aware.html">
|
| +<link rel="import" href="../polymer-ui-menu-item/polymer-ui-menu-item.html">
|
| +<link rel="import" href="../polymer-ui-menu/polymer-ui-menu.html">
|
| +<link rel="import" href="../polymer-collapse/polymer-collapse.html">
|
| +
|
| +<polymer-element name="polymer-ui-submenu-item" extends="polymer-ui-menu-item" attributes="active selected selectedItem">
|
| + <template>
|
| + <link rel="stylesheet" href="polymer-ui-submenu-item.css">
|
| + <polymer-ui-menu-item id="item" src="{{src}}" label="{{label}}" icon="{{icon}}" active?="{{active}}" on-tap="{{activate}}">
|
| + <content select=".item-content"></content>
|
| + </polymer-ui-menu-item>
|
| + <polymer-ui-menu id="menu" selected="{{selected}}" selectedItem="{{selectedItem}}">
|
| + <content></content>
|
| + </polymer-ui-menu>
|
| + <polymer-collapse targetId="menu" closed="{{collapsed}}"></polymer-collapse>
|
| + </template>
|
| + <script>
|
| + Polymer('polymer-ui-submenu-item', {
|
| + active: false,
|
| + collapsed: true,
|
| + get items() {
|
| + return this.$.menu.items;
|
| + },
|
| + hasItems: function() {
|
| + return !!this.items.length;
|
| + },
|
| + unselectAllItems: function() {
|
| + this.$.menu.selected = null;
|
| + this.$.menu.clearSelection();
|
| + },
|
| + activeChanged: function() {
|
| + if (this.hasItems()) {
|
| + this.collapsed = !this.active;
|
| + }
|
| + if (!this.active) {
|
| + this.unselectAllItems();
|
| + }
|
| + this.$.item.classList.toggle('no-active-bg', this.hasItems());
|
| + },
|
| + activate: function() {
|
| + if (this.hasItems() && this.active) {
|
| + this.collapsed = !this.collapsed;
|
| + this.unselectAllItems();
|
| + this.fire("polymer-select", {isSelected: true, item: this});
|
| + }
|
| + },
|
| + getItemHeight: function() {
|
| + return this.$ && this.$.item && this.$.item.offsetHeight;
|
| + }
|
| + });
|
| + </script>
|
| +</polymer-element>
|
|
|