theurere
11 years ago
12 changed files with 729 additions and 21 deletions
@ -0,0 +1,160 @@
@@ -0,0 +1,160 @@
|
||||
/* |
||||
* 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 <http://www.gnu.org/licenses/>. |
||||
* |
||||
*/ |
||||
|
||||
$darken-tour-opacity: .4; |
||||
|
||||
.helptour { |
||||
|
||||
.tourControl { |
||||
text-align: center; |
||||
|
||||
hr { |
||||
margin: 10px 0; |
||||
} |
||||
} |
||||
|
||||
.in { |
||||
display: block; |
||||
} |
||||
|
||||
.slideInfo { |
||||
float: right; |
||||
} |
||||
|
||||
.popover { |
||||
opacity: .95; |
||||
} |
||||
|
||||
.twoThirdsLeft { |
||||
|
||||
&.popover > .arrow { |
||||
left: 75%; |
||||
} |
||||
} |
||||
|
||||
.oneThirdLeft { |
||||
|
||||
&.popover > .arrow { |
||||
left: 25%; |
||||
} |
||||
} |
||||
|
||||
.roomPane { |
||||
left: 10px; |
||||
top: 97px; |
||||
|
||||
.arrow { |
||||
left: 10%; |
||||
} |
||||
} |
||||
|
||||
.buddyListPane { |
||||
left: initial; |
||||
right: 280px; |
||||
top: 70px; |
||||
|
||||
.arrow { |
||||
top: 20%; |
||||
} |
||||
} |
||||
|
||||
.chatPane { |
||||
left: initial; |
||||
right: 540px; |
||||
top: 70px; |
||||
|
||||
.arrow { |
||||
top: 20%; |
||||
} |
||||
} |
||||
|
||||
.settingsPane { |
||||
left: initial; |
||||
right: 540px; |
||||
top: 200px; |
||||
|
||||
.arrow { |
||||
top: 20%; |
||||
} |
||||
} |
||||
|
||||
.optionsPane { |
||||
float: right; |
||||
margin-right: 20px; |
||||
position: relative; |
||||
top: 71px; |
||||
} |
||||
|
||||
.welcomePane { |
||||
margin: 0 auto; |
||||
position: relative; |
||||
top: 150px; |
||||
|
||||
.btn { |
||||
margin-top: 10px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.helptourShowRoomPane { |
||||
// scss-lint:disable IdSelector |
||||
#bar, |
||||
#buddylist { |
||||
opacity: $darken-tour-opacity; |
||||
} |
||||
|
||||
.overlaybar { |
||||
background: $componentfg2; |
||||
} |
||||
} |
||||
|
||||
.helptourShowSettingsPane { |
||||
// scss-lint:disable IdSelector |
||||
#roombar { |
||||
opacity: $darken-tour-opacity; |
||||
} |
||||
} |
||||
|
||||
.helptourShowOptionsPane, |
||||
.helptourShowChatPane { |
||||
// scss-lint:disable IdSelector |
||||
#roombar, |
||||
#buddylist { |
||||
opacity: $darken-tour-opacity; |
||||
} |
||||
} |
||||
|
||||
.helptourShowBuddyListPane { |
||||
// scss-lint:disable IdSelector |
||||
#bar, |
||||
#roombar { |
||||
opacity: $darken-tour-opacity; |
||||
} |
||||
} |
||||
|
||||
.helptourShowWelcomePane { |
||||
// scss-lint:disable IdSelector |
||||
#bar, |
||||
#roombar, |
||||
#buddylist { |
||||
opacity: $darken-tour-opacity; |
||||
} |
||||
} |
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,240 @@
@@ -0,0 +1,240 @@
|
||||
/* |
||||
* 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 <http://www.gnu.org/licenses/>.
|
||||
* |
||||
*/ |
||||
|
||||
"use strict"; |
||||
define(['jquery', 'angular', 'text!partials/helpoverlay.html', 'text!partials/helptourstart.html', 'text!partials/helptourend.html'], function($, angular, template, templatehelptourstart, templatehelptourend) { |
||||
|
||||
//helptour
|
||||
return [function() { |
||||
|
||||
var controller = ['$scope', '$timeout', '$modal', '$rootScope', function($scope, $timeout, $modal, $rootScope) { |
||||
var isToggled = false; |
||||
var displayTime = 12000; |
||||
var shown = localStorage.getItem('mediastream-helptour'); |
||||
var menus = {}; |
||||
var backupLayout = null; |
||||
var tourLayout = { |
||||
buddylist: true, |
||||
buddylistAutoHide: false, |
||||
chat: false, |
||||
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 tourLayoutShowOptionsPane = { |
||||
buddylist: false, |
||||
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 initRoomLayout = function() { |
||||
$scope.layout = angular.extend($scope.layout, tourLayout); |
||||
}; |
||||
menus.toggleRoom = function() { |
||||
$scope.layout = angular.extend($scope.layout, tourLayoutShowRoomPane); |
||||
}; |
||||
menus.toggleChat = function() { |
||||
$scope.layout = angular.extend($scope.layout, tourLayoutShowChatPane); |
||||
}; |
||||
menus.toggleSettings = function() { |
||||
$scope.layout = angular.extend($scope.layout, tourLayoutShowSettingsPane); |
||||
}; |
||||
menus.toggleOptions = function() { |
||||
$scope.layout = angular.extend($scope.layout, tourLayoutShowOptionsPane); |
||||
}; |
||||
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) { |
||||
isToggled = !isToggled; |
||||
if(!isToggled) { |
||||
initRoomLayout(); |
||||
} else { |
||||
menus[menu](); |
||||
} |
||||
} |
||||
if (css) { |
||||
menus.toggleCSS(css); |
||||
} |
||||
}; |
||||
var outStep = function() { |
||||
toggleTargetMenu(); |
||||
$($scope.steps[$scope.currentIndex]).removeClass('in'); |
||||
}; |
||||
var inStep = function(i) { |
||||
$scope.currentIndex = i; |
||||
toggleTargetMenu(); |
||||
$($scope.steps[$scope.currentIndex]).addClass('in'); |
||||
}; |
||||
var startTour = function() { |
||||
if ($scope.currentIndex === $scope.steps.length - 1 && isToggled) { |
||||
outStep(); |
||||
$scope.currentIndex = 0; |
||||
} |
||||
inStep(0); |
||||
}; |
||||
var initTour = function() { |
||||
backupLayout = angular.extend({}, $scope.layout); |
||||
initRoomLayout(); |
||||
startTour(); |
||||
}; |
||||
var reset = function() { |
||||
if (isToggled) { |
||||
outStep(); |
||||
} |
||||
$scope.currentIndex = null; |
||||
$scope.layout = angular.extend($scope.layout, backupLayout); |
||||
isToggled = false; |
||||
}; |
||||
var introTourSlide = function() { |
||||
var controller = ['$scope', '$modalInstance', function(scope, $modalInstance) { |
||||
scope.goTour = function() { |
||||
$modalInstance.dismiss(); |
||||
initTour(); |
||||
}; |
||||
}]; |
||||
$modal.open({ |
||||
template: templatehelptourstart, |
||||
controller: controller, |
||||
size: 'md' |
||||
}); |
||||
}; |
||||
$scope.endTourSlide = function() { |
||||
outStep(); |
||||
var controller = ['$scope', '$modalInstance', function(scope, $modalInstance) { |
||||
scope.goTour = function() { |
||||
$modalInstance.dismiss(); |
||||
startTour(); |
||||
}; |
||||
scope.endTour = function() { |
||||
$modalInstance.dismiss(); |
||||
reset(); |
||||
}; |
||||
}]; |
||||
$modal.open({ |
||||
template: templatehelptourend, |
||||
controller: controller, |
||||
size: 'md' |
||||
}); |
||||
}; |
||||
$scope.currentIndex = null; |
||||
$scope.stepBackward = function() { |
||||
outStep(); |
||||
inStep($scope.currentIndex - 1); |
||||
}; |
||||
$scope.stepForward = function() { |
||||
outStep(); |
||||
inStep($scope.currentIndex + 1); |
||||
}; |
||||
$scope.exitTour = function() { |
||||
reset(); |
||||
}; |
||||
$scope.$on('showHelpTourStart', function() { |
||||
introTourSlide(); |
||||
}); |
||||
$rootScope.$on("rooms.ready", function(event, room) { |
||||
if (!shown) { |
||||
introTourSlide(); |
||||
localStorage.setItem('mediastream-helptour', 1); |
||||
} |
||||
}); |
||||
}]; |
||||
|
||||
var link = function($scope, $elem, $attrs) { |
||||
$scope.steps = $elem.find('.tourSteps .popover'); |
||||
}; |
||||
|
||||
return { |
||||
restrict: 'E', |
||||
scope: true, |
||||
replace: true, |
||||
template: template, |
||||
controller: controller, |
||||
link: link |
||||
}; |
||||
}]; |
||||
}); |
||||
@ -0,0 +1,100 @@
@@ -0,0 +1,100 @@
|
||||
<div class="helptour"> |
||||
<div class="tourSteps"> |
||||
<div class="popover bottom optionsPane oneThirdLeft" data-menu="toggleOptions" data-css="helptourShowOptionsPane"> |
||||
<div class="arrow"></div> |
||||
<h3 class="popover-title">{{_('Options menu')}}<span class="slideInfo">{{_('Window %d of %d', currentIndex + 1, steps.length)}}</h3> |
||||
<div class="popover-content"> |
||||
{{_('On the options menu you can open the settings, activate or deactivate your camera and microphone. You also can open the contact manager or the chat view to open a group chat. During a call you have further options like sharing your screen, sharing a file as presentation, or even a YouTube Video.')}} |
||||
<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> |
||||
<div class="popover left settingsPane" data-menu="toggleSettings" data-css="helptourShowSettingsPane"> |
||||
<div class="arrow"></div> |
||||
<h3 class="popover-title">{{_('Settings')}}<span class="slideInfo">{{_('Window %d of %d', currentIndex + 1, steps.length)}}</h3> |
||||
<div class="popover-content"> |
||||
{{_('Complete your profile by adding your name and picture. You also can enter a status message. If you want, you can change further settings like your camera, video quality, or language. Confirm your settings with a click on "close".')}} |
||||
<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> |
||||
<div class="popover bottom roomPane" data-menu="toggleRoom" data-css="helptourShowRoomPane"> |
||||
<div class="arrow"></div> |
||||
<h3 class="popover-title">{{_('Rooms')}}<span class="slideInfo">{{_('Window %d of %d', currentIndex + 1, steps.length)}}</span></h3> |
||||
<div class="popover-content"> |
||||
{{_('Create a new room or enter the name of an existing room and click on the icon to enter the room. You can share the room by email, Facebook, Twitter, Google+, and Xing. Your contacts can meet you without creating an account. ')}} |
||||
<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> |
||||
<div class="popover left buddyListPane" data-css="helptourShowBuddyListPane"> |
||||
<div class="arrow"></div> |
||||
<h3 class="popover-title">{{_('Buddies')}}<span class="slideInfo">{{_('Window %d of %d', currentIndex + 1, steps.length)}}</h3> |
||||
<div class="popover-content"> |
||||
{{_('A buddy is a person in the same room. Want to call or chat with them? Simply hover over a buddy and start a conversation. Group calls and chats are also possible. ')}} |
||||
<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> |
||||
<div class="popover left buddyListPane" data-css="helptourShowBuddyListPane"> |
||||
<div class="arrow"></div> |
||||
<h3 class="popover-title">{{_('Contacts')}}<span class="slideInfo">{{_('Window %d of %d', currentIndex + 1, steps.length)}}</h3> |
||||
<div class="popover-content"> |
||||
{{_('When a buddy and you are logged in you can add him as a contact. Just click on the unfilled star to send a contact request. He is in your contact list when the star is filled. You can call or chat with a contact even when you are in different rooms.')}} |
||||
<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> |
||||
<div class="popover left chatPane" data-menu="toggleChat" data-css="helptourShowChatPane"> |
||||
<div class="arrow"></div> |
||||
<h3 class="popover-title">{{_('Chat')}}<span class="slideInfo">{{_('Window %d of %d', currentIndex + 1, steps.length)}}</h3> |
||||
<div class="popover-content"> |
||||
{{_('You can chat with everyone in a room (room chat) or with a buddy. You also can share a file or your location within the chat. While chatting with a buddy, you can start a call from the chat window.')}} |
||||
<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> |
||||
<div class="popover bottom optionsPane" data-menu="toggleOptions" data-css="helptourShowOptionsPane"> |
||||
<div class="arrow"></div> |
||||
<h3 class="popover-title">{{_('Contacts Manager')}}<span class="slideInfo">{{_('Window %d of %d', currentIndex + 1, steps.length)}}</h3> |
||||
<div class="popover-content"> |
||||
{{_('With the contact manager you can manage your contacts. You can call or chat with your contacts even if you are in different rooms. You also can change the name of your contacts.')}} |
||||
<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> |
||||
<div class="popover bottom optionsPane twoThirdsLeft" data-menu="toggleOptions" data-css="helptourShowOptionsPane"> |
||||
<div class="arrow"></div> |
||||
<h3 class="popover-title">{{_('Microphone / Camera')}}<span class="slideInfo">{{_('Window %d of %d', currentIndex + 1, steps.length)}}</h3> |
||||
<div class="popover-content"> |
||||
{{_('Click on the eye icon to deactivate or activate your camera. Click on the microphone to mute and unmute your microphone. You can change the setting before or during a call.')}} |
||||
<div class="tourControl"> |
||||
<hr> |
||||
<button class="btn btn-default" ng-click="exitTour()">{{_('Cancel Tour')}}</button> |
||||
<button class="btn btn-primary" ng-click="endTourSlide()">{{_('Continue Tour')}}</button> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
@ -0,0 +1,15 @@
@@ -0,0 +1,15 @@
|
||||
<div> |
||||
<div class="modal-header"> |
||||
<button type="button" class="close" ng-click="$close()">×</button> |
||||
<h3 class="modal-title">{{_('Start your video calls now!')}}</h3> |
||||
</div> |
||||
<div class="modal-body"> |
||||
<p>{{_('Go on, invite your friends and start your calls. You can restart the tour anytime you want in "Settings".')}}</p> |
||||
</div> |
||||
<div class="modal-footer"> |
||||
<div class="pull-right"> |
||||
<button class="btn btn-default" ng-click="endTour()">{{_('Exit Tour.')}}</button> |
||||
<button class="btn btn-primary" ng-click="goTour()">{{_('Replay Tour')}}</button> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
@ -0,0 +1,16 @@
@@ -0,0 +1,16 @@
|
||||
<div> |
||||
<div class="modal-header"> |
||||
<button type="button" class="close" ng-click="$close()">×</button> |
||||
<h3 class="modal-title">{{_('Welcome to Spreed WebRTC!')}}</h3> |
||||
</div> |
||||
<div class="modal-body"> |
||||
<p>{{_('Spreed WebRTC is your personal online presence and virtual classroom. It is complete with content library, document sharing, and P2P file sharing. Start your presence or training with a blink: simply select the contacts you want to include.')}}</p> |
||||
<p>{{_('Do you want to take a tour?')}}</p> |
||||
</div> |
||||
<div class="modal-footer"> |
||||
<div class="pull-right"> |
||||
<button class="btn btn-default" ng-click="$dismiss()">{{_('No, thanks.')}}</button> |
||||
<button class="btn btn-primary" ng-click="goTour()">{{_('Yes, show me Spreed WebRTC.')}}</button> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
Loading…
Reference in new issue