From 82ca3680503b82a56b505c35a62fa7c132c9ce83 Mon Sep 17 00:00:00 2001
From: Steve Orvell <steve@orvellia.com>
Date: Mon, 5 Nov 2012 12:44:46 -0800
Subject: [PATCH 1/7] g-ajax: auto go attribute now indicates results should be
 fetched whenever params change.

---
 src/g-ajax.html | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/g-ajax.html b/src/g-ajax.html
index 274c21ad4a..715ffa69b9 100644
--- a/src/g-ajax.html
+++ b/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, autogo, 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.autogo) {
+            this.go();
+          }
         }
       }
     });

From 0aa3ee4fb1cf92a46a81a414730fac457a9601f6 Mon Sep 17 00:00:00 2001
From: Steve Orvell <steve@orvellia.com>
Date: Mon, 5 Nov 2012 12:47:45 -0800
Subject: [PATCH 2/7] g-overlay: style via classes, not attributes + minor
 tweaks

---
 src/css/g-overlay.css | 10 +++++-----
 src/g-overlay.html    | 33 ++++++++++++++-------------------
 2 files changed, 19 insertions(+), 24 deletions(-)

diff --git a/src/css/g-overlay.css b/src/css/g-overlay.css
index f9d30cf139..81323cb3ac 100644
--- a/src/css/g-overlay.css
+++ b/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;
diff --git a/src/g-overlay.html b/src/g-overlay.html
index c62cd916bb..f54018d269 100644
--- a/src/g-overlay.html
+++ b/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;
         }
       }

From a46b52c5020e55fb31b7a81de41ac0e3bb1888f0 Mon Sep 17 00:00:00 2001
From: Steve Orvell <steve@orvellia.com>
Date: Mon, 5 Nov 2012 12:49:01 -0800
Subject: [PATCH 3/7] Fixed a bug with attribute parsing that caused a value of
 '8foo' to become that number 8.

---
 src/g-component.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/g-component.html b/src/g-component.html
index 6744258673..b24e8eee56 100644
--- a/src/g-component.html
+++ b/src/g-component.html
@@ -283,7 +283,7 @@
             return "false";
           }
           var n = parseFloat(inValue);
-          return isNaN(n) ? inValue : n;
+          return n == inValue ? n : inValue;
       };
 
       // propagate initial bound-attribute values into properties

From c5083d54537eae44316c3947a0115f3972243a51 Mon Sep 17 00:00:00 2001
From: Steve Orvell <steve@orvellia.com>
Date: Mon, 5 Nov 2012 12:54:20 -0800
Subject: [PATCH 4/7] g-panels: small fixes - selected panel moniker is now id
 or name - don't rely on hidden attribute to show/hide (it's overridden by
 display) - canTransition() now indirected to transitionNode - flow transition
 aborts layout if panels are hidden.

---
 src/css/g-panels.css                          | 42 ++++++++++---
 src/g-panels.html                             | 63 ++++++++++++++-----
 .../g-flow-panel-transition.html              | 22 +++++--
 src/panel-transitions/g-panel-transition.html | 18 ++++--
 4 files changed, 111 insertions(+), 34 deletions(-)

diff --git a/src/css/g-panels.css b/src/css/g-panels.css
index b32b2d9c93..aea168ced7 100644
--- a/src/css/g-panels.css
+++ b/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;
 }
diff --git a/src/g-panels.html b/src/g-panels.html
index 92fb8a6ac1..25fb51d3b9 100644
--- a/src/g-panels.html
+++ b/src/g-panels.html
@@ -26,18 +26,29 @@
   }
   
   // TODO(sorvell): need key table
