platform/io.sc.platform.lcdp.frontend/public/flowable/modeler/editor-app/tour.js

/* Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * 
 *      http://www.apache.org/licenses/LICENSE-2.0
 * 
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

var FLOWABLE_EDITOR_TOUR = {

    /*
     * General 'getting started' tutorial for the Editor.
     */
    gettingStarted: function($scope, $translate, $q, useLocalStorage) {
        var userName;
        if ($scope.account.firstName) {
            userName = $scope.account.firstName;
        } else {
            userName = $scope.account.fullname;
        }

        $q.all([
            $translate('TOUR.WELCOME-TITLE', {userName: userName}), $translate('TOUR.WELCOME-CONTENT'),
            $translate('TOUR.PALETTE-TITLE'), $translate('TOUR.PALETTE-CONTENT'),
            $translate('TOUR.CANVAS-TITLE'), $translate('TOUR.CANVAS-CONTENT'),
            $translate('TOUR.DRAGDROP-TITLE'), $translate('TOUR.DRAGDROP-CONTENT'),
            $translate('TOUR.PROPERTIES-TITLE'), $translate('TOUR.PROPERTIES-CONTENT'),
            $translate('TOUR.TOOLBAR-TITLE'), $translate('TOUR.TOOLBAR-CONTENT'),
            $translate('TOUR.END-TITLE'), $translate('TOUR.END-CONTENT')
        ]).then(function(translations) {

            // We're using a hack here due to https://github.com/sorich87/bootstrap-tour/issues/85:
            // when clicking next in the tour, it always sets the 'display' css property to 'none'
            // The hack is simple: before the next step is shown, we reset the 'display' property to 'block'

            var tourStepDomElements = ['body', '#paletteHelpWrapper', '#canvasHelpWrapper', '#propertiesHelpWrapper', '#editor-header'];

            var tour = new Tour({
                name: 'activitiEditorTour',
                storage: (useLocalStorage ? window.localStorage : false),
                container: 'body',
                backdrop: true,
                keyboard: true,
                steps: [
                    {
                        orphan: true,
                        title: translations[0],
                        content: translations[1],
                        template: FLOWABLE_EDITOR_TOUR._buildStepTemplate(false, true, false, 300),
                        onNext: FLOWABLE_EDITOR_TOUR._buildOnNextFunction(tourStepDomElements[0])
                    },
                    {
                        element: tourStepDomElements[1],
                        title: translations[2],
                        content: translations[3],
                        template: FLOWABLE_EDITOR_TOUR._buildStepTemplate(false, true, false, 400, 'images/tour/open-group.gif'),
                        onNext: FLOWABLE_EDITOR_TOUR._buildOnNextFunction(tourStepDomElements[1])
                    },
                    {
                        element: tourStepDomElements[2],
                        title: translations[4],
                        content: translations[5],
                        placement: 'left',
                        template: FLOWABLE_EDITOR_TOUR._buildStepTemplate(false, true, false),
                        onNext: FLOWABLE_EDITOR_TOUR._buildOnNextFunction(tourStepDomElements[2])
                    },
                    {
                        orphan: true,
                        title: translations[6],
                        content: translations[7],
                        template: FLOWABLE_EDITOR_TOUR._buildStepTemplate(false, true, false, 720, 'images/tour/tour-dnd.gif'),
                        onNext: FLOWABLE_EDITOR_TOUR._buildOnNextFunction(tourStepDomElements[0])
                    },
                    {
                        element: tourStepDomElements[3],
                        title: translations[8],
                        content: translations[9],
                        placement: 'top',
                        template: FLOWABLE_EDITOR_TOUR._buildStepTemplate(false, true, false, 400),
                        onNext: FLOWABLE_EDITOR_TOUR._buildOnNextFunction(tourStepDomElements[3])
                    },
                    {
                        element: tourStepDomElements[4],
                        title: translations[10],
                        content: translations[11],
                        placement: 'bottom',
                        template: FLOWABLE_EDITOR_TOUR._buildStepTemplate(false, true, false, 400),
                        onNext: FLOWABLE_EDITOR_TOUR._buildOnNextFunction(tourStepDomElements[4])
                    },
                    {
                        orphan: true,
                        title: translations[12],
                        content: translations[13],
                        template: FLOWABLE_EDITOR_TOUR._buildStepTemplate(false, false, true, 400),
                        onNext: FLOWABLE_EDITOR_TOUR._buildOnNextFunction(tourStepDomElements[0])
                    }
                ],

                onEnd: FLOWABLE_EDITOR_TOUR._buildOnEndFunction(tourStepDomElements)
            });

            tour.init();
            tour.start();
        })
    },

    /*
     * Tutorial showing how to use the bendpoint functionality for sequenceflow
     */
    sequenceFlowBendpoint: function($scope, $translate, $q, useLocalStorage) {

        $q.all([
            $translate('FEATURE-TOUR.BENDPOINT.TITLE'), $translate('FEATURE-TOUR.BENDPOINT.DESCRIPTION')
        ]).then(function(translations) {

            // We're using a hack here due to https://github.com/sorich87/bootstrap-tour/issues/85:
            // when clicking next in the tour, it always sets the 'display' css property to 'none'
            // The hack is simple: before the next step is shown, we reset the 'display' property to 'block'

            var tourStepDomElements = ['body'];

            var tour = new Tour({
                name: 'bendpointTour',
                storage: (useLocalStorage ? window.localStorage : false),
                container: 'body',
                backdrop: true,
                keyboard: true,
                steps: [
                    {
                        orphan: true,
                        title: translations[0],
                        content: translations[1],
                        template: FLOWABLE_EDITOR_TOUR._buildStepTemplate(false, false, true, 500, 'images/tour/sequenceflow-bendpoint.gif'),
                        onNext: FLOWABLE_EDITOR_TOUR._buildOnNextFunction(tourStepDomElements[0])
                    }
                ],

                onEnd: FLOWABLE_EDITOR_TOUR._buildOnEndFunction(tourStepDomElements)
            });

            tour.init();
            tour.start();
        })
    },



    _buildStepTemplate : function (addPrevButton, addNextButton, addEndTourButton, optionalForcedWidth, image) {

        var width = 200;
        if (optionalForcedWidth) {
            width = optionalForcedWidth;
        }

        var template =
            '<div class=\'popover tour\' style=\'max-width:' + width + 'px\'>' +
            '<div class=\'arrow\'></div>' +
            '<h3 class=\'popover-title\'></h3>' +
            '<div class=\'popover-content\'></div>' +
            '<div class=\'popover-navigation\'>';
        if (image) {
            template = template + '<div><img src=\'' + image + '\' style=\'border 1px solid black;margin:5px 0 5px 0;\'></img></div>';
        }
        if (addPrevButton) {
            template = template + '<button class=\'btn btn-sm btn-default \' data-role=\'prev\'>« Prev</button>';
        }
        if (addNextButton) {
            template = template + '<button class=\'btn btn-sm btn-default\' data-role=\'next\' style=\'float:right\'">Next »</button>';
        }
        if (addEndTourButton) {
            template = template + '<button class=\'btn btn-warning btn-sm\' data-role=\'end\' style=\'float:right\'">Got it!</button>';
        }

        template = template + '</div>' + '</nav>' + '</div>';
        return template;
    },

    _buildOnNextFunction: function(selector) {
        return function () {
            jQuery(selector).each(function (i, obj) {
                obj.style.display = 'block';
            })
        };
    },

    _buildOnEndFunction: function(selectors) {
        return function () {
            for (var elementsToResetIndex = 0; elementsToResetIndex < selectors.length; elementsToResetIndex++) {
                jQuery(selectors[elementsToResetIndex]).each(function (i, obj) {
                    obj.style.display = 'block';
                });
            }
        }
    }

};