From b564e48c0a2aa6cf4977fb62fb13d688305b6f31 Mon Sep 17 00:00:00 2001
From: Marcos Moura <marcosvmmoura@gmail.com>
Date: Mon, 24 Oct 2016 19:43:55 -0200
Subject: [PATCH] Keep menu content inside viewport

---
 docs/src/pages/components/Menu.vue |  10 ---
 src/components/mdMenu/mdMenu.vue   | 107 +++++++++++++++--------------
 2 files changed, 55 insertions(+), 62 deletions(-)

diff --git a/docs/src/pages/components/Menu.vue b/docs/src/pages/components/Menu.vue
index 20bdf9e..4cc4237 100644
--- a/docs/src/pages/components/Menu.vue
+++ b/docs/src/pages/components/Menu.vue
@@ -49,16 +49,6 @@
             <md-menu-item>My Item 3</md-menu-item>
           </md-menu-content>
         </md-menu>
-
-        <md-menu>
-          <md-button md-menu-trigger>Options</md-button>
-
-          <md-menu-content>
-            <md-menu-item>My Item 1</md-menu-item>
-            <md-menu-item>My Item 2</md-menu-item>
-            <md-menu-item>My Item 3</md-menu-item>
-          </md-menu-content>
-        </md-menu>
       </demo-example>
     </div>
 
diff --git a/src/components/mdMenu/mdMenu.vue b/src/components/mdMenu/mdMenu.vue
index 7025afa..7f09967 100644
--- a/src/components/mdMenu/mdMenu.vue
+++ b/src/components/mdMenu/mdMenu.vue
@@ -59,6 +59,57 @@
           this.close();
         }
       },
+      isAboveOfViewport(pos) {
+        return pos.top <= this.margin;
+      },
+      isBelowOfViewport(pos) {
+        return pos.top + this.menuContent.offsetHeight + this.margin >= window.innerHeight;
+      },
+      isOnTheLeftOfViewport(pos) {
+        return pos.left <= this.margin;
+      },
+      isOnTheRightOfViewport(pos) {
+        return pos.left + this.menuContent.offsetWidth + this.margin >= window.innerWidth;
+      },
+      getInViewPosition(position) {
+        if (this.isAboveOfViewport(position)) {
+          position.top = this.margin;
+          position.origin = 'center top';
+
+          if (this.isOnTheLeftOfViewport(position)) {
+            position.origin = 'left top';
+          }
+
+          if (this.isOnTheRightOfViewport(position)) {
+            position.origin = 'right top';
+          }
+        }
+
+        if (this.isOnTheLeftOfViewport(position)) {
+          position.left = this.margin;
+          position.origin = 'left';
+        }
+
+        if (this.isOnTheRightOfViewport(position)) {
+          position.left = window.innerWidth - this.margin - this.menuContent.offsetWidth;
+          position.origin = 'right';
+        }
+
+        if (this.isBelowOfViewport(position)) {
+          position.top = window.innerHeight - this.margin - this.menuContent.offsetHeight;
+          position.origin = 'center bottom';
+
+          if (this.isOnTheLeftOfViewport(position)) {
+            position.origin = 'left bottom';
+          }
+
+          if (this.isOnTheRightOfViewport(position)) {
+            position.origin = 'right bottom';
+          }
+        }
+
+        return position;
+      },
       getBottomRightPos() {
         let menuTriggerRect = this.menuTrigger.getBoundingClientRect();
         let position = {
@@ -67,19 +118,7 @@
           origin: 'left top'
         };
 
-        if (position.left <= this.margin) {
-          position.left = this.margin;
-          position.origin = 'center top';
-        }
-
-        if (position.top <= this.margin) {
-          position.top = this.margin;
-          position.origin = 'left center';
-        }
-
-        if (position.left <= this.margin && position.top <= this.margin) {
-          position.origin = 'center';
-        }
+        this.getInViewPosition(position);
 
         return position;
       },
@@ -91,19 +130,7 @@
           origin: 'right top'
         };
 
-        if (position.left <= this.margin) {
-          position.left = this.margin;
-          position.origin = 'center top';
-        }
-
-        if (top <= this.margin) {
-          position.top = this.margin;
-          position.origin = 'right center';
-        }
-
-        if (position.left <= this.margin && top <= this.margin) {
-          position.origin = 'center';
-        }
+        this.getInViewPosition(position);
 
         return position;
       },
@@ -115,19 +142,7 @@
           origin: 'left bottom'
         };
 
-        if (position.left <= this.margin) {
-          position.left = this.margin;
-          position.origin = 'center bottom';
-        }
-
-        if (top <= this.margin) {
-          top = this.margin;
-          position.origin = 'left center';
-        }
-
-        if (position.left <= this.margin && position.top <= this.margin) {
-          position.origin = 'center';
-        }
+        this.getInViewPosition(position);
 
         return position;
       },
@@ -139,19 +154,7 @@
           origin: 'right bottom'
         };
 
-        if (position.left <= this.margin) {
-          position.left = this.margin;
-          position.origin = 'center bottom';
-        }
-
-        if (position.top <= this.margin) {
-          position.top = this.margin;
-          position.origin = 'right center';
-        }
-
-        if (position.left <= this.margin && position.top <= this.margin) {
-          position.origin = 'center';
-        }
+        this.getInViewPosition(position);
 
         return position;
       },