pimhwang
/
spreed-webrtc
mirror of https://github.com/strukturag/spreed-webrtc.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Add a tour controller.

pull/122/head
Evan Theurer 12 years ago
parent
e77c96c478
commit
cc13ad2bcb
4 changed files with 98 additions and 22 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 8
      src/styles/components/helptour.scss
  2. 81
      static/js/directives/helptour.js
  3. 29
      static/partials/helpoverlay.html
  4. 2
      static/partials/helptour.html

8
src/styles/components/helptour.scss
Unescape View File

@ -23,11 +23,17 @@ @@ -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;

81
static/js/directives/helptour.js
Unescape View File

@ -24,20 +24,45 @@ define(['jquery', 'text!partials/helpoverlay.html', 'text!partials/helptour.html @@ -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 @@ -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 @@ -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 {

29
static/partials/helpoverlay.html
Unescape View File

@ -1,10 +1,27 @@ @@ -1,10 +1,27 @@
<div class="helptour">
<div class="popover bottom meetingRoom">
<div class="arrow"></div><h3 class="popover-title">{{_('Meeting 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="tourSteps">
<div class="popover bottom meetingRoom">
<div class="arrow"></div><h3 class="popover-title">{{_('Meeting 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>
<div class="popover left buddyList">
<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>
</div>
<div class="popover left buddyList">
<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 in tourControl" ng-if="currentIndex !== null">
<div class="arrow"></div><h3 class="popover-title ng-binding">Tour Control - {{currentIndex + 1}} of {{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>
</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>
<button class="btn btn-default" ng-click="stepBackward()" ng-disabled="currentIndex < 1"><i class="fa fa-backward"></i></button>
<button class="btn btn-default" ng-click="stepForward()" ng-disabled="currentIndex === steps.length - 1"><i class="fa fa-forward"></i></button>
<button class="btn btn-default" ng-click="stepEnd()" ng-disabled="currentIndex === steps.length - 1"><i class="fa fa-fast-forward"></i></button>
</div>
</div>
</div>
</div>

2
static/partials/helptour.html
Unescape View File

@ -4,7 +4,7 @@ @@ -4,7 +4,7 @@
<h3 class="modal-title">{{_('Tour')}}</h3>
</div>
<div class="modal-body">
<p>{{_('Congratulations! Anonymous secure peer to peer chat and video calls are a short click away. Quickly get started with the features tour below.')}}</p>
<p>{{_('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.')}}</p>
</div>
<div class="modal-footer">
<div class="pull-right">

Write Preview
Loading…
Cancel
Save