JavaScript гид по сайту

Люблю джаваскрипт за то, что c ним порой чувствуешь себя магом и волшебником. Не так давно в голове возникла идея - а что, если на сайт, который изначально не гибок в этом плане (без аджакса и джаваскриптовой цветомузыки) навешать немного джаваскрипта. Скажу сразу, речь идет об LMS Moodle (для тех, кто не в курсе - это CMS для тренингов). Так вот была у нас одна проблемка с ним - много че может делать, только вот ничего не понятно как это сделать - часто пользователи нас спрашивают "а как то?", "а как это?", причем, порой, даже сам забываешь где там кликнуть надо... Люблю я его за это - квестообразующий :) - не соскучишься с ним. Но это мне так интересно, а другим пользователям? Нужно максимально упрощать!

Идея пришла во время серфинга на другом сайте. Там был простенький гид, кликни там, кликни сям, а тут вот это, а тут ты можешь сделать это. И я подумал - хочу! Стал искать решения. Их есть с десяток. Но я хотел решения, которое будет чисто джаваскриптовым - без правки HTML. И оно нашлось! Сразу показываю результат, каким он получился у меня.


Есть такая библиотека с использованием JQuery, называется Guiders-JS. Настраивается достаточно не сложно. Вот код, который я вставил в боковую панельку чтобы линк Training Guide ожил.

<ul>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li><span id="training-guide"><a href="#">Training guide</a></span></li>
</ul>

<p id="training-guide-script">
    <script src="https://host.com/js/guiders-1.3.0/jquery-1.5.1.min.js" type="text/javascript"></script>
    <script src="https://host.com/js/guiders-1.3.0/guiders-1.3.0.js" type="text/javascript"></script>
    <link rel="stylesheet" href="https://host.com/js/guiders-1.3.0/guiders-1.3.0.css" type="text/css" />
    <script src="https://host.com/js/guiders-1.3.0/training-guiders.js" type="text/javascript"></script>
</p>

Все просто. Создается линк никуда не ссылающийся (на него потом навешается обработчик с помощью jQuery). Подключается библиотека jQuery и Guiders-JS, подключается стиль и мой скрипт, в котором описаны окошки гида. Там же и навешивается обработчик на клик и делаются еще кой че.

$(document).ready(function () {
    if ($("#module-1224").size() == 0) {       // проверяем, если мы не на главной страничике (содержащей див
                                               // с айди module-1224), то запускать гид бессмысленно
        $('#training-guide').parent().hide();  // потому мы скрываем возможность вызвать гида
        return;
    }

    $('#training-guide').click(function () {  // при клике на линк  
        guiders.show("start");                       // открываем гид (первый диалог)
    });

    guiders.createGuider({      // создается первый диалог
        buttons: [              // с кнопкой next
            {name: "Next"}
        ],

        title: "**** ******* Guide", // это его заголовок
        description: "Hi! This is **** ****** training course guide. Hope it will help.", // с сообщением

        id: "start",           // это его айдиха
        next: "guide2",         // это айдиха того, куда переходим

        overlay: true,          // задний фон за диалогом будет затеняться
        xButton: true,          // у диалога будет кнопка X в правом верхнем углу
        closeOnEscape: false,   // по нажатию на Esc будет закрыто окно
        width: 350              // ширина диалога
    }).show();

    guiders.createGuider({      // создаем следующий шаг
        attachTo: "#inst16",    // он прикрепляется к диву с этой айдишкой
        position: 10,           // прицепляется в позиции 10. С каждой стороны к диву можно прицепиться: 
                                // с одного краю, с другого и по центру - всего 12 позиций. По часовой 
                                // стрелке от 1 до 12.
                                // 
                                // вот кусочек исходного кода библиотеки:
                                //    guiders._offsetNameMapping = {
                                //        "topLeft": 11,
                                //        "top": 12,
                                //        "topRight": 1,
                                //        "rightTop": 2,
                                //        "right": 3,
                                //        "rightBottom": 4,
                                //        "bottomRight": 5,
                                //        "bottom": 6,
                                //        "bottomLeft": 7,
                                //        "leftBottom": 8,
                                //        "left": 9,
                                //        "leftTop": 10
                                //     "};

        overlay: true,          // опять же фон будет размыт и в тени
        highlight: "#inst16",   // но сам див будет подсвечен

        buttons: [ {name: 'Next', onclick: guiders.next} ], //" на кнопку next навешивается обработчик - следующий диалог                      

        title: "",
        description: "You you can find useful links here.", // другое сообщение

        id: "guide2",          // айдиха текущего диалога
        next: "guide3",        // куда идем на следующий диалог

        autoFocus: true,       // если вдруг див ушел за пределы экрана, подсветить его проскролив страничку
        xButton: true,
        closeOnEscape: false,
        width: 350
    });

    function topic_toggle_new(number, isOpen) {  // это самописная функция которая разворачивает/сворачивает 
                                                 // модуля тренинга на Moodle, вызывая его js код
        var open = $("#toggle-" + number + " .toggle_closed");
        open = (open.size() > 0) ? open[0] : null;

        var close = $("#toggle-" + number + " .toggle_open");
        close = (close.size() > 0) ? close[0] : null;

        if (isOpen) {
            element = (open == null) ? null : open;
        } else {
            element = (close == null) ? null : close;
        }

        if (element != null) {
            toggle_topic(element, number);
        }
    }

    guiders.createGuider({         // создаем третий шаг
        attachTo: "#inst370",
        position: 10,

        highlight: "#inst370",
        overlay: true,

        buttons: [
            {name: "Next", onclick: function () {  // вот тут на next навешиваем больше чем одну 
                                                   // функцию - создли анонимную функцию и в ней 
                                                   // прописали весь сценарий  
                topic_toggle_new(1, false);
                topic_toggle_new(2, false);
                topic_toggle_new(3, false);
                topic_toggle_new(4, false);
                topic_toggle_new(5, false);
                topic_toggle_new(6, false);
                topic_toggle_new(7, false);
                topic_toggle_new(8, false);
                topic_toggle_new(9, false);
                topic_toggle_new(10, false);
                guiders.next();
            }}
        ],

        title: "",
        description: "For each code review you'll get 3 XP. More code " +
            "review you do - more XP you get. Collect XP and " +
            "distinguish yourself!",

        id: "guide3",
        next: "guide4",

        autoFocus: true,
        xButton: true,
        closeOnEscape: false,

        width: 350
    });

    // ну и так далее. На последнем шаге добавляется кнопка Close вот так
    // buttons: [{name: "Close", onclick: guiders.hideAll }]
    // ... 
});

Что замечательно, так это то, что я могу по линку https://host.com/training-page.html#guider=start открыть страничку с гидом.
Enjoy! И спасибо разработчикам Guiders-JS!!