Skip to content

ndnci/mentorjs

Repository files navigation

MentorJS

JavaScript user guiding and tutorial library

Demo

https://ndnci.github.io/mentorjs/

Dependencies

No dependencies

Installation

Download from

Extract js and css

...
	<link rel="stylesheet" href="build/index.min.css">
</head>
...
	<script src="build/index.min.js"></script>
</body>

Usage

Basic
<script>
// don't forget to load MentorJS after all loaded contents
window.addEventListener('load', function () {

new MentorJS().steps([
                {
                    title: "Hello World !",
                    message: "Your message",
                }]);
});
</script>
With target
<div id="test">Your Text</div>
new MentorJS().steps([
                {
		target: "#test",
		title: "Hello World !",
		message: "Your message",
                }]);
With multiple steps
new MentorJS().steps([
                {
		title: "Hello World !",
		message: "Your message",
                },
		{	
		title: "Second test !",
		message: "Second message",
                }]);
With specific parameters for each step
new MentorJS().steps([
                {
		theme: "dark",
		closeButton: "true",
		title: "Hello World !",
	    	message: "Your message",
                },
		{
		theme: "light",
	   	message: "Without title !",
                }]);
With general parameters
new MentorJS({
		theme: "dark",
		})
		.steps([
                {
		title: "Hello World !",
	    	message: "Your message",
                },
		{
		/* it will overwrite constructor value for this step */
		theme: "light",
		message: "Without title !",
                }]);

Settings

Name Parameters Default Description
autoRun true, false true By default script run automatically
stepFrom step index 0 Any existing step

Options

Name Parameters Default Description
theme dark, light light
animation zoom, pulse, bounce, toLeft, toRight, toTop, toBottom null
backgroundArea any selector document.querySelector("body")
backgroundEffectClass any classname mentor-blur
targetNoEffectClass any classname mentor-noblur
targetToggleClass any classname mentor-toggle
modalDivClass any classname mentor-modal
modalDivHeaderClass any classname mentor-modal-header
modalDivHeaderCloseClass any classname close
modalDivBodyClass any classname mentor-modal-body
modalDivFooterClass any classname mentor-modal-footer
previousButtonClass any classname mentor-btn mentor-modal-previous
nextButtonClass any classname mentor-btn mentor-modal-next
endButtonClass any classname mentor-btn mentor-modal-end
autoScroll true, false true
scrollMethod scrollIntoView, scrollTo scrollTo
scrollOn target, modal modal
scrollBehavior auto, smooth smooth
scrollBlock start, center, end, nearest center
scrollInline start, center, end, nearest center
openButtonId any unique id null Must be unique for each step
closeButtonId any id modalClose Close current step
previousButtonText text « Back Allow HTML
nextButtonText text Next » Allow HTML
endButtonText text Thanks
order number null Order of step
title text null Allow HTML
message text null Allow HTML
target any selector null Example "#test", or ".test"
closeButton true, false false Close button on header
showHeader true, false true
showFooter true, false true
showArrow true, false true
outsideClick true, false false Detect outside click for close modal
targetAutoShow true, false false If target is hidden by default, you can set it to true
margin number 10 Space between modal and target, only number, max 10 recommended
horizontal left, center, right, auto auto
vertical top, center, bottom, auto auto
responsive true, false true
wait time ( ms ) 0 Wait time ( for actual modal ) when user click to next or previous button default is 0 for modal speed
events javascript events click You can define events with space " " for listener function, for example : "click touchstart"
mobileSupport true, false true

Functions

Name Description
run() Run script if autoRun is disabled
goToStep($index) Go to ($index) specific step
backStep() Go to previous step
nextStep() Go to next step

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

License

MIT