Есть несколько пакетов, которые позволяют вам совершить обзор продукта, чтобы продемонстрировать возможности вашего приложения. Наиболее заметными из них, вероятно, являются Bootstrap-Tour и Hopscotch, созданные LinkedIn. Я только что интегрировал последнее в свое приложение Meteor и хотел поделиться результатом.

Во-первых, я знаю, что есть несколько пакетов атмосферы, позволяющих делать то же самое. Эти пакеты только обертывают исходные сценарии, потому что это требовалось в более старых версиях Meteor. Начиная с Meteor 1.3, рекомендуется использовать эти пакеты непосредственно из NPM, так что именно этим мы и займемся. Таким образом мы избегаем дополнительной зависимости от владельца пакета Atmosphere для получения последней версии библиотеки.

Начнем с загрузки библиотеки классиков в наше приложение:

meteor npm install --save hopscotch

Hopscotch теперь загружен в нашу папку node_modules, поэтому мы можем начать его использовать. Следуя приведенным ниже инструкциям, я загрузил библиотеку классиков из пакета. Это клиентская вещь, поэтому нам также нужно загрузить файл CSS. В Meteor это также можно сделать с помощью простого оператора импорта, который добавит его как дополнительный скрипт css. Вы также должны иметь возможность загружать меньше исходных файлов для их обработки, но я не мог заставить это работать с моей настройкой scss.

import hopscotch from 'hopscotch';
import 'hopscotch/dist/css/hopscotch.min.css';

Теперь получить обзор продукта в вашем приложении стало очень просто. Просто создайте кнопку в одном из своих шаблонов и зарегистрируйте для нее обработчик событий.

Template.body.events({
    "click #tour": function (event, template) {
        let tour = {
            id: "tour-example",
            steps: [
                {
                    title: "First item",
                    content: "Information about your awesome app",
                    target: "#id_of_the_tag",
                    placement: "bottom"
                },
                {
                    title: "Second item",
                    content: "More awesomeness",
                    target: "#id_of_the_tag",
                    placement: "bottom"
                },
            ],
            onStart: function () {
                console.log("Tour started");
            },
            onEnd: function () {
                console.log("Tour is ended");
            }
        };

        hopscotch.startTour(tour);
    }
});

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

Это немного сложнее, когда вы пытаетесь провести обзор, который действительно может перемещаться по вашему приложению. Как описано в многостраничном примере, нам нужно снова начать тур по классикам с другой страницы.

steps: [
    {
        title: "First item",
        content: "Information about your awesome app",
        target: "#id_of_the_tag",
        placement: "bottom",
        multipage: true,
        onNext: function () {
            FlowRouter.go('second-page-name');

            setTimeout(function () {
                hopscotch.startTour(tour, 1);
            }, 750);
        }
    },
    {
        title: "Second item",
        content: "More awesomeness",
        target: "#id_of_the_tag",
        placement: "bottom"
    },
]

На этом первом шаге для атрибута multipage установлено значение true, а обратный вызов onNext переместит нас на вторую страницу. Как только это будет сделано (и истечет время ожидания, мы снова запускаем классики на второй странице (отсюда и второй параметр 1).

Это работает, потому что мы прикрепили тур по классикам к событию в шаблоне тела. В отличие от обработчиков событий дочернего шаблона, который был бы уничтожен. Тайм-аут в шаблоне тела останется активным, когда мы перейдем на другую страницу с Flow Router.

Template.body.events

Я надеюсь, что эта статья может убедить вас в том, что вам не нужно тратить слишком много ресурсов, чтобы включить небольшой обзор продукта в свое приложение. Надеюсь, это даже поможет вам начать тур быстрее, чем я. Если у вас есть вопросы или комментарии, я буду рад их услышать.

PS: Если вам понравилась эта статья, не стесняйтесь нажимать ❤ ниже;)