zootorial v0.4.12
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 apropriatelyblock
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()
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
12 years ago
12 years ago
12 years ago
12 years ago
12 years ago
12 years ago
12 years ago
12 years ago
12 years ago
12 years ago
12 years ago