Merge pull request #37 from sorvell/master

g-component and g-panels minor changes

src/g-component.html

@@ -300,7 +300,7 @@ license that can be found in the LICENSE file.
               // filter out 'mustached' values, these are to be
               // replaced with bound-data and are not runtime
               // values themselves
-              if (value.indexOf(bindModel.mustache) >= 0) {
+              if (value.search(bindModel.mustache) >= 0) {
                 return;
               }
               // deserialize Boolean or Number values from attribute

src/g-panels.html

@@ -66,7 +66,7 @@
           var fromPanel = this.panelAtIndex(this.lastIndex), 
               toPanel = this.panelAtIndex(this.index),
               forward = Boolean(this.index > this.lastIndex);
-          if (this.canTransition() && fromPanel && toPanel) {
+          if (this.canTransition(fromPanel, toPanel, forward)) {
             this.beginTransition(fromPanel, toPanel, forward);
           } else {
             this.finishTransition(fromPanel, toPanel, forward);
@@ -144,9 +144,9 @@
       get count() {
         return this.getPanels().length;
       },
-      canTransition: function() {
+      canTransition: function(inFrom, inTo, inForward) {
-        return Boolean(this.transitionNode && 
+        return Boolean(this.transitionNode && inFrom && inTo &&
-            this.transitionNode.canTransition());
+            this.transitionNode.canTransition(inFrom, inTo, inForward));
       },
       beginTransition: function(inFrom, inTo, inForward) {
         if (this.transitionNode) {
@@ -168,7 +168,9 @@
       // 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';
+        if (inPanel) {
+          inPanel.style.display = inEnable ? null : 'none';
+        }
       },
       next: function() {
         this.index++;

src/panel-transitions/g-panel-transition.html

@@ -6,8 +6,6 @@
  */
 -->
 <element name="g-panel-transition">
-  <!-- remove blank template when polyfill issue #62 is fixed -->
-  <template></template>
   <script>
     this.component({
       prototype: {
@@ -15,29 +13,35 @@
         timeout: 1000,
         //* indicates only one panel should be displayed at a time.
         highlander: true,
-        // TODO(sorvell): promote to g-component?
         get base() {
           return this.__proto__.__proto__;
         },
         setup: function(inPanels) {
           this.panels = inPanels;
-          var showing;
           this.panels.getPanels().forEach(function(p, i) {
-            p.classList.add(this.transitionClass);
+            this.setupPanel(p, i);
-            showing = !this.highlander || (i == inPanels.index);
-            this.panels.enablePanelShowing(p, showing);
           }, this);
           this.finishListener = this.finish.bind(this);
         },
         teardown: function() {
           this.panels.getPanels().forEach(function(p, i) {
-            p.classList.remove(this.transitionClass);  
+            this.teardownPanel(p, i);
-            p.style.opacity = p.style.webkitTransform = null;
-            if (this.highlander) {
-              this.panels.enablePanelShowing(p, true);
-            };
           }, this);
         },
+        setupPanel: function(inPanel, inIndex) {
+          if (this.transitionClass) {
+            inPanel.classList.add(this.transitionClass);
+          }
+          var showing = !this.highlander || (inIndex == this.panels.index);
+          this.panels.enablePanelShowing(inPanel, showing);
+        },
+        teardownPanel: function(inPanel, inIndex) {
+          inPanel.classList.remove(this.transitionClass);  
+          inPanel.style.opacity = inPanel.style.webkitTransform = null;
+          if (this.highlander) {
+            this.panels.enablePanelShowing(inPanel, true);
+          };
+        },
         canTransition: function() {
           return true;
         },