/** * Main entry to execute the widget */ public function run() { parent::run(); WizardWidgetAsset::register($this->getView()); // Wizard line calculation $step_count = count($this->steps) + ($this->complete_content ? 1 : 0); $wizard_line_distribution = round(100 / $step_count); // Percentage $wizard_line_width = round(100 - $wizard_line_distribution); // Percentage $wizard_line = ''; $tab_content = ''; // Navigation tracker end($this->steps); $last_id = key($this->steps); $first = true; $class = ''; foreach ($this->steps as $id => $step) { // 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 == '') { $class = 'active'; } elseif ($class == 'active') { $class = 'disabled'; } // Add icons to the wizard line $wizard_line .= Html::tag('li', Html::a('<span class="round-tab"><i class="' . $step['icon'] . '"></i></span>', '#step' . $id, ['data-toggle' => 'tab', 'aria-controls' => 'step' . $id, 'role' => 'tab', 'title' => $step['title']]), array_merge(['role' => 'presentation', 'class' => $class, 'style' => ['width' => $wizard_line_distribution . '%']], isset($step['options']) ? $step['options'] : [])); // Setup tab content $tab_content .= '<div class="tab-pane ' . $class . '" role="tabpanel" id="step' . $id . '">'; $tab_content .= $step['content']; // Setup navigation buttons $buttons = []; $button_id = "{$this->id}_step{$id}_"; if (!$first) { // Show previous button except on first step $buttons[] = $this->navButton('prev', $step, $button_id); } if (array_key_exists('skippable', $step) and $step['skippable'] === true) { // Show skip button if specified $buttons[] = $this->navButton('skip', $step, $button_id); } if ($id == $last_id) { // Show save button on last step $buttons[] = $this->navButton('save', $step, $button_id); } else { // On all previous steps show next button $buttons[] = $this->navButton('next', $step, $button_id); } // Add buttons to tab content $tab_content .= Html::ul($buttons, ['class' => 'list-inline pull-right', 'encode' => false]); // Finish tab $tab_content .= '</div>'; $first = false; } // Add a completed step if specified if ($this->complete_content) { $class = 'disabled'; // Check if completed tab is set as start_step if ($this->start_step == 'completed') { $class = 'active'; } // Add completed icon to wizard line $wizard_line .= Html::tag('li', Html::a('<span class="round-tab"><i class="glyphicon glyphicon-ok"></i></span>', '#complete', ['data-toggle' => 'tab', 'aria-controls' => 'complete', 'role' => 'tab', 'title' => 'Complete']), ['role' => 'presentation', 'class' => $class, 'style' => ['width' => $wizard_line_distribution . '%']]); $tab_content .= '<div class="tab-pane ' . $class . '" role="tabpanel" id="complete">' . $this->complete_content . '</div>'; } // Start widget echo '<div class="wizard" id="' . $this->id . '">'; // Render the steps line echo '<div class="wizard-inner"><div class="connecting-line" style="width:' . $wizard_line_width . '%"></div>'; echo '<ul class="nav nav-tabs" role="tablist">' . $wizard_line . '</ul>'; echo '</div>'; // Render the content tabs echo '<div class="tab-content">' . $tab_content . '</div>'; // Finalize the content tabs echo '<div class="clearfix"></div>'; // Finish widget echo '</div>'; }
/** * Main entry to execute the widget */ public function run() { parent::run(); WizardWidgetAsset::register($this->getView()); // Wizard content $wizard_line = ''; $wizard_line_distribution = round(100 / (count($this->steps) + ($this->complete_content ? 1 : 0))); $tab_content = ''; // Navigation tracker end($this->steps); $last_id = key($this->steps); $first = true; $class = ''; foreach ($this->steps as $id => $step) { // 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 == '') { $class = 'active'; } elseif ($class == 'active') { $class = 'disabled'; } $wizard_line .= '<li role="presentation" class="' . $class . '" style="width:' . $wizard_line_distribution . '%">' . Html::a('<span class="round-tab"><i class="' . $step['icon'] . '"></i></span>', '#step' . $id, ['data-toggle' => 'tab', 'aria-controls' => 'step' . $id, 'role' => 'tab', 'title' => $step['title']]) . '</li>'; // Setup tab content (first tab is always active) $tab_content .= '<div class="tab-pane ' . $class . '" role="tabpanel" id="step' . $id . '">'; $tab_content .= $step['content']; // Setup navigation buttons $items = []; $button_id = "{$this->id}_step{$id}_"; if (!$first) { $items[] = $this->navButton('prev', $step, $button_id); } if (array_key_exists('skippable', $step) and $step['skippable'] === true) { $items[] = $this->navButton('skip', $step, $button_id); } if ($id == $last_id) { $items[] = $this->navButton('save', $step, $button_id); } else { $items[] = $this->navButton('next', $step, $button_id); } $tab_content .= Html::ul($items, ['class' => 'list-inline pull-right', 'encode' => false]); // Finish tab $tab_content .= '</div>'; $first = false; } // Add a completed step if defined if ($this->complete_content) { // Check if completed tab is set as start_step if ($this->start_step == 'completed') { $class = 'active'; } $wizard_line .= '<li role="presentation" class="' . $class . '" style="width:' . $wizard_line_distribution . '%">' . 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 echo '<div class="wizard" id="' . $this->id . '">'; // Render the steps line echo '<div class="wizard-inner"><div class="connecting-line"></div>'; echo '<ul class="nav nav-tabs" role="tablist">' . $wizard_line . '</ul>'; echo '</div>'; // Render the content tabs echo '<div class="tab-content">' . $tab_content . '</div>'; // Finalize the content tabs echo '<div class="clearfix"></div>'; // Finish widget echo '</div>'; }