move blocking elements code to shop-app only

bower.json

@@ -7,15 +7,15 @@
   "private": true,
   "dependencies": {
     "polymer": "polymer/polymer#^1.4.0",
-    "app-layout": "polymerelements/app-layout#blocking-elements",
+    "app-layout": "polymerelements/app-layout#^0.10.0",
     "app-route": "polymerelements/app-route#^0.9.1",
     "iron-flex-layout": "polymerelements/iron-flex-layout#^1.0.0",
     "iron-form": "polymerelements/iron-form#^1.0.0",
     "iron-icon": "polymerelements/iron-icon#^1.0.0",
     "iron-iconset-svg": "polymerelements/iron-iconset-svg#^1.0.0",
     "iron-localstorage": "polymerelements/iron-localstorage#^1.0.0",
     "iron-media-query": "polymerelements/iron-media-query#^1.0.0",
-    "iron-overlay-behavior": "polymerelements/iron-overlay-behavior#blocking-elements",
+    "iron-overlay-behavior": "polymerelements/iron-overlay-behavior#^1.0.0",
     "iron-pages": "polymerelements/iron-pages#^1.0.0",
     "iron-selector": "polymerelements/iron-selector#^1.0.0",
     "paper-icon-button": "polymerelements/paper-icon-button#^1.0.0",

src/shop-app.html

@@ -291,7 +291,7 @@
     <!-- Lazy-create the drawer for small screen sizes. -->
     <template is="dom-if" if="[[_shouldRenderDrawer]]">
       <!-- Two-way bind `drawerOpened` since app-drawer can update `opened` itself. -->
-      <app-drawer opened="{{drawerOpened}}" swipe-open tabindex="0">
+      <app-drawer opened="{{drawerOpened}}" swipe-open no-focus-trap on-opened-changed="_updateBlockingElements">
         <iron-selector role="navigation" class="drawer-list" selected="[[categoryName]]" attr-for-selected="name">
           <template is="dom-repeat" items="[[categories]]" as="category" initial-count="4">
             <a name="[[category.name]]" href="/list/[[category.name]]">[[category.title]]</a>
@@ -472,6 +472,7 @@
       _onAddCartItem: function(event) {
         if (!this._cartModal) {
           this._cartModal = document.createElement('shop-cart-modal');
+          this._cartModal.addEventListener('opened-changed', this._updateBlockingElements.bind(this));
           Polymer.dom(this.root).appendChild(this._cartModal);
         }
         this.$.cart.addItem(event.detail);
@@ -532,6 +533,16 @@
 
       _computePluralizedQuantity: function(quantity) {
         return quantity + ' ' + (quantity === 1 ? 'item' : 'items');
+      },
+
+      _updateBlockingElements: function(event) {
+        var opened = event.detail.value;
+        var drawer = event.target;
+        if (opened) {
+          document.$blockingElements.push(drawer);
+        } else {
+          document.$blockingElements.remove(drawer);
+        }
       }
 
     });

src/shop-cart-modal.html

@@ -114,13 +114,6 @@
         Polymer.IronOverlayBehaviorImpl
       ],
 
-      properties: {
-        withBackdrop: {
-          type: Boolean,
-          value: true
-        }
-      },
-
       hostAttributes: {
         role: 'dialog',
         'aria-modal': 'true'
@@ -133,7 +126,6 @@
 
       _renderOpened: function() {
         this.restoreFocusOnClose = true;
-        this.backdropElement.style.display = 'none';
         this.classList.add('opened');
       },
 
@@ -157,7 +149,6 @@
           this.fire('announce', 'Item added to the cart');
         } else {
           this._finishRenderClosed();
-          this.backdropElement.style.display = '';
         }
       },