From 3ed2f19efd3b90b8725969f2c422d21b49c2342d Mon Sep 17 00:00:00 2001 From: Evan Theurer Date: Thu, 9 Oct 2014 14:27:54 +0200 Subject: [PATCH] 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.')}}