From e065ad65ac8556b41e4649d97daf9090e006f13d Mon Sep 17 00:00:00 2001
From: Marcos Moura <marcosvmmoura@gmail.com>
Date: Thu, 17 Nov 2016 00:15:55 -0200
Subject: [PATCH] Add backdrop to md-menu

---
 src/components/mdBackdrop/mdBackdrop.scss |  4 +++
 src/components/mdMenu/mdMenu.vue          | 43 ++++++++++++-----------
 2 files changed, 26 insertions(+), 21 deletions(-)

diff --git a/src/components/mdBackdrop/mdBackdrop.scss b/src/components/mdBackdrop/mdBackdrop.scss
index bfafe5d..8bd0e8a 100644
--- a/src/components/mdBackdrop/mdBackdrop.scss
+++ b/src/components/mdBackdrop/mdBackdrop.scss
@@ -17,4 +17,8 @@
     opacity: 1;
     pointer-events: auto;
   }
+
+  &.md-transparent {
+    background: none;
+  }
 }
diff --git a/src/components/mdMenu/mdMenu.vue b/src/components/mdMenu/mdMenu.vue
index 8330c2b..157cbb1 100644
--- a/src/components/mdMenu/mdMenu.vue
+++ b/src/components/mdMenu/mdMenu.vue
@@ -1,6 +1,8 @@
 <template>
   <div class="md-menu">
     <slot></slot>
+
+    <md-backdrop class="md-menu-backdrop md-transparent md-active" ref="backdrop" @close="close"></md-backdrop>
   </div>
 </template>
 
@@ -68,11 +70,6 @@
       addNewDirectionMenuContentClass(direction) {
         this.menuContent.classList.add('md-direction-' + direction.replace(' ', '-'));
       },
-      closeOnOffClick(event) {
-        if (!this.$el.contains(event.target) && !this.menuContent.contains(event.target)) {
-          this.close();
-        }
-      },
       isAboveOfViewport(pos) {
         return pos.top <= this.browserMargin - parseInt(getComputedStyle(this.menuContent).marginTop, 10);
       },
@@ -180,12 +177,12 @@
         window.requestAnimationFrame(this.calculateMenuContentPos);
       },
       open() {
-        if (this.$root.$el.contains(this.menuContent)) {
-          this.$root.$el.removeChild(this.menuContent);
+        if (this.rootElement.contains(this.menuContent)) {
+          this.rootElement.removeChild(this.menuContent);
         }
 
-        this.$root.$el.appendChild(this.menuContent);
-        document.addEventListener('click', this.closeOnOffClick);
+        this.rootElement.appendChild(this.menuContent);
+        this.rootElement.appendChild(this.backdropElement);
         window.addEventListener('resize', this.recalculateOnResize);
 
         this.calculateMenuContentPos();
@@ -196,12 +193,11 @@
         this.active = true;
       },
       close() {
-        let menuContent = this.menuContent;
         let close = (event) => {
-          if (menuContent && event.target === menuContent) {
+          if (this.menuContent && event.target === this.menuContent) {
             let activeRipple = this.menuContent.querySelector('.md-ripple.md-active');
 
-            menuContent.removeEventListener(transitionEndEventName, close);
+            this.menuContent.removeEventListener(transitionEndEventName, close);
             this.menuTrigger.focus();
             this.active = false;
 
@@ -209,8 +205,8 @@
               activeRipple.classList.remove('md-active');
             }
 
-            this.$root.$el.removeChild(menuContent);
-            document.removeEventListener('click', this.closeOnOffClick);
+            this.rootElement.removeChild(this.menuContent);
+            this.rootElement.removeChild(this.backdropElement);
             window.removeEventListener('resize', this.recalculateOnResize);
           }
         };
@@ -227,13 +223,18 @@
       }
     },
     mounted() {
-      this.menuTrigger = this.$el.querySelector('[md-menu-trigger]');
-      this.menuContent = this.$el.querySelector('.md-menu-content');
-      this.validateMenu();
-      this.addNewSizeMenuContentClass(this.mdSize);
-      this.addNewDirectionMenuContentClass(this.mdDirection);
-      this.menuContent.parentNode.removeChild(this.menuContent);
-      this.menuTrigger.addEventListener('click', this.toggle);
+      this.$nextTick(() => {
+        this.rootElement = this.$root.$el;
+        this.menuTrigger = this.$el.querySelector('[md-menu-trigger]');
+        this.menuContent = this.$el.querySelector('.md-menu-content');
+        this.backdropElement = this.$refs.backdrop.$el;
+        this.validateMenu();
+        this.addNewSizeMenuContentClass(this.mdSize);
+        this.addNewDirectionMenuContentClass(this.mdDirection);
+        this.$el.removeChild(this.$refs.backdrop.$el);
+        this.menuContent.parentNode.removeChild(this.menuContent);
+        this.menuTrigger.addEventListener('click', this.toggle);
+      });
     }
   };
 </script>