WIP - Pinpoint - New Page.

third_party/polymer/components/paper-menu/paper-submenu.html

 <!--
 @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">
-<link rel="import" href="../iron-menu-behavior/iron-menu-behavior.html">
 <link rel="import" href="../iron-behaviors/iron-control-state.html">
 <link rel="import" href="../iron-collapse/iron-collapse.html">
-<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
-<link rel="import" href="../paper-styles/default-theme.html">
-<link rel="import" href="../paper-styles/color.html">
 <link rel="import" href="paper-menu-shared-styles.html">
 
 <!--
 `<paper-submenu>` is a nested menu inside of a parent `<paper-menu>`. It
 consists of a trigger that expands or collapses another `<paper-menu>`:
 
     <paper-menu>
       <paper-submenu>
         <paper-item class="menu-trigger">Topics</paper-item>
         <paper-menu class="menu-content">
@@ skipping 92 matching lines @@
       },
 
       get __content() {
         return Polymer.dom(this.$.content).getDistributedNodes()[0];
       },
 
       attached: function() {
         this.listen(this.__parent, 'iron-activate', '_onParentIronActivate');
       },
 
-      dettached: function() {
+      detached: function() {
         this.unlisten(this.__parent, 'iron-activate', '_onParentIronActivate');
       },
 
       /**
        * Expand the submenu content.
        */
       open: function() {
-        if (!this.disabled && !this._active) {
-          this.$.collapse.show();
-          this._active = true;
-          this.__trigger && this.__trigger.classList.add('iron-selected');
-          this.__content && this.__content.focus();
+        if (!this.disabled) {
+          this.opened = true;
         }
       },
 
       /**
        * Collapse the submenu content.
        */
       close: function() {
-        if (this._active) {
-          this.$.collapse.hide();
-          this._active = false;
-          this.__trigger && this.__trigger.classList.remove('iron-selected');
-        }
+        this.opened = false;
       },
 
       /**
        * Toggle the submenu.
        */
       toggle: function() {
-        if (this._active) {
+        if (this.opened) {
           this.close();
         } else {
           this.open();
         }
       },
 
       /**
        * A handler that is called when the trigger is tapped.
        */
       _onTap: function(e) {
         if (!this.disabled) {
           this.toggle();
         }
       },
 
       /**
        * Toggles the submenu content when the trigger is tapped.
        */
       _openedChanged: function(opened, oldOpened) {
         if (opened) {
+          this.__trigger && this.__trigger.classList.add('iron-selected');
+          this.__content && this.__content.focus();
           this.fire('paper-submenu-open');
         } else if (oldOpened != null) {
+          this.__trigger && this.__trigger.classList.remove('iron-selected');
           this.fire('paper-submenu-close');
         }
       },
 
       /**
        * A handler that is called when `iron-activate` is fired.
        *
        * @param {CustomEvent} event An `iron-activate` event.
        */
       _onParentIronActivate: function(event) {
         var parent = this.__parent;
         if (Polymer.dom(event).localTarget === parent) {
           // The activated item can either be this submenu, in which case it
           // should be expanded, or any of the other sibling submenus, in which
           // case this submenu should be collapsed.
           if (event.detail.item !== this && !parent.multi) {
             this.close();
           }
         }
       },
 
       /**
        * If the dropdown is open when disabled becomes true, close the
        * dropdown.
        *
        * @param {boolean} disabled True if disabled, otherwise false.
        */
       _disabledChanged: function(disabled) {
         Polymer.IronControlState._disabledChanged.apply(this, arguments);
-        if (disabled && this._active) {
+        if (disabled && this.opened) {
           this.close();
         }
       },
 
       /**
        * Handler that is called when the menu receives focus.
        *
        * @param {FocusEvent} event A focus event.
        */
       _onFocus: function(event) {
         this.__trigger && this.__trigger.focus();
       }
 
     });
 
   })();
 </script>
 </dom-module>