ui-tour 3 steps

app/assets/javascripts/controllers/home.js

@@ -1,7 +1,7 @@
 'use strict';
 
-Application.Controllers.controller('HomeController', ['$scope', '$stateParams', 'homeContentPromise', 'uiTourService',
+Application.Controllers.controller('HomeController', ['$scope', '$stateParams', 'homeContentPromise', 'uiTourService', '_t',
-  function ($scope, $stateParams, homeContentPromise, uiTourService) {
+  function ($scope, $stateParams, homeContentPromise, uiTourService, _t) {
   /* PUBLIC SCOPE */
 
     // Home page HTML content
@@ -24,6 +24,30 @@ Application.Controllers.controller('HomeController', ['$scope', '$stateParams',
 
       // setup the tour
       const uitour = uiTourService.getTour();
+      uitour.createStep({
+        selector: 'head',
+        stepId: 'welcome',
+        order: 0,
+        title: _t('app.public.tour.welcome.title'),
+        content: _t('app.public.tour.welcome.content'),
+        placement: 'bottom'
+      });
+      uitour.createStep({
+        selector: '.nav-primary li.home-link',
+        stepId: 'home',
+        order: 1,
+        title: _t('app.public.tour.home.title'),
+        content: _t('app.public.tour.home.content'),
+        placement: 'right'
+      });
+      uitour.createStep({
+        selector: '.nav-primary li.reserve-machine-link',
+        stepId: 'machines',
+        order: 2,
+        title: _t('app.public.tour.machines.title'),
+        content: _t('app.public.tour.machines.content'),
+        placement: 'right'
+      });
       uitour.start();
     };
 

app/assets/javascripts/controllers/main_nav.js

@@ -19,33 +19,39 @@ Application.Controllers.controller('MainNavController', ['$scope', function ($sc
     {
       state: 'app.public.home',
       linkText: 'app.public.common.home',
-      linkIcon: 'home'
+      linkIcon: 'home',
+      class: 'home-link'
     },
 
     {
       state: 'app.public.machines_list',
       linkText: 'app.public.common.reserve_a_machine',
-      linkIcon: 'cogs'
+      linkIcon: 'cogs',
+      class: 'reserve-machine-link'
     },
     {
       state: 'app.public.trainings_list',
       linkText: 'app.public.common.trainings_registrations',
-      linkIcon: 'graduation-cap'
+      linkIcon: 'graduation-cap',
+      class: 'reserve-training-link'
     },
     {
       state: 'app.public.events_list',
       linkText: 'app.public.common.events_registrations',
-      linkIcon: 'tags'
+      linkIcon: 'tags',
+      class: 'reserve-event-link'
     },
     {
       state: 'app.public.calendar',
       linkText: 'app.public.common.public_calendar',
-      linkIcon: 'calendar'
+      linkIcon: 'calendar',
+      class: 'public-calendar-link'
     },
     {
       state: 'app.public.projects_list',
       linkText: 'app.public.common.projects_gallery',
-      linkIcon: 'th'
+      linkIcon: 'th',
+      class: 'projects-gallery-link'
     }
 
   ];
@@ -54,7 +60,8 @@ Application.Controllers.controller('MainNavController', ['$scope', function ($sc
     $scope.navLinks.push({
       state: 'app.public.plans',
       linkText: 'app.public.common.subscriptions',
-      linkIcon: 'credit-card'
+      linkIcon: 'credit-card',
+      class: 'plans-link'
     });
   }
 
@@ -62,7 +69,8 @@ Application.Controllers.controller('MainNavController', ['$scope', function ($sc
     $scope.navLinks.splice(3, 0, {
       state: 'app.public.spaces_list',
       linkText: 'app.public.common.reserve_a_space',
-      linkIcon: 'rocket'
+      linkIcon: 'rocket',
+      class: 'reserve-space-link'
     });
   }
 

app/assets/stylesheets/modules/tour.scss

@@ -1,4 +1,5 @@
 .ui-tour-backdrop {
   background-color: rgba(0, 0, 0, 0.5);
   fill: rgba(0, 0, 0, 0.5);
+  z-index: 1000;
 }

app/assets/templates/shared/header.html.erb

@@ -1,5 +1,5 @@
 
-  <div class="navbar-header" tour-step tour-step-title="Welcome" tour-step-content="Fab-Manager is awesome" tour-step-order="0" tour-step-placement="bottom">
+  <div class="navbar-header">
     <a ng-click="toggleNavSize($event)" class="btn btn-link visible-xs" data-toggle="class:nav-off-screen" data-target="#nav"><i class="fa fa-bars"></i></a>
     <a ui-sref="app.public.home" class="navbar-brand" ng-click="goabout = false">
       <img ng-src="{{logo.custom_asset_file_attributes.attachment_url}}" alt="{{logo.custom_asset_file_attributes.attachment}}" class="m-r-sm"/>

app/assets/templates/shared/leftnav.html.erb

@@ -62,7 +62,7 @@
                 </a>
             </li>
             <!-- Common menu entries -->
-            <li class="" ng-repeat="navLink in navLinks" >
+            <li class="{{navLink.class}}" ng-repeat="navLink in navLinks">
               <a ng-click="toggleNavSize($event)" ui-sref="{{navLink.state}}" ui-sref-active="active" class="auto" data-toggle="class:nav-off-screen" data-target="#nav">
                 <i class="fa fa-{{navLink.linkIcon}} fa-lg"></i>
                 <span>{{navLink.linkText | translate}}</span>

app/assets/templates/shared/tour-step-template.html

@@ -0,0 +1,11 @@
+<div>
+  <div class="popover-content tour-step-content" bind-html-compile="tourStep.trustedContent || tourStep.content"></div>
+  <div class="popover-navigation tour-step-navigation">
+    <div class="btn-group">
+      <button type="button" class="btn btn-sm btn-default" ng-if="tourStep.isPrev()" ng-click="tour.prev()" translate>{{ 'app.public.tour.previous' }}</button>
+      <button type="button" class="btn btn-sm btn-default" ng-if="tourStep.isNext()" ng-click="tour.next()" translate>{{ 'app.public.tour.next' }}</button>
+      <button type="button" class="btn btn-sm btn-default" ng-click="tour.pause()" translate>{{ 'app.public.tour.pause' }}</button>
+    </div>
+    <button type="button" class="btn btn-sm btn-default" ng-click="tour.end()" translate>{{ 'app.public.tour.end' }}</button>
+  </div>
+</div>

app/views/application/index.html.erb

@@ -89,7 +89,7 @@
   <![endif]-->
 </head>
 
-<body ng-controller="ApplicationController" ng-init="setCurrentUser(<%= current_user ? current_user.to_json : 'null' %>)" ng-cloak ui-tour>
+<body ng-controller="ApplicationController" ng-init="setCurrentUser(<%= current_user ? current_user.to_json : 'null' %>)" ng-cloak ui-tour ui-tour-backdrop="true" ui-tour-template-url="'<%= asset_path "shared/tour-step-template.html" %>'">
   <div growl></div>
 
   <%= flash_messages %>

config/locales/app.public.fr.yml

@@ -377,3 +377,19 @@ fr:
         characteristics: "Caractéristiques"
         files_to_download: "Fichiers à télécharger"
         projects_using_the_space: "Projets utilisant l'espace"
+
+      tour:
+        previous: "Précédent"
+        next: "Suivant"
+        pause: "Pause"
+        end: "Terminer la visite"
+        welcome:
+          title: "Bienvenue dans Fab-Manager"
+          content: "Afin de vous aider à bien prendre en main l'application, nous allons procéder à une rapide visite guidée des fonctionnalités."
+        home:
+          title: "Page d'accueil"
+          content: "Un clic ici vous ramènera vers la page d'accueil où vous vous situez actuellement."
+        machines:
+          title: "Les machines"
+          content: "Ici vous pourrez consulter la liste de toutes les machines du Fablab et décider un créneau pour l'une d'entre elle."
+