Merge pull request #10 from PolymerElements/improve-docs-and-disabled…

…-behavior Improve docs, disabled behavior.
PolymerElements · Aug 5, 2015 · 597462d · 597462d
2 parents d96998e + 4565007
commit 597462d
Show file tree

Hide file tree

Showing 3 changed files with 89 additions and 4 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -60,7 +60,7 @@
   </style>
 
 </head>
-<body>
+<body unresolved>
 
 
   <template id="Demo" is="dom-bind">

diff --git a/paper-menu-button.html b/paper-menu-button.html
@@ -104,6 +104,8 @@
       opened="{{opened}}"
       horizontal-align="[[horizontalAlign]]"
       vertical-align="[[verticalAlign]]"
+      horizontal-offset="[[horizontalOffset]]"
+      vertical-offset="[[verticalOffset]]"
       open-animation-config="[[openAnimationConfig]]"
       close-animation-config="[[closeAnimationConfig]]"
       no-animations="[[noAnimations]]">
@@ -118,9 +120,20 @@
     'use strict';
 
     var PaperMenuButton = Polymer({
-
       is: 'paper-menu-button',
 
+      /**
+       * Fired when the dropdown opens.
+       *
+       * @event paper-dropdown-open
+       */
+
+      /**
+       * Fired when the dropdown closes.
+       *
+       * @event paper-dropdown-close
+       */
+
       behaviors: [
         Polymer.IronA11yKeysBehavior,
         Polymer.IronControlState
@@ -157,6 +170,28 @@
           reflectToAttribute: true
         },
 
+        /**
+         * A pixel value that will be added to the position calculated for the
+         * given `horizontalAlign`. Use a negative value to offset to the
+         * left, or a positive value to offset to the right.
+         */
+        horizontalOffset: {
+          type: Number,
+          value: 0,
+          notify: true
+        },
+
+        /**
+         * A pixel value that will be added to the position calculated for the
+         * given `verticalAlign`. Use a negative value to offset towards the
+         * top, or a positive value to offset towards the bottom.
+         */
+        verticalOffset: {
+          type: Number,
+          value: 0,
+          notify: true
+        },
+
         /**
          * Set to true to disable animations when opening and closing the
          * dropdown.
@@ -241,20 +276,57 @@
        * to the dropdown trigger.
        */
       open: function() {
-        this.fire('paper-open');
+        if (this.disabled) {
+          return;
+        }
+
         this.$.dropdown.open();
       },
 
       /**
        * Hide the dropdown content.
        */
       close: function() {
-        this.fire('paper-close');
         this.$.dropdown.close();
       },
 
+      /**
+       * When an `iron-activate` event is received, the dropdown should
+       * automatically close on the assumption that a value has been chosen.
+       *
+       * @param {CustomEvent} event A CustomEvent instance with type
+       * set to `"iron-activate"`.
+       */
       _onIronActivate: function(event) {
         this.close();
+      },
+
+      /**
+       * When the dropdown opens, the `paper-menu-button` fires `paper-open`.
+       * When the dropdown closes, the `paper-menu-button` fires `paper-close`.
+       *
+       * @param {boolean} opened True if the dropdown is opened, otherwise false.
+       * @param {boolean} oldOpened The previous value of `opened`.
+       */
+      _openedChanged: function(opened, oldOpened) {
+        if (opened) {
+          this.fire('paper-dropdown-open');
+        } else if (oldOpened != null) {
+          this.fire('paper-dropdown-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.opened) {
+          this.close();
+        }
       }
     });
 

diff --git a/test/paper-menu-button.html b/test/paper-menu-button.html
@@ -87,6 +87,19 @@
         }, 100);
       });
 
+      test('closes when disabled while open', function() {
+        var contentRect;
+
+        menuButton.opened = true;
+        menuButton.disabled = true;
+
+        expect(menuButton.opened).to.be.equal(false);
+
+        contentRect = content.getBoundingClientRect();
+        expect(contentRect.width).to.be.equal(0);
+        expect(contentRect.height).to.be.equal(0);
+      });
+
       test('has aria-haspopup attribute', function() {
         expect(menuButton.hasAttribute('aria-haspopup')).to.be.equal(true);
       });
-Original file line number
+Diff line change
@@ Expand Up / @@ -60,7 +60,7 @@ @@
       </style>
     </head>
-    <body>
+    <body unresolved>
       <template id="Demo" is="dom-bind">
@@ Expand Down @@