hide progress param and finish method

VeryWow · May 25, 2017 · 950eec0 · 950eec0
1 parent 8ee4cad
commit 950eec0
Show file tree

Hide file tree

Showing 6 changed files with 153 additions and 35 deletions.
diff --git a/classes/Step.js b/classes/Step.js
@@ -6,6 +6,7 @@ export class Step {
     this.methods = params.methods || {}
     this.template = params.template || ''
     this.ignore_progress = params.ignore_progress || false
+    this.hide_progress = params.hide_progress || false
     this.from = null
     this.required = params.required || false
     this._data = params.data || {}

diff --git a/classes/StepSystem.js b/classes/StepSystem.js
@@ -1,6 +1,6 @@
 /**
  * StepSystem v1.0.0
- * Last update: 17.05.2017
+ * Last update: 19.05.2017
  *
  * Dependencies: jQuery
  *
@@ -89,6 +89,12 @@ export class StepSystem {
     this.onProgress(this.progress)
   }
 
+  finish () {
+    if (this.onFinish) {
+      this.onFinish()
+    }
+  }
+
   goNextTimeout (timeout = 300) {
     const $this = this
     clearTimeout(this._next_timeout)
@@ -108,9 +114,7 @@ export class StepSystem {
     if (next_step) {
       this.goToStep(this.step(next_step), { from: curr_step.name })
     } else {
-      if (this.onFinish) {
-        this.onFinish()
-      }
+      this.finish()
     }
   }
 

diff --git a/example/app.js b/example/app.js
@@ -1,7 +1,10 @@
 import { Step } from '../classes/Step'
 import { StepSystem } from '../classes/StepSystem'
 
-window.app = new StepSystem($('.container'));
+window.app = new StepSystem({
+  container: $('.container'),
+  step_class: '.step'
+});
 
 (function (app) {
 
@@ -13,6 +16,7 @@ window.app = new StepSystem($('.container'));
    */
   .setHandlers(() => {
     console.log('handlers init')
+
   })
 
   /**
@@ -22,16 +26,16 @@ window.app = new StepSystem($('.container'));
     name: 'first-step',
     next: 'second-step',
     methods: {
-      beforeRender: () => {
+      beforeRender: (step) => {
         console.log('first-step beforeRender')
         return { status: true }
       },
-      beforeNext: () => {
+      beforeNext: (step) => {
         console.log('first-step beforeNext', this)
-        app.current_step.data.lol = 'lol'
+        step.data.lol = 'lol'
         return { status: true }
       },
-      onRender: () => {
+      onRender: (step) => {
         app.container.find('.step').css({'color': 'green'})
       }
     }
@@ -44,16 +48,16 @@ window.app = new StepSystem($('.container'));
     name: 'second-step',
     next: 'third-step',
     methods: {
-      beforeRender: () => {
+      beforeRender: (step) => {
         console.log('second-step beforeRender')
         return { status: true }
       },
-      beforeNext: () => {
+      beforeNext: (step) => {
         console.log('second-step beforeNext')
-        app.current_step.data.azaza = 'azaza'
+        step.data.azaza = 'azaza'
         return { status: true }
       },
-      onRender: () => {
+      onRender: (step) => {
         app.container.find('.step').css({'color': 'red'})
       }
     }
@@ -65,29 +69,72 @@ window.app = new StepSystem($('.container'));
   .addStep(new Step({
     name: 'third-step',
     methods: {
-      beforeRender: () => {
+      beforeRender: (step) => {
         console.log('third-step beforeRender')
         return { status: true }
       },
-      beforeNext: () => {
+      beforeNext: (step) => {
         console.log('third-step beforeNext')
-        app.current_step.data.kek = 'kek'
+        step.data.kek = 'kek'
         return { status: true }
       },
-      onRender: () => {
+      onRender: (step) => {
         app.container.find('.step').css({'color': 'blue'})
       }
     }
   }))
 
+  /**
+   * FINISH
+   */
+  .addStep(new Step({
+    name: 'finish',
+    hide_progress: true,
+    ignore_progress: true,
+    methods: {
+      beforeRender: (step) => {
+        console.log('finish beforeRender')
+        return { status: true }
+      },
+      beforeNext: (step) => {
+        console.log('finish beforeNext')
+        step.data.kek = 'kek'
+        return { status: true }
+      },
+      onRender: (step) => { }
+    }
+  }))
+
+  /**
+   * GLOBAL
+   */
+
   app.onFinish = () => {
+    app.goToStep(app.step('finish'))
     console.log(app.collectData())
   }
 
   app.onProgress = (progress) => {
     app.container.find('.progress').html(Math.floor(progress) + '%')
   }
 
+  app.onStepRender = (step) => {
+    app.container.find('.step .next').click(function () {
+      app.goNext()
+    })
+    app.container.find('.step .back').click(function () {
+      app.goBack()
+    })
+
+    console.log(step)
+
+    if (step.hide_progress) {
+      app.container.find('.progress').hide()
+    } else {
+      app.container.find('.progress').show()
+    }
+  }
+
   app.init(first_step)
 
 })(window.app)
diff --git a/example/dist/app.js b/example/dist/app.js
diff --git a/example/dist/app.js.map b/example/dist/app.js.map
diff --git a/example/dist/index.html b/example/dist/index.html
@@ -7,6 +7,10 @@
     template {
       display: none;
     }
+    .next, .back {
+      cursor: pointer;
+      color: #00f;
+    }
   </style>
 </head>
 <body>
@@ -16,14 +20,24 @@
 
     <template id="first-step">
       <p>this is the first</p>
+      <div class="back">Назад</div>
+      <div class="next">Далее</div>
     </template>
 
     <template id="second-step">
       <p>this is the second</p>
+      <div class="back">Назад</div>
+      <div class="next">Далее</div>
     </template>
 
     <template id="third-step">
       <p>this is the third</p>
+      <div class="back">Назад</div>
+      <div class="next">Завершить</div>
+    </template>
+
+    <template id="finish">
+      <p>FINISH!</p>
     </template>
 
   </div>