added realtime box

app/assets/javascripts/Jit/graphsettings-model.js

@@ -9,6 +9,10 @@ var MetamapsModel = new Object();
 
 MetamapsModel.embed = false;
 
+// if you're on a map, this will be an object that has a reference to each user that has loaded the map, and whether they are
+// in realtime or not
+MetamapsModel.mappersOnMap = {};
+
 
 MetamapsModel.metacodeScrollerInit = false; // indicates whether the scrollbar in the custom metacode set space has been init
 

app/assets/javascripts/jquery/AllMappingPages.js

@@ -56,9 +56,9 @@ $(document).ready(function () {
 
                     // hide the other two
                     $('.sidebarAccountBox').hide();
-                    $('.sidebarWandBox').hide();
+                    $('.sidebarCollaborateBox').hide();
                     $('.sidebarAccountIcon').css('background-color', '#0F1519');
-                    $('.sidebarWandIcon').css('background-color', '#0F1519');
+                    $('.sidebarCollaborateIcon').css('background-color', '#0F1519');
 
                     $('.sidebarFilterIcon').css('background-color', '#000');
                     $('.sidebarFilterBox').fadeIn(200, function () {

app/assets/javascripts/jquery/AuthCanEditMapPage.js

@@ -7,28 +7,91 @@
 
 $(document).ready(function () {
 
+    function bindRealtimeHover() {
+
+        var realtimeIsOpen = false
+
+        // controls the sliding hover of the bottom left menu
+        var sliding1 = false;
+        var lT;
+
+        var closeRealtime = function () {
+            lT = setTimeout(function () {
+                if (!sliding1) {
+                    sliding1 = true;
+                    $('.sidebarCollaborateIcon').css('background-color', '#0F1519');
+                    $('.sidebarCollaborateBox').fadeOut(200, function () {
+                        sliding1 = false;
+                        realtimeIsOpen = false;
+                    });
+                }
+            }, 300);
+        }
+
+        var openRealtime = function () {
+                clearTimeout(lT);
+                if (!sliding1) {
+                    sliding1 = true;
+
+                    // hide the other two
+                    $('.sidebarFilterBox').hide();
+                    $('.sidebarAccountBox').hide();
+                    $('.sidebarFilterIcon').css('background-color', '#0F1519');
+                    $('.sidebarAccountIcon').css('background-color', '#0F1519');
+
+                    $('.sidebarCollaborateIcon').css('background-color', '#000');
+                    $('.sidebarCollaborateBox').fadeIn(200, function () {
+                        sliding1 = false;
+                        realtimeIsOpen = true;
+                    });
+                }
+            }
+            // bind the hover events
+        $(".sidebarCollaborate").hover(openRealtime, closeRealtime);
+    } // end bindRealtimeHover
+
+    function bindSaveHover() {
+        var closeSave = function () {
+
+        }
+
+        var openSave = function () {
+                // hide the other three
+                $('.sidebarFilterBox, .sidebarAccountBox, .sidebarCollaborateBox').hide();
+                $('.sidebarFilterIcon, .sidebarAccountIcon, .sidebarCollaborateIcon').css('background-color', '#0F1519');
+            }
+        // bind the hover events
+        $(".sidebarSave").hover(openSave, closeSave);
+    } // end bindSaveHover
+
+    // bind hover events  
+    bindRealtimeHover();
+    bindSaveHover();
+
     // because anyone who can edit the map can collaborate on it in realtime
-    $(".sidebarCollaborateIcon").click(function (event) {
+    $(".realtimeOnOff").click(function (event) {
         if (!goRealtime) {
             window.realtime.sendRealtimeOn();
-            $('.sidebarCollaborate .tip').html('Stop Realtime Collaboration');
+            $(this).html('ON').removeClass('rtOff').addClass('rtOn');
+            $(".rtMapperSelf").removeClass('littleRtOff').addClass('littleRtOn');
         } else {
             window.realtime.sendRealtimeOff();
-            $('.sidebarCollaborate .tip').html('Start Realtime Collaboration');
+            $(this).html('OFF').removeClass('rtOn').addClass('rtOff');
+            $(".rtMapperSelf").removeClass('littleRtOn').addClass('littleRtOff');
         }
         goRealtime = !goRealtime;
         $(".sidebarCollaborateIcon").toggleClass("blue");
     });
-    
+
     // because anyone who can edit the map can save a new map layout
     $('.sidebarSave').click(function () {
         saveLayoutAll();
     });
-    
+
     // because anyone who can edit the map can change the map title
     $('.mapInfoName .best_in_place_name').bind("ajax:success", function () {
         var name = $(this).html();
         $('.mapName').html(name);
     });
-    
+
 }); // end document.ready

app/assets/javascripts/jquery/AuthCanEditMappingPages.js

@@ -9,6 +9,23 @@ this code adds required jQuery for creating, or pulling in, topics and synapses
 
 $(document).ready(function () {
 
+    function bindForkHover() {
+        var closeFork = function () {
+
+        }
+
+        var openFork = function () {
+                // hide the other three
+                $('.sidebarFilterBox, .sidebarAccountBox, .sidebarCollaborateBox').hide();
+                $('.sidebarFilterIcon, .sidebarAccountIcon, .sidebarCollaborateIcon').css('background-color', '#0F1519');
+            }
+        // bind the hover events
+        $(".sidebarFork").hover(openFork, closeFork);
+    } // end bindForkHover
+
+    // bind hover events  
+    bindForkHover();
+    
     //////
     //////
     //// TOPIC CREATION

app/assets/javascripts/jquery/EveryPage.js

@@ -371,9 +371,9 @@ $(document).ready(function () {
 
                     // hide the other two
                     $('.sidebarFilterBox').hide();
-                    $('.sidebarWandBox').hide();
+                    $('.sidebarCollaborateBox').hide();
                     $('.sidebarFilterIcon').css('background-color', '#0F1519');
-                    $('.sidebarWandIcon').css('background-color', '#0F1519');
+                    $('.sidebarCollaborateIcon').css('background-color', '#0F1519');
 
                     $('.sidebarAccountIcon').css('background-color', '#000');
                     $('.sidebarAccountBox').fadeIn(200, function () {

app/assets/javascripts/realtime/realtime.js

@@ -26,6 +26,17 @@ window.realtime.setupSocket = function () {
     socket.on(userid + '-' + mapid + '-UpdateMapperList', function (data) {
         // data.userid
         // data.username
+        // data.userrealtime
+        
+        MetamapsModel.mappersOnMap[data.userid] = {
+            name: data.username,
+            realtime: data.userrealtime
+        };
+        
+        var onOff = data.userrealtime ? "On" : "Off";
+        var mapperListItem = '<li id="mapper' + data.userid + '" class="rtMapper littleRt' + onOff + '">' + data.username + '</li>';
+        $('.realtimeMapperList ul').append(mapperListItem);
+        
         //alert(data.username + ' is already online');
     });
 
@@ -33,6 +44,14 @@ window.realtime.setupSocket = function () {
     socket.on('maps-' + mapid + '-newmapper', function (data) {
         // data.userid
         // data.username
+        
+        MetamapsModel.mappersOnMap[data.userid] = {
+            name: data.username,
+            realtime: false
+        };
+        
+        var mapperListItem = '<li id="mapper' + data.userid + '" class="rtMapper littleRtOff">' + data.username + '</li>';
+        $('.realtimeMapperList ul').append(mapperListItem);
 
         window.realtime.notifyUser(data.username + ' just joined the map');
 
@@ -41,15 +60,32 @@ window.realtime.setupSocket = function () {
             userToNotify: data.userid,
             username: username,
             userid: userid,
+            userrealtime: goRealtime,
             mapid: mapid
         };
         socket.emit('updateNewMapperList', update);
     });
     
+    // receive word that a mapper left the map
+    socket.on('maps-' + mapid + '-lostmapper', function (data) {
+        // data.userid
+        // data.username
+        
+        delete MetamapsModel.mappersOnMap[data.userid];
+        
+        $('#mapper' + data.userid).remove();
+
+        window.realtime.notifyUser(data.username + ' just left the map');
+    });
+    
     // receive word that there's a mapper turned on realtime
     socket.on('maps-' + mapid + '-newrealtime', function (data) {
         // data.userid
         // data.username
+        
+        MetamapsModel.mappersOnMap[data.userid].realtime = true;
+        
+        $('#mapper' + data.userid).removeClass('littleRtOff').addClass('littleRtOn');
 
         window.realtime.notifyUser(data.username + ' just turned on realtime');
     });
@@ -59,16 +95,13 @@ window.realtime.setupSocket = function () {
         // data.userid
         // data.username
 
+        MetamapsModel.mappersOnMap[data.userid].realtime = false;
+        
+        $('#mapper' + data.userid).removeClass('littleRtOn').addClass('littleRtOff');
+        
         window.realtime.notifyUser(data.username + ' just turned off realtime');
     });
 
-    socket.on('maps-' + mapid + '-lostmapper', function (data) {
-        // data.userid
-        // data.username
-
-        window.realtime.notifyUser(data.username + ' just left the map');
-    });
-
     socket.on('maps-' + mapid, function (data) {
 
 

app/assets/stylesheets/application.css

@@ -887,17 +887,15 @@ h3.filterByMetacode {
     position: absolute;
     width: 35px;
     height: 35px;
-    background: #0F1519 url('MMCCicon_realtime_junto.png') no-repeat 0px 1px;
+    background-image: url('MMCCicon_realtime_junto.png');
     background-size: 36px 36px;
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-color: #0F1519;
     cursor: pointer;
 }
-.sidebarCollaborateIcon:hover,
-.sidebarCollaborateIcon.blue:hover {
-    background-color: black;
-}
 .sidebarCollaborateIcon.blue {
-    background: #0F1519 url('MMCCicon_realtime_blue.png') no-repeat center center;
-    background-size: 26px 25px;
+    background-image: url('MMCCicon_realtime_blue.png');
 }
 .sidebarCollaborateBox {
     position: absolute;
@@ -905,30 +903,55 @@ h3.filterByMetacode {
     height: auto;
     width: auto;
     background: #000;
-    top: 36px;
+    top: 35px;
     right: 0;
     padding: 10px;
     border: 1px solid black;
-    min-width: 120px;
+    min-width: 135px;
     font-family: 'LatoLight', helvetica, sans-serif;
 }
-.sidebarCollaborate .hoverForTip:hover .tip {
-    display: block;
+h3.realtimeBoxTitle {
+    margin-bottom: 10px;
+    text-align: left;
+    float: left;
+    font-family: 'Lato', helvetica, sans-serif;
 }
-.sidebarCollaborate .tip {
-    display: none;
-    position: absolute;
-    background: black;
+.sidebarCollaborateBox .realtimeOnOff {
+    float: left;
+    padding: 4px;
+    border-radius: 2px;
+    margin-left: 12px;
+    cursor: pointer;
+    width: 31px;
     text-align: center;
-    top: 36px;
-    right: 0;
+}
+.sidebarCollaborateBox .rtOff {
+    background: white;
+    color: black;
+}
+.sidebarCollaborateBox .rtOff:hover {
+    padding: 3px;
+    border: 1px solid #15bad4;
+}
+.sidebarCollaborateBox .rtOn {
+    background: #15bad4;
     color: white;
-    border-radius: 4px;
-    font-size: 15px !important;
-    font-family: 'LatoRegular';
-    line-height: 17px;
-    padding: 3px 5px 2px;
-    z-index: 100;
+}
+.realtimeMapperList .rtMapper {
+    list-style-type: none;
+    white-space: nowrap;
+    padding: 2px 5px 2px 30px;
+    display: block;
+    background-size: 26px 26px;
+    background-repeat: no-repeat;
+    background-position: 4px center;
+    margin-bottom: 5px;
+}
+.realtimeMapperList .littleRtOff {
+    background-image: url('/assets/MMCCicon_realtime_junto.png');
+}
+.realtimeMapperList .littleRtOn {
+    background-image: url('/assets/MMCCicon_realtime_blue.png');
 }
 /* end collaborate */
 

app/views/maps/show.html.erb

@@ -6,6 +6,11 @@
   
 <% content_for :title, @map.name + " | Metamaps" %>
 
+<div id="preloaded-images">
+   <img src="/assets/MMCCicon_realtime_blue.png" />
+</div>
+                                                                                     
+                                                                                     
 <% if authenticated? %>
   <% if @map.permission == "commons" || @map.user == user %>
       <div class="sidebarSave">
@@ -23,11 +28,18 @@
   </div>
   <% if @map.permission == "commons" || @map.user == user %>
     <div class="sidebarCollaborate">
-      <div class="sidebarCollaborateIcon hoverForTip">
-        <div class="tip">Start Realtime Collaboration</div>
-      </div>
+      <div class="sidebarCollaborateIcon"></div>
       <div class="sidebarCollaborateBox">
-        
+        <h3 class="realtimeBoxTitle">Realtime: </h3>
+        <span class="realtimeOnOff rtOff">OFF</span>
+        <div class="clearfloat"></div>
+        <div class="realtimeMapperList">
+            <ul>
+                <li class="rtMapper littleRtOff rtMapperSelf">
+                    <%= user.name %> (me)
+                </li>
+            </ul>
+        </div>
       </div>
     </div>
   <% end %>

realtime/realtime-server.js

@@ -44,7 +44,8 @@ function start() {
         socket.on('updateNewMapperList', function (data) {
             var existingUser = {
                 userid: data.userid,
-                username: data.username
+                username: data.username,
+                userrealtime: data.userrealtime
             };
             socket.broadcast.emit(data.userToNotify + '-' + data.mapid + '-UpdateMapperList', existingUser);
         });