From 780f365b8a300bb22961234d798a590af0da6e85 Mon Sep 17 00:00:00 2001 From: Evan Theurer Date: Wed, 8 Oct 2014 15:33:02 +0200 Subject: [PATCH 01/14] Add a help tour of important app features. --- html/main.html | 3 ++ src/styles/components/helptour.scss | 47 +++++++++++++++++ src/styles/main.scss | 1 + static/js/directives/directives.js | 6 ++- static/js/directives/helptour.js | 78 +++++++++++++++++++++++++++++ static/js/directives/settings.js | 6 ++- static/partials/helpoverlay.html | 10 ++++ static/partials/helptour.html | 15 ++++++ static/partials/settings.html | 9 ++++ 9 files changed, 172 insertions(+), 3 deletions(-) create mode 100644 src/styles/components/helptour.scss create mode 100644 static/js/directives/helptour.js create mode 100644 static/partials/helpoverlay.html create mode 100644 static/partials/helptour.html diff --git a/html/main.html b/html/main.html index 3dccb6e3..32d57348 100644 --- a/html/main.html +++ b/html/main.html @@ -4,6 +4,9 @@ <%template "head" .%> +
+ +
diff --git a/src/styles/components/helptour.scss b/src/styles/components/helptour.scss new file mode 100644 index 00000000..c784352d --- /dev/null +++ b/src/styles/components/helptour.scss @@ -0,0 +1,47 @@ +/*! + * Spreed WebRTC. + * Copyright (C) 2013-2014 struktur AG + * + * This file is part of Spreed WebRTC. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with this program. If not, see . + * + */ + +#helptour { +} + +.helptour { + .in { + display: block; + } + .popover { + opacity: 0.85; + } + .meetingRoom { + top: 84px; + left: 10px; + .arrow { + left: 10%; + } + } + .buddyList { + left: initial; + right: 280px; + top: 70px; + .arrow { + top: 20%; + } + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index a260a449..6c8a0979 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -52,5 +52,6 @@ @import "components/contactsmanager"; @import "components/presentation"; @import "components/youtubevideo"; +@import "components/helptour"; @import "shame"; diff --git a/static/js/directives/directives.js b/static/js/directives/directives.js index fea45f1b..12988ac4 100644 --- a/static/js/directives/directives.js +++ b/static/js/directives/directives.js @@ -43,7 +43,8 @@ define([ 'directives/odfcanvas', 'directives/presentation', 'directives/youtubevideo', - 'directives/bfi'], function(_, onEnter, onEscape, statusMessage, buddyList, buddyPictureCapture, buddyPictureUpload, settings, chat, audioVideo, usability, audioLevel, fileInfo, screenshare, roomBar, socialShare, page, contactRequest, defaultDialog, pdfcanvas, odfcanvas, presentation, youtubevideo, bfi) { + 'directives/bfi', + 'directives/helptour'], function(_, onEnter, onEscape, statusMessage, buddyList, buddyPictureCapture, buddyPictureUpload, settings, chat, audioVideo, usability, audioLevel, fileInfo, screenshare, roomBar, socialShare, page, contactRequest, defaultDialog, pdfcanvas, odfcanvas, presentation, youtubevideo, bfi, helptour) { var directives = { onEnter: onEnter, @@ -68,7 +69,8 @@ define([ odfcanvas: odfcanvas, presentation: presentation, youtubevideo: youtubevideo, - bfi: bfi + bfi: bfi, + helptour: helptour }; var initialize = function(angModule) { diff --git a/static/js/directives/helptour.js b/static/js/directives/helptour.js new file mode 100644 index 00000000..ed86c4ab --- /dev/null +++ b/static/js/directives/helptour.js @@ -0,0 +1,78 @@ +/* + * Spreed WebRTC. + * Copyright (C) 2013-2014 struktur AG + * + * This file is part of Spreed WebRTC. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with this program. If not, see . + * + */ + +define(['jquery', 'text!partials/helpoverlay.html', 'text!partials/helptour.html'], function($, template, templatehelptour) { + + //helptour + return [function() { + + var controller = ['$scope', '$rootScope', '$timeout', 'mediaStream', '$modal', function($scope, $rootScope, $timeout, mediaStream, $modal) { + var displayTime = 500; + var doStep = function(i, elem) { + $timeout(function() { + $(elem).addClass('in'); + }, displayTime * i, true); + $timeout(function() { + $(elem).removeClass('in'); + }, displayTime * (i + 1), true); + }; + var startTour = function() { + $scope.steps.each(function(i, x) { + doStep(i, x); + }); + }; + var introTour = function() { + $scope.layout.settings = false; + var controller = ['$scope', '$modalInstance', function($scope, $modalInstance) { + $scope.goTour = function() { + $modalInstance.dismiss(); + startTour(); + }; + }]; + $modal.open({ + template: templatehelptour, + controller: controller, + resolve: {}, + size: 'sm' + }); + }; + introTour(); + $scope.$on('showHelpTour', function(current, last) { + if(current) { + introTour(); + } + }); + }]; + + var link = function($scope, $elem, $attrs) { + $scope.steps = $elem.find('.popover'); + }; + + return { + restrict: 'E', + scope: true, + replace: true, + template: template, + controller: controller, + link: link + }; + }]; +}); diff --git a/static/js/directives/settings.js b/static/js/directives/settings.js index b8dd5173..30cd16e0 100644 --- a/static/js/directives/settings.js +++ b/static/js/directives/settings.js @@ -22,7 +22,7 @@ define(['jquery', 'underscore', 'text!partials/settings.html'], function($, _, t return ["$compile", "mediaStream", function($compile, mediaStream) { - var controller = ['$scope', 'desktopNotify', 'mediaSources', 'safeApply', 'availableLanguages', 'translation', 'localStorage', 'userSettingsData', function($scope, desktopNotify, mediaSources, safeApply, availableLanguages, translation, localStorage, userSettingsData) { + var controller = ['$scope', 'desktopNotify', 'mediaSources', 'safeApply', 'availableLanguages', 'translation', 'localStorage', 'userSettingsData', '$rootScope', function($scope, desktopNotify, mediaSources, safeApply, availableLanguages, translation, localStorage, userSettingsData, $rootScope) { $scope.layout.settings = false; $scope.showAdvancedSettings = true; @@ -51,6 +51,10 @@ define(['jquery', 'underscore', 'text!partials/settings.html'], function($, _, t } }); + $scope.takeTour = function() { + $rootScope.$broadcast('showHelpTour'); + }; + $scope.saveSettings = function() { var form = $scope.settingsform; if (form.$valid && form.$dirty) { diff --git a/static/partials/helpoverlay.html b/static/partials/helpoverlay.html new file mode 100644 index 00000000..70c0fcef --- /dev/null +++ b/static/partials/helpoverlay.html @@ -0,0 +1,10 @@ +
+
+

