Project

General

Profile

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'>&#xE8B8;</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
};
(107-107/114)