Merge pull request #33 from sorvell/master

g-component attribute parsing fix; g-panels & g-overlay & g-ajax minor fixes

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/css/g-panels.css

@@ -3,14 +3,14 @@
  * Use of this source code is governed by a BSD-style
  * license that can be found in the LICENSE file.
  */
-@host {
+@host, g-panels {
   display: block;
   position: relative;
   outline: none;
   overflow: hidden;
 }
 
-@host > * {
+@host > *, g-panels > * {
   position: absolute;
   top: 0;
   left: 0;
@@ -21,11 +21,11 @@
 /* TODO(sorvell): note: this is a workaround for reference combinators 
 approach defined in shadowDom spec */
 /* TODO(sorvell): expose animation timing via css variable */
-@host > .transition {
+@host > .transition, g-panels > .transition {
   -webkit-transition: all 0.5s ease-in-out;
 }
 
-@host > .animate {
+@host > .animate, g-panels > .animate {
   -webkit-animation-duration: 0.5s;
   -webkit-animation-fill-mode: both;
 }
@@ -39,12 +39,17 @@ approach defined in shadowDom spec */
 */
 
 /* fade */
-@host.g-panels-fade > .panels-ascending-from,
-@host.g-panels-fade > .panels-descending-from {
+@host > .panels-ascending-from,
+@host > .panels-descending-from,
+g-panels > .panels-ascending-from,
+g-panels > .panels-descending-from,
+{
   -webkit-animation-name: g-panels-fadeOut;
 }
-@host.g-panels-fade > .panels-ascending-to,
-@host.g-panels-fade > .panels-descending-to {
+@host > .panels-ascending-to,
+@host > .panels-descending-to,
+g-panels > .panels-ascending-to,
+g-panels > .panels-descending-to {
   -webkit-animation-name: g-panels-fadeIn;
 }
 
@@ -62,6 +67,19 @@ approach defined in shadowDom spec */
   -webkit-animation-name: g-panels-slideFromLeft;
 }
 
+g-panels.g-panels-hslide > .panels-ascending-from {
+  -webkit-animation-name: g-panels-slideLeft;
+}
+g-panels.g-panels-hslide > .panels-ascending-to {
+  -webkit-animation-name: g-panels-slideFromRight;
+}
+g-panels.g-panels-hslide > .panels-descending-from {
+  -webkit-animation-name: g-panels-slideRight;
+}
+g-panels.g-panels-hslide > .panels-descending-to {
+  -webkit-animation-name: g-panels-slideFromLeft;
+}
+
 /* vslide */
 @host.g-panels-vslide > .panels-ascending-from {
   -webkit-animation-name: g-panels-slideTop;
@@ -77,6 +95,10 @@ approach defined in shadowDom spec */
 }
 
 /* hslideover */
+@host.g-panels-hslideover > .panels-ascending-from,
+@host.g-panels-hslideover > .panels-descending-from {
+  -webkit-animation-name: none;
+}
 @host.g-panels-hslideover > .panels-ascending-to {
   -webkit-animation-name: g-panels-slideFromRight;
 }
@@ -85,6 +107,10 @@ approach defined in shadowDom spec */
 }
 
 /* vslideover */
+@host.g-panels-vslideover > .panels-ascending-from,
+@host.g-panels-vslideover > .panels-descending-from {
+  -webkit-animation-name: none;
+}
 @host.g-panels-vslideover > .panels-ascending-to {
   -webkit-animation-name: g-panels-slideFromBottom;
 }

src/g-ajax.html

@@ -5,7 +5,7 @@
  * license that can be found in the LICENSE file.
  */
 -->
-<element name="g-ajax" attributes="url, handleAs, params">
+<element name="g-ajax" attributes="url, handleAs, auto, params">
   <link rel="components" href="g-component.html">
   <link rel="components" href="g-xhr.html">
   <template>
@@ -14,11 +14,6 @@
   </template>
   <script>
     this.component({
-      created: function(inSuper) {
-        if (this.getAttribute('autogo')) {
-          this.go();
-        }
-      },
       prototype: {
         /**
          * Performs an Ajax request to the url specified.
@@ -73,6 +68,11 @@
           } catch (x) {
             return r;
           }
+        },
+        paramsChanged: function() {
+          if (this.auto) {
+            this.go();
+          }
         }
       }
     });

src/g-component.html

@@ -282,8 +282,7 @@
           case "\\false":
             return "false";
           }
-          var n = parseFloat(inValue);
-          return isNaN(n) ? inValue : n;
+          return isNaN(inValue) ? inValue : parseFloat(inValue);
       };
 
       // propagate initial bound-attribute values into properties
@@ -301,7 +300,6 @@
                 changed.push({name: a, old: this[a]});
                 this[a] = value;
               }
-              this[a] = deserializeValue(value);
             }
           }, this);
         } finally {

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;
         }
       }