enable paper-menu animations

adopted-ember-addons · Oct 14, 2016 · 8b78516 · 8b78516
1 parent 918ed70
commit 8b78516
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 22 deletions.
diff --git a/addon/components/paper-menu-content.js b/addon/components/paper-menu-content.js
@@ -4,7 +4,8 @@
 import Ember from 'ember';
 import ContentComponent from 'ember-basic-dropdown/components/basic-dropdown/content';
 import { nextTick } from 'ember-css-transitions/mixins/transition-mixin';
-const { $ } = Ember;
+const { $, computed, String: { htmlSafe } } = Ember;
+const MutObserver = window.MutationObserver || window.WebKitMutationObserver;
 
 function waitForAnimations(element, callback) {
   let computedStyle = window.getComputedStyle(element);
@@ -30,10 +31,60 @@ function waitForAnimations(element, callback) {
  * @extends ContentComponent
  */
 export default ContentComponent.extend({
+
+  // We need to overwrite this CP because:
+  //   1. we don't want to use the width property
+  //   2. we need additional styles
+  style: computed('top', 'left', 'right', 'transform', 'transformOrigin', function() {
+    let style = '';
+    let { top, left, right, transform, transformOrigin } = this.getProperties('top', 'left', 'right', 'transform', 'transformOrigin');
+    if (top) {
+      style += `top: ${top};`;
+    }
+    if (left) {
+      style += `left: ${left};`;
+    }
+    if (right) {
+      style += `right: ${right};`;
+    }
+    if (transform) {
+      style += `transform: ${transform};`;
+    }
+    if (transformOrigin) {
+      style += `transform-origin: ${transformOrigin};`;
+    }
+    if (style.length > 0) {
+      return htmlSafe(style);
+    }
+  }),
+
+  addGlobalEvents() {
+    window.addEventListener('scroll', this.runloopAwareReposition);
+    window.addEventListener('resize', this.runloopAwareReposition);
+    window.addEventListener('orientationchange', this.runloopAwareReposition);
+    if (MutObserver) {
+      this.mutationObserver = new MutObserver((mutations) => {
+        // e-b-d incorrectly counts ripples as a mutation, triggering a problematic repositon
+        // convert NodeList to Array
+        let addedNodes = Array.prototype.slice.call(mutations[0].addedNodes).filter((node) => !$(node).hasClass('md-ripple') && (node.nodeName !== '#comment'));
+        let removedNodes = Array.prototype.slice.call(mutations[0].removedNodes).filter((node) => !$(node).hasClass('md-ripple') && (node.nodeName !== '#comment'));
+
+        if (addedNodes.length || removedNodes.length) {
+          this.runloopAwareReposition();
+        }
+      });
+      this.mutationObserver.observe(this.dropdownElement, { childList: true, subtree: true });
+    } else {
+      this.dropdownElement.addEventListener('DOMNodeInserted', this.runloopAwareReposition, false);
+      this.dropdownElement.addEventListener('DOMNodeRemoved', this.runloopAwareReposition, false);
+    }
+  },
+
   animateIn() {
+    this.dropdownElement.style.transform = this.get('transform');
     nextTick().then(() => {
       this.set('isActive', true);
-      this.dropdownElement.style.transform = '';
+      this.set('transform', null);
     });
   },
 

diff --git a/addon/components/paper-menu.js b/addon/components/paper-menu.js
@@ -160,6 +160,11 @@ export default BasicDropdownComponent.extend({
       transformOrigin
     };
 
+    this.setProperties({
+      transform: !this.didAnimateScale ? `scale(${scaleX}, ${scaleY})` : undefined,
+      transformOrigin
+    });
+
     this.didAnimateScale = true;
 
     this.applyReposition(trigger, dropdown, { style });

diff --git a/addon/components/paper-select-content.js b/addon/components/paper-select-content.js
@@ -5,7 +5,6 @@ import PaperMenuContent from './paper-menu-content';
 import Ember from 'ember';
 
 const { run, $ } = Ember;
-const MutObserver = window.MutationObserver || window.WebKitMutationObserver;
 
 function waitForAnimations(element, callback) {
   let computedStyle = window.getComputedStyle(element);
@@ -58,24 +57,5 @@ export default PaperMenuContent.extend({
         });
       }
     });
-  },
-  addGlobalEvents() {
-    window.addEventListener('scroll', this.runloopAwareReposition);
-    window.addEventListener('resize', this.runloopAwareReposition);
-    window.addEventListener('orientationchange', this.runloopAwareReposition);
-    if (MutObserver) {
-      this.mutationObserver = new MutObserver((mutations) => {
-        // e-b-d incorrectly counts ripples as a mutation, triggering a problematic repositon
-        // convert NodeList to Array
-        let addedNodes = Array.prototype.slice.call(mutations[0].addedNodes).filter((node) => !$(node).hasClass('md-ripple') && (node.nodeName !== '#comment'));
-        if (addedNodes.length || mutations[0].removedNodes.length) {
-          this.runloopAwareReposition();
-        }
-      });
-      this.mutationObserver.observe(this.dropdownElement, { childList: true, subtree: true });
-    } else {
-      this.dropdownElement.addEventListener('DOMNodeInserted', this.runloopAwareReposition, false);
-      this.dropdownElement.addEventListener('DOMNodeRemoved', this.runloopAwareReposition, false);
-    }
   }
 });
diff --git a/app/templates/components/paper-menu.hbs b/app/templates/components/paper-menu.hbs
@@ -19,5 +19,7 @@
     left=(readonly left)
     right=(readonly right)
     width=(readonly width)
+    transform=transform
+    transformOrigin=transformOrigin
   )
 )}}