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

Remove help tour autoplay. Simplify tour controls.

pull/149/head
Evan Theurer 12 years ago
parent
afe87bb4f6
commit
4b659a51fc
3 changed files with 34 additions and 148 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. 76
      static/js/directives/helptour.js
  3. 98
      static/partials/helpoverlay.html

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

@ -26,10 +26,10 @@ $darken-tour-opacity: .4; @@ -26,10 +26,10 @@ $darken-tour-opacity: .4;
.helptour {
.tourControl {
top: initial;
bottom: 10px;
left: 10px;
max-width: none;
text-align: center;
hr {
margin: 10px 0;
}
}
.in {
display: block;

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

@ -28,8 +28,6 @@ define(['jquery', 'angular', 'text!partials/helpoverlay.html', 'text!partials/he @@ -28,8 +28,6 @@ define(['jquery', 'angular', 'text!partials/helpoverlay.html', 'text!partials/he
var isToggled = false;
var displayTime = 12000;
var shown = localStorage.getItem('mediastream-helptour');
var timeoutAutoStepsIn = [];
var timeoutAutoStepsOut = [];
var menus = {};
var backupLayout = null;
var tourLayout = {
@ -155,52 +153,13 @@ define(['jquery', 'angular', 'text!partials/helpoverlay.html', 'text!partials/he @@ -155,52 +153,13 @@ define(['jquery', 'angular', 'text!partials/helpoverlay.html', 'text!partials/he
toggleTargetMenu();
$($scope.steps[$scope.currentIndex]).addClass('in');
};
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);
}, inTime, true);
timeoutAutoStepsOut[i] = $timeout(function() {
if ($scope.steps.length === i + 1) {
$scope.togglePause();
} else {
outStep();
}
}, outTime, true);
};
var autoTour = function(startIndex) {
if (!angular.isNumber(startIndex)) {
startIndex = 0;
// start again from the beginning and ensure window is hidden
} 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, startIndex);
}
});
};
var manualTour = function() {
timeoutAutoStepsIn.forEach(function(promise) {
$timeout.cancel(promise);
});
timeoutAutoStepsOut.forEach(function(promise) {
$timeout.cancel(promise);
});
};
var initTour = function() {
backupLayout = angular.extend({}, $scope.layout);
menus.initRoomLayout();
autoTour();
$scope.startTour();
};
var reset = function() {
outStep();
$scope.tourPaused = false;
$scope.currentIndex = null;
$scope.layout = angular.extend($scope.layout, backupLayout);
};
@ -217,48 +176,23 @@ define(['jquery', 'angular', 'text!partials/helpoverlay.html', 'text!partials/he @@ -217,48 +176,23 @@ define(['jquery', 'angular', 'text!partials/helpoverlay.html', 'text!partials/he
size: 'sm'
});
};
$scope.tourPaused = false;
$scope.currentIndex = null;
$scope.stepBeginning = function() {
if (!$scope.tourPaused) {
$scope.togglePause();
$scope.startTour = function() {
if ($scope.currentIndex === $scope.steps.length - 1) {
outStep();
$scope.currentIndex = 0;
}
outStep();
inStep(0);
};
$scope.stepBackward = function() {
if (!$scope.tourPaused) {
$scope.togglePause();
}
outStep();
inStep($scope.currentIndex - 1);
};
$scope.stepForward = function() {
if (!$scope.tourPaused) {
$scope.togglePause();
}
outStep();
inStep($scope.currentIndex + 1);
};
$scope.stepEnd = function() {
if (!$scope.tourPaused) {
$scope.togglePause();
}
outStep();
inStep($scope.steps.length - 1);
};
$scope.togglePause = function() {
$scope.tourPaused = !$scope.tourPaused;
if ($scope.tourPaused) {
manualTour();
} else {
autoTour($scope.currentIndex + 1);
}
};
$scope.exitTour = function() {
if (!$scope.tourPaused) {
manualTour();
}
reset();
};
$scope.$on('showHelpTour', function() {

98
static/partials/helpoverlay.html
Unescape View File

@ -5,18 +5,10 @@ @@ -5,18 +5,10 @@
<h3 class="popover-title">{{_('A room')}}<span class="slideInfo">{{_('Window %d of %d', currentIndex + 1, steps.length)}}</span></h3>
<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.')}}
<hr>
<div>
<div class="btn-group">
<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>
<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 class="tourControl">
<hr>
<button class="btn btn-default" ng-click="exitTour()">Cancel Tour</button>
<button class="btn btn-primary" ng-click="stepForward()" ng-disabled="currentIndex === steps.length - 1">Continue Tour</button>
</div>
</div>
</div>
@ -25,18 +17,10 @@ @@ -25,18 +17,10 @@
<h3 class="popover-title">{{_('Buddy List')}}<span class="slideInfo">{{_('Window %d of %d', currentIndex + 1, steps.length)}}</h3>
<div class="popover-content">
{{_('List of all buddys in the same room and saved contacts.')}}
<hr>
<div>
<div class="btn-group">
<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>
<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 class="tourControl">
<hr>
<button class="btn btn-default" ng-click="exitTour()">Cancel Tour</button>
<button class="btn btn-primary" ng-click="stepForward()" ng-disabled="currentIndex === steps.length - 1">Continue Tour</button>
</div>
</div>
</div>
@ -45,18 +29,10 @@ @@ -45,18 +29,10 @@
<h3 class="popover-title">{{_('A buddy')}}<span class="slideInfo">{{_('Window %d of %d', currentIndex + 1, steps.length)}}</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.')}}
<hr>
<div>
<div class="btn-group">
<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>
<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 class="tourControl">
<hr>
<button class="btn btn-default" ng-click="exitTour()">Cancel Tour</button>
<button class="btn btn-primary" ng-click="stepForward()" ng-disabled="currentIndex === steps.length - 1">Continue Tour</button>
</div>
</div>
</div>
@ -65,18 +41,10 @@ @@ -65,18 +41,10 @@
<h3 class="popover-title">{{_('Chat sessions')}}<span class="slideInfo">{{_('Window %d of %d', currentIndex + 1, steps.length)}}</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.')}}
<hr>
<div>
<div class="btn-group">
<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>
<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 class="tourControl">
<hr>
<button class="btn btn-default" ng-click="exitTour()">Cancel Tour</button>
<button class="btn btn-primary" ng-click="stepForward()" ng-disabled="currentIndex === steps.length - 1">Continue Tour</button>
</div>
</div>
</div>
@ -85,18 +53,10 @@ @@ -85,18 +53,10 @@
<h3 class="popover-title">{{_('Settings')}}<span class="slideInfo">{{_('Window %d of %d', currentIndex + 1, steps.length)}}</h3>
<div class="popover-content">
{{_('Choose a name, upload a picture, signin, and customize you experience.')}}
<hr>
<div>
<div class="btn-group">
<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>
<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 class="tourControl">
<hr>
<button class="btn btn-default" ng-click="exitTour()">Cancel Tour</button>
<button class="btn btn-primary" ng-click="stepForward()" ng-disabled="currentIndex === steps.length - 1">Continue Tour</button>
</div>
</div>
</div>
@ -106,18 +66,10 @@ @@ -106,18 +66,10 @@
<h3 class="popover-title">{{_('Media permission')}}<span class="slideInfo">{{_('Window %d of %d', currentIndex + 1, steps.length)}}</h3>
<div class="popover-content">
{{_('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.')}}
<hr>
<div>
<div class="btn-group">
<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>
<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 class="tourControl">
<hr>
<button class="btn btn-default" ng-click="exitTour()">Cancel Tour</button>
<button class="btn btn-primary" ng-click="stepForward()" ng-disabled="currentIndex === steps.length - 1">Continue Tour</button>
</div>
</div>
</div>
@ -126,7 +78,7 @@ @@ -126,7 +78,7 @@
<div class="popover-content">
{{_('Welcome to spreed-webrtc! Start calling and chatting now.')}}
<button class="btn btn-primary btn-block" ng-click="exitTour()">Exit Tour</button>
<button class="btn btn-default btn-block" ng-click="togglePause()">Replay Tour</button>
<button class="btn btn-default btn-block" ng-click="startTour()">Replay Tour</button>
</div>
</div>
</div>

Write Preview
Loading…
Cancel
Save