{{_('Meeting Room')}}

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

{{_('Buddy List')}}

+
{{_('Every person in a room is listed here.')}}
+
+
diff --git a/static/partials/helptour.html b/static/partials/helptour.html new file mode 100644 index 00000000..228c2fc0 --- /dev/null +++ b/static/partials/helptour.html @@ -0,0 +1,15 @@ +
+
+ +

{{_('Tour')}}

+
+
+

Congratulations! Anonymous secure peer to peer chat and video calls are a short click away. Quickly get started with the features tour below.

+
+
+
+ + +
+
+
diff --git a/static/partials/settings.html b/static/partials/settings.html index 6c087879..14186a4e 100644 --- a/static/partials/settings.html +++ b/static/partials/settings.html @@ -270,6 +270,15 @@ {{_('Show advanced settings')}}{{_('Hide advanced settings')}} + + {{_('Help')}} +
+ +
+ +
+
+
From e77c96c4787aea720182a6b0abb841183d114bb1 Mon Sep 17 00:00:00 2001 From: Evan Theurer Date: Wed, 8 Oct 2014 18:08:33 +0200 Subject: [PATCH 02/14] Add flag to localStorage to hide help tour when already shown. --- static/js/directives/helptour.js | 13 ++++++++----- static/partials/helptour.html | 4 ++-- 2 files changed, 10 insertions(+), 7 deletions(-) diff --git a/static/js/directives/helptour.js b/static/js/directives/helptour.js index ed86c4ab..2c72647d 100644 --- a/static/js/directives/helptour.js +++ b/static/js/directives/helptour.js @@ -24,8 +24,9 @@ define(['jquery', 'text!partials/helpoverlay.html', 'text!partials/helptour.html //helptour return [function() { - var controller = ['$scope', '$rootScope', '$timeout', 'mediaStream', '$modal', function($scope, $rootScope, $timeout, mediaStream, $modal) { + var controller = ['$scope', '$timeout', '$modal', 'userSettingsData', function($scope, $timeout, $modal, userSettingsData) { var displayTime = 500; + var shown = localStorage.getItem('mediastream-helptour'); var doStep = function(i, elem) { $timeout(function() { $(elem).addClass('in'); @@ -41,8 +42,8 @@ define(['jquery', 'text!partials/helpoverlay.html', 'text!partials/helptour.html }; var introTour = function() { $scope.layout.settings = false; - var controller = ['$scope', '$modalInstance', function($scope, $modalInstance) { - $scope.goTour = function() { + var controller = ['$scope', '$modalInstance', function(scope, $modalInstance) { + scope.goTour = function() { $modalInstance.dismiss(); startTour(); }; @@ -50,11 +51,13 @@ define(['jquery', 'text!partials/helpoverlay.html', 'text!partials/helptour.html $modal.open({ template: templatehelptour, controller: controller, - resolve: {}, size: 'sm' }); }; - introTour(); + if (!shown) { + introTour(); + localStorage.setItem('mediastream-helptour', true); + } $scope.$on('showHelpTour', function(current, last) { if(current) { introTour(); diff --git a/static/partials/helptour.html b/static/partials/helptour.html index 228c2fc0..f9e0ae2a 100644 --- a/static/partials/helptour.html +++ b/static/partials/helptour.html @@ -4,12 +4,12 @@

{{_('Tour')}}

-

Congratulations! Anonymous secure peer to peer chat and video calls are a short click away. Quickly get started with the features tour below.

+

{{_('Congratulations! Anonymous secure peer to peer chat and video calls are a short click away. Quickly get started with the features tour below.')}}

- +
From cc13ad2bcb592b7618b9e49f3f18350b3397da98 Mon Sep 17 00:00:00 2001 From: Evan Theurer Date: Thu, 9 Oct 2014 14:27:54 +0200 Subject: [PATCH 03/14] Add a tour controller. --- src/styles/components/helptour.scss | 8 ++- static/js/directives/helptour.js | 81 ++++++++++++++++++++++++----- static/partials/helpoverlay.html | 29 ++++++++--- static/partials/helptour.html | 2 +- 4 files changed, 98 insertions(+), 22 deletions(-) diff --git a/src/styles/components/helptour.scss b/src/styles/components/helptour.scss index c784352d..03202721 100644 --- a/src/styles/components/helptour.scss +++ b/src/styles/components/helptour.scss @@ -23,11 +23,17 @@ } .helptour { + .tourControl { + top: initial; + bottom: 10px; + left: 10px; + max-width: none; + } .in { display: block; } .popover { - opacity: 0.85; + opacity: 0.95; } .meetingRoom { top: 84px; diff --git a/static/js/directives/helptour.js b/static/js/directives/helptour.js index 2c72647d..04f7df15 100644 --- a/static/js/directives/helptour.js +++ b/static/js/directives/helptour.js @@ -24,20 +24,45 @@ define(['jquery', 'text!partials/helpoverlay.html', 'text!partials/helptour.html //helptour return [function() { - var controller = ['$scope', '$timeout', '$modal', 'userSettingsData', function($scope, $timeout, $modal, userSettingsData) { - var displayTime = 500; + var controller = ['$scope', '$timeout', '$modal', 'userSettingsData', '$q', function($scope, $timeout, $modal, userSettingsData, $q) { + var displayTime = 2000; var shown = localStorage.getItem('mediastream-helptour'); - var doStep = function(i, elem) { - $timeout(function() { - $(elem).addClass('in'); + var timeoutAutoStepsIn = []; + var timeoutAutoStepsOut = []; + var reset = function() { + $scope.toAutourPaused = false; + $($scope.steps[$scope.currentIndex]).removeClass('in'); + $scope.currentIndex = null; + }; + var outStep = function(i, elem) { + $(elem).removeClass('in'); + }; + var inStep = function(i, elem) { + $(elem).addClass('in'); + $scope.currentIndex = i; + }; + var autoStep = function(i, elem) { + timeoutAutoStepsIn[i] = $timeout(function() { + inStep(i, elem); }, displayTime * i, true); - $timeout(function() { - $(elem).removeClass('in'); + timeoutAutoStepsOut[i] = $timeout(function() { + outStep(i, elem); }, displayTime * (i + 1), true); }; - var startTour = function() { + var autoTour = function(start) { + start = start ? start - 1 : 0; $scope.steps.each(function(i, x) { - doStep(i, x); + if(i >= start) { + autoStep(i, x); + } + }); + }; + var manualTour = function() { + timeoutAutoStepsIn.forEach(function(promise) { + $timeout.cancel(promise); + }); + timeoutAutoStepsOut.forEach(function(promise) { + $timeout.cancel(promise); }); }; var introTour = function() { @@ -45,7 +70,7 @@ define(['jquery', 'text!partials/helpoverlay.html', 'text!partials/helptour.html var controller = ['$scope', '$modalInstance', function(scope, $modalInstance) { scope.goTour = function() { $modalInstance.dismiss(); - startTour(); + autoTour(); }; }]; $modal.open({ @@ -58,15 +83,43 @@ define(['jquery', 'text!partials/helpoverlay.html', 'text!partials/helptour.html introTour(); localStorage.setItem('mediastream-helptour', true); } - $scope.$on('showHelpTour', function(current, last) { - if(current) { - introTour(); + $scope.tourPaused = false; + $scope.currentIndex = null; + $scope.stepBeginning = function() { + outStep($scope.currentIndex, $scope.steps[$scope.currentIndex]); + inStep(0, $scope.steps[0]); + }; + $scope.stepBackward = function() { + outStep($scope.currentIndex, $scope.steps[$scope.currentIndex]); + inStep($scope.currentIndex - 1, $scope.steps[$scope.currentIndex - 1]); + }; + $scope.stepForward = function() { + outStep($scope.currentIndex, $scope.steps[$scope.currentIndex]); + inStep($scope.currentIndex + 1, $scope.steps[$scope.currentIndex + 1]); + }; + $scope.stepEnd = function() { + outStep($scope.currentIndex, $scope.steps[$scope.currentIndex]); + inStep($scope.steps.length - 1, $scope.steps[$scope.steps.length - 1]); + }; + $scope.togglePause = function() { + $scope.tourPaused = !$scope.tourPaused; + if ($scope.tourPaused) { + manualTour(); + } else { + autoTour($scope.currentIndex); } + }; + $scope.exitTour = function() { + manualTour(); + reset(); + }; + $scope.$on('showHelpTour', function() { + introTour(); }); }]; var link = function($scope, $elem, $attrs) { - $scope.steps = $elem.find('.popover'); + $scope.steps = $elem.find('.tourSteps .popover'); }; return { diff --git a/static/partials/helpoverlay.html b/static/partials/helpoverlay.html index 70c0fcef..170e9609 100644 --- a/static/partials/helpoverlay.html +++ b/static/partials/helpoverlay.html @@ -1,10 +1,27 @@
-
-

{{_('Meeting Room')}}

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

{{_('Meeting Room')}}

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

{{_('Buddy List')}}

+
{{_('Every person in a room is listed here.')}}
+
-
-

{{_('Buddy List')}}

-
{{_('Every person in a room is listed here.')}}
+
+

Tour Control - {{currentIndex + 1}} of {{steps.length}}

+
+
+ + +
+
+ + + + +
+
diff --git a/static/partials/helptour.html b/static/partials/helptour.html index f9e0ae2a..6e651b28 100644 --- a/static/partials/helptour.html +++ b/static/partials/helptour.html @@ -4,7 +4,7 @@

{{_('Tour')}}

-

{{_('Congratulations! Anonymous secure peer to peer chat and video calls are a short click away. Quickly get started with the features tour below.')}}

+

{{_('Congratulations! Anonymous secure peer to peer chat and video calls are a short click away. Quickly get started with the features tour below. The tour can be accessed again under settings.')}}

From 1a7422b0bc6fc9c43d82ca30c8ffe23df7d66f47 Mon Sep 17 00:00:00 2001 From: Evan Theurer Date: Thu, 9 Oct 2014 15:00:06 +0200 Subject: [PATCH 04/14] Start video again from the beginning when play is pushed at last node. Cleanups. --- static/js/directives/helptour.js | 58 +++++++++++++++++++++----------- 1 file changed, 39 insertions(+), 19 deletions(-) diff --git a/static/js/directives/helptour.js b/static/js/directives/helptour.js index 04f7df15..ae04589b 100644 --- a/static/js/directives/helptour.js +++ b/static/js/directives/helptour.js @@ -30,29 +30,35 @@ define(['jquery', 'text!partials/helpoverlay.html', 'text!partials/helptour.html var timeoutAutoStepsIn = []; var timeoutAutoStepsOut = []; var reset = function() { - $scope.toAutourPaused = false; - $($scope.steps[$scope.currentIndex]).removeClass('in'); + outStep(); + $scope.tourPaused = false; $scope.currentIndex = null; }; - var outStep = function(i, elem) { - $(elem).removeClass('in'); + var outStep = function() { + $($scope.steps[$scope.currentIndex]).removeClass('in'); }; var inStep = function(i, elem) { - $(elem).addClass('in'); $scope.currentIndex = i; + $($scope.steps[i]).addClass('in'); }; var autoStep = function(i, elem) { timeoutAutoStepsIn[i] = $timeout(function() { - inStep(i, elem); + inStep(i); }, displayTime * i, true); timeoutAutoStepsOut[i] = $timeout(function() { - outStep(i, elem); + outStep(i); + if ($scope.steps.length === i + 1) { + $scope.togglePause(); + } }, displayTime * (i + 1), true); }; - var autoTour = function(start) { - start = start ? start - 1 : 0; + var autoTour = function(startIndex) { + // start again from the beginning + if (startIndex === undefined || startIndex === $scope.steps.length - 1) { + startIndex = 0; + } $scope.steps.each(function(i, x) { - if(i >= start) { + if (i >= startIndex) { autoStep(i, x); } }); @@ -86,20 +92,32 @@ define(['jquery', 'text!partials/helpoverlay.html', 'text!partials/helptour.html $scope.tourPaused = false; $scope.currentIndex = null; $scope.stepBeginning = function() { - outStep($scope.currentIndex, $scope.steps[$scope.currentIndex]); - inStep(0, $scope.steps[0]); + if (!$scope.tourPaused) { + $scope.togglePause(); + } + outStep(); + inStep(0); }; $scope.stepBackward = function() { - outStep($scope.currentIndex, $scope.steps[$scope.currentIndex]); - inStep($scope.currentIndex - 1, $scope.steps[$scope.currentIndex - 1]); + if (!$scope.tourPaused) { + $scope.togglePause(); + } + outStep(); + inStep($scope.currentIndex - 1); }; $scope.stepForward = function() { - outStep($scope.currentIndex, $scope.steps[$scope.currentIndex]); - inStep($scope.currentIndex + 1, $scope.steps[$scope.currentIndex + 1]); + if (!$scope.tourPaused) { + $scope.togglePause(); + } + outStep(); + inStep($scope.currentIndex + 1); }; $scope.stepEnd = function() { - outStep($scope.currentIndex, $scope.steps[$scope.currentIndex]); - inStep($scope.steps.length - 1, $scope.steps[$scope.steps.length - 1]); + if (!$scope.tourPaused) { + $scope.togglePause(); + } + outStep(); + inStep($scope.steps.length - 1); }; $scope.togglePause = function() { $scope.tourPaused = !$scope.tourPaused; @@ -110,7 +128,9 @@ define(['jquery', 'text!partials/helpoverlay.html', 'text!partials/helptour.html } }; $scope.exitTour = function() { - manualTour(); + if (!$scope.tourPaused) { + manualTour(); + } reset(); }; $scope.$on('showHelpTour', function() { From f95fd510bd83895f40cb0f6a45302bc3f4766327 Mon Sep 17 00:00:00 2001 From: Evan Theurer Date: Thu, 9 Oct 2014 15:34:45 +0200 Subject: [PATCH 05/14] Update text and end slide case when in manual mode and pushing play to show tour again. --- static/js/directives/helptour.js | 9 ++++++--- static/partials/helpoverlay.html | 2 +- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/static/js/directives/helptour.js b/static/js/directives/helptour.js index ae04589b..66c9460e 100644 --- a/static/js/directives/helptour.js +++ b/static/js/directives/helptour.js @@ -46,15 +46,18 @@ define(['jquery', 'text!partials/helpoverlay.html', 'text!partials/helptour.html inStep(i); }, displayTime * i, true); timeoutAutoStepsOut[i] = $timeout(function() { - outStep(i); + outStep(); if ($scope.steps.length === i + 1) { $scope.togglePause(); } }, displayTime * (i + 1), true); }; var autoTour = function(startIndex) { - // start again from the beginning - if (startIndex === undefined || startIndex === $scope.steps.length - 1) { + if (!startIndex) { + startIndex = 0; + // start again from the beginning and ensure window is hidden + } else if (startIndex === $scope.steps.length - 1) { + outStep(); startIndex = 0; } $scope.steps.each(function(i, x) { diff --git a/static/partials/helpoverlay.html b/static/partials/helpoverlay.html index 170e9609..0d24acfa 100644 --- a/static/partials/helpoverlay.html +++ b/static/partials/helpoverlay.html @@ -10,7 +10,7 @@
-

Tour Control - {{currentIndex + 1}} of {{steps.length}}

+

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

From 59c47fed8725b55e9dcb5eaf4920351bffcddf37 Mon Sep 17 00:00:00 2001 From: Evan Theurer Date: Thu, 9 Oct 2014 18:11:52 +0200 Subject: [PATCH 06/14] 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)}}

- +
From 08f4f1a9ac7156c88138a2c46f0475e38baa967c Mon Sep 17 00:00:00 2001 From: Evan Theurer Date: Fri, 10 Oct 2014 14:22:36 +0200 Subject: [PATCH 07/14] Handle layouts in tour and after. Start tour on room event. --- src/styles/components/helptour.scss | 2 +- static/js/directives/helptour.js | 44 ++++++++++++++++++++--------- 2 files changed, 32 insertions(+), 14 deletions(-) diff --git a/src/styles/components/helptour.scss b/src/styles/components/helptour.scss index 048d9a2a..a4f72f9d 100644 --- a/src/styles/components/helptour.scss +++ b/src/styles/components/helptour.scss @@ -61,7 +61,7 @@ .settingsPane { left: initial; right: 540px; - top: 70px; + top: 200px; .arrow { top: 20%; } diff --git a/static/js/directives/helptour.js b/static/js/directives/helptour.js index b91a5008..d1ad9d07 100644 --- a/static/js/directives/helptour.js +++ b/static/js/directives/helptour.js @@ -19,17 +19,28 @@ * */ -define(['jquery', 'text!partials/helpoverlay.html', 'text!partials/helptour.html'], function($, template, templatehelptour) { +define(['jquery', 'angular', 'text!partials/helpoverlay.html', 'text!partials/helptour.html'], function($, angular, template, templatehelptour) { //helptour return [function() { - var controller = ['$scope', '$timeout', '$modal', 'userSettingsData', '$q', function($scope, $timeout, $modal, userSettingsData, $q) { + var controller = ['$scope', '$timeout', '$modal', '$rootScope', function($scope, $timeout, $modal, $rootScope) { var displayTime = 2000; var shown = localStorage.getItem('mediastream-helptour'); var timeoutAutoStepsIn = []; var timeoutAutoStepsOut = []; var menus = {}; + var backupLayout = null; + var tourLayout = { + buddylist: true, + buddylistAutoHide: false, + chat: false, + chatMaximized: false, + main: null, + presentation: false, + screenshare: false, + settings: false + }; menus.toggleRoom = function() { var scope = angular.element('#roombar .roombar').scope(); if (scope) { @@ -42,11 +53,6 @@ define(['jquery', 'text!partials/helpoverlay.html', 'text!partials/helptour.html 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) { @@ -100,12 +106,22 @@ define(['jquery', 'text!partials/helpoverlay.html', 'text!partials/helptour.html $timeout.cancel(promise); }); }; + var initTour = function() { + backupLayout = angular.extend({}, $scope.layout); + $scope.layout = angular.extend($scope.layout, tourLayout); + autoTour(); + }; + var reset = function() { + outStep(); + $scope.tourPaused = false; + $scope.currentIndex = null; + $scope.layout = angular.extend($scope.layout, backupLayout); + }; var introTour = function() { - $scope.layout.settings = false; var controller = ['$scope', '$modalInstance', function(scope, $modalInstance) { scope.goTour = function() { $modalInstance.dismiss(); - autoTour(); + initTour(); }; }]; $modal.open({ @@ -114,10 +130,6 @@ define(['jquery', 'text!partials/helpoverlay.html', 'text!partials/helptour.html size: 'sm' }); }; - if (!shown) { - introTour(); - localStorage.setItem('mediastream-helptour', true); - } $scope.tourPaused = false; $scope.currentIndex = null; $scope.stepBeginning = function() { @@ -165,6 +177,12 @@ define(['jquery', 'text!partials/helpoverlay.html', 'text!partials/helptour.html $scope.$on('showHelpTour', function() { introTour(); }); + $rootScope.$on("room", function(event, room) { + if (!shown) { + introTour(); + localStorage.setItem('mediastream-helptour', true); + } + }); }]; var link = function($scope, $elem, $attrs) { From 6c47a809a1dc4dbd2779184b27e95c59ee4a0191 Mon Sep 17 00:00:00 2001 From: Evan Theurer Date: Fri, 10 Oct 2014 16:29:27 +0200 Subject: [PATCH 08/14] Add media permission help window. --- src/styles/components/helptour.scss | 37 +++++++++++++++++++++++++++++ static/js/directives/helptour.js | 11 ++++++++- static/partials/helpoverlay.html | 21 ++++++++++++---- 3 files changed, 63 insertions(+), 6 deletions(-) diff --git a/src/styles/components/helptour.scss b/src/styles/components/helptour.scss index a4f72f9d..b71fc900 100644 --- a/src/styles/components/helptour.scss +++ b/src/styles/components/helptour.scss @@ -66,4 +66,41 @@ top: 20%; } } + .mediaAccessPane { + top: 10px; + left: initial; + right: 10px; + } +} + +.arrow+.secondArrow { + border-width: 11px; + &:after { + border-width: 10px; + content: ""; + } +} +.arrow+.secondArrow, +.arrow+.secondArrow:after { + position: absolute; + display: block; + width: 0; + height: 0; + border-color: rgba(0, 0, 0, 0); + border-style: solid; +} +.secondArrow.right { + top: 50%; + left: -11px; + margin-top: -11px; + border-left-width: 0; + border-right-color: #999; + border-right-color: rgba(0, 0, 0, 0.25); + &:after { + content: " "; + left: 1px; + bottom: -10px; + border-left-width: 0; + border-right-color: #FFF; + } } diff --git a/static/js/directives/helptour.js b/static/js/directives/helptour.js index d1ad9d07..899cb00a 100644 --- a/static/js/directives/helptour.js +++ b/static/js/directives/helptour.js @@ -24,7 +24,7 @@ define(['jquery', 'angular', 'text!partials/helpoverlay.html', 'text!partials/he //helptour return [function() { - var controller = ['$scope', '$timeout', '$modal', '$rootScope', function($scope, $timeout, $modal, $rootScope) { + var controller = ['$scope', '$timeout', '$modal', '$rootScope', 'mediaStream', function($scope, $timeout, $modal, $rootScope, mediaStream) { var displayTime = 2000; var shown = localStorage.getItem('mediastream-helptour'); var timeoutAutoStepsIn = []; @@ -41,6 +41,12 @@ define(['jquery', 'angular', 'text!partials/helpoverlay.html', 'text!partials/he screenshare: false, settings: false }; + var trigger = false; + menus.triggerMediaAccess = function() { + if (trigger) { + mediaStream.webrtc.testMediaAccess(function() {}); + } + }; menus.toggleRoom = function() { var scope = angular.element('#roombar .roombar').scope(); if (scope) { @@ -56,6 +62,9 @@ define(['jquery', 'angular', 'text!partials/helpoverlay.html', 'text!partials/he var toggleTargetMenu = function() { var menu = $($scope.steps[$scope.currentIndex]).data('menu'); if (menu) { + if (menu.search('trigger') > -1) { + trigger = !trigger; + } menus[menu](); } }; diff --git a/static/partials/helpoverlay.html b/static/partials/helpoverlay.html index a0082897..fcaf785e 100644 --- a/static/partials/helpoverlay.html +++ b/static/partials/helpoverlay.html @@ -1,25 +1,36 @@
-

{{_('A room')}}

+
+

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

+
+

{{_('Buddy List')}}

{{_('List of all buddys in the same room and saved contacts.')}}
-

{{_('A buddy')}}

+
+

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

+
+

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

+
+

{{_('Settings')}}

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

{{_('Media permission')}}

+
{{_('Everytime a call is made or recieved a permission window from the browser will show up like this. To make a call you must accept, otherwise the browser cannot use your wecam and video to make a call. This is a security and privacy precaution.')}}
+

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

From 6d55299909fa9dddad291085dca448c66290d3f4 Mon Sep 17 00:00:00 2001 From: Evan Theurer Date: Tue, 28 Oct 2014 14:16:46 +0100 Subject: [PATCH 09/14] Use new roombar value. --- static/js/directives/helptour.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/static/js/directives/helptour.js b/static/js/directives/helptour.js index 899cb00a..8c2ff051 100644 --- a/static/js/directives/helptour.js +++ b/static/js/directives/helptour.js @@ -48,10 +48,7 @@ define(['jquery', 'angular', 'text!partials/helpoverlay.html', 'text!partials/he } }; menus.toggleRoom = function() { - var scope = angular.element('#roombar .roombar').scope(); - if (scope) { - scope.hideRoomBar = !scope.hideRoomBar; - } + $scope.layout.roombar = !$scope.layout.roombar; }; menus.toggleChat = function() { $scope.layout.chat = !$scope.layout.chat; From 1a885af03a6dd0d7b83e6c8dbf541c6ccc173a21 Mon Sep 17 00:00:00 2001 From: Evan Theurer Date: Fri, 31 Oct 2014 12:47:40 +0100 Subject: [PATCH 10/14] Change localstorage flag. --- static/js/directives/helptour.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/static/js/directives/helptour.js b/static/js/directives/helptour.js index 8c2ff051..35c6d421 100644 --- a/static/js/directives/helptour.js +++ b/static/js/directives/helptour.js @@ -186,7 +186,7 @@ define(['jquery', 'angular', 'text!partials/helpoverlay.html', 'text!partials/he $rootScope.$on("room", function(event, room) { if (!shown) { introTour(); - localStorage.setItem('mediastream-helptour', true); + localStorage.setItem('mediastream-helptour', 1); } }); }]; From ba29f3b8092c792b387cdc32177db3550e0213cb Mon Sep 17 00:00:00 2001 From: Evan Theurer Date: Fri, 31 Oct 2014 14:54:51 +0100 Subject: [PATCH 11/14] Lengthen time slides are shown. Darken panes which are irrelevant to what is shown. --- src/styles/components/helptour.scss | 33 +++++++++++++++++++++++++++++ static/js/directives/helptour.js | 13 +++++++++--- static/partials/helpoverlay.html | 12 +++++------ 3 files changed, 49 insertions(+), 9 deletions(-) diff --git a/src/styles/components/helptour.scss b/src/styles/components/helptour.scss index b71fc900..32ba9928 100644 --- a/src/styles/components/helptour.scss +++ b/src/styles/components/helptour.scss @@ -104,3 +104,36 @@ border-right-color: #FFF; } } +.helptourShowRoomPane { + #bar, + #buddylist { + opacity: .4; + } + .overlaybar { + background: $componentfg2; + } +} +.helptourShowSettingsPane { + #roombar { + opacity: .4; + } +} +.helptourShowChatPane { + #roombar, + #buddylist { + opacity: .4; + } +} +.helptourShowBuddyListPane { + #bar, + #roombar { + opacity: .4; + } +} +.helptourShowMediaAccessPane { + #bar, + #roombar, + #buddylist { + opacity: .4; + } +} diff --git a/static/js/directives/helptour.js b/static/js/directives/helptour.js index 35c6d421..852f1ef6 100644 --- a/static/js/directives/helptour.js +++ b/static/js/directives/helptour.js @@ -25,7 +25,7 @@ define(['jquery', 'angular', 'text!partials/helpoverlay.html', 'text!partials/he return [function() { var controller = ['$scope', '$timeout', '$modal', '$rootScope', 'mediaStream', function($scope, $timeout, $modal, $rootScope, mediaStream) { - var displayTime = 2000; + var displayTime = 12000; var shown = localStorage.getItem('mediastream-helptour'); var timeoutAutoStepsIn = []; var timeoutAutoStepsOut = []; @@ -47,7 +47,7 @@ define(['jquery', 'angular', 'text!partials/helpoverlay.html', 'text!partials/he mediaStream.webrtc.testMediaAccess(function() {}); } }; - menus.toggleRoom = function() { + menus.toggleRoom = function(css) { $scope.layout.roombar = !$scope.layout.roombar; }; menus.toggleChat = function() { @@ -56,13 +56,20 @@ define(['jquery', 'angular', 'text!partials/helpoverlay.html', 'text!partials/he menus.toggleSettings = function() { $scope.layout.settings = !$scope.layout.settings; }; + menus.toggleCSS = function(css) { + $('body').toggleClass(css); + }; var toggleTargetMenu = function() { var menu = $($scope.steps[$scope.currentIndex]).data('menu'); + var css = $($scope.steps[$scope.currentIndex]).data('css'); if (menu) { if (menu.search('trigger') > -1) { trigger = !trigger; } - menus[menu](); + menus[menu](css); + } + if (css) { + menus.toggleCSS(css); } }; var outStep = function() { diff --git a/static/partials/helpoverlay.html b/static/partials/helpoverlay.html index fcaf785e..15e930ef 100644 --- a/static/partials/helpoverlay.html +++ b/static/partials/helpoverlay.html @@ -1,31 +1,31 @@
-
+

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

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

{{_('Media permission')}}

From 6111fc785f930beea81306a55c0f40924916ac3f Mon Sep 17 00:00:00 2001 From: Evan Theurer Date: Fri, 31 Oct 2014 15:56:14 +0100 Subject: [PATCH 12/14] Create welcome closing slide. Change btn type. --- src/styles/components/helptour.scss | 8 ++++++++ static/js/directives/helptour.js | 2 ++ static/partials/helpoverlay.html | 8 ++++++++ static/partials/helptour.html | 2 +- static/partials/settings.html | 2 +- 5 files changed, 20 insertions(+), 2 deletions(-) diff --git a/src/styles/components/helptour.scss b/src/styles/components/helptour.scss index 32ba9928..a13ad18b 100644 --- a/src/styles/components/helptour.scss +++ b/src/styles/components/helptour.scss @@ -71,6 +71,14 @@ left: initial; right: 10px; } + .welcomePane { + position: relative; + margin: 0 auto; + top: 150px; + .btn { + margin-top: 10px; + } + } } .arrow+.secondArrow { diff --git a/static/js/directives/helptour.js b/static/js/directives/helptour.js index 852f1ef6..faeebbe5 100644 --- a/static/js/directives/helptour.js +++ b/static/js/directives/helptour.js @@ -45,6 +45,8 @@ define(['jquery', 'angular', 'text!partials/helpoverlay.html', 'text!partials/he menus.triggerMediaAccess = function() { if (trigger) { mediaStream.webrtc.testMediaAccess(function() {}); + } else { + mediaStream.webrtc.stop(); } }; menus.toggleRoom = function(css) { diff --git a/static/partials/helpoverlay.html b/static/partials/helpoverlay.html index 15e930ef..70d1f4ab 100644 --- a/static/partials/helpoverlay.html +++ b/static/partials/helpoverlay.html @@ -31,6 +31,14 @@

{{_('Media permission')}}

{{_('Everytime a call is made or recieved a permission window from the browser will show up like this. To make a call you must accept, otherwise the browser cannot use your wecam and video to make a call. This is a security and privacy precaution.')}}
+
+

{{_('Welcome')}}

+
+ {{_('Welcome to spreed-webrtc! Start calling and chatting now.')}} + + +
+

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

diff --git a/static/partials/helptour.html b/static/partials/helptour.html index 6e651b28..38adf7da 100644 --- a/static/partials/helptour.html +++ b/static/partials/helptour.html @@ -9,7 +9,7 @@
- +
diff --git a/static/partials/settings.html b/static/partials/settings.html index 14186a4e..2d40f8b3 100644 --- a/static/partials/settings.html +++ b/static/partials/settings.html @@ -275,7 +275,7 @@
- +
From 1d3591a0ce95ea535009bd0e0dff9388232215d7 Mon Sep 17 00:00:00 2001 From: Evan Theurer Date: Thu, 13 Nov 2014 15:51:31 +0100 Subject: [PATCH 13/14] Darken the last slide. --- src/styles/components/helptour.scss | 15 +++++++++------ static/partials/helpoverlay.html | 2 +- 2 files changed, 10 insertions(+), 7 deletions(-) diff --git a/src/styles/components/helptour.scss b/src/styles/components/helptour.scss index a13ad18b..9e4669eb 100644 --- a/src/styles/components/helptour.scss +++ b/src/styles/components/helptour.scss @@ -19,6 +19,8 @@ * */ +$darken-tour-opacity: .4; + #helptour { } @@ -115,7 +117,7 @@ .helptourShowRoomPane { #bar, #buddylist { - opacity: .4; + opacity: $darken-tour-opacity; } .overlaybar { background: $componentfg2; @@ -123,25 +125,26 @@ } .helptourShowSettingsPane { #roombar { - opacity: .4; + opacity: $darken-tour-opacity; } } .helptourShowChatPane { #roombar, #buddylist { - opacity: .4; + opacity: $darken-tour-opacity; } } .helptourShowBuddyListPane { #bar, #roombar { - opacity: .4; + opacity: $darken-tour-opacity; } } -.helptourShowMediaAccessPane { +.helptourShowMediaAccessPane, +.helptourShowWelcomePane { #bar, #roombar, #buddylist { - opacity: .4; + opacity: $darken-tour-opacity; } } diff --git a/static/partials/helpoverlay.html b/static/partials/helpoverlay.html index 70d1f4ab..436ec2a7 100644 --- a/static/partials/helpoverlay.html +++ b/static/partials/helpoverlay.html @@ -31,7 +31,7 @@

{{_('Media permission')}}

{{_('Everytime a call is made or recieved a permission window from the browser will show up like this. To make a call you must accept, otherwise the browser cannot use your wecam and video to make a call. This is a security and privacy precaution.')}}
-
+

{{_('Welcome')}}

{{_('Welcome to spreed-webrtc! Start calling and chatting now.')}} From f474224941cf4c9b19f8e01e7490800f85f1b2fc Mon Sep 17 00:00:00 2001 From: Evan Theurer Date: Thu, 13 Nov 2014 17:13:53 +0100 Subject: [PATCH 14/14] Define layout object for each slide. --- static/js/directives/helptour.js | 92 ++++++++++++++++++++++++++++---- 1 file changed, 82 insertions(+), 10 deletions(-) diff --git a/static/js/directives/helptour.js b/static/js/directives/helptour.js index faeebbe5..d1a2095b 100644 --- a/static/js/directives/helptour.js +++ b/static/js/directives/helptour.js @@ -25,6 +25,7 @@ define(['jquery', 'angular', 'text!partials/helpoverlay.html', 'text!partials/he return [function() { var controller = ['$scope', '$timeout', '$modal', '$rootScope', 'mediaStream', function($scope, $timeout, $modal, $rootScope, mediaStream) { + var isToggled = false; var displayTime = 12000; var shown = localStorage.getItem('mediastream-helptour'); var timeoutAutoStepsIn = []; @@ -38,25 +39,94 @@ define(['jquery', 'angular', 'text!partials/helpoverlay.html', 'text!partials/he chatMaximized: false, main: null, presentation: false, + roombar: false, + screenshare: false, + settings: false + }; + var tourLayoutShowRoomPane = { + buddylist: true, + buddylistAutoHide: false, + chat: false, + chatMaximized: false, + main: null, + presentation: false, + roombar: true, + screenshare: false, + settings: false + }; + var tourLayoutShowBuddyListPane = { + buddylist: true, + buddylistAutoHide: false, + chat: false, + chatMaximized: false, + main: null, + presentation: false, + roombar: false, + screenshare: false, + settings: false + }; + var tourLayoutShowChatPane = { + buddylist: true, + buddylistAutoHide: false, + chat: true, + chatMaximized: false, + main: null, + presentation: false, + roombar: false, + screenshare: false, + settings: false + }; + var tourLayoutShowSettingsPane = { + buddylist: false, + buddylistAutoHide: false, + chat: false, + chatMaximized: false, + main: null, + presentation: false, + roombar: false, + screenshare: false, + settings: true + }; + var tourLayoutShowMediaAccessPane = { + buddylist: true, + buddylistAutoHide: false, + chat: false, + chatMaximized: false, + main: null, + presentation: false, + roombar: false, + screenshare: false, + settings: false + }; + var tourLayoutShowWelcomePane = { + buddylist: true, + buddylistAutoHide: false, + chat: false, + chatMaximized: false, + main: null, + presentation: false, + roombar: false, screenshare: false, settings: false }; - var trigger = false; menus.triggerMediaAccess = function() { - if (trigger) { + if (isToggled) { mediaStream.webrtc.testMediaAccess(function() {}); } else { mediaStream.webrtc.stop(); } }; - menus.toggleRoom = function(css) { - $scope.layout.roombar = !$scope.layout.roombar; + menus.initRoomLayout = function() { + $scope.layout = angular.extend($scope.layout, tourLayout); + }; + menus.toggleRoom = function() { + $scope.layout = angular.extend($scope.layout, tourLayoutShowRoomPane); }; menus.toggleChat = function() { - $scope.layout.chat = !$scope.layout.chat; + $scope.layout = angular.extend($scope.layout, tourLayoutShowChatPane); }; menus.toggleSettings = function() { - $scope.layout.settings = !$scope.layout.settings; + $scope.layout = angular.extend($scope.layout, tourLayoutShowSettingsPane); }; menus.toggleCSS = function(css) { $('body').toggleClass(css); @@ -65,10 +135,12 @@ define(['jquery', 'angular', 'text!partials/helpoverlay.html', 'text!partials/he var menu = $($scope.steps[$scope.currentIndex]).data('menu'); var css = $($scope.steps[$scope.currentIndex]).data('css'); if (menu) { - if (menu.search('trigger') > -1) { - trigger = !trigger; + isToggled = !isToggled; + if(!isToggled) { + menus.initRoomLayout(); + } else { + menus[menu](); } - menus[menu](css); } if (css) { menus.toggleCSS(css); @@ -123,7 +195,7 @@ define(['jquery', 'angular', 'text!partials/helpoverlay.html', 'text!partials/he }; var initTour = function() { backupLayout = angular.extend({}, $scope.layout); - $scope.layout = angular.extend($scope.layout, tourLayout); + menus.initRoomLayout(); autoTour(); }; var reset = function() {