Merge pull request #47 from sorvell/master

g-overlay: simplify styling.

src/css/g-overlay.css

@@ -3,27 +3,71 @@
  * Use of this source code is governed by a BSD-style
  * license that can be found in the LICENSE file.
  */
+
+/*
+  TODO(sorvell): include a reasonable set of default overlay opening 
+  animations. What's here right now is ad hoc.
+*/
+
+ /*
+    Styling a g-overlay:
+ 
+    1. use the 'opened' class to style the overlay when it is open.
+    A transition or animation can be applied to animate the overlay into place.
+    Note: there's no need to set the display property of an overlay. That's
+    managed automatically.
+ 
+    2. To apply a different animation when the overlay closes, use the 
+    'closing' class.
+ */
 
-@host {
+ @host {
   position: fixed;
   z-index: 10;
   outline: none;
   display: none;
+  opacity: 0.99;
+  -webkit-transition: opacity 0.01s;
 }
-    
+
 /*
-  TODO(sorvell): include a reasonable set of default overlay opening 
-  animations. What's here right now is ad hoc.
+  The revealed class exists because it's necessary to 'show' a node
+  before applying a transition. When an overlay is opened, it is 
+  immediately revealed (display: block) and then asynchronously the 
+  opened or closing classes are added.
+
+  Because we don't want to actually show the node before a transition
+  or animation is applied, when the node is 
+  revealed, it is made display: block but visibility: hidden.
+  It is then made visibility: visible when it is opened.
 */
-@host.opened {
+
+@host.revealed {
   display: block;
+  visibility: hidden;
 }
 
-/*
-  transitions must be revealed before transition is applied
-*/
-@host.g-overlay-fade.revealed {
+@host.revealed.opened {
+  opacity: 1;
+  display: block;
+  visibility: visible;
+}
+
+@host.revealed.closing {
   display: block;
+  visibility: visible;
+}
+
+/* 
+  When an animation is detected (via an animationstart event) this class
+  is applied to remove any transition. This ensures only 1 animation end event
+  will be processed.
+  
+  NOTE: if a rule such as a media query changes an overlay from using a css 
+  animation to a transition, the animation class must be altered or removed.
+*/
+@host.animation {
+  -webkit-transition: none;
 }
 
 @host.g-overlay-fade {
@@ -35,55 +79,44 @@
   opacity: 1;
 }
 
-@host.g-overlay-scale-slideup.revealed {
-  display: block;
-}
-
 @host.g-overlay-scale-slideup {
   opacity: 0.0;
   -webkit-transform: scale(1.05);
-  -webkit-transition: all 0.218s;
 }
 
 @host.g-overlay-scale-slideup.opened {
   opacity: 1.0;
   -webkit-transform: scale(1.0);
+  -webkit-transition: all 0.218s;
 }
 
-@host.g-overlay-scale-slideup.animating:not(.opened) {
+@host.g-overlay-scale-slideup.closing {
   opacity: 0;
   -webkit-transform: translateY(-100%);
-  -webkit-transition: all 1s;
+  -webkit-transition: all 0.4s;
 }
 
 @-webkit-keyframes g-overlay-shakeFadeIn {
   0% {
-    display: block;
     opacity: 0;
     -webkit-transform: translateX(0);
   }
   10% {
-    display: block;
     -webkit-transform: translateX(-50px);
   }
   30% {
-    display: block;
     -webkit-transform: translateX(50px);
   }
   50% {
-    display: block;
     -webkit-transform: translateX(-25px);
   }
   70% {
-    display: block;
     -webkit-transform: translateX(25px);
   }
   90% {
-    display: block;
     -webkit-transform: translateX(-13px);
   }
   100% {
-    display: block;
     -webkit-transform: translateX(0);
     opacity: 1;
   }
@@ -107,15 +140,13 @@
 }
 
 @host.g-overlay-shake.opened {
-  display: block;
   -webkit-animation-duration: 0.5s;
   -webkit-animation-fill-mode: both;
   -webkit-animation-name: g-overlay-shakeFadeIn;
 }
 
-@host.g-overlay-shake.animating:not(.opened) {
-  display: block;
-  -webkit-animation-duration: 0.3s;
+@host.g-overlay-shake.closing {
+  -webkit-animation-duration: 0.5s;
   -webkit-animation-fill-mode: both;
   -webkit-animation-name: g-overlay-shakeFadeOut;
 }

src/g-overlay.html

@@ -7,8 +7,9 @@
 -->
 <element name="g-overlay" attributes="opened" 
          handlers="click: clickHandler, keydown: keydownHandler,
-         webkitAnimationEnd: openedStylingAnimationEnd, 
-         webkitTransitionEnd: openedStylingAnimationEnd">
+         webkitAnimationStart: openedAnimationStart, 
+         webkitAnimationEnd: openedAnimationEnd, 
+         webkitTransitionEnd: openedAnimationEnd">
 <link rel="components" href="g-component.html">
 <link rel="stylesheet" href="css/g-overlay.css">
 <template>
@@ -63,7 +64,7 @@
    * The overlay component is hidden by default and can be opened to display
    * its content. It's common to animate an overlay opened and closed. This 
    * can be achieved by styling the overlay node via the `opened` and
-   * `animating` attributes.
+   * `animating` classes.
   */
   this.component({
     publish: {
@@ -82,7 +83,6 @@
     openedChanged: function() {
       this.renderOpened();
       trackOverlays(this);
-      this.asyncMethod('applyFocus');
       this.fireEvent('opened', this.opened);
     },
     getFocusNode: function() {
@@ -100,18 +100,24 @@
       }
     },
     renderOpened: function() {
+      this.node.classList.remove('closing');
       this.node.classList.add('revealed');
       // continue styling after delay so display state can change without
       // aborting transitions
       this.asyncMethod('continueRenderOpened');
     },
     continueRenderOpened: function() {
       this.node.classList.toggle('opened', this.opened);
-      this.node.classList.add('animating');
+      this.node.classList.toggle('closing', !this.opened);
     },
-    openedStylingAnimationEnd: function() {
-      this.node.classList.remove('animating');
+    openedAnimationEnd: function(e) {
+      this.node.classList.remove('closing');
       this.node.classList.toggle('revealed', this.opened);
+      this.applyFocus();
+      e.stopPropagation();
+    },
+    openedAnimationStart: function(e) {
+      this.node.classList.add('animation');
     },
     clickHandler: function(e) {
       if (e.target && e.target.hasAttribute('overlay-toggle')) {