Highlighting the completed steps with a CSS class

.travis.yml

@@ -18,8 +18,6 @@ matrix:
   include:
     - php: 5.6
       env: DB=MYSQL CORE_RELEASE=3
-    - php: 5.6
-      env: DB=MYSQL CORE_RELEASE=3.1
     - php: 5.6
       env: DB=PGSQL CORE_RELEASE=3.2
   allow_failures:

code/extensions/MultiFormObjectDecorator.php

@@ -24,7 +24,7 @@ class MultiFormObjectDecorator extends DataExtension {
 		'MultiFormSession' => 'MultiFormSession',
 	);
 
-	public function augmentSQL(SQLSelect $query) {
+	public function augmentSQL(SQLQuery &$query) {
 		// If you're querying by ID, ignore the sub-site - this is a bit ugly...
 		if(
 			strpos($query->where[0], ".`ID` = ") === false

code/model/MultiForm.php

@@ -26,6 +26,7 @@ abstract class MultiForm extends Form {
 
 	/**
 	 * The current encrypted MultiFormSession identification.
+	 *
 	 * @var string
 	 */
 	protected $currentSessionHash;
@@ -82,6 +83,13 @@ abstract class MultiForm extends Form {
 	 */
 	protected $displayLink;
 
+	/**
+	 * Flag which is being used in getAllStepsRecursive() to allow adding the completed flag on the steps
+	 *
+	 * @var boolean
+	 */
+	protected $currentStepHasBeenFound = false;
+
 	/**
 	 * Start the MultiForm instance.
 	 *
@@ -566,9 +574,13 @@ abstract class MultiForm extends Form {
 
 		$firstStep = DataObject::get_one(static::$start_step, "\"SessionID\" = {$this->session->ID}");
 		$firstStep->LinkingMode = ($firstStep->ID == $this->getCurrentStep()->ID) ? 'current' : 'link';
+		$firstStep->addExtraClass('completed');
 		$firstStep->setForm($this);
 		$stepsFound->push($firstStep);
 
+		// mark the further steps as non-completed if the first step is the current
+		if ($firstStep->ID == $this->getCurrentStep()->ID) $this->currentStepHasBeenFound = true;
+
 		$this->getAllStepsRecursive($firstStep, $stepsFound);
 
 		return $stepsFound;
@@ -593,11 +605,21 @@ abstract class MultiForm extends Form {
 				// Is this step in the DB? If it is, we use that
 				$nextStep = $step->getNextStepFromDatabase();
 				if(!$nextStep) {
-					// If it's not in the DB, we use a singleton instance of it instead - this step hasn't been accessed yet
+					// If it's not in the DB, we use a singleton instance of it instead -
+					// - this step hasn't been accessed yet
 					$nextStep = singleton($step->getNextStep());
 				}
+
+				// once the current steps has been found we won't add the completed class anymore.
+				if ($nextStep->ID == $this->getCurrentStep()->ID) $this->currentStepHasBeenFound = true;
+
 				$nextStep->LinkingMode = ($nextStep->ID == $this->getCurrentStep()->ID) ? 'current' : 'link';
+
+				// add the completed class
+				if (!$this->currentStepHasBeenFound) $nextStep->addExtraClass('completed');
+
 				$nextStep->setForm($this);
+
 				// Add the array data, and do a callback
 				$stepsFound->push($nextStep);
 				$this->getAllStepsRecursive($nextStep, $stepsFound);

code/model/MultiFormStep.php

@@ -72,6 +72,13 @@ class MultiFormStep extends DataObject {
 	 */
 	protected $form;
 
+	/**
+	 * List of additional CSS classes for this step
+	 *
+	 * @var array $extraClasses
+	 */
+	protected $extraClasses = array();
+
 	/**
 	 * Form fields to be rendered with this step.
 	 * (Form object is created in {@link MultiForm}.
@@ -331,6 +338,8 @@ class MultiFormStep extends DataObject {
 	// ##################### Utility ####################
 
 	/**
+	 * Determines whether the user is able to go back using the "action_back"
+	 * Determines whether the user is able to go back using the "action_back"
 	 * Determines whether the user is able to go back using the "action_back"
 	 * form action, based on the boolean value of $can_go_back.
 	 *
@@ -362,4 +371,42 @@ class MultiFormStep extends DataObject {
 		return ($this->class == $this->Session()->CurrentStep()->class) ? true : false;
 	}
 
+	/**
+	 * Add a CSS-class to the step. If needed, multiple classes can be added by delimiting a string with spaces.
+	 *
+	 * @param string $class A string containing a classname or several class names delimited by a space.
+	 * @return MultiFormStep
+	 */
+	public function addExtraClass($class) {
+		// split at white space
+		$classes = preg_split('/\s+/', $class);
+		foreach($classes as $class) {
+			// add classes one by one
+			$this->extraClasses[$class] = $class;
+		}
+		return $this;
+	}
+
+	/**
+	 * Remove a CSS-class from the step. Multiple classes names can be passed through as a space delimited string.
+	 *
+	 * @param string $class
+	 * @return MultiFormStep
+	 */
+	public function removeExtraClass($class) {
+		// split at white space
+		$classes = preg_split('/\s+/', $class);
+		foreach ($classes as $class) {
+			// unset one by one
+			unset($this->extraClasses[$class]);
+		}
+		return $this;
+	}
+
+	/**
+	 * @return string
+	 */
+	public function getExtraClasses() {
+		return join(' ', array_keys($this->extraClasses));
+	}
 }

templates/Includes/MultiFormProgressList.ss

@@ -1,9 +1,9 @@
 <ul class="stepIndicator current-$CurrentStep.class">
 <% loop AllStepsLinear %>
-	<li class="$ClassName<% if LinkingMode %> $LinkingMode<% end_if %><% if FirstLast %> $FirstLast<% end_if %>">
+	<li class="$ClassName<% if LinkingMode %> $LinkingMode<% end_if %><% if FirstLast %> $FirstLast<% end_if %><% if $ExtraClasses %> $ExtraClasses<% end_if %>">
 		<% if LinkingMode = current %><% else %><% if ID %><a href="{$Top.URLSegment}/?MultiFormSessionID={$SessionID}&amp;StepID={$ID}"><% end_if %><% end_if %>
 		<% if Title %>$Title<% else %>$ClassName<% end_if %>
 		<% if LinkingMode = current %><% else %><% if ID %></a><% end_if %><% end_if %>
 	</li>
 <% end_loop %>
-</ul>
+</ul>