VisualStage Widget v7

• status : complete
• version : 7.x

Illustration

Introduction

The VisualStage displays the name of previous, current, and next stage.

The name of a step is the value of the step property name, or if not found the id of the step.

Main Options

• displayMode: how the step names are displayed: 'inline' or 'table'. Default: 'inline'.

• current: if TRUE, the name of the current step is displayed. Default: TRUE.

• next: if TRUE, the name of the next step is displayed. Default: TRUE.

• previous: if TRUE, the name of the previous step is displayed. Default: TRUE.

• order: the order in which current, next, and previous step names are displayed. Default: [ 'current', 'next', 'previous' ] for displayMode 'table', and [ 'previous', 'current', 'next' ] for displayMode 'inline'.

• capitalize: If TRUE, the name of the step is capitalize (applies to every word in the step name). Default: TRUE.

• replaceUnderscore: If TRUE, underscores in the name of the step are replaced with spaces. Default: TRUE. (from v7.10.1+)

• addRound: If TRUE, round number is appended after the name of the step in repeat stages. Default: TRUE. (v7)

• preprocess: An optional callback transforming the name of the step before displaying it. It is applied after the round count is added. Example:

  function preprocess(name, mod, round) {
     // name is the name of the step.
     // mod may be 'current', 'previous', 'next'.
     // round is the step round or  undefined.
     return name + ' (tutorial)';
  }

Main methods

• updateDisplay(): updates the display.
• getStepName(gameStage, curStage, mod): returns the name of the step, including the round number.

Listeners

• STEP_CALLBACK_EXECUTED: updates the display.

Usecase

// Creates and append a new VisualStage widget.
var root = W.getHeader();
var options = {
    rounds: true,
    previous: false
};
var vs = node.widgets.append('VisualStage', root, options);

Links

• Source Code
• List of Widgets