From 57573dd1cfe87c148a9acabcd7211263dd755f95 Mon Sep 17 00:00:00 2001
From: Marcos Moura <marcosvmmoura@gmail.com>
Date: Mon, 24 Oct 2016 19:43:55 -0200
Subject: [PATCH 1/5] 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;
       },

From 208a47f11e30ba864681ed2afdeab04b5adbfba3 Mon Sep 17 00:00:00 2001
From: Marcos Moura <marcosvmmoura@gmail.com>
Date: Mon, 24 Oct 2016 21:26:07 -0200
Subject: [PATCH 2/5] Drop transitionend dependency

---
 package.json                             |  1 -
 src/components/mdMenu/mdMenu.scss        |  8 +++----
 src/components/mdMenu/mdMenu.vue         | 29 ++++++++++++++----------
 src/core/utils/transitionEndEventName.js | 17 ++++++++++++++
 4 files changed, 38 insertions(+), 17 deletions(-)
 create mode 100644 src/core/utils/transitionEndEventName.js

diff --git a/package.json b/package.json
index 7fb5159..9fa3f99 100644
--- a/package.json
+++ b/package.json
@@ -44,7 +44,6 @@
     "autosize": "^3.0.17",
     "element.scrollintoviewifneeded-polyfill": "^1.0.1",
     "scopedQuerySelectorShim": "github:lazd/scopedQuerySelectorShim",
