From 7fed76214d56f4e7ebbe068ea516f86bbb7605c8 Mon Sep 17 00:00:00 2001
From: Marcos Moura <marcosvmmoura@gmail.com>
Date: Mon, 24 Oct 2016 21:26:07 -0200
Subject: [PATCH] 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();