Hide the bottom toolbar with the header toolbar if the film strip is hidden.

This commit is contained in:
fo 2014-09-04 16:18:28 +03:00
parent b5e066b44b
commit 32fab4c222
11 changed files with 168 additions and 124 deletions

2
app.js
View File

@ -601,7 +601,7 @@ $(document).bind('joined.muc', function (event, jid, info) {
ContactList.addContact(jid);
// Once we've joined the muc show the toolbar
Toolbar.showToolbar();
ToolbarToggler.showToolbar();
if (info.displayName)
$(document).trigger('displaynamechanged',

View File

@ -22,7 +22,7 @@ var BottomToolbar = (function (my) {
};
my.toggleFilmStrip = function() {
$("#remoteVideos").toggleClass("hidden");
$("#remoteVideos").toggle("slide", { direction: "down", duration: 700});
};

View File

@ -207,7 +207,7 @@ var Chat = (function (my) {
// Undock the toolbar when the chat is shown and if we're in a
// video mode.
if (VideoLayout.isLargeVideoVisible())
Toolbar.dockToolbar(false);
ToolbarToggler.dockToolbar(false);
videospace.animate({right: chatSize[0],
width: videospaceWidth,
@ -333,7 +333,7 @@ var Chat = (function (my) {
if (unreadMessages) {
unreadMsgElement.innerHTML = unreadMessages.toString();
Toolbar.dockToolbar(true);
ToolbarToggler.dockToolbar(true);
var chatButtonElement
= document.getElementById('chatButton').parentNode;

View File

@ -143,7 +143,7 @@ var ContactList = (function (my) {
// Undock the toolbar when the chat is shown and if we're in a
// video mode.
if (VideoLayout.isLargeVideoVisible())
Toolbar.dockToolbar(false);
ToolbarToggler.dockToolbar(false);
videospace.animate({right: chatSize[0],
width: videospaceWidth,

View File

@ -19,12 +19,6 @@
width:auto;
border:1px solid transparent;
z-index: 5;
-webkit-transition: bottom 2s; /* For Safari 3.1 to 6.0 */
transition: bottom 2s;
}
#remotevideos.hidden {
bottom: -196px;
}
.videocontainer {

View File

@ -46,7 +46,7 @@ var Etherpad = (function (my) {
largeVideo.css({opacity: '0'});
} else {
VideoLayout.setLargeVideoVisible(false);
Toolbar.dockToolbar(true);
ToolbarToggler.dockToolbar(true);
}
$('#etherpad>iframe').fadeIn(300, function () {
@ -64,7 +64,7 @@ var Etherpad = (function (my) {
if (!isPresentation) {
$('#largeVideo').fadeIn(300, function () {
VideoLayout.setLargeVideoVisible(true);
Toolbar.dockToolbar(false);
ToolbarToggler.dockToolbar(false);
});
}
});

View File

@ -1,6 +1,34 @@
{
"IcoMoonType": "selection",
"icons": [
{
"icon": {
"paths": [
"M46.993-1.7c461.234 0 553.793 0 1015.024 0 35.919 0 53.356 25.959 53.356 57.959-0.581 303.259-0.325 606.488-0.449 909.809 0 43.984-13.203 57.058-57.703 57.058-443.072 0.126-556.453 0.126-999.553 0-44.534 0-57.799-13.009-57.799-57.058-0.098-303.257 0.485-608.072-0.093-911.329-0.034-26.21 11.301-53.761 47.217-56.439zM311.405 509.702c0 119.045-0.072 172.168 0.057 291.249 0.036 50.043 11.208 61.050 62.12 61.050 233.352 0 137.075 0 370.522 0 47.075 0 59.249-11.982 59.249-58.095 0.126-239.111 0.126-346.338 0-585.389 0-48.138-10.687-58.991-57.768-58.991-235.323-0.101-140.844-0.101-376.157 0-47.044 0-57.93 11.043-57.966 58.89-0.129 119.109-0.057 172.209-0.057 291.287zM153.944 121.434c-74.929 0.062-66.687-5.958-66.845 66.685-0.201 63.95-7.054 63.534 62.528 63.372 72.999-0.194 67.201 3.764 67.302-67.554 0-67.722 4.087-62.595-62.985-62.502zM963.644 121.434c-71.159 0.034-65.56-6.185-65.751 65.364-0.129 67.302-4.508 64.693 64.528 64.693 73.089 0 65.299 2.031 65.299-66.238-0.003-68.646 6.956-63.911-64.076-63.818zM216.828 837.592c0.359-73.094 4.639-66.914-67.358-67.17-68.104-0.191-62.569-2.763-62.407 63.31 0.129 73.476-6.954 66.52 67.074 66.649 66.042 0.065 63.142 6.056 62.691-62.789zM1027.718 835.6c0.134-68.334 6.443-65.304-63.297-65.178-70.132 0.132-66.656-5.793-66.527 65.304 0.129 70.645-4.384 64.721 63.756 64.657 71.995-0.132 66.202 6.698 66.068-64.783zM1027.718 617.923c0-70.55 7.219-66.842-67.485-66.522-0.898 0-1.873 0-2.838 0-59.375 0-59.375 0-59.375 58.023 0 77.922-6.443 69.936 69.293 70.196 66.076 0.387 60.539 3.091 60.405-61.697zM151.307 470.127c68.295 0.163 65.815 5.568 65.624-62.982-0.194-71.128 4.895-64.917-66.014-65.010-69.905-0.101-63.813-4.704-63.885 63.978-0.062 67.431-5.7 64.463 64.275 64.014zM961.263 470.127c72.511 0.258 66.589 4.603 66.455-64.494 0-68.558 6.185-63.537-64.267-63.498-70.196 0.028-65.686-6.053-65.498 65.493 0.132 62.5 0.067 62.5 63.31 62.5zM150.399 679.62c71.004 0 66.659 6.567 66.466-64.528-0.163-63.694-0.036-63.501-65.013-63.756-70.805-0.258-64.822-2.673-64.822 63.756 0.036 69.167-5.919 64.788 63.369 64.528z"
],
"attrs": [
{}
],
"width": 1115,
"grid": 0,
"tags": [
"filmstrip"
]
},
"attrs": [
{}
],
"properties": {
"order": 26,
"id": 29,
"prevSize": 32,
"code": 58905,
"name": "filmstrip",
"ligatures": ""
},
"setIdx": 0,
"iconIdx": 0
},
{
"icon": {
"paths": [
@ -33,7 +61,7 @@
"ligatures": ""
},
"setIdx": 0,
"iconIdx": 0
"iconIdx": 1
},
{
"icon": {
@ -61,7 +89,7 @@
"ligatures": ""
},
"setIdx": 0,
"iconIdx": 1
"iconIdx": 2
},
{
"icon": {
@ -89,7 +117,7 @@
"ligatures": ""
},
"setIdx": 0,
"iconIdx": 2
"iconIdx": 3
},
{
"icon": {
@ -128,7 +156,7 @@
"ligatures": ""
},
"setIdx": 0,
"iconIdx": 3
"iconIdx": 4
},
{
"icon": {
@ -151,7 +179,7 @@
"ligatures": ""
},
"setIdx": 0,
"iconIdx": 4
"iconIdx": 5
},
{
"icon": {
@ -174,7 +202,7 @@
"ligatures": ""
},
"setIdx": 0,
"iconIdx": 5
"iconIdx": 6
},
{
"icon": {
@ -198,7 +226,7 @@
"ligatures": ""
},
"setIdx": 0,
"iconIdx": 6
"iconIdx": 7
},
{
"icon": {
@ -223,7 +251,7 @@
"ligatures": ""
},
"setIdx": 0,
"iconIdx": 7
"iconIdx": 8
},
{
"icon": {
@ -246,7 +274,7 @@
"ligatures": ""
},
"setIdx": 0,
"iconIdx": 8
"iconIdx": 9
},
{
"icon": {
@ -270,7 +298,7 @@
"ligatures": ""
},
"setIdx": 0,
"iconIdx": 9
"iconIdx": 10
},
{
"icon": {
@ -294,7 +322,7 @@
"ligatures": ""
},
"setIdx": 0,
"iconIdx": 10
"iconIdx": 11
},
{
"icon": {
@ -316,7 +344,7 @@
"ligatures": ""
},
"setIdx": 0,
"iconIdx": 11
"iconIdx": 12
},
{
"icon": {
@ -340,7 +368,7 @@
"ligatures": ""
},
"setIdx": 0,
"iconIdx": 12
"iconIdx": 13
},
{
"icon": {
@ -364,7 +392,7 @@
"ligatures": ""
},
"setIdx": 0,
"iconIdx": 13
"iconIdx": 14
},
{
"icon": {
@ -391,7 +419,7 @@
"ligatures": ""
},
"setIdx": 0,
"iconIdx": 14
"iconIdx": 15
},
{
"icon": {
@ -415,7 +443,7 @@
"ligatures": ""
},
"setIdx": 0,
"iconIdx": 15
"iconIdx": 16
},
{
"icon": {
@ -439,7 +467,7 @@
"ligatures": ""
},
"setIdx": 0,
"iconIdx": 16
"iconIdx": 17
},
{
"icon": {
@ -464,7 +492,7 @@
"ligatures": ""
},
"setIdx": 0,
"iconIdx": 17
"iconIdx": 18
},
{
"icon": {
@ -486,7 +514,7 @@
"ligatures": ""
},
"setIdx": 0,
"iconIdx": 18
"iconIdx": 19
},
{
"icon": {
@ -509,7 +537,7 @@
"ligatures": ""
},
"setIdx": 0,
"iconIdx": 19
"iconIdx": 20
},
{
"icon": {
@ -531,7 +559,7 @@
"ligatures": ""
},
"setIdx": 0,
"iconIdx": 20
"iconIdx": 21
},
{
"icon": {
@ -554,7 +582,7 @@
"ligatures": ""
},
"setIdx": 0,
"iconIdx": 21
"iconIdx": 22
},
{
"icon": {
@ -577,7 +605,7 @@
"ligatures": ""
},
"setIdx": 0,
"iconIdx": 22
"iconIdx": 23
},
{
"icon": {
@ -601,7 +629,7 @@
"ligatures": ""
},
"setIdx": 0,
"iconIdx": 23
"iconIdx": 24
},
{
"icon": {
@ -624,7 +652,7 @@
"ligatures": ""
},
"setIdx": 0,
"iconIdx": 24
"iconIdx": 25
}
],
"height": 1024,
@ -637,7 +665,9 @@
"fontPref": {
"prefix": "icon-",
"metadata": {
"fontFamily": "jitsi"
"fontFamily": "jitsi",
"majorVersion": 1,
"minorVersion": 0
},
"metrics": {
"emSize": 512,

View File

@ -44,6 +44,7 @@
<script src="local_sts.js?v=1"></script><!-- Local stats processing -->
<script src="videolayout.js?v=8"></script><!-- video ui -->
<script src="toolbar.js?v=4"></script><!-- toolbar ui -->
<script src="toolbar_toggler.js"></script>
<script src="canvas_util.js?v=1"></script><!-- canvas drawing utils -->
<script src="audio_levels.js?v=1"></script><!-- audio levels plugin -->
<script src="media_stream.js?v=1"></script><!-- media stream -->
@ -228,7 +229,7 @@
</form>
</div>
<div id="reloadPresentation"><a onclick='Prezi.reloadPresentation();'><i title="Reload Prezi" class="fa fa-repeat fa-lg"></i></a></div>
<div id="videospace" onmousemove="Toolbar.showToolbar();">
<div id="videospace" onmousemove="ToolbarToggler.showToolbar();">
<div id="largeVideoContainer" class="videocontainer">
<div id="presentation"></div>
<div id="etherpad"></div>
@ -260,7 +261,7 @@
</a>
</span>
<span class="bottomToolbar_span">
<a class="bottomToolbarButton" data-toggle="popover" data-placement="top" data-content="Show / hide filmstrip" onclick='BottomToolbar.toggleFilmStrip()'>
<a class="bottomToolbarButton" data-toggle="popover" data-placement="top" data-content="Show / hide film strip" onclick='BottomToolbar.toggleFilmStrip()'>
<i id="filmStripButton" class="icon-filmstrip"></i>
</a>
</span>

View File

@ -22,7 +22,7 @@ var Prezi = (function (my) {
VideoLayout.setLargeVideoVisible(false);
$('#presentation>iframe').fadeIn(300, function() {
$('#presentation>iframe').css({opacity:'1'});
Toolbar.dockToolbar(true);
ToolbarToggler.dockToolbar(true);
});
});
}
@ -33,7 +33,7 @@ var Prezi = (function (my) {
$('#reloadPresentation').css({display:'none'});
$('#largeVideo').fadeIn(300, function() {
VideoLayout.setLargeVideoVisible(true);
Toolbar.dockToolbar(false);
ToolbarToggler.dockToolbar(false);
});
});
}

View File

@ -1,6 +1,4 @@
var Toolbar = (function (my) {
var INITIAL_TOOLBAR_TIMEOUT = 20000;
var TOOLBAR_TIMEOUT = INITIAL_TOOLBAR_TIMEOUT;
/**
* Opens the lock room dialog.
@ -199,61 +197,6 @@ var Toolbar = (function (my) {
}
}
};
/**
* Shows the main toolbar.
*/
my.showToolbar = function() {
if (!$('#header').is(':visible')) {
$('#header').show("slide", { direction: "up", duration: 300});
$('#subject').animate({top: "+=40"}, 300);
if (toolbarTimeout) {
clearTimeout(toolbarTimeout);
toolbarTimeout = null;
}
toolbarTimeout = setTimeout(hideToolbar, TOOLBAR_TIMEOUT);
TOOLBAR_TIMEOUT = 4000;
}
if (focus != null)
{
// TODO: Enable settings functionality. Need to uncomment the settings button in index.html.
// $('#settingsButton').css({visibility:"visible"});
}
// Show/hide desktop sharing button
showDesktopSharingButton();
};
/**
* Docks/undocks the toolbar.
*
* @param isDock indicates what operation to perform
*/
my.dockToolbar = function(isDock) {
if (isDock) {
// First make sure the toolbar is shown.
if (!$('#header').is(':visible')) {
Toolbar.showToolbar();
}
// Then clear the time out, to dock the toolbar.
if (toolbarTimeout) {
clearTimeout(toolbarTimeout);
toolbarTimeout = null;
}
}
else {
if (!$('#header').is(':visible')) {
Toolbar.showToolbar();
}
else {
toolbarTimeout = setTimeout(hideToolbar, TOOLBAR_TIMEOUT);
}
}
};
/**
* Updates the lock button state.
*/
@ -261,30 +204,6 @@ var Toolbar = (function (my) {
buttonClick("#lockIcon", "icon-security icon-security-locked");
};
/**
* Hides the toolbar.
*/
var hideToolbar = function () {
var isToolbarHover = false;
$('#header').find('*').each(function () {
var id = $(this).attr('id');
if ($("#" + id + ":hover").length > 0) {
isToolbarHover = true;
}
});
clearTimeout(toolbarTimeout);
toolbarTimeout = null;
if (!isToolbarHover) {
$('#header').hide("slide", { direction: "up", duration: 300});
$('#subject').animate({top: "-=40"}, 300);
}
else {
toolbarTimeout = setTimeout(hideToolbar, TOOLBAR_TIMEOUT);
}
};
// Shows or hides the 'recording' button.
my.showRecordingButton = function (show) {
if (!config.enableRecording) {

100
toolbar_toggler.js Normal file
View File

@ -0,0 +1,100 @@
var ToolbarToggler = (function(my) {
var INITIAL_TOOLBAR_TIMEOUT = 20000;
var TOOLBAR_TIMEOUT = INITIAL_TOOLBAR_TIMEOUT;
var toolbarTimeout;
/**
* Shows the main toolbar.
*/
my.showToolbar = function() {
var header = $("#header"),
bottomToolbar = $("#bottomToolbar");
if (!header.is(':visible') || !bottomToolbar.is(":visible")) {
header.show("slide", { direction: "up", duration: 300});
$('#subject').animate({top: "+=40"}, 300);
if(!bottomToolbar.is(":visible")) {
bottomToolbar.show("slide", {direction: "right",cduration: 300});
}
if (toolbarTimeout) {
clearTimeout(toolbarTimeout);
toolbarTimeout = null;
}
toolbarTimeout = setTimeout(hideToolbar, TOOLBAR_TIMEOUT);
TOOLBAR_TIMEOUT = 4000;
}
if (focus != null)
{
// TODO: Enable settings functionality. Need to uncomment the settings button in index.html.
// $('#settingsButton').css({visibility:"visible"});
}
// Show/hide desktop sharing button
showDesktopSharingButton();
};
/**
* Hides the toolbar.
*/
var hideToolbar = function () {
var header = $("#header"),
bottomToolbar = $("#bottomToolbar");
var isToolbarHover = false;
header.find('*').each(function () {
var id = $(this).attr('id');
if ($("#" + id + ":hover").length > 0) {
isToolbarHover = true;
}
});
if($("#bottomToolbar:hover").length > 0) {
isToolbarHover = true;
}
clearTimeout(toolbarTimeout);
toolbarTimeout = null;
if (!isToolbarHover) {
header.hide("slide", { direction: "up", duration: 300});
$('#subject').animate({top: "-=40"}, 300);
if(!$("#remoteVideos").is(":visible")) {
bottomToolbar.hide("slide", {direction: "right", cduration: 300});
}
}
else {
toolbarTimeout = setTimeout(hideToolbar, TOOLBAR_TIMEOUT);
}
};
/**
* Docks/undocks the toolbar.
*
* @param isDock indicates what operation to perform
*/
my.dockToolbar = function(isDock) {
if (isDock) {
// First make sure the toolbar is shown.
if (!$('#header').is(':visible')) {
ToolbarToggler.showToolbar();
}
// Then clear the time out, to dock the toolbar.
if (toolbarTimeout) {
clearTimeout(toolbarTimeout);
toolbarTimeout = null;
}
}
else {
if (!$('#header').is(':visible')) {
ToolbarToggler.showToolbar();
}
else {
toolbarTimeout = setTimeout(hideToolbar, TOOLBAR_TIMEOUT);
}
}
};
return my;
}(ToolbarToggler || {}));