-  var KEY_RIGHT_ARROW = 39;
-  var KEY_LEFT_ARROW = 37;
+  var RIGHT_ARROW_KEY = 39;
+  var LEFT_ARROW_KEY = 37;
   
   this.component({
     created: function() {
+      // ensure default transition
+      if (!this.transition) {
+        this.transition = this.defaultTransition;
+        if (this.index != null) {
+          this.indexChanged();
+        }
+      }
+      // make focusable; note that default tabIndex == -1 but node is 
+      // only focusable if tabIndex attr is set.
+      if (this.tabIndex < 0) {
+        this.tabIndex = -1;
+      }
       this.initPanels();
       if (!this.index) {
         this.index = 0;
       }
     },
     prototype: {
-      tabIndex: -1,
       defaultTransition: 'keyframe',
       initPanels: function() {
         this.getPanels().forEach(function(p, i) {
@@ -62,20 +73,24 @@
           } else {
             this.finishTransition(fromPanel, toPanel, forward);
           }
+          // TODO(sorvell): replace with getter/setter for selected when
+          // g-component does not override these on instances.
+          this.selected = this.getSelectedValue();
         }
       },
       clampIndex: function(inIndex) {
         return Math.max(0, Math.min(this.count-1, inIndex));
       },
-      // selected is a virtual property so override getter
-      get selected() {
+      getSelectedValue: function() {
         var selected = this.getSelectedPanel();
-        var name = selected && selected.getAttribute('name');
+        var name = selected && (selected.getAttribute('id') || 
+            selected.getAttribute('name'));
         return name || this.index;
       },
       // selected is the name property of the panel to select
       selectedChanged: function(inOldValue) {
-        var index = this.indexOfName(this.selected);
+        var index = this.indexOfPropValue('id', this.selected);
+        index = index >= 0 ? index : this.indexOfPropValue('name', this.selected);
         if (index >= 0) {
           this.index = index;
         }
@@ -95,23 +110,23 @@
             this.makeTransitionNode(this.defaultTransition);
       },
       tagNameForTransition: function(inName) {
-        return "g-" + inName + (inName ? "-" : "") + "panel-transition";
+        return 'g-' + inName + (inName ? '-' : '') + 'panel-transition';
       },
       // TODO: consider selecting something more specific so we don't need to
       // filter out style/templates children.
       getPanels: function() {
         var n$ = this.$.content.getDistributedNodes();
         return Array.prototype.filter.call(n$, function(c) {
-          return c.tagName != "STYLE" && c.tagName != "TEMPLATE";
+          return c.tagName != 'STYLE' && c.tagName != 'TEMPLATE';
         });
       },
       getSelectedPanel: function() {
         return this.getPanels()[this.index];
       },
-      indexOfName: function(inName) {
+      indexOfPropValue: function(inProp, inValue) {
         var c$ = this.getPanels();
         for (var i=0, c; c=c$[i]; i++) {
-          if (c.getAttribute("name") == inName) {
+          if (c.getAttribute(inProp) == inValue) {
             return i;
           }
         }
@@ -130,43 +145,57 @@
         return this.getPanels().length;
       },
       canTransition: function() {
-        return Boolean(this.transitionNode);
+        return Boolean(this.transitionNode && 
+            this.transitionNode.canTransition());
       },
       beginTransition: function(inFrom, inTo, inForward) {
         if (this.transitionNode) {
           this.transitionNode.stop();
         }
         webkitRequestAnimationFrame(function() {
-          inFrom.hidden = false;
-          inTo.hidden = false;
+          this.enablePanelShowing(inFrom, true);
+          this.enablePanelShowing(inTo, true);
           this.transitionNode.go(inFrom, inTo, inForward);
         }.bind(this));
       },
       finishTransition: function() {
         if (this.transitionNode && this.transitionNode.highlander) {
           this.getPanels().forEach(function(p, i) {
-            p.hidden = (i != this.index);
+            this.enablePanelShowing(p, i == this.index);
           }, this);
         }
       },
+      // note: cannot use hidden attr for this since it's trumped by display
+      // setting e.g. hidden + display: -webkit-flex == showing.
+      enablePanelShowing: function(inPanel, inEnable) {
+        inPanel.style.display = inEnable ? null : 'none';
+      },
       next: function() {
         this.index++;
       },
       previous: function() {
         this.index--;
       },
+      toggleBetween: function(inA, inB) {
+        this.selected = this.selected == inA ? inB : inA;
+      },
       keydownHandler: function(e) {
         if (!documentIsEditing()) {
           var beforeIndex = this.index;
-          if (e.keyCode == KEY_RIGHT_ARROW) {
+          if (e.keyCode == RIGHT_ARROW_KEY) {
             this.next();
-          } else if (e.keyCode == KEY_LEFT_ARROW) {
+          } else if (e.keyCode == LEFT_ARROW_KEY) {
             this.previous();
           }
           if (beforeIndex != this.index) {
             e.stopPropagation();
           }
         }
+      },
+      refresh: function() {
+        if (this.transitionNode && this.transitionNode.canTransition()) {
+          this.transitionNode.refresh();
+        }
       }
     }
   });
diff --git a/src/panel-transitions/g-flow-panel-transition.html b/src/panel-transitions/g-flow-panel-transition.html
index e0d9d2dd8c..f23d26d5fc 100644
--- a/src/panel-transitions/g-flow-panel-transition.html
+++ b/src/panel-transitions/g-flow-panel-transition.html
@@ -8,13 +8,13 @@
 <element name="g-flow-panel-transition" extends="g-panel-transition">
   <template>
     <style scoped>
-      x-flowpanels > .right {
+      g-panels[transition='flow'] > .right {
         left: auto;
         right: 0;
       }
 
       @media screen and (max-width: 800px) {
-        x-flowpanels > * {
+        g-panels[transition='flow'] > * {
           width: 100% !important;
           -webkit-box-shadow: none !important;
         }
@@ -22,6 +22,11 @@
     </style>
   </template>
   <script>
+    
+    var isNodeHidden = function(inNode) {
+      return (inNode.offsetWidth) == 0 && (inNode.offsetHeight == 0);
+    }
+    
     this.component({
       shadowRootCreated: function(inRoot) {
         this.sheet = inRoot.querySelector("style");
@@ -33,6 +38,9 @@
           this.base.setup.call(this, inPanels);
           this.listenForMediaMatch();
           this.panels.appendChild(this.sheet);
+          // TODO(sorvell): hack, must fix better
+          // async refresh in case we need to wait for stylesheet to load
+          this.asyncMethod('refresh');
         },
         teardown: function() {
           this.base.teardown.call(this);
@@ -40,7 +48,6 @@
         },
         listenForMediaMatch: function() {
           var mq = window.matchMedia(this.narrowMedia);
-          this.narrowLayout = mq.matches;
           mq.addListener(this.layoutChange.bind(this));
           this.layoutChange(mq);
         },
@@ -53,9 +60,16 @@
             p.style.webkitTransition = inEnable ? null : 'none';
           });
         },
+        canTransition: function() {
+          var hidden = isNodeHidden(this.panels);
+          return !hidden;
+        },
         refresh: function() {
           this.enableTransitions(false);
-          this.go(null, this.panels.getSelectedPanel());
+          this.to = this.panels.getSelectedPanel();
+          if (this.canTransition()) {
+            this.begin();
+          }
           webkitRequestAnimationFrame(function() {
             this.enableTransitions(true);
           }.bind(this));
diff --git a/src/panel-transitions/g-panel-transition.html b/src/panel-transitions/g-panel-transition.html
index 8840e73ae5..c12810a2c5 100644
--- a/src/panel-transitions/g-panel-transition.html
+++ b/src/panel-transitions/g-panel-transition.html
@@ -21,9 +21,11 @@
         },
         setup: function(inPanels) {
           this.panels = inPanels;
-          inPanels.getPanels().forEach(function(p, i) {
+          var showing;
+          this.panels.getPanels().forEach(function(p, i) {
             p.classList.add(this.transitionClass);
-            p.hidden = this.highlander && (i != inPanels.index);
+            showing = !this.highlander || (i == inPanels.index);
+            this.panels.enablePanelShowing(p, showing);
           }, this);
           this.finishListener = this.finish.bind(this);
         },
@@ -32,10 +34,13 @@
             p.classList.remove(this.transitionClass);  
             p.style.opacity = p.style.webkitTransform = null;
             if (this.highlander) {
-              p.hidden = false;
+              this.panels.enablePanelShowing(p, true);
             };
           }, this);
         },
+        canTransition: function() {
+          return true;
+        },
         go: function(inFrom, inTo, inForward) {
           this.from = inFrom;
           this.to = inTo;
@@ -46,9 +51,9 @@
         finish: function() {
           if (this._transitioning) {
             this.complete(); 
+            this.cancel();
+            this.panels.finishTransition();
           }
-          this.cancel();
-          this.panels.finishTransition();
         },
         cancel: function() {
           clearTimeout(this._transitioning);
@@ -61,6 +66,9 @@
         begin: function() {
         },
         complete: function() {
+        },
+        // refresh the transition state
+        refresh: function() {
         }
       }
     });

From 53be1be4823a6f2f75350ffb720c4b3c961fe23f Mon Sep 17 00:00:00 2001
From: Steve Orvell <steve@orvellia.com>
Date: Mon, 5 Nov 2012 15:25:13 -0800
Subject: [PATCH 5/7] g-component: simplified fix for properly converting
 string number values to numbers.

---
 src/g-component.html | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/g-component.html b/src/g-component.html
index b24e8eee56..6d5147a0de 100644
--- a/src/g-component.html
+++ b/src/g-component.html
@@ -282,8 +282,7 @@
           case "\\false":
             return "false";
           }
-          var n = parseFloat(inValue);
-          return n == inValue ? n : inValue;
+          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 {

From 811bb7ad3082c5b4083669f50abb0e89bf212b02 Mon Sep 17 00:00:00 2001
From: Steve Orvell <steve@orvellia.com>
Date: Mon, 5 Nov 2012 15:25:40 -0800
Subject: [PATCH 6/7] g-ajax: changed 'autogo' to 'auto'.

---
 src/g-ajax.html     | 4 ++--
 workbench/ajax.html | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/g-ajax.html b/src/g-ajax.html
index 715ffa69b9..a02a72d9d3 100644
--- a/src/g-ajax.html
+++ b/src/g-ajax.html
@@ -5,7 +5,7 @@
  * license that can be found in the LICENSE file.
  */
 -->
-<element name="g-ajax" attributes="url, handleAs, autogo, 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>
@@ -70,7 +70,7 @@
           }
         },
         paramsChanged: function() {
-          if (this.autogo) {
+          if (this.auto) {
             this.go();
           }
         }
diff --git a/workbench/ajax.html b/workbench/ajax.html
index 57df81a763..8fc7337fcd 100644
--- a/workbench/ajax.html
+++ b/workbench/ajax.html
@@ -11,7 +11,7 @@
   <link rel="components" href="../../toolkit/src/g-ajax.html">
 </head>
 <body>
-  <g-ajax autogo="true" url="http://gdata.youtube.com/feeds/api/videos/"
+  <g-ajax auto url="http://gdata.youtube.com/feeds/api/videos/"
           handleAs="json"	params='{"alt":"json", "q":"chrome"}'>
     <div>
       <template iterate="response.feed.entry">

From fca5deafc1a01e32e3133ee4b6899d12c1452061 Mon Sep 17 00:00:00 2001
From: Steve Orvell <steve@orvellia.com>
Date: Mon, 5 Nov 2012 15:26:26 -0800
Subject: [PATCH 7/7] g-panels: fixed bug that caused setting a bad index to
 abort a transition.

---
 src/g-panels.html | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/g-panels.html b/src/g-panels.html
index 25fb51d3b9..582e6056d2 100644
--- a/src/g-panels.html
+++ b/src/g-panels.html
@@ -58,13 +58,11 @@
       initPanel: function() {},
       indexChanged: function(inOldValue) {
         var i = this.clampIndex(this.index);
-        var old = this.clampIndex(inOldValue);
         if (i != this.index) {
           this.index = i;
           return;
         }
-        if (this.index != old) {
-          this.lastIndex = old;
+        if (this.index != this.lastIndex) {
           var fromPanel = this.panelAtIndex(this.lastIndex), 
               toPanel = this.panelAtIndex(this.index),
               forward = Boolean(this.index > this.lastIndex);
@@ -73,13 +71,15 @@
           } else {
             this.finishTransition(fromPanel, toPanel, forward);
           }
+          this.lastIndex = this.index;
           // TODO(sorvell): replace with getter/setter for selected when
           // g-component does not override these on instances.
           this.selected = this.getSelectedValue();
         }
       },
       clampIndex: function(inIndex) {
-        return Math.max(0, Math.min(this.count-1, inIndex));
+        var i = isNaN(inIndex) ? 0 : inIndex;
+        return Math.max(0, Math.min(this.count-1, i));
       },
       getSelectedValue: function() {
         var selected = this.getSelectedPanel();