openproject/app/assets/javascripts/onboarding/onboarding_tour.js

(function ($) {
    $(function() {
        // ------------------------------- Global -------------------------------
        window.tutorialInstance;
        window.preventClickHandler = function (e) {
            e.preventDefault();
            e.stopPropagation();
        };
        window.waitForElement = function(element, container, execFunction) {
            // Wait for the element to be ready
            var observer = new MutationObserver(function (mutations, observerInstance) {
                if ($(element).length) {
                    observerInstance.disconnect(); // stop observing
                    execFunction();
                    return;
                }
            });
            observer.observe($(container)[0], {
                childList: true,
                subtree: true
            });
        };
        window.demoProjectName = 'Demo project';
        window.scrumDemoProjectName = 'Scrum project';

        var storageKey = 'openProject-onboardingTour';
        var currentTourPart = sessionStorage.getItem(storageKey);
        var url = new URL(window.location.href);
        var isMobile = document.body.classList.contains('-browser-mobile');
        var demoProjectsAvailable = $('meta[name=demo_projects_available]').attr('content') === "true";
        var boardsDemoDataAvailable = $('meta[name=boards_demo_data_available]').attr('content') === "true";
        var eeTokenAvailable = !$('body').hasClass('ee-banners-visible');

        // ------------------------------- Initial start -------------------------------
        // Do not show the tutorial on mobile or when the demo data has been deleted
        if(!isMobile && demoProjectsAvailable) {

            // Start after the intro modal (language selection)
            // This has to be changed once the project selection is implemented
            if (url.searchParams.get("first_time_user") && demoProjectsLinks().length == 2) {
                currentTourPart = '';
                sessionStorage.setItem(storageKey, 'readyToStart');

                // Start automatically when the language selection is closed
                $('.op-modal--modal-close-button').click(function () {
                    homescreenTour();
                });

                //Start automatically when the escape button is pressed
                $(document).on('keydown', function(event) {
                    if (event.key == "Escape") {
                        homescreenTour();
                    }
                });
            }

            // ------------------------------- Tutorial Homescreen page -------------------------------
            if (currentTourPart === "readyToStart") {
                homescreenTour();
            }

            // ------------------------------- Tutorial WP page -------------------------------
            if (currentTourPart === "startMainTourFromBacklogs" || url.searchParams.get("start_onboarding_tour")) {
                mainTour();
            }

            // ------------------------------- Tutorial Backlogs page -------------------------------
            if (url.searchParams.get("start_scrum_onboarding_tour")) {
                if ($('.backlogs-menu-item').length > 0) {
                    backlogsTour();
                }
            }

            // ------------------------------- Tutorial Task Board page -------------------------------
            if (currentTourPart === "startTaskBoardTour") {
                taskboardTour();
            }
        }

        function demoProjectsLinks() {
            demoProjects = [];
            demoProjectsLink = jQuery(".widget-box.welcome a:contains(" + demoProjectName + ")");
            scrumDemoProjectsLink = jQuery(".widget-box.welcome a:contains(" + scrumDemoProjectName + ")");
            if (demoProjectsLink.length) demoProjects.push(demoProjectsLink);
            if (scrumDemoProjectsLink.length) demoProjects.push(scrumDemoProjectsLink);

            return demoProjects;
        }
        
        function initializeTour(storageValue, disabledElements, projectSelection) {
            tutorialInstance = new EnjoyHint({
                onStart: function () {
                    $('#content-wrapper, #menu-sidebar').addClass('-hidden-overflow');
                },
                onEnd: function () {
                    sessionStorage.setItem(storageKey, storageValue);
                    $('#content-wrapper, #menu-sidebar').removeClass('-hidden-overflow');
                },
                onSkip: function () {
                    sessionStorage.setItem(storageKey, 'skipped');
                    if (disabledElements) jQuery(disabledElements).removeClass('-disabled').unbind('click', preventClickHandler);
                    if (projectSelection) $.each(demoProjectsLinks(), function(i, e) { $(e).off('click')});
                    $('#content-wrapper, #menu-sidebar').removeClass('-hidden-overflow');
                }
            });
        }

        function startTour(steps) {
            tutorialInstance.set(steps);
            tutorialInstance.run();
        }
        
        function homescreenTour() {
            initializeTour('startProjectTour', '.widget-box--blocks--buttons a', true);
            startTour(homescreenOnboardingTourSteps);
        }

        function backlogsTour() {
            initializeTour('startTaskBoardTour');
            startTour(scrumBacklogsTourSteps);
        }

        function taskboardTour() {
            initializeTour('startMainTourFromBacklogs');
            startTour(scrumTaskBoardTourSteps);
        }

        function mainTour() {
            initializeTour('mainTourFinished');

            waitForElement('.work-package--results-tbody', '#content', function() {
                var steps;

                // Check for EE edition, and available seed data of boards.
                // Then add boards to the tour, otherwise skip it.
                if (eeTokenAvailable && boardsDemoDataAvailable) {
                    steps = wpOnboardingTourSteps.concat(boardTourSteps).concat(menuTourSteps);
                } else {
                    steps = wpOnboardingTourSteps.concat(menuTourSteps);
                }

                startTour(steps);
            });
        }
    });
}(jQuery));