-    "transitionEnd": "^1.0.2",
     "vue": "^2.0.2"
   },
   "devDependencies": {
diff --git a/src/components/mdMenu/mdMenu.scss b/src/components/mdMenu/mdMenu.scss
index 83cc92b..bad5934 100644
--- a/src/components/mdMenu/mdMenu.scss
+++ b/src/components/mdMenu/mdMenu.scss
@@ -30,8 +30,8 @@ $menu-base-width: 56px;
   opacity: 0;
   transform: scale3D(.85, .85, 1);
   transition: width $swift-ease-out-duration $swift-ease-out-timing-function,
-              opacity .2s $swift-ease-in-timing-function,
-              transform .15s .1s $swift-ease-in-timing-function;
+              opacity .25s $swift-ease-in-timing-function,
+              transform .1s .12s $swift-ease-in-timing-function;
   color: rgba(#212121, .87);
 
   &.md-active {
@@ -40,8 +40,8 @@ $menu-base-width: 56px;
     transform: scale3D(1, 1, 1);
     transform-origin: center;
     transition: width $swift-ease-out-duration $swift-ease-out-timing-function,
-                opacity .2s $swift-ease-out-timing-function,
-                transform .15s .1s $swift-ease-out-timing-function;
+                opacity .3s $swift-ease-out-timing-function,
+                transform .2s .073s $swift-ease-out-timing-function;
 
     > * {
       opacity: 1;
diff --git a/src/components/mdMenu/mdMenu.vue b/src/components/mdMenu/mdMenu.vue
index 7f09967..fb21951 100644
--- a/src/components/mdMenu/mdMenu.vue
+++ b/src/components/mdMenu/mdMenu.vue
@@ -7,9 +7,7 @@
 <style lang="scss" src="./mdMenu.scss"></style>
 
 <script>
-  import 'transitionEnd';
-
-  let transitionEnd = window.transitionEnd;
+  import transitionEndEventName from '../../core/utils/transitionEndEventName';
 
   export default {
     props: {
@@ -24,7 +22,7 @@
     },
     data() {
       return {
-        margin: 16,
+        margin: 4,
         active: false
       };
     },
@@ -55,7 +53,7 @@
         this.menuContent.classList.add('md-size-' + this.mdSize);
       },
       closeOnOffClick(event) {
-        if (!this.$el.contains(event.target)) {
+        if (!this.$el.contains(event.target) && !this.menuContent.contains(event.target)) {
           this.close();
         }
       },
@@ -197,17 +195,24 @@
 
         getComputedStyle(this.menuContent).top;
         this.menuContent.classList.add('md-active');
+        this.menuContent.focus();
         this.active = true;
       },
       close() {
-        transitionEnd(this.menuContent).bind(() => {
-          document.body.removeChild(this.menuContent);
-          document.removeEventListener('click', this.closeOnOffClick);
-          window.removeEventListener('resize', this.recalculateOnResize);
+        let close = (event) => {
+          if (this.menuContent && event.target === this.menuContent && event.propertyName === 'transform') {
+            this.menuContent.removeEventListener(transitionEndEventName, close);
+            this.menuTrigger.focus();
 
-          this.active = false;
-          transitionEnd(this.menuContent).unbind();
-        });
+            document.body.removeChild(this.menuContent);
+            document.removeEventListener('click', this.closeOnOffClick);
+            window.removeEventListener('resize', this.recalculateOnResize);
+
+            this.active = false;
+          }
+        };
+
+        this.menuContent.addEventListener(transitionEndEventName, close);
 
         this.menuContent.classList.remove('md-active');
       },
diff --git a/src/core/utils/transitionEndEventName.js b/src/core/utils/transitionEndEventName.js
new file mode 100644
index 0000000..e86baa7
--- /dev/null
+++ b/src/core/utils/transitionEndEventName.js
@@ -0,0 +1,17 @@
+function transitionEndEventName() {
+  const el = document.createElement('span');
+  const transitions = {
+    transition: 'transitionend',
+    OTransition: 'oTransitionEnd',
+    MozTransition: 'transitionend',
+    WebkitTransition: 'webkitTransitionEnd'
+  };
+
+  for (let transition in transitions) {
+    if (el.style[transition] !== undefined) {
+      return transitions[transition];
+    }
+  }
+}
+
+export default transitionEndEventName();

From 9893850a7b3ba5979e55ad8345c996d26e20f0bb Mon Sep 17 00:00:00 2001
From: Marcos Moura <marcosvmmoura@gmail.com>
Date: Mon, 24 Oct 2016 21:26:26 -0200
Subject: [PATCH 3/5] Close content on esc

---
 src/components/mdMenu/mdMenuContent.vue | 19 ++++++++++++++++++-
 src/components/mdMenu/mdMenuItem.vue    | 14 +++++++++++++-
 2 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/src/components/mdMenu/mdMenuContent.vue b/src/components/mdMenu/mdMenuContent.vue
index 4f1af63..38ceaee 100644
--- a/src/components/mdMenu/mdMenuContent.vue
+++ b/src/components/mdMenu/mdMenuContent.vue
@@ -1,5 +1,22 @@
 <template>
-  <div class="md-menu-content">
+  <div class="md-menu-content" @keydown.esc="close" tabindex="-1">
     <slot></slot>
   </div>
 </template>
+
+<script>
+  export default {
+    methods: {
+      close() {
+        this.$parent.close();
+      }
+    },
+    mounted() {
+      if (!this.$parent.$el.classList.contains('md-menu')) {
+        this.$destroy();
+
+        throw new Error('You must wrap the md-menu-content in a md-menu');
+      }
+    }
+  };
+</script>
diff --git a/src/components/mdMenu/mdMenuItem.vue b/src/components/mdMenu/mdMenuItem.vue
index 48cef02..754f3fe 100644
--- a/src/components/mdMenu/mdMenuItem.vue
+++ b/src/components/mdMenu/mdMenuItem.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="md-menu-item" v-md-ink-ripple @click="$emit('click')">
+  <div class="md-menu-item" @click="close">
     <div class="md-menu-item-content">
       <slot></slot>
     </div>
@@ -8,6 +8,18 @@
 
 <script>
   export default {
+    methods: {
+      close() {
+        this.$emit('click');
+        this.$parent.close();
+      }
+    },
+    mounted() {
+      if (!this.$parent.$el.classList.contains('md-menu-content')) {
+        this.$destroy();
 
+        throw new Error('You must wrap the md-menu-item in a md-menu-content');
+      }
+    }
   };
 </script>

From 66b9d1de835ee028ecb156f051c6570dcbd9a145 Mon Sep 17 00:00:00 2001
From: Marcos Moura <marcosvmmoura@gmail.com>
Date: Mon, 24 Oct 2016 21:37:28 -0200
Subject: [PATCH 4/5] Add close event on tab

---
 src/components/mdMenu/mdMenuContent.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/mdMenu/mdMenuContent.vue b/src/components/mdMenu/mdMenuContent.vue
index 38ceaee..fb3d375 100644
--- a/src/components/mdMenu/mdMenuContent.vue
+++ b/src/components/mdMenu/mdMenuContent.vue
@@ -1,5 +1,9 @@
 <template>
-  <div class="md-menu-content" @keydown.esc="close" tabindex="-1">
+  <div
+    class="md-menu-content"
+    @keydown.esc.prevent="close"
+    @keydown.tab.prevent="close"
+    tabindex="-1">
     <slot></slot>
   </div>
 </template>

From 6f5f21a12ca1ee44d3607ab25c557a0719b17d23 Mon Sep 17 00:00:00 2001
From: Marcos Moura <marcosvmmoura@gmail.com>
Date: Mon, 24 Oct 2016 22:04:00 -0200
Subject: [PATCH 5/5] Add keyboard shortcuts to menu

---
 src/components/mdMenu/mdMenu.scss       |  4 +++-
 src/components/mdMenu/mdMenuContent.vue | 23 +++++++++++++++++++++++
 src/components/mdMenu/mdMenuItem.vue    | 20 +++++++++++++++++++-
 3 files changed, 45 insertions(+), 2 deletions(-)

diff --git a/src/components/mdMenu/mdMenu.scss b/src/components/mdMenu/mdMenu.scss
index bad5934..d413f74 100644
--- a/src/components/mdMenu/mdMenu.scss
+++ b/src/components/mdMenu/mdMenu.scss
@@ -83,7 +83,9 @@ $menu-base-width: 56px;
   text-overflow: ellipsis;
   white-space: nowrap;
 
-  &:hover {
+  &:hover,
+  &:focus,
+  &.md-highlighted {
     background-color: rgba(#000, .12);
     transition: $swift-ease-out;
   }
diff --git a/src/components/mdMenu/mdMenuContent.vue b/src/components/mdMenu/mdMenuContent.vue
index fb3d375..20fd37a 100644
--- a/src/components/mdMenu/mdMenuContent.vue
+++ b/src/components/mdMenu/mdMenuContent.vue
@@ -3,6 +3,10 @@
     class="md-menu-content"
     @keydown.esc.prevent="close"
     @keydown.tab.prevent="close"
+    @keydown.up.prevent="highlightItem(highlighted - 1)"
+    @keydown.down.prevent="highlightItem(highlighted + 1)"
+    @keydown.enter.prevent="fireClick"
+    @keydown.space.prevent="fireClick"
     tabindex="-1">
     <slot></slot>
   </div>
@@ -10,9 +14,28 @@
 
 <script>
   export default {
+    data() {
+      return {
+        highlighted: false,
+        itemsAmount: 0
+      };
+    },
     methods: {
       close() {
+        this.highlighted = false;
         this.$parent.close();
+      },
+      highlightItem(factor) {
+        if (factor >= 1 && factor <= this.itemsAmount) {
+          this.highlighted = factor;
+        } else {
+          this.highlighted = 1;
+        }
+      },
+      fireClick() {
+        if (this.highlighted > 0) {
+          this.$children[this.highlighted - 1].$el.click();
+        }
       }
     },
     mounted() {
diff --git a/src/components/mdMenu/mdMenuItem.vue b/src/components/mdMenu/mdMenuItem.vue
index 754f3fe..da4d251 100644
--- a/src/components/mdMenu/mdMenuItem.vue
+++ b/src/components/mdMenu/mdMenuItem.vue
@@ -1,5 +1,8 @@
 <template>
-  <div class="md-menu-item" @click="close">
+  <div
+    class="md-menu-item"
+    :class="classes"
+    @click="close">
     <div class="md-menu-item-content">
       <slot></slot>
     </div>
@@ -8,6 +11,18 @@
 
 <script>
   export default {
+    data() {
+      return {
+        index: 0
+      };
+    },
+    computed: {
+      classes() {
+        return {
+          'md-highlighted': this.index === this.$parent.highlighted
+        };
+      }
+    },
     methods: {
       close() {
         this.$emit('click');
@@ -20,6 +35,9 @@
 
         throw new Error('You must wrap the md-menu-item in a md-menu-content');
       }
+
+      this.$parent.itemsAmount++;
+      this.index = this.$parent.itemsAmount;
     }
   };
 </script>