position the chat box, and remove the old junto panel

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

@@ -1937,6 +1937,13 @@ Metamaps.Realtime = {
         });
         $('body').click(self.close);
 
+        $(document).on(Metamaps.Views.chatView.events.openTray, function () {
+          $('.main').addClass('compressed');
+        });
+        $(document).on(Metamaps.Views.chatView.events.closeTray, function () {
+          $('.main').removeClass('compressed');
+        });
+
         var railsEnv = $('body').data('env');
         var whichToConnect = railsEnv === 'development' ? self.stringForLocalhost : self.stringForHeroku;
         self.socket = new SocketIoConnection({ url: whichToConnect });
@@ -1977,8 +1984,8 @@ Metamaps.Realtime = {
         self.room = new Metamaps.Views.room({
           webrtc: self.webrtc,
           socket: self.socket,
-          username: 'dude',//getUsername(opts.user, provider),
+          username: Metamaps.Active.Mapper.get('name'),
-          image: 'https://pbs.twimg.com/profile_images/436050101539065856/QMGlzCUn_400x400.jpeg', //getImage(opts.user, provider),
+          image: Metamaps.Active.Mapper.get('image'),
           room: 'global',
           $video: self.localVideo.$video,
           myVideoView: self.localVideo.view,
@@ -2231,7 +2238,7 @@ Metamaps.Realtime = {
     createChat: function() {
         var self = Metamaps.Realtime;
 
-        $('#wrapper').append(self.room.chat.$container);
+        $('body').prepend(self.room.chat.$container);
         //self.room.chat.open();
     },
     sendRealtimeOn: function () {
@@ -2269,6 +2276,7 @@ Metamaps.Realtime = {
 
         self.mappersOnMap[data.userid] = {
             name: data.username,
+            username: data.username,
             image: data.userimage,
             color: Metamaps.Util.getPastelColor(),
             realtime: data.userrealtime,
@@ -2291,8 +2299,8 @@ Metamaps.Realtime = {
         mapperListItem += '</li>';
 
         if (data.userid !== Metamaps.Active.Mapper.id) {
-            $('#mapper' + data.userid).remove();
+            //$('#mapper' + data.userid).remove();
-            $('.realtimeMapperList ul').append(mapperListItem);
+            self.room.chat.addParticipant(self.mappersOnMap[data.userid]);
 
             // create a div for the collaborators compass
             self.createCompass(data.username, data.userid, data.userimage, self.mappersOnMap[data.userid].color, !self.status);
@@ -2309,6 +2317,7 @@ Metamaps.Realtime = {
 
         self.mappersOnMap[data.userid] = {
             name: data.username,
+            username: data.username,
             image: data.userimage,
             color: Metamaps.Util.getPastelColor(),
             realtime: true,
@@ -2326,8 +2335,8 @@ Metamaps.Realtime = {
             mapperListItem += data.username;
             mapperListItem += '<div class="littleJuntoIcon"></div>';
             mapperListItem += '</li>';
-            $('#mapper' + data.userid).remove();
+            //$('#mapper' + data.userid).remove();
-            $('.realtimeMapperList ul').append(mapperListItem);
+            self.room.chat.addParticipant(self.mappersOnMap[data.userid]);
 
             // create a div for the collaborators compass
             self.createCompass(data.username, data.userid, data.userimage, self.mappersOnMap[data.userid].color, !self.status);
@@ -2373,8 +2382,9 @@ Metamaps.Realtime = {
 
         delete self.mappersOnMap[data.userid];
 
-        $('#mapper' + data.userid).remove();
+        //$('#mapper' + data.userid).remove();
         $('#compass' + data.userid).remove();
+        self.room.chat.removeParticipant(data.username);
 
         Metamaps.GlobalUI.notifyUser(data.username + ' just left the map');
     },
@@ -2387,7 +2397,7 @@ Metamaps.Realtime = {
 
         self.mappersOnMap[data.userid].realtime = true;
 
-        $('#mapper' + data.userid).removeClass('littleRtOff').addClass('littleRtOn');
+        //$('#mapper' + data.userid).removeClass('littleRtOff').addClass('littleRtOn');
         $('#compass' + data.userid).show();
 
         Metamaps.GlobalUI.notifyUser(data.username + ' just turned on realtime');
@@ -2401,7 +2411,7 @@ Metamaps.Realtime = {
 
         self.mappersOnMap[data.userid].realtime = false;
 
-        $('#mapper' + data.userid).removeClass('littleRtOn').addClass('littleRtOff');
+        //$('#mapper' + data.userid).removeClass('littleRtOn').addClass('littleRtOff');
         $('#compass' + data.userid).hide();
 
         Metamaps.GlobalUI.notifyUser(data.username + ' just turned off realtime');

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

@@ -203,6 +203,9 @@ Metamaps.Views.chatView = (function () {
         Private.addEventListeners.call(this);
         Private.initialMessages.call(this);
         Private.initializeSounds.call(this);
+        this.$container.css({
+            right: '-300px'
+        });
     };
 
     chatView.prototype.addParticipant = function (participant) {
@@ -229,6 +232,7 @@ Metamaps.Views.chatView = (function () {
         this.unreadMessages = 0;
         this.$unread.hide();
         this.scrollMessages(0);
+        $(document).trigger(chatView.events.openTray);
     }
 
     chatView.prototype.scrollMessages = function(duration) {
@@ -249,6 +253,7 @@ Metamaps.Views.chatView = (function () {
         });
         this.$messageInput.blur();
         this.isOpen = false;
+        $(document).trigger(chatView.events.closeTray);
     }
 
     chatView.prototype.remove = function () {
@@ -262,6 +267,8 @@ Metamaps.Views.chatView = (function () {
      */
     chatView.events = {
         message: 'ChatView:message',
+        openTray: 'ChatView:openTray',
+        closeTray: 'ChatView:closeTray',
         inputFocus: 'ChatView:inputFocus',
         inputBlur: 'ChatView:inputBlur'
     };

app/assets/stylesheets/application.css.erb

@@ -628,8 +628,12 @@ label {
     margin: 0 0 0 1.3em;
 }
 .main {
+    position: relative;
     /*overflow:hidden; */
 }
+.main.compressed {
+  width: calc(100% - 300px);
+}
 #infovis-canvas {
     -webkit-touch-callout: none;
     -webkit-user-select: none;
@@ -1077,84 +1081,6 @@ h3.filterBox {
 }
 /* end filter by metacode */
 
-/* collaborate */
-
-.sidebarCollaborate {
-    width: 32px;
-    height: 32px;
-}
-.sidebarCollaborateBox {
-    display: none;
-    height: auto;
-    padding: 16px;
-    width: 238px;
-}
-h3.realtimeBoxTitle {
-    margin-bottom: 10px;
-    text-align: left;
-    float: left;
-    font-size:18px;
-    line-height:18px;
-}
-.sidebarCollaborateBox .realtimeOnOff {
-    float: right;
-    padding: 4px;
-    border-radius: 2px;
-    margin-left: 12px;
-    cursor: pointer;
-    text-align: center;
-    font-size:12px;
-}
-.sidebarCollaborateBox .realtimeOnOff:hover, .sidebarCollaborateBox .realtimeOnOff.active {
-    color: #00bcd4;
-}
-.sidebarCollaborateBox .rtOff {
-    
-}
-.sidebarCollaborateBox .rtOn {
-
-}
-.realtimeMapperList .rtMapper {
-    list-style-type: none;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    padding: 10px 34px;
-    display: block;
-    height: 14px;
-    font-family: 'din-regular', helvetica, sans-serif;
-    font-size: 14px;
-    line-height: 14px;
-    position: relative;
-}
-
-.rtMapperSelf img {
-    border: 2px solid #424242;
-}
-
-.rtUserImage {
-    position: absolute;
-    top: 4px;
-    left: 0;
-    border-radius: 14px;
-}
-
-.littleJuntoIcon {
-    width: 24px;
-    height:24px;
-    position: absolute;
-    top: 4px;
-    right: 0;
-    background-image: url(<%= asset_data_uri('junto24_sprite.png') %>);
-}
-.realtimeMapperList .littleRtOff  .littleJuntoIcon {
-    background-position: 0 0;
-}
-.realtimeMapperList .littleRtOn .littleJuntoIcon {
-    background-position: -24px 0;
-}
-/* end collaborate */
-
 .nodemargin {
     padding-top: 120px;
 }

app/assets/stylesheets/clean.css.erb

@@ -116,7 +116,7 @@
 
 /* upperLeftUI */
 .upperLeftUI {
-	position: fixed;
+	position: absolute;
 	top: 10px;
 	left: 24px;
 	z-index:3;
@@ -155,7 +155,7 @@
 /* upperRightUI */
 
 .upperRightUI {
-	position: fixed;
+	position: absolute;
 	top: 10px;
 	right: 24px;
 	z-index:4;
@@ -166,9 +166,9 @@
 }
 
 .upperRightBox {
-	position: fixed;
+	position: absolute;
-	top:52px;
+	top:42px;
-	right:24px;
+	right:0;
 	background-color: #E0E0E0;
 	border-radius: 2px;
 	box-shadow: 0 3px 3px rgba(0,0,0,0.23), 0 3px 3px rgba(0,0,0,0.16);
@@ -187,17 +187,12 @@
 }
 
 .upperRightMapButtons {
-	position: relative;
 	top: -42px; /* puts it just offscreen */
 }
 .mapPage .upperRightMapButtons, .topicPage .upperRightMapButtons {
 	top: 0;
 }
 
-.topicPage .sidebarCollaborate {
-    display: none;
-}
-
 .upperRightIcon {
     width: 32px;
     height: 32px;
@@ -205,20 +200,6 @@
     background-repeat: no-repeat;
     cursor: pointer;
 }
-.sidebarCollaborateIcon {
-    background-position: 0 0;
-    display: none;
-}
-.sidebarCollaborateIcon.blue {
-    background-position: -32px 0;
-}
-.sidebarCollaborateIcon.blue:hover {
-    background-position: -32px -32px;
-}
-/* only show the collaborate icon on commons */
-.commonsMap .sidebarCollaborateIcon {
-    display: block;
-}
 .sidebarFilterIcon {
     background-position: -64px 0;
 }
@@ -384,7 +365,7 @@
 }
 
 .infoAndHelp {
-    position: fixed;
+    position: absolute;
     bottom: 20px;
     right: 20px;
     z-index: 3;
@@ -424,7 +405,7 @@
 /* mapControls */
 
 .mapControls {
-	position: fixed;
+	position: absolute;
 	bottom: 24px;
 	right:-32px; /* puts it just offscreen */
 	width:32px;
@@ -474,8 +455,7 @@
     background-position: -32px 0;
 }
 
-.zoomExtents:hover .tooltips, .zoomIn:hover .tooltips, .zoomOut:hover .tooltips, .takeScreenshot:hover .tooltips, .sidebarCollaborateIcon:hover .tooltipsUnder,
+.zoomExtents:hover .tooltips, .zoomIn:hover .tooltips, .zoomOut:hover .tooltips, .takeScreenshot:hover .tooltips, .sidebarFilterIcon:hover .tooltipsUnder, .sidebarForkIcon:hover .tooltipsUnder, .addMap:hover .tooltipsUnder, .authenticated .sidebarAccountIcon:hover .tooltipsUnder,
- .sidebarFilterIcon:hover .tooltipsUnder, .sidebarForkIcon:hover .tooltipsUnder, .addMap:hover .tooltipsUnder, .authenticated .sidebarAccountIcon:hover .tooltipsUnder,
  .mapInfoIcon:hover .tooltipsAbove, .openCheatsheet:hover .tooltipsAbove {
     display: block;
 }
@@ -532,10 +512,6 @@
     font-style: normal;
 }
 
-.sidebarCollaborateIcon .tooltipsUnder {
-    margin-left: -3px;
-}
-
 .sidebarFilterIcon .tooltipsUnder {
     margin-left: -4px;
 }
@@ -582,11 +558,7 @@
     border-bottom: 5px solid transparent;
 }
 
-.sidebarCollaborateIcon div:after, .sidebarFilterIcon div:after, .sidebarAccountIcon .tooltipsUnder:after {
+.sidebarFilterIcon div:after, .sidebarForkIcon div:after, .addMap div:after, .sidebarAccountIcon .tooltipsUnder:after {
-    left: 38%;
-}
-
-.sidebarCollaborateIcon div:after, .sidebarFilterIcon div:after, .sidebarForkIcon div:after, .addMap div:after, .sidebarAccountIcon .tooltipsUnder:after {
     content: '';
     position: absolute;
     top: 129%;

app/assets/stylesheets/junto.css

@@ -68,10 +68,10 @@
   top: 50px;
 }
 .chat-box {
-  position: absolute;
+  position: relative;
   z-index: 1;
-  right: -300px;
   width: 300px;
+  float: right;
   height: 100%;
   background: #424242;
   box-shadow: 0px 0px 16px 8px rgba(0, 0, 0, 0.23), -2px 10px 10px rgba(0, 0, 0, 0.19);
@@ -83,6 +83,7 @@
   width: 36px;
   height: 49px;
   background: url(junto.png) no-repeat 2px 9px, url(tray_tab.png) no-repeat;
+  cursor: pointer;
 }
 .chat-box .chat-button .chat-unread {
   display: none;
@@ -262,4 +263,4 @@
   float: right;
   font-size: 10px;
   color: #757575;
-}
+}

app/views/layouts/_upperelements.html.erb

@@ -20,28 +20,6 @@
 <div class="upperRightUI">
     <div class="supportUs upperRightEl openLightbox" data-open="donate">SUPPORT US!</div>
     <div class="mapElement upperRightEl upperRightMapButtons">
-        <% if authenticated? %>
-            <!-- Realtime -->
-            <div class="sidebarCollaborate upperRightEl">
-                <div class="sidebarCollaborateIcon upperRightIcon blue"><div class="tooltipsUnder">Junto</div></div>
-                <div class="sidebarCollaborateBox upperRightBox">
-                    <h3 class="realtimeBoxTitle">REALTIME</h3>
-                    <span class="realtimeOnOff rtOff">OFF</span>
-                    <span class="realtimeOnOff rtOn">ON</span>
-                    <div class="clearfloat"></div>
-                    <div class="realtimeMapperList">
-                        <ul>
-                            <li class="rtMapper littleRtOn rtMapperSelf">
-                                <%= image_tag user.image.url(:thirtytwo), :size => "24x24", :class => "rtUserImage" %>
-                                <%= user.name %> (me)
-                                <div class="littleJuntoIcon"></div>
-                            </li>
-                        </ul>
-                    </div>
-                </div>
-            </div> <!-- end sidebarCollaborate a.k.a realtime -->
-        <% end %>
-
         <!-- filtering -->
         <div class="sidebarFilter upperRightEl">
             <div class="sidebarFilterIcon upperRightIcon"><div class="tooltipsUnder">Filter</div></div>
@@ -83,4 +61,4 @@
     </div><!-- end sidebarAccount -->
     <% end %>
     <div class="clearfloat"></div>
-</div><!-- end upperRightUI -->
+</div><!-- end upperRightUI -->