add junto spinner for call in progress

This commit is contained in:
Connor Turland 2015-12-22 17:46:19 -05:00
parent dfc94b4079
commit 64283850e3
5 changed files with 53 additions and 39 deletions

BIN
app/assets/images/junto.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 30 KiB

View file

@ -1,7 +1,7 @@
var Metamaps = {}; // this variable declaration defines a Javascript object that will contain all the variables and functions used by us, broken down into 'sub-modules' that look something like this var Metamaps = {}; // this variable declaration defines a Javascript object that will contain all the variables and functions used by us, broken down into 'sub-modules' that look something like this
/* /*
* unless you are on a page with the Javascript InfoVis Toolkit (Topic or Map) the only section in the metamaps * unless you are on a page with the Javascript InfoVis Toolkit (Topic or Map) the only section in the metamaps
* object will be these * object will be these
GlobalUI GlobalUI
Active Active
@ -32,7 +32,7 @@ Map
Mapper Mapper
Topic Topic
Synapse Synapse
JIT JIT
*/ */
Metamaps.Active = { Metamaps.Active = {
@ -83,9 +83,9 @@ Metamaps.GlobalUI = {
event.preventDefault(); event.preventDefault();
return false; return false;
}); });
$('#lightbox_screen, #lightbox_close').click(self.closeLightbox); $('#lightbox_screen, #lightbox_close').click(self.closeLightbox);
// initialize global backbone models and collections // initialize global backbone models and collections
if (Metamaps.Active.Mapper) Metamaps.Active.Mapper = new Metamaps.Backbone.Mapper(Metamaps.Active.Mapper); if (Metamaps.Active.Mapper) Metamaps.Active.Mapper = new Metamaps.Backbone.Mapper(Metamaps.Active.Mapper);
@ -106,26 +106,26 @@ Metamaps.GlobalUI = {
}, },
openLightbox: function (which) { openLightbox: function (which) {
var self = Metamaps.GlobalUI; var self = Metamaps.GlobalUI;
$('.lightboxContent').hide(); $('.lightboxContent').hide();
$('#' + which).show(); $('#' + which).show();
self.lightbox = which; self.lightbox = which;
$('#lightbox_overlay').show(); $('#lightbox_overlay').show();
var heightOfContent = '-' + ($('#lightbox_main').height() / 2) + 'px'; var heightOfContent = '-' + ($('#lightbox_main').height() / 2) + 'px';
// animate the content in from the bottom // animate the content in from the bottom
$('#lightbox_main').animate({ $('#lightbox_main').animate({
'top': '50%', 'top': '50%',
'margin-top': heightOfContent 'margin-top': heightOfContent
}, 200, 'easeOutCubic'); }, 200, 'easeOutCubic');
// fade the black overlay in // fade the black overlay in
$('#lightbox_screen').animate({ $('#lightbox_screen').animate({
'opacity': '0.42' 'opacity': '0.42'
}, 200); }, 200);
if (which == "switchMetacodes") { if (which == "switchMetacodes") {
Metamaps.Create.isSwitchingSet = true; Metamaps.Create.isSwitchingSet = true;
} }
@ -133,22 +133,22 @@ Metamaps.GlobalUI = {
closeLightbox: function (event) { closeLightbox: function (event) {
var self = Metamaps.GlobalUI; var self = Metamaps.GlobalUI;
if (event) event.preventDefault(); if (event) event.preventDefault();
// animate the lightbox content offscreen // animate the lightbox content offscreen
$('#lightbox_main').animate({ $('#lightbox_main').animate({
'top': '100%', 'top': '100%',
'margin-top': '0' 'margin-top': '0'
}, 200, 'easeInCubic'); }, 200, 'easeInCubic');
// fade the black overlay out // fade the black overlay out
$('#lightbox_screen').animate({ $('#lightbox_screen').animate({
'opacity': '0.0' 'opacity': '0.0'
}, 200, function () { }, 200, function () {
$('#lightbox_overlay').hide(); $('#lightbox_overlay').hide();
}); });
if (self.lightbox === 'forkmap') Metamaps.GlobalUI.CreateMap.reset('fork_map'); if (self.lightbox === 'forkmap') Metamaps.GlobalUI.CreateMap.reset('fork_map');
if (self.lightbox === 'newmap') Metamaps.GlobalUI.CreateMap.reset('new_map'); if (self.lightbox === 'newmap') Metamaps.GlobalUI.CreateMap.reset('new_map');
if (Metamaps.Create && Metamaps.Create.isSwitchingSet) { if (Metamaps.Create && Metamaps.Create.isSwitchingSet) {
@ -159,14 +159,27 @@ Metamaps.GlobalUI = {
notifyUser: function (message, leaveOpen) { notifyUser: function (message, leaveOpen) {
var self = Metamaps.GlobalUI; var self = Metamaps.GlobalUI;
Metamaps.Famous.toast.surf.setContent(message); function famousReady() {
Metamaps.Famous.toast.show(); Metamaps.Famous.toast.surf.setContent(message);
clearTimeout(self.notifyTimeOut); Metamaps.Famous.toast.show();
if (!leaveOpen) { clearTimeout(self.notifyTimeOut);
self.notifyTimeOut = setTimeout(function () { if (!leaveOpen) {
Metamaps.Famous.toast.hide(); self.notifyTimeOut = setTimeout(function () {
}, 8000); Metamaps.Famous.toast.hide();
}, 8000);
}
} }
// initialize the famous ui
var callFamous = function(){
if (Metamaps.Famous && Metamaps.Famous.toast) {
famousReady();
}
else {
setTimeout(callFamous, 100);
}
}
callFamous();
}, },
clearNotify: function() { clearNotify: function() {
var self = Metamaps.GlobalUI; var self = Metamaps.GlobalUI;
@ -197,13 +210,13 @@ Metamaps.GlobalUI.CreateMap = {
}, },
bindFormEvents: function () { bindFormEvents: function () {
var self = Metamaps.GlobalUI.CreateMap; var self = Metamaps.GlobalUI.CreateMap;
$('.new_map button.cancel').unbind().bind('click', function (event) { $('.new_map button.cancel').unbind().bind('click', function (event) {
event.preventDefault(); event.preventDefault();
Metamaps.GlobalUI.closeLightbox(); Metamaps.GlobalUI.closeLightbox();
}); });
$('.new_map button.submitMap').unbind().bind('click', self.submit); $('.new_map button.submitMap').unbind().bind('click', self.submit);
// bind permission changer events on the createMap form // bind permission changer events on the createMap form
$('.permIcon').unbind().bind('click', self.switchPermission); $('.permIcon').unbind().bind('click', self.switchPermission);
}, },
@ -223,17 +236,17 @@ Metamaps.GlobalUI.CreateMap = {
}, },
switchPermission: function () { switchPermission: function () {
var self = Metamaps.GlobalUI.CreateMap; var self = Metamaps.GlobalUI.CreateMap;
self.newMap.set('permission', $(this).attr('data-permission')); self.newMap.set('permission', $(this).attr('data-permission'));
$(this).siblings('.permIcon').find('.mapPermIcon').removeClass('selected'); $(this).siblings('.permIcon').find('.mapPermIcon').removeClass('selected');
$(this).find('.mapPermIcon').addClass('selected'); $(this).find('.mapPermIcon').addClass('selected');
var permText = $(this).find('.tip').html(); var permText = $(this).find('.tip').html();
$(this).parents('.new_map').find('.permText').html(permText); $(this).parents('.new_map').find('.permText').html(permText);
}, },
submit: function (event) { submit: function (event) {
if (event) event.preventDefault(); if (event) event.preventDefault();
var self = Metamaps.GlobalUI.CreateMap; var self = Metamaps.GlobalUI.CreateMap;
if (Metamaps.GlobalUI.lightbox === 'forkmap') { if (Metamaps.GlobalUI.lightbox === 'forkmap') {
@ -256,7 +269,7 @@ Metamaps.GlobalUI.CreateMap = {
success: self.success success: self.success
// TODO add error message // TODO add error message
}); });
Metamaps.GlobalUI.closeLightbox(); Metamaps.GlobalUI.closeLightbox();
Metamaps.GlobalUI.notifyUser('Working...'); Metamaps.GlobalUI.notifyUser('Working...');
}, },
@ -280,19 +293,19 @@ Metamaps.GlobalUI.CreateMap = {
//push the new map onto the collection of 'my maps' //push the new map onto the collection of 'my maps'
Metamaps.Maps.Mine.add(model); Metamaps.Maps.Mine.add(model);
var formId = Metamaps.GlobalUI.lightbox === 'forkmap' ? '#fork_map' : '#new_map'; var formId = Metamaps.GlobalUI.lightbox === 'forkmap' ? '#fork_map' : '#new_map';
var form = $(formId); var form = $(formId);
Metamaps.GlobalUI.clearNotify(); Metamaps.GlobalUI.clearNotify();
$('#wrapper').append(self.generateSuccessMessage(model.id)); $('#wrapper').append(self.generateSuccessMessage(model.id));
}, },
reset: function (id) { reset: function (id) {
var self = Metamaps.GlobalUI.CreateMap; var self = Metamaps.GlobalUI.CreateMap;
var form = $('#' + id); var form = $('#' + id);
if (id === "fork_map") { if (id === "fork_map") {
self.topicsToMap = []; self.topicsToMap = [];
self.synapsesToMap = []; self.synapsesToMap = [];
@ -301,7 +314,7 @@ Metamaps.GlobalUI.CreateMap = {
else { else {
form.html(self.emptyMapForm); form.html(self.emptyMapForm);
} }
self.bindFormEvents(); self.bindFormEvents();
self.newMap = new Metamaps.Backbone.Map({ permission: 'commons' }); self.newMap = new Metamaps.Backbone.Map({ permission: 'commons' });
@ -317,7 +330,7 @@ Metamaps.GlobalUI.Account = {
var self = Metamaps.GlobalUI.Account; var self = Metamaps.GlobalUI.Account;
$('.sidebarAccountIcon').click(self.toggleBox); $('.sidebarAccountIcon').click(self.toggleBox);
$('.sidebarAccountBox').click(function(event){ $('.sidebarAccountBox').click(function(event){
event.stopPropagation(); event.stopPropagation();
}); });
$('body').click(self.close); $('body').click(self.close);
@ -410,7 +423,7 @@ Metamaps.GlobalUI.Search = {
self.close(0, true); self.close(0, true);
} }
break; break;
default: default:
break; //console.log(e.which); break; //console.log(e.which);
} }
@ -476,7 +489,7 @@ Metamaps.GlobalUI.Search = {
var topics = { var topics = {
name: 'topics', name: 'topics',
limit: 9999, limit: 9999,
display: function(s) { return s.label; }, display: function(s) { return s.label; },
templates: { templates: {
notFound: function(s) { notFound: function(s) {
@ -591,7 +604,7 @@ Metamaps.GlobalUI.Search = {
// tell the autocomplete to launch a new tab with the topic, map, or mapper you clicked on // tell the autocomplete to launch a new tab with the topic, map, or mapper you clicked on
$('.sidebarSearchField').bind('typeahead:select', self.handleResultClick); $('.sidebarSearchField').bind('typeahead:select', self.handleResultClick);
// don't do it, if they clicked on a 'addToMap' button // don't do it, if they clicked on a 'addToMap' button
$('.sidebarSearch button.addToMap').click(function (event) { $('.sidebarSearch button.addToMap').click(function (event) {
event.stopPropagation(); event.stopPropagation();

View file

@ -2024,7 +2024,6 @@ Metamaps.Realtime = {
var heightOfVideo = 150; var heightOfVideo = 150;
var padding = 25; var padding = 25;
var top = paddingAboveTop + (self.videosInPosition * heightOfVideo) + padding; var top = paddingAboveTop + (self.videosInPosition * heightOfVideo) + padding;
console.log(top);
var left = 30; var left = 30;
//var right = Math.floor((Math.random() * (468 - 100)) + 1); //var right = Math.floor((Math.random() * (468 - 100)) + 1);
v.setParent($('#wrapper')); v.setParent($('#wrapper'));
@ -2153,12 +2152,13 @@ Metamaps.Realtime = {
inviter: Metamaps.Active.Mapper.id, inviter: Metamaps.Active.Mapper.id,
invited: userid invited: userid
}); });
Metamaps.GlobalUI.notifyUser('Invitation pending...', true);
}, },
callAccepted: function (userid) { callAccepted: function (userid) {
var self = Metamaps.Realtime; var self = Metamaps.Realtime;
var username = self.mappersOnMap[userid].name; var username = self.mappersOnMap[userid].name;
Metamaps.GlobalUI.notifyUser(username + ' liked your suggestion! Video call starting...'); Metamaps.GlobalUI.notifyUser('Conversation starting...');
self.joinCall(); self.joinCall();
}, },
callDenied: function (userid) { callDenied: function (userid) {

View file

@ -215,12 +215,14 @@ Metamaps.Views.chatView = (function () {
this.$conversationInProgress.show(); this.$conversationInProgress.show();
this.$participants.addClass('is-live'); this.$participants.addClass('is-live');
if (participating) this.$conversationInProgress.addClass('is-participating'); if (participating) this.$conversationInProgress.addClass('is-participating');
this.$button.addClass('active');
} }
chatView.prototype.conversationEnded = function () { chatView.prototype.conversationEnded = function () {
this.$conversationInProgress.hide(); this.$conversationInProgress.hide();
this.$participants.removeClass('is-live'); this.$participants.removeClass('is-live');
this.$conversationInProgress.removeClass('is-participating'); this.$conversationInProgress.removeClass('is-participating');
this.$button.removeClass('active');
} }
chatView.prototype.addParticipant = function (participant) { chatView.prototype.addParticipant = function (participant) {

View file

@ -146,7 +146,6 @@ Metamaps.Views.room = (function () {
} }
room.prototype.removeVideo = function (peer) { room.prototype.removeVideo = function (peer) {
console.log('removeVideo', peer);
var id = typeof peer == 'string' ? peer : peer.id; var id = typeof peer == 'string' ? peer : peer.id;
if (this.videos[id]) { if (this.videos[id]) {
this.videos[id].remove(); this.videos[id].remove();