fix back action

- add back action (fix #9)
- fire event stepper-completed
- reset "selected" old value if the new one isn't valid

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "paper-stepper",
-  "version": "2.0-beta",
+  "version": "2.0-beta.1",
   "authors": [
     "Zecat <jullienfelix@gmail.com>"
   ],

demo/index.html

@@ -27,7 +27,7 @@
 
   <style is="custom-style" include="demo-pages-shared-styles">
     .vertical-stepper-wrapper {
-      max-width: 600px;
+      max-width: 700px;
       margin: auto;
     }
     .horizontal-stepper-wrapper {

paper-horizontal-step.html

@@ -10,6 +10,11 @@
 <link rel="import" href="paper-step-behavior.html">
 <link rel="import" href="paper-step-shared-styles.html">
 
+<!--
+@element paper-horizontal-step
+@demo demo/index.html
+@hero hero.svg
+-->
 <dom-module id="paper-horizontal-step">
   <template>
     <style include="paper-step-shared-styles">

paper-horizontal-stepper.html

@@ -82,7 +82,7 @@
       <content></content>
     </neon-animated-pages>
     <div id="buttonsWrapper">
-      <paper-button disabled on-tap="back">[[backText]]</paper-button>
+      <paper-button disabled=[[!_hasBackStep]] on-tap="back">[[backText]]</paper-button>
       <span class="layout-flex"></span>
       <paper-button disabled="[[completed]]" on-tap="progress">[[skipText]]</paper-button>
       <paper-button disabled="[[completed]]" id="continueButton" on-tap="continue">[[continueText]]</paper-button>
@@ -103,7 +103,7 @@
           reflectToAttribute: true
         },
         selected: {
-          observer: '_selectedChange'
+          observer: '_chooseAnimationDirection'
         }
       },
 
@@ -124,7 +124,7 @@
         }.bind(this));
       },
 
-      _selectedChange: function(newValue, oldValue) {
+      _chooseAnimationDirection: function(newValue, oldValue) {
         if (newValue > oldValue) {
           this.$.slideshow.entryAnimation = 'slide-from-right-animation';
           this.$.slideshow.exitAnimation = 'slide-left-animation';

paper-step-behavior.html

@@ -3,7 +3,9 @@
 <script>
 
   window.Zecat = window.Zecat || {};
-
+  /*
+@polymerBehavior Zecat.PaperStepBehavior
+*/
   Zecat.PaperStepBehavior = {
       properties: {
          completed: {

paper-step.html

@@ -2,8 +2,6 @@
 <link rel="import" href="../polymer/polymer.html">
 
 <!--
-
-@group Seed Elements
 @element paper-step
 @demo demo/index.html
 @hero hero.svg

paper-stepper-behavior.html

@@ -3,16 +3,24 @@
 <script>
 
   window.Zecat = window.Zecat || {};
-
+  /*
+@polymerBehavior Zecat.PaperStepperBehavior
+*/
   Zecat.PaperStepperBehavior = {
 
     listeners: {
       'continue-step': '_continueStep',
       'skip-step': 'progress',
+      'back-step': 'back',
       'progress': '_updatePreviousCompleted'
     },
 
     properties: {
+      /**
+       * Fired when all steps are completed.
+       *
+       * @event stepper-completed
+       */
       backText: {
         type: String,
         value: 'BACK'
@@ -27,7 +35,8 @@
       },
       selected: {
         type: Number,
-        value: 0
+        value: 0,
+        observer: '_selectedChange'
       },
       linear: {
         type: Boolean,
@@ -45,6 +54,14 @@
         value: false,
         readOnly: true,
         observer: '_completedChange'
+      },
+      _backStepIndex: {
+        type: Number,
+        computed: '_compute_backStepIndex(selected)'
+      },
+      _hasBackStep: {
+        type: Boolean,
+        computed: '_compute_hasBackStep(_backStepIndex)'
       }
     },
 
@@ -84,7 +101,7 @@
       var selectedIndex = selector.selected;
       var items = selector.items;
       var length = items.length;
-      if (selectedIndex < 0 || selectedIndex > length - 1) {
+      if (selectedIndex == null || selectedIndex > length - 1) {
         selectedIndex = 0;
       }
       for (var i=(selectedIndex+1)%length; i!=selectedIndex; i=(i+1)%length) {
@@ -95,14 +112,49 @@
       }
       return false;
     },
-
+    /**
+     * Select a step from index if it is selectable. Return true if the step has been selected.
+     */
+    selectStep: function(index) {
+      this.selected = index;
+      return this.selected == index;
+    },
+    /**
+     * Select the previous selectable step if it exist. Return true if the step has been selected.
+     */
+    back: function() {
+      if (this._hasBackStep) {
+        this.selected = this._backStepIndex;
+        return true;
+      } else {
+        return false;
+      }
+    },
     _completedChange: function(completed) {
       if (completed) {
-        //maybe use null instead
-        this.$.stepSelector.selected = -1;
+        this.$.stepSelector.selected = null;
+        this.fire('completed');
+      }
+    },
+    _compute_backStepIndex: function(selected) {
+      for (i=selected - 1; i >= 0; i--) {
+        console.log(i);
+        if (this.$.stepSelector.items[i] && this.$.stepSelector.items[i].selectable) {
+          return i;
+        }
+      }
+      return null;
+    },
+    _compute_hasBackStep: function(_backStepIndex) {
+      return _backStepIndex != null;
+    },
+    /* Reset the old value if the step isn't selectable*/
+    _selectedChange: function(newValue, oldValue) {
+      if (newValue != null && this.$.stepSelector.items.length
+        && !( (step = this.$.stepSelector.items[newValue]) && step.selectable) ) {
+        this.selected = oldValue;
       }
     }
-
   };
 
 

paper-stepper.html

@@ -11,7 +11,6 @@
 <link rel="import" href="paper-horizontal-stepper.html">
 
 <!--
-@group Seed Elements
 @element paper-stepper
 @demo demo/index.html
 @hero hero.svg

paper-vertical-step.html

@@ -16,7 +16,6 @@
 <link rel="import" href="paper-step-shared-styles.html">
 
 <!--
-@group Seed Elements
 @element paper-vertical-step
 @demo demo/index.html
 @hero hero.svg

paper-vertical-stepper.html

@@ -5,7 +5,6 @@
 <link rel="import" href="paper-vertical-step.html">
 
 <!--
-@group Seed Elements
 @element paper-vertical-stepper
 @demo demo/index.html
 @hero hero.svg