1
|
$(function() {
|
2
|
altair_tour.init();
|
3
|
|
4
|
$('#restartTour').click(function() {
|
5
|
altair_tour.init();
|
6
|
})
|
7
|
|
8
|
});
|
9
|
|
10
|
altair_tour = {
|
11
|
init: function() {
|
12
|
|
13
|
// This tour guide is based on EnjoyHint plugin
|
14
|
// for more info/documentation please check https://github.com/xbsoftware/enjoyhint
|
15
|
|
16
|
// initialize instance
|
17
|
var enjoyhint_instance = new EnjoyHint({});
|
18
|
|
19
|
// config
|
20
|
var enjoyhint_script_steps = [
|
21
|
{
|
22
|
"next #header_main": 'Hello, In this short tour guide I\'ll show you<br>' +
|
23
|
'some features/components included in Altair Admin.<br>' +
|
24
|
'This is the main header.<br>' +
|
25
|
'Click "Next" to proceed.'
|
26
|
},
|
27
|
{
|
28
|
"next #full_screen_toggle" : "Here you can activate fullscreen.",
|
29
|
shape : 'circle',
|
30
|
radius: 30,
|
31
|
showSkip: false
|
32
|
},
|
33
|
{
|
34
|
"click #main_search_btn" : "Click this icon to show search form.",
|
35
|
shape : 'circle',
|
36
|
radius: 30,
|
37
|
showSkip: false
|
38
|
},
|
39
|
{
|
40
|
"next #header_main" : "This is the main search form.",
|
41
|
showSkip: false
|
42
|
},
|
43
|
{
|
44
|
"next #style_switcher_toggle" : "When you click on that icon '<i class='material-icons'></i>'<br>" +
|
45
|
"you will activate style switcher.<br>" +
|
46
|
"There you can change <span class='md-color-red-500'>c</span><span class='md-color-light-blue-500'>o</span><span class='md-color-red-500'>l</span><span class='md-color-orange-500'>o</span><span class='md-color-pink-500'>r</span><span class='md-color-light-green-500'>s</span> and few other things.",
|
47
|
shape : 'circle',
|
48
|
radius: 30,
|
49
|
showSkip: false
|
50
|
},
|
51
|
{
|
52
|
"next #sidebar_main": "This is the primary sidebar.<br>" +
|
53
|
"Click 'Next' to find out how to close this sidebar.<br>",
|
54
|
showSkip: false
|
55
|
},
|
56
|
{
|
57
|
"key #sidebar_main_toggle" : "Click this icon to close primary sidebar.",
|
58
|
shape : 'circle',
|
59
|
radius: 30,
|
60
|
"skipButton" : {text: "Finish"}
|
61
|
}
|
62
|
];
|
63
|
|
64
|
// set script config
|
65
|
enjoyhint_instance.set(enjoyhint_script_steps);
|
66
|
|
67
|
// run Enjoyhint script
|
68
|
enjoyhint_instance.run();
|
69
|
|
70
|
$('#restartTour').click(function() {
|
71
|
console.log(enjoyhint_instance);
|
72
|
// run Enjoyhint script
|
73
|
enjoyhint_instance.run();
|
74
|
})
|
75
|
|
76
|
|
77
|
}
|
78
|
};
|