Added all-chat

index.php

@@ -144,6 +144,16 @@
 
                                 <div class="collapsible-body" style="display: block;">
                                     <ul id="chat">
+                                      <div class="row">
+                                        <div class="col s12">
+                                          <ul class="tabs">
+                                            <li class="tab col s3 chat-tab-li"><a class="active chat-tab truncate" href="#<?php echo $list; ?>"><?php echo $list; ?></a></li>
+                                            <li class="tab col s3 chat-tab-li"><a class="chat-tab" href="#all_chat">All</a></li>
+                                          </ul>
+                                        </div>
+                                        <div id="<?php echo $list; ?>" class="col s12"><ul id="chatchannel"></ul></div>
+                                        <div id="all_chat" class="col s12"><ul id="chatall"></ul></div>
+                                      </div>
                                     </ul>
                                 </div>
                             </li>

server/server.js

@@ -42,6 +42,13 @@ io.on('connection', function(socket){
       io.sockets.emit('chat,'+coll, rndName(guid) + ": " + data);
   });
 
+  socket.on("all,chat", function(data)
+  {
+    check_inlist(coll, guid, socket);
+    if(data != "" && data !== undefined && data !== null && data.length < 151 && data.replace(/\s/g, '').length)
+      io.sockets.emit('chat.all', rndName(guid) + ": " + data);
+  });
+
   socket.on('frontpage_lists', function()
   {
     var playlists_to_send = [];

static/css/style.css

@@ -192,9 +192,28 @@ hide mdi-action-visibility mdi-action-visibility-off
 
 /*------------------- Channel page ---------------------------------------------------------------------------- */
 
+.tab a {
+  background-color:rgba(0,0,0,0) !important;
+}
+
+.chat-tab, .chat-tab-li {
+  color:black !important;
+  margin:0 !important;
+}
+
+.indicator {
+  background-color:black !important;
+}
+
+#chatchannel, #chatall {
+  height: calc(100% - 49px);
+  overflow-y:scroll;
+  text-align:left;
+  word-wrap:break-word;
+}
+
 #chat {
   height: calc(100% - 121px);
-  overflow-y: scroll;
   text-align:left;
   word-wrap:break-word;
 }

static/js/chat.js

@@ -5,6 +5,9 @@ function chat(data)
 {
   if(data.value.length > 150)
     return;
+  if($(".tab a.active").attr("href") == "#all_chat")
+    socket.emit("all,chat", data.value);
+	else
     socket.emit("chat", data.value);
   data.value = "";
   return;
@@ -20,6 +23,31 @@ document.getElementById("chat-btn").addEventListener("click", function(){
     $("#favicon").attr("href", "static/images/favicon.png");
 });
 
+$(".chat-tab").click(function(){
+    console.log("clik");
+    $("#text-chat-input").focus();
+});
+
+socket.on("chat.all", function(data)
+{
+  console.log("chat.all");
+  if($("#chat-bar").position()["left"] != 0)
+  {
+    //$("#chat-btn").css("color", "grey");
+    if(!blink_interval_exists)
+    {
+      $("#favicon").attr("href", "static/images/highlogo.png");
+      blink_interval_exists = true;
+      blink_interval = setInterval(chat_blink, 2000);
+    }
+  }
+  var color = intToARGB(hashCode(data.substring(0,8))).substring(0,6);
+	$("#chatall").append("<li><span style='color:"+color+";'>"+data.substring(0,8)+"</span></li>");
+  var in_text = document.createTextNode(data.substring(8));
+  $("#chatall li:last")[0].appendChild(in_text);
+  document.getElementById("chatall").scrollTop = document.getElementById("chatall").scrollHeight
+});
+
 socket.on("chat,"+chan.toLowerCase(), function(data)
 {
   if($("#chat-bar").position()["left"] != 0)
@@ -33,10 +61,10 @@ socket.on("chat,"+chan.toLowerCase(), function(data)
     }
   }
   var color = intToARGB(hashCode(data.substring(0,8))).substring(0,6);
-	$("#chat").append("<li><span style='color:"+color+";'>"+data.substring(0,8)+"</span></li>");
+	$("#chatchannel").append("<li><span style='color:"+color+";'>"+data.substring(0,8)+"</span></li>");
   var in_text = document.createTextNode(data.substring(8));
-  $("#chat li:last")[0].appendChild(in_text);
+  $("#chatchannel li:last")[0].appendChild(in_text);
-  document.getElementById("chat").scrollTop = document.getElementById("chat").scrollHeight
+  document.getElementById("chatchannel").scrollTop = document.getElementById("chatchannel").scrollHeight
 });
 
 function chat_blink()

static/js/youtube.js

@@ -83,7 +83,7 @@ $(document).ready(function()
 	$("#chat-btn").sideNav({
 			menuWidth: 272, // Default is 240
 			edge: 'left', // Choose the horizontal origin
-			closeOnClick: true // Closes side-nav on <a> clicks, useful for Angular/Meteor
+			closeOnClick: false // Closes side-nav on <a> clicks, useful for Angular/Meteor
 		});
 
 	$('#settings-close').sideNav('hide');