Fix to make previous steps available if starting point is is higher t…

…hen step 1 and added support to use 'completed' as start_step.
drsdre · Oct 20, 2015 · 18aa6ae · 18aa6ae
1 parent d5f67a7
commit 18aa6ae
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 22 deletions.
diff --git a/README.md b/README.md
@@ -32,7 +32,7 @@ Once the extension is installed, simply use it in your code by  :
 $wizard_config = [
 	'id' => 'stepwizard',
 	'steps' => [
-		[
+		1 => [
 			'title' => 'Step 1',
 			'icon' => 'glyphicon glyphicon-cloud-download',
 			'content' => '<h3>Step 1</h3>This is step 1',
@@ -45,20 +45,20 @@ $wizard_config = [
 				 ],
 			 ],
 		],
-		[
+		2 => [
 			'title' => 'Step 2',
 			'icon' => 'glyphicon glyphicon-cloud-upload',
 			'content' => '<h3>Step 2</h3>This is step 2',
 			'skippable' => true,
 		],
-		[
+		3 => [
 			'title' => 'Step 3',
 			'icon' => 'glyphicon glyphicon-transfer',
 			'content' => '<h3>Step 3</h3>This is step 3',
 		],
 	],
 	'complete_content' => "You are done!", // Optional final screen
-	'start_step' => 2,
+	'start_step' => 2, // Optional, start with a specific step
 ];
 ?>
 

diff --git a/WizardWidget.php b/WizardWidget.php
@@ -40,9 +40,9 @@ class WizardWidget extends Widget {
 	public $steps = [];
 
 	/**
-	 * @var integer step number to start with (range 1 to number of defined steps)
+	 * @var integer step id to start with
 	 */
-	public $start_step = 1;
+	public $start_step = null;
 
 	/**
 	 * @var string optional final complete step content
@@ -65,15 +65,15 @@ public function run() {
 		$last_id = key($this->steps);
 
 		$first = true;
+		$class = '';
 
 		foreach ($this->steps as $id => $step) {
 
-			// Previous steps are available, current step is active & next steps are inactive
-			$class = 'disabled';
-			if ($id < $this->start_step-1) {
-				$class = '';
-			} elseif ($id == $this->start_step-1) {
+			// Current or fist step is active, next steps are inactive (previous steps are available)
+			if ($id == $this->start_step or is_null($this->start_step)) {
 				$class = 'active';
+			} elseif ($class == 'active') {
+				$class = 'disabled';
 			}
 
 			$wizard_line .= '<li role="presentation" class="'.$class.'">'.
@@ -83,7 +83,7 @@ public function run() {
 				                'role' => 'tab',
 				                'title' => $step['title'],
 			                ]).
-		                    '</li>';
+			                '</li>';
 
 			// Setup tab content (first tab is always active)
 			$tab_content .= '<div class="tab-pane '.$class.'" role="tabpanel" id="step'.$id.'">';
@@ -110,17 +110,22 @@ public function run() {
 
 			$first = false;
 		}
+
 		// Add a completed step if defined
 		if ($this->complete_content) {
-			$wizard_line .= '<li role="presentation" class="disabled">'.
-		         Html::a('<span class="round-tab"><i class="glyphicon glyphicon-ok"></i></span>', '#complete', [
-			         'data-toggle' => 'tab',
-			         'aria-controls' => 'complete',
-			         'role' => 'tab',
-			         'title' => 'Complete',
-		         ]).
-			     '</li>';
-			$tab_content .= '<div class="tab-pane" role="tabpanel" id="complete">'.$this->complete_content.'</div>';
+			// Check if completed tab is set as start_step
+			if ($this->start_step == 'completed') {
+				$class = 'active';
+			}
+			$wizard_line .= '<li role="presentation" class="'.$class.'">'.
+			                Html::a('<span class="round-tab"><i class="glyphicon glyphicon-ok"></i></span>', '#complete', [
+				                'data-toggle' => 'tab',
+				                'aria-controls' => 'complete',
+				                'role' => 'tab',
+				                'title' => 'Complete',
+			                ]).
+			                '</li>';
+			$tab_content .= '<div class="tab-pane '.$class.'" role="tabpanel" id="complete">'.$this->complete_content.'</div>';
 		}
 
 		// Start widget
@@ -151,7 +156,7 @@ public function run() {
 	 * @return string
 	 */
 	protected function navButton($button_type, $step, $button_id) {
-		// Always setup an id
+		// Setup a unique button id
 		$options = ['id' => $button_id.$button_type];
 
 		// Apply default button configuration if defined