Add tour segments. And improve tour pause and play functionality with menu toggles.

src/styles/components/helptour.scss

@@ -35,14 +35,14 @@
   .popover {
     opacity: 0.95;
   }
-  .meetingRoom {
+  .roomPane {
-    top: 84px;
+    top: 97px;
     left: 10px;
     .arrow {
       left: 10%;
     }
   }
-  .buddyList {
+  .buddyListPane {
     left: initial;
     right: 280px;
     top: 70px;
@@ -50,4 +50,20 @@
       top: 20%;
     }
   }
+  .chatPane {
+    left: initial;
+    right: 540px;
+    top: 70px;
+    .arrow {
+      top: 20%;
+    }
+  }
+  .settingsPane {
+    left: initial;
+    right: 540px;
+    top: 70px;
+    .arrow {
+      top: 20%;
+    }
+  }
 }

static/js/directives/helptour.js

@@ -29,40 +29,66 @@ define(['jquery', 'text!partials/helpoverlay.html', 'text!partials/helptour.html
 			var shown = localStorage.getItem('mediastream-helptour');
 			var timeoutAutoStepsIn = [];
 			var timeoutAutoStepsOut = [];
+			var menus = {};
+			menus.toggleRoom = function() {
+				var scope = angular.element('#roombar .roombar').scope();
+				if (scope) {
+					scope.hideRoomBar = !scope.hideRoomBar;
+				}
+			};
+			menus.toggleChat = function() {
+				$scope.layout.chat = !$scope.layout.chat;
+			};
+			menus.toggleSettings = function() {
+				$scope.layout.settings = !$scope.layout.settings;
+			};
 			var reset = function() {
 				outStep();
 				$scope.tourPaused = false;
 				$scope.currentIndex = null;
 			};
+			var toggleTargetMenu = function() {
+				var menu = $($scope.steps[$scope.currentIndex]).data('menu');
+				if (menu) {
+					menus[menu]();
+				}
+			};
 			var outStep = function() {
+				toggleTargetMenu();
 				$($scope.steps[$scope.currentIndex]).removeClass('in');
 			};
-			var inStep = function(i, elem) {
+			var inStep = function(i) {
 				$scope.currentIndex = i;
-				$($scope.steps[i]).addClass('in');
+				toggleTargetMenu();
+				$($scope.steps[$scope.currentIndex]).addClass('in');
 			};
-			var autoStep = function(i, elem) {
+			var autoStep = function(i, elem, startIndex) {
+				var inTime = startIndex ? displayTime * (i - startIndex) : displayTime * i;
+				var outTime = startIndex ? displayTime * ((i + 1) - startIndex) : displayTime * (i + 1);
 				timeoutAutoStepsIn[i] = $timeout(function() {
 					inStep(i);
-				}, displayTime * i, true);
+				}, inTime, true);
 				timeoutAutoStepsOut[i] = $timeout(function() {
-					outStep();
 					if ($scope.steps.length === i + 1) {
 						$scope.togglePause();
+					} else {
+						outStep();
 					}
-				}, displayTime * (i + 1), true);
+				}, outTime, true);
 			};
 			var autoTour = function(startIndex) {
-				if (!startIndex) {
+				if (!angular.isNumber(startIndex)) {
 					startIndex = 0;
 				// start again from the beginning and ensure window is hidden
-				} else if (startIndex === $scope.steps.length - 1) {
+				} else if ($scope.currentIndex > $scope.steps.length - 2) {
 					outStep();
 					startIndex = 0;
+				} else {
+					outStep();
 				}
 				$scope.steps.each(function(i, x) {
 					if (i >= startIndex) {
-						autoStep(i, x);
+						autoStep(i, x, startIndex);
 					}
 				});
 			};
@@ -127,7 +153,7 @@ define(['jquery', 'text!partials/helpoverlay.html', 'text!partials/helptour.html
 				if ($scope.tourPaused) {
 					manualTour();
 				} else {
-					autoTour($scope.currentIndex);
+					autoTour($scope.currentIndex + 1);
 				}
 			};
 			$scope.exitTour = function() {

static/partials/helpoverlay.html

@@ -1,20 +1,32 @@
 <div class="helptour">
     <div class="tourSteps">
-        <div class="popover bottom meetingRoom">
+        <div class="popover bottom roomPane" data-menu="toggleRoom">
-            <div class="arrow"></div><h3 class="popover-title">{{_('Meeting Room')}}</h3>
+            <div class="arrow"></div><h3 class="popover-title">{{_('A room')}}</h3>
-            <div class="popover-content">{{_('Change the current meeting room here. Not all rooms names are available and certain characters are automatically removed.')}}</div>
+            <div class="popover-content">{{_('Place to meet people(buddy). Change rooms here and easily send friends a room link with the social media links provided. Not all room names are available and certain characters are automatically removed.')}}</div>
         </div>
-        <div class="popover left buddyList">
+        <div class="popover left buddyListPane">
             <div class="arrow"></div><h3 class="popover-title">{{_('Buddy List')}}</h3>
-            <div class="popover-content">{{_('Every person in a room is listed here.')}}</div>
+            <div class="popover-content">{{_('List of all buddys in the same room and saved contacts.')}}</div>
+        </div>
+        <div class="popover left buddyListPane">
+            <div class="arrow"></div><h3 class="popover-title">{{_('A buddy')}}</h3>
+            <div class="popover-content">{{_('An individual in the same room. If someone is in the same room, a buddy card will be shown. Simply hover over the card to callout chat/call actions. If a star appears next to a buddy comment, the buddy is logged in. When the star is filled the buddy is a contact. Click the star to add a buddy as a contact or remove a contact.')}}</div>
+        </div>
+        <div class="popover left chatPane" data-menu="toggleChat">
+            <div class="arrow"></div><h3 class="popover-title">{{_('Chat sessions')}}</h3>
+            <div class="popover-content">{{_('Group and individual chat sessions. Chat with everyone in a room or chat individually. In group chats you are able to share files and your current location. In individual chats you are also able to start a video call.')}}</div>
+        </div>
+        <div class="popover left settingsPane" data-menu="toggleSettings">
+            <div class="arrow"></div><h3 class="popover-title">{{_('Settings')}}</h3>
+            <div class="popover-content">{{_('Choose a name, upload a picture, signin, and customize you experience.')}}</div>
         </div>
     </div>
     <div class="popover in tourControl" ng-if="currentIndex !== null">
         <div class="arrow"></div><h3 class="popover-title ng-binding">{{_('Tour Control')}} / {{_('Window %d of %d', currentIndex + 1, steps.length)}}</h3>
         <div class="popover-content ng-binding">
             <div class="btn-group">
-                <button class="btn btn-default" ng-click="exitTour()"><i class="fa fa-stop"></i></button>
                 <button class="btn btn-default" ng-model="tourPaused" ng-click="togglePause()"><i class="fa" ng-class="{'fa-play':tourPaused, 'fa-pause':!tourPaused}"></i></button>
+                <button class="btn btn-default" ng-click="exitTour()"><i class="fa fa-stop"></i></button>
             </div>
             <div class="btn-group">
                 <button class="btn btn-default" ng-click="stepBeginning()" ng-disabled="currentIndex < 1"><i class="fa fa-fast-backward"></i></button>