private methods

PolymerLabs · Sep 21, 2016 · 2b061c3 · 2b061c3
1 parent cd050d3
commit 2b061c3
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 30 deletions.
diff --git a/iron-animated-overlay-renderer-shared-styles.html b/iron-animated-overlay-renderer-shared-styles.html
@@ -33,6 +33,7 @@
         @apply --layout-fixed-top;
         @apply --layout-fixed-bottom;
         pointer-events: none;
+        z-index: -1;
         background-color: transparent;
         opacity: 0;
         transition: background-color .2s, opacity .2s;
@@ -46,12 +47,10 @@
 
       #overlay {
         opacity: 0;
-        transform: translateY(100px);
-        transition: opacity .2s, transform .2s;
+        transition: opacity .2s;
       }
 
       :host(.opened) #overlay {
-        transform: translateY(0);
         opacity: 1;
       }
     </style>

diff --git a/iron-animated-overlay-renderer.html b/iron-animated-overlay-renderer.html
@@ -29,6 +29,10 @@
     (function() {
       'use strict';
 
+      const _forceLayout = Symbol();
+      const _onTransitionEnd = Symbol();
+
+
       class IronAnimatedOverlayRenderer extends Polymer.IronOverlayRenderer {
         static get is() {
           return 'iron-animated-overlay-renderer';
@@ -47,32 +51,30 @@
 
         ready() {
           super.ready();
-          this.$.overlay.addEventListener('transitionend', this.__onTransitionEnd.bind(this));
+          this.$.overlay.addEventListener('transitionend', this[_onTransitionEnd].bind(this));
         }
 
         /**
          * Override this, as we need to wait for animation to complete.
          * @protected
          */
         _renderOpenedChanged() {
-          this.__forceLayout();
+          this[_forceLayout]();
           this.classList.toggle('opened', this.opened);
         }
 
         /**
          * Forces layout.
-         * @private
          */
-        __forceLayout() {
+        [_forceLayout]() {
           return this.offsetWidth;
         }
 
         /**
          * Ends the animation.
-         * @private
          */
-        __onTransitionEnd(event) {
-          if (event.composedPath()[0] === this.$.overlay) {
+        [_onTransitionEnd](event) {
+          if (event.target === this.$.overlay) {
             this._finishRenderOpenedChanged();
           }
         }

diff --git a/iron-overlay-renderer.html b/iron-overlay-renderer.html
@@ -53,6 +53,9 @@
     (function() {
       'use strict';
 
+      const _openedChanged = Symbol();
+      const _startRenderOpenedChanged = Symbol();
+
       class IronOverlayRenderer extends Polymer.Element {
 
         static get is() {
@@ -67,7 +70,7 @@
                */
               opened: {
                 type: Boolean,
-                observer: '_openedChanged'
+                observer: _openedChanged
               },
 
               /**
@@ -88,11 +91,12 @@
           this.style.display = 'none';
           // For a performant transition from open to close and close to open.
           this.__transitionRaf = null;
+          this[_startRenderOpenedChanged] = this[_startRenderOpenedChanged].bind(this);
         }
 
         connectedCallback() {
           super.connectedCallback();
-          this.opened && this._openedChanged(this.opened);
+          this.opened && this[_openedChanged](this.opened);
         }
 
         disconnectedCallback() {
@@ -103,22 +107,6 @@
           }
         }
 
-        /**
-         * @param {boolean} opened
-         * @protected
-         */
-        _openedChanged(opened) {
-          // Defer any animation-related code on attached
-          // (_openedChanged gets called again on attached).
-          if (!this.isConnected) {
-            return;
-          }
-
-          this._setTransitioning(true);
-          this.__transitionRaf && window.cancelAnimationFrame(this.__transitionRaf);
-          this.__transitionRaf = window.requestAnimationFrame(this.__startRenderOpenedChanged.bind(this));
-        }
-
         /**
          * Tasks to be performed to actually open/close. Override this to play
          * animations, and call `_finishRenderOpenedChanged()` when those are done.
@@ -139,11 +127,25 @@
           this._setTransitioning(false);
         }
 
+        /**
+         * @param {boolean} opened
+         */
+        [_openedChanged](opened) {
+          // Defer any animation-related code on attached
+          // (_openedChanged gets called again on attached).
+          if (!this.isConnected) {
+            return;
+          }
+
+          this._setTransitioning(true);
+          this.__transitionRaf && window.cancelAnimationFrame(this.__transitionRaf);
+          this.__transitionRaf = window.requestAnimationFrame(this[_startRenderOpenedChanged]);
+        }
+
         /**
          * Starts the update from open to closed & viceversa.
-         * @private
          */
-        __startRenderOpenedChanged() {
+        [_startRenderOpenedChanged]() {
           this.__transitionRaf = null;
           // Ensure it is displayed.
           if (this.opened) {