add junto spinner for call in progress

app/assets/javascripts/src/Metamaps.GlobalUI.js.erb

@@ -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
 /*
 
-* 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
 GlobalUI
 Active
@@ -32,7 +32,7 @@ Map
 Mapper
 Topic
 Synapse
-JIT 
+JIT
 */
 
 Metamaps.Active = {
@@ -83,9 +83,9 @@ Metamaps.GlobalUI = {
             event.preventDefault();
             return false;
         });
-        
+
         $('#lightbox_screen, #lightbox_close').click(self.closeLightbox);
-        
+
         // initialize global backbone models and collections
         if (Metamaps.Active.Mapper) Metamaps.Active.Mapper = new Metamaps.Backbone.Mapper(Metamaps.Active.Mapper);
 
@@ -106,26 +106,26 @@ Metamaps.GlobalUI = {
     },
     openLightbox: function (which) {
         var self = Metamaps.GlobalUI;
-        
+
         $('.lightboxContent').hide();
         $('#' + which).show();
-        
+
         self.lightbox = which;
 
         $('#lightbox_overlay').show();
-        
+
         var heightOfContent = '-' + ($('#lightbox_main').height() / 2) + 'px';
         // animate the content in from the bottom
         $('#lightbox_main').animate({
                 'top': '50%',
                 'margin-top': heightOfContent
         }, 200, 'easeOutCubic');
-        
+
         // fade the black overlay in
         $('#lightbox_screen').animate({
                     'opacity': '0.42'
         }, 200);
-        
+
         if (which == "switchMetacodes") {
             Metamaps.Create.isSwitchingSet = true;
         }
@@ -133,22 +133,22 @@ Metamaps.GlobalUI = {
 
     closeLightbox: function (event) {
         var self = Metamaps.GlobalUI;
-        
+
         if (event) event.preventDefault();
-        
+
         // animate the lightbox content offscreen
         $('#lightbox_main').animate({
                 'top': '100%',
                 'margin-top': '0'
         }, 200, 'easeInCubic');
-        
+
         // fade the black overlay out
         $('#lightbox_screen').animate({
                     'opacity': '0.0'
         }, 200, function () {
-            $('#lightbox_overlay').hide();   
+            $('#lightbox_overlay').hide();
         });
-        
+
         if (self.lightbox === 'forkmap') Metamaps.GlobalUI.CreateMap.reset('fork_map');
         if (self.lightbox === 'newmap') Metamaps.GlobalUI.CreateMap.reset('new_map');
         if (Metamaps.Create && Metamaps.Create.isSwitchingSet) {
@@ -159,14 +159,27 @@ Metamaps.GlobalUI = {
     notifyUser: function (message, leaveOpen) {
         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() {
         var self = Metamaps.GlobalUI;
@@ -197,13 +210,13 @@ Metamaps.GlobalUI.CreateMap = {
     },
     bindFormEvents: function () {
         var self = Metamaps.GlobalUI.CreateMap;
-        
+
         $('.new_map button.cancel').unbind().bind('click', function (event) {
             event.preventDefault();
             Metamaps.GlobalUI.closeLightbox();
         });
         $('.new_map button.submitMap').unbind().bind('click', self.submit);
-        
+
         // bind permission changer events on the createMap form
         $('.permIcon').unbind().bind('click', self.switchPermission);
     },
@@ -223,17 +236,17 @@ Metamaps.GlobalUI.CreateMap = {
     },
     switchPermission: function () {
         var self = Metamaps.GlobalUI.CreateMap;
-        
+
         self.newMap.set('permission', $(this).attr('data-permission'));
         $(this).siblings('.permIcon').find('.mapPermIcon').removeClass('selected');
         $(this).find('.mapPermIcon').addClass('selected');
-        
+
         var permText = $(this).find('.tip').html();
         $(this).parents('.new_map').find('.permText').html(permText);
     },
     submit: function (event) {
         if (event) event.preventDefault();
-        
+
         var self = Metamaps.GlobalUI.CreateMap;
 
         if (Metamaps.GlobalUI.lightbox === 'forkmap') {
@@ -256,7 +269,7 @@ Metamaps.GlobalUI.CreateMap = {
             success: self.success
             // TODO add error message
         });
-        
+
         Metamaps.GlobalUI.closeLightbox();
         Metamaps.GlobalUI.notifyUser('Working...');
     },
@@ -280,19 +293,19 @@ Metamaps.GlobalUI.CreateMap = {
 
         //push the new map onto the collection of 'my maps'
         Metamaps.Maps.Mine.add(model);
-        
+
         var formId = Metamaps.GlobalUI.lightbox === 'forkmap' ? '#fork_map' : '#new_map';
         var form = $(formId);
-        
+
         Metamaps.GlobalUI.clearNotify();
         $('#wrapper').append(self.generateSuccessMessage(model.id));
-        
+
     },
     reset: function (id) {
         var self = Metamaps.GlobalUI.CreateMap;
 
         var form = $('#' + id);
-                
+
         if (id === "fork_map") {
             self.topicsToMap = [];
             self.synapsesToMap = [];
@@ -301,7 +314,7 @@ Metamaps.GlobalUI.CreateMap = {
         else {
             form.html(self.emptyMapForm);
         }
-        
+
         self.bindFormEvents();
         self.newMap = new Metamaps.Backbone.Map({ permission: 'commons' });
 
@@ -317,7 +330,7 @@ Metamaps.GlobalUI.Account = {
         var self = Metamaps.GlobalUI.Account;
 
         $('.sidebarAccountIcon').click(self.toggleBox);
-        $('.sidebarAccountBox').click(function(event){ 
+        $('.sidebarAccountBox').click(function(event){
             event.stopPropagation();
         });
         $('body').click(self.close);
@@ -410,7 +423,7 @@ Metamaps.GlobalUI.Search = {
                     self.close(0, true);
                 }
                 break;
-            
+
             default:
                 break; //console.log(e.which);
             }
@@ -476,7 +489,7 @@ Metamaps.GlobalUI.Search = {
         var topics = {
             name: 'topics',
             limit: 9999,
-            
+
             display: function(s) { return s.label; },
             templates: {
                 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
         $('.sidebarSearchField').bind('typeahead:select', self.handleResultClick);
-        
+
         // don't do it, if they clicked on a 'addToMap' button
         $('.sidebarSearch button.addToMap').click(function (event) {
             event.stopPropagation();

app/assets/javascripts/src/Metamaps.js.erb

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

app/assets/javascripts/src/views/chatView.js.erb

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

app/assets/javascripts/src/views/room.js

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