Class: DomSteps

@bldr/vue-app-presentation/lib.DomSteps

Generate steps by hiding and showing some DOM elements.

new module:@bldr/vue-app-presentation/lib.DomSteps (options)

Name Type Description
options Object
Properties:
Name Type Description
options.elements Array

An array of HTML elements to use as steps.

options.cssSelectors String

String to feed document.querySelectorAll()

options.specializedSelector String

At the moment: words or sentences.

Members

elements Array

All elements or a subset of elements, if subsetSelectors is specified.

elementsAll Array

All elements obtained from document.querySelectorAll().

Methods

module:@bldr/vue-app-presentation/lib.DomSteps.getSpecializedSelectorsFromProps (props)String static

Name Type Description
props Objects

An object to search for the properties stepWords or stepSentences.

Returns:
Type Description
String
  • words or sentences

module:@bldr/vue-app-presentation/lib.DomSteps.mapProps (selector)Object static

Map step support related props for the use as Vuejs props.

Name Type Description
selector Array
Returns:
Type Description
Object

module:@bldr/vue-app-presentation/lib.DomSteps.selectSentences (selector)Array.<DomStepElement> static

Select more than a word. The meaning of "sentences" in the function name should not be understood literally, but symbolic for a longer text unit. Select a whole paragraph (<p>) or a heading <h1> or <li> items of ordered or unordered lists, or a table row.

Name Type Description
selector String

A selector for document.querySelector() of the parent Element, which contains child HTML element to use as steps.

Returns:
Type Description
Array.<DomStepElement> An array of DomStepElements.

module:@bldr/vue-app-presentation/lib.DomSteps.selectWords ()DomStepElementGroup | Array.<DomStepElement> static

Select words which are surrounded by span.word.

Returns:
Type Description
DomStepElementGroup | Array.<DomStepElement> An array of DomStepElements or DomStepElementGroups.

module:@bldr/vue-app-presentation/lib.DomSteps.wrapWords (text)String static

Wrap each word in a string into <span class="word">…</span>

Name Type Description
text String

A string

See:
Returns:
Type Description
String

displayByNo ()Object

Set the display / visiblilty state on HTML elements. Loop through all elements or perform a minimal update. On the first step no elements are displayed. The number of steps is: number of elements + 1. A minimal update doesn’t loop through all elements, only the visibility state of the next element is changed.

Type Description
config
Properties:
Name Type Description
oldStepNo Number

The previous step number.

stepNo Number

The current step number.

full Boolean

Perform a full update.

Returns:
Type Description
Object The element that is displayed by the new step number.

shortcutsRegister (elements)

TODO: Implement vuex support

Name Type Description
elements Array

An array of HTML elements or a node list of elements.

shortcutsUnregister (elements)

Name Type Description
elements Array

An array of HTML elements or a node list of elements.