zootorial
Tutorial
Constructor parameters
-
parent
Element at which to insert the tutorial's elements
-
steps
Object of steps, see Steps below
-
first
The key of the first step
-
demoLabel
,nextLabel
,doneLabel
Default labels for the "demo", "next", and "done" buttons
Properties
-
el
Contains all the tutorial content.
-
closeButton
Aborts the tutorial
-
header
,content
Contains the
header
andcontent
specified in the current step, if defined. -
instruction
Includes the
instruction
property in the current step and a button to call the step'sdemo
function if one is defined. -
footer
Contains the "next" button.
Methods
-
start()
Start the tutorial.
-
end()
End the tutorial.
-
goTo(step)
If it's a string, go to that step in the
steps
object.If it's a function, it's evaluated and the result is passed back to
goTo
.If it's
false
, the step will not change, but theinstruction
element will get adata-zootorial-attention
attribute.If it's
null
or not defined, the tutorial will end.
Helpers
-
triggerEvent(eventName)
Dispatch a custom event from the tutorial's
el
element. -
createElement(tagAndClassNames, parent)
Create an element (e.g. "button.hello") at a parent.
-
current
The current step as it was passed into
steps
Hooks
-
onBeforeStart()
-
onStart()
-
onBeforeEnd()
-
onEnd()
-
onBeforeBeforeLoadStep()
-
onLoadStep()
-
onBeforeUnloadStep()
-
onUnloadStep()
Events
Dispatched from el
. You should probably reference these, e.g. addEventListener(tutorialInstance.startEvent, handler, false)
, in case the specific strings change
-
startEvent
-
endEvent
-
loadStepEvent
-
unloadStepEvent
-
abortEvent
"Step" objects
Parameters
-
header
String of HTML for a header
-
content
String of HTML for content
-
instruction
String of HTML for instructional content
-
demo()
Function that shows the user what to do. Check out my
ghost-mouse
for a nice way to drive a dmeo. -
attachment
An array
[X of tutorial, Y of tutorial, target selector, X of target, Y of target]
. The tutorial dialog will be positioned so that the X and Y defined will match up with the X and Y of the target. E.g.[0, 0, '.target', 0, 0]
will align the top-left corners of the tutorial and the target, and[0, 0.5, '.target', 1, 0.5]
will stick the tutorial to the right side of the target, cenetered vertically.If
attachment
isfalse
, the dialog will not move from the last step's position. -
progress
The number of progress dots to fill up
-
arrow
Set the
data-zootorial-position
property, which you can then style apropriately -
block
A CSS selector; block clicks to the matched elements until the step is exited.
-
focus
A CSS selector; the matched element will be "highlighted" (everything around it will be dimmed).
-
actionable
A CSS selector; matched elements will be given a
data-zootorial-actionable
property. -
next
If it's an object, keys are event/selector combos (e.g.
click button[name='complete-task']
) and values are passed to the tutorial'sgoTo
method when that event is dispatched from that selector. No "next" button is drawn.If it's a string, function,
null
, or not defined, this is passed directly to the tutorial'sgoTo
method and either a "next" or "done" button is drawn in the footer.
Hooks
-
onBeforeLoad()
-
onLoad()
-
onBeforeUnload()
-
onUnload()