Browse Source

Drop the chat tab bar, give its space to the messages

With one room it was a tab strip containing a single tab. Removing it frees
42px, which goes to #room_messages (220 -> 262) rather than just shortening the
panel -- that keeps the chat level with the player beside it (420 vs 421) and
gives the messages the extra room.

getCurrentRoom() had a hidden dependency on that markup: it read the room name
out of the active tab's text. With the tab gone it would have returned '', which
the server rejects as an invalid room name, so posting would have failed
silently -- no error, messages just vanishing. There's one room, so chat.js now
names it directly via a ROOM constant, which also replaces the 'Lobby' strings
that were already scattered through the file.

That constant has to agree with the server's $MAIN_ROOM and the id of the pane
in index.html, since messages are routed into '#<room> #room_messages'. Noted at
both ends.

The player's own tab strip (Recent/Tracks/Albums/...) is untouched -- only the
chat's room tabs are gone, and the tooltip() call still belongs to the player.

Verified in a real browser through Apache: a message typed into the box relays
to the server as room "Lobby" and renders back into the pane; no console errors.
windhamdavid 1 day ago
parent
commit
6ad0da38a0
2 changed files with 25 additions and 20 deletions
  1. 9 13
      src/index.html
  2. 16 7
      src/js/chat.js

+ 9 - 13
src/index.html

@@ -152,23 +152,19 @@
          <section id="request-line" class="bg-light-gray">
          <section id="request-line" class="bg-light-gray">
             <div class="panel panel-default">
             <div class="panel panel-default">
                
                
-               <!-- START Room Tabs -->
-               <div class="row-fluid">
-                    <!-- Single room. The join/leave dropdown is gone and the
-                         server no longer accepts subscribe/unsubscribe, so the
-                         Lobby is the only room there is. -->
-                    <ul id="rooms_tabs" class="nav nav-tabs">
-                        <li id="Lobby_tab" class="active"><a href="#Lobby" data-toggle="tab" data-original-title="Chat" data-placement="bottom"><span class="glyphicon glyphicon-comment" aria-hidden="true"></span><span class="hidden-tab">Lobby</span></a></li>
-                    </ul>
-               </div>
-               <!-- END Room Tabs -->
-               
-               <!-- START Rooms -->
+               <!-- No tab bar: there is one room, so it was a tab strip with a
+                    single tab. Its 42px went to the message area below, which
+                    keeps this panel level with the player beside it.
+
+                    #Lobby must keep its id -- messages are routed into
+                    '#<room> #room_messages', and the room name comes from the
+                    server ($MAIN_ROOM). The pane keeps .tab-pane.active because
+                    that's what makes it visible. -->
                <div id="rooms" class="tab-content">
                <div id="rooms" class="tab-content">
                    <div class="tab-pane active" id="Lobby">
                    <div class="tab-pane active" id="Lobby">
                       <div class="well">
                       <div class="well">
                            <div class="row-fluid">
                            <div class="row-fluid">
-                               <div id="room_messages" style="min-height:220px; max-height:220px; overflow:auto;">
+                               <div id="room_messages" style="min-height:262px; max-height:262px; overflow:auto;">
                                    <span class="label label-danger">Daveo-bot</span>&nbsp;&nbsp;Welcome to the Daveo Radio!<br/>
                                    <span class="label label-danger">Daveo-bot</span>&nbsp;&nbsp;Welcome to the Daveo Radio!<br/>
                                </div>
                                </div>
                            </div>  
                            </div>  

+ 16 - 7
src/js/chat.js

@@ -1,5 +1,10 @@
 (function(){
 (function(){
 
 
+    // The only room. Must match the server's $MAIN_ROOM and the id of the pane
+    // in index.html -- messages are routed into '#<room> #room_messages', so
+    // all three have to agree.
+    var ROOM = 'Lobby';
+
     // ***************************************************************************
     // ***************************************************************************
     // Socket.io events
     // Socket.io events
     // ***************************************************************************
     // ***************************************************************************
@@ -11,24 +16,24 @@
         console.log(data);
         console.log(data);
 
 
         // Get users connected to mainroom
         // Get users connected to mainroom
-        socket.emit('getUsersInRoom', {'room':'Lobby'});
+        socket.emit('getUsersInRoom', {'room':ROOM});
     });
     });
 
 
     // Disconnected from server
     // Disconnected from server
     socket.on('disconnect', function (data) {
     socket.on('disconnect', function (data) {
-        var info = {'room':'Lobby', 'username':'Daveo-bot', 'msg':'---- Lost connection ----'};
+        var info = {'room':ROOM, 'username':'Daveo-bot', 'msg':'---- Lost connection ----'};
         addBotMessage(info);
         addBotMessage(info);
     });
     });
     
     
     // Reconnected to server
     // Reconnected to server
     socket.on('reconnect', function (data) {
     socket.on('reconnect', function (data) {
-        var info = {'room':'Lobby', 'username':'Daveo-bot', 'msg':'---- Reconnected ----'};
+        var info = {'room':ROOM, 'username':'Daveo-bot', 'msg':'---- Reconnected ----'};
         addBotMessage(info);
         addBotMessage(info);
     });
     });
 
 
     // subscriptionConfirmed / unsubscriptionConfirmed are gone with rooms. The
     // subscriptionConfirmed / unsubscriptionConfirmed are gone with rooms. The
-    // Lobby tab is static markup, so there is no room UI left to build or tear
-    // down at runtime.
+    // single pane is static markup, so there is no room UI left to build or
+    // tear down at runtime.
 
 
     // User joins room
     // User joins room
     socket.on('userJoinsRoom', function(data) {
     socket.on('userJoinsRoom', function(data) {
@@ -141,9 +146,13 @@
         $(user_badge).remove();
         $(user_badge).remove();
     };
     };
 
 
-    // Get current room
+    // Get current room.
+    //
+    // This used to read the active tab's text. With the tab bar gone that
+    // returned '', which the server rejects as an invalid room name -- posting
+    // would have failed silently. There's one room, so name it directly.
     var getCurrentRoom = function() {
     var getCurrentRoom = function() {
-        return $('li[id$="_tab"][class="active"]').text();
+        return ROOM;
     };
     };
 
 
     // Get message text from input field
     // Get message text from input field