g-overlay: style via classes, not attributes + minor tweaks

src/css/g-overlay.css

@@ -19,7 +19,7 @@
   -webkit-transition: all 0.218s;
 }
 
-@host.g-overlay-fade[opened] {
+@host.g-overlay-fade.opened {
   opacity: 1;
 }
 
@@ -29,12 +29,12 @@
   -webkit-transition: all 0.218s;
 }
 
-@host.g-overlay-scale-slideup[opened] {
+@host.g-overlay-scale-slideup.opened {
   opacity: 1.0;
   -webkit-transform: scale(1.0);
 }
 
-@host.g-overlay-scale-slideup:not([opened])[animating] {
+@host.g-overlay-scale-slideup.animating:not(.opened) {
   opacity: 0;
   -webkit-transform: translateY(-100%);
   -webkit-transition: all 1s;
@@ -90,13 +90,13 @@
   }
 }
 
-@host.g-overlay-shake[opened] {
+@host.g-overlay-shake.opened {
   -webkit-animation-duration: 0.5s;
   -webkit-animation-fill-mode: both;
   -webkit-animation-name: g-overlay-shakeFadeIn;
 }
 
-@host.g-overlay-shake:not([opened])[animating] {
+@host.g-overlay-shake.animating:not(.opened) {
   -webkit-animation-duration: 0.3s;
   -webkit-animation-fill-mode: both;
   -webkit-animation-name: g-overlay-shakeFadeOut;

src/g-overlay.html

@@ -14,17 +14,7 @@
 	<content></content>
 </template>
 <script>
-  // TODO(sorvell): promote this if it becomes a pattern
-  var setBooleanAttribute = function(inNode, inName, inValue) {
-    inNode[inValue ? 'setAttribute' : 'removeAttribute'](inName, '');
-  };
-  
-  // TODO(sorvell): is there a more new-fangled way to do this?
-  var makeFocusable = function(inNode) {
-    if (!inNode.hasAttribute('tabIndex')) {
-      inNode.setAttribute('tabIndex', -1);
-    }
-  }
+  var ESCAPE_KEY = 27;
   
   /**
    * The overlay component is hidden by default and can be opened to display
@@ -37,7 +27,11 @@
       this.hidden = true;
     },
     created: function() {
-      makeFocusable(this);
+      // make focusable; note that default tabIndex == -1 but node is 
+      // only focusable if tabIndex attr is set.
+      if (this.tabIndex < 0) {
+        this.tabIndex = -1;
+      }
     },
     prototype: {
       //* Timeout (ms) for animation. After timeout, any opening animation will 
@@ -55,16 +49,17 @@
       startAnimation: function() {
         this.cancelAnimation();
         this.hidden = false;
-        webkitRequestAnimationFrame(function() {
-          setBooleanAttribute(this, 'opened', this.opened);
-          setBooleanAttribute(this, 'animating', true);
-          this._animating = setTimeout(this.finishAnimate.bind(this), this.timeout);
-        }.bind(this));
+        this._animating = setTimeout(this.finishAnimate.bind(this), this.timeout);
+        this.asyncMethod('styleAnimationStart');
+      },
+      styleAnimationStart: function() {
+        this.classList.toggle('opened', this.opened);
+        this.classList.add('animating');
       },
       finishAnimate: function() {
         if (this._animating) {
           this.cancelAnimation();
-          setBooleanAttribute(this, 'animating', false);
+          this.classList.remove('animating');
           if (!this.opened) {
             this.hidden = true;
           }
@@ -86,7 +81,7 @@
         }
       },
       keydownHandler: function(e) {
-        if (e.keyCode == 27) {
+        if (e.keyCode == ESCAPE_KEY) {
           this.opened = false;
         }
       }