From 59c47fed8725b55e9dcb5eaf4920351bffcddf37 Mon Sep 17 00:00:00 2001 From: Evan Theurer Date: Thu, 9 Oct 2014 18:11:52 +0200 Subject: [PATCH] Add tour segments. And improve tour pause and play functionality with menu toggles. --- src/styles/components/helptour.scss | 22 ++++++++++++-- static/js/directives/helptour.js | 46 ++++++++++++++++++++++------- static/partials/helpoverlay.html | 24 +++++++++++---- 3 files changed, 73 insertions(+), 19 deletions(-) diff --git a/src/styles/components/helptour.scss b/src/styles/components/helptour.scss index 03202721..048d9a2a 100644 --- a/src/styles/components/helptour.scss +++ b/src/styles/components/helptour.scss @@ -35,14 +35,14 @@ .popover { opacity: 0.95; } - .meetingRoom { - top: 84px; + .roomPane { + 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%; + } + } } diff --git a/static/js/directives/helptour.js b/static/js/directives/helptour.js index 66c9460e..b91a5008 100644 --- a/static/js/directives/helptour.js +++ b/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() { diff --git a/static/partials/helpoverlay.html b/static/partials/helpoverlay.html index 0d24acfa..a0082897 100644 --- a/static/partials/helpoverlay.html +++ b/static/partials/helpoverlay.html @@ -1,20 +1,32 @@
-
-

{{_('Meeting Room')}}

-
{{_('Change the current meeting room here. Not all rooms names are available and certain characters are automatically removed.')}}
+
+

{{_('A room')}}

+
{{_('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.')}}
-
+

{{_('Buddy List')}}

-
{{_('Every person in a room is listed here.')}}
+
{{_('List of all buddys in the same room and saved contacts.')}}
+
+
+

{{_('A buddy')}}

+
{{_('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.')}}
+
+
+

{{_('Chat sessions')}}

+
{{_('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.')}}
+
+
+

{{_('Settings')}}

+
{{_('Choose a name, upload a picture, signin, and customize you experience.')}}

{{_('Tour Control')}} / {{_('Window %d of %d', currentIndex + 1, steps.length)}}

- +