Joins, parts, PMs, inline image/video/audio/youtube, server status messages, I should commit more often

author: Joe Robinson <joe@lc8n.com> 2016-03-26 06:41:09 +0100
committer: Joe Robinson <joe@lc8n.com> 2016-03-26 06:41:09 +0100
commit: fcaeaa8655bac6a33755de99d14ae979c07d3be7 (patch)
tree: 1490a0d00355518f3df92e349eb8e40b68c9d9fd
parent: b41a6935b738dd01acb84bab8014b68786c4a608 (diff)
5 files changed, 221 insertions, 19 deletions
diff --git a/index.html b/index.html
index 081ea9e..1d39298 100644
--- a/index.html
+++ b/index.html
@@ -6,17 +6,25 @@
   <body class="container">
     <div id="chan-container">
       <div class="ui pointing secondary menu">
+        <a class='active item' data-id='0' data-tab='status'>status</a>
+      </div>
+      <div class='ui active tab' data-id='0' data-tab='status'>
+        <div class='ui segment chat' data-id='0' data-tab='status'></div>
       </div>
-
     </div>
-      <div id="message">
-        <div class="ui input" id="message-container">
-          <input placeholder="Message" id="send-message" type="text">
-        </div>
+    </div>
+    <div id="message">
+      <div class="ui input" id="message-container">
+        <input placeholder="Message" id="send-message" type="text" autofocus="true">
       </div>
+    </div>
     <script>
       window.$ = window.jQuery = require('./lib/jquery-2.2.2.js');
       var blachat = require("./index.js");
+      function scrollToTop(channel) {
+        var chatTab = $("[data-tab=chan-"+ channel +"].chat");
+        chatTab.scrollTop(chatTab.prop('scrollHeight'));
+      }
     </script>
     <link rel="stylesheet" type="text/css" href="lib/semantic/dist/semantic.min.css">
     <link rel="stylesheet" type="text/css" href="style.css">
diff --git a/index.js b/index.js
index c3db74d..70eb620 100644
--- a/index.js
+++ b/index.js
@@ -1,10 +1,69 @@
-$(document).ready(function(){
+var linkify = require("linkifyjs");
+var linkifyHtml = require('linkifyjs/html');
+var shell = require('electron').shell;
+
+$(document).ready(function() {
+  $("#send-message").focus();
+});
+
+$(document).on('click', 'a[href^="http"]', function(event) {
+    event.preventDefault();
+    shell.openExternal(this.href);
 });
 
+function imagify(url, channel) {
+  console.log(url);
+  $.ajax({
+  		type: 'HEAD',
+  		url: url,
+  		complete: function(xhr) {
+        var type = xhr.getResponseHeader('Content-Type')
+  			var size = xhr.getResponseHeader('Content-Length');
+        console.log(type);
+        console.log(size);
+        if (size < 10000000) {
+          $("[data-img='"+url+"']").append("("+humanize(size)+")");
+          $("[data-img='"+url+"']").append("<p class='chat-line'><img src="+url+" onload=scrollToTop('"+channel+"')></p>");
+          $("[data-img='"+url+"']").removeClass("loading");
+
+        }
+
+  		}
+  	});
+
+    return "<div data-img='"+url+"' class='ui image loading'></div>";
+
+}
+
+function humanize(size) {
+	var units = ['bytes', 'kB', 'MB', 'GB', 'TB', 'PB'];
+	var ord = Math.floor(Math.log(size) / Math.log(1000));
+	var s = Math.round((size / Math.pow(1000, ord)) * 100) / 100;
+	return s + ' ' + units[ord];
+}
+
+var numChans = 1;
 $("#send-message").keypress(function(e) {
     if(e.which == 13) {
-      var channel = $(".tab.chat.active").attr("data-tab").replace("chan-", "#")
-      sendMsg($("#send-message").val(), channel)
+      var message = $("#send-message").val();
+      var channel = $(".tab.active").attr("data-tab").replace("chan-", "#")
+      if (message.indexOf("/join") == 0) {
+        joinChannel(message.substring(6, message.length));
+      } else if (message.indexOf("/part") == 0) {
+        if (message.length > 6) {
+          channel = message.substring(6, message.length)
+        }
+        console.log()
+        partChannel(channel);
+      } else {
+        var tab = $(".tab.active").attr("data-tab")
+        if (tab.startsWith("chan-")) {
+          sendMsg(message, channel.replace("#",""))
+
+        } else if(tab.startsWith("pm-")){
+          sendPm(message, tab.substring(3, tab.length));
+        }
+      }
       $("#send-message").val('');
     }
 });
@@ -17,25 +76,79 @@ function sendMsg(message, channel) {
   chanTab.scrollTop(chanTab.prop("scrollHeight"));
 }
 
+function sendPm(message, nick) {
+  console.log(nick + ': ' + message);
+  client.say(nick, message);
+  var chanTab = $("[data-tab=pm-"+nick+"].chat");
+  chanTab.append("<p class='chat-line'>&lt;" + "wclient" + "&gt; " + message +"</p>");
+  chanTab.scrollTop(chanTab.prop("scrollHeight"));
+}
+
 function joinChannel(channel) {
   client.join(channel);
   channel = channel.replace("#","");
-
+  chanId = $(".active.chat").attr("data-id")
   $(".active").removeClass("active");
-  $(".ui.menu").append("<a class='active item' data-tab='chan-"+channel+"'>#"+channel+"</a>");
+  $(".ui.menu").append("<a class='active item' data-id='"+numChans+"' data-tab='chan-"+channel+"'>#"+channel+"</a>");
+  $("#chan-container").append("<div class='ui active tab' data-id='"+numChans+"' data-tab='chan-"+channel+"'></div>");
 
+  var chanTab = $("[data-tab=chan-"+ channel +"].tab");
 
-  $("#chan-container").append("<div class='ui active tab segment chat active' id='chan-"+channel+"' data-tab='chan-"+channel+"'></div>")
+  chanTab.append("<div class='ui selection list users' data-id='"+numChans+"' data-tab='chan-"+channel+"'></div>");
+  chanTab.append("<div class='ui segment chat' data-id='"+numChans+"' data-tab='chan-"+channel+"'></div>");
   $('.menu .item').tab({history:false});
-  var chanTab = $("[data-tab=chan-"+ channel +"].chat");
+
+
   client.addListener('message#'+channel, function (from, message) {
+    // message = message.autoLink( {
+    //   callback: function(url) {
+    //     return /\.(gif|png|jpe?g)$/i.test(url) ? '<img src="' + url + '">' : null;
+    //   },
+    //   target: "_blank"
+    // });
+    // console.log(message.autoLink());
     console.log(from + ' => #'+ channel +': ' + message);
-    console.log(chanTab);
-    chanTab.append("<p class='chat-line'>&lt;" + from + "&gt; " + message +"</p>");
-    chanTab.scrollTop(chanTab.prop("scrollHeight"));
+    var chatTab = $("[data-tab=chan-"+ channel +"].chat");
+    message = linkifyHtml(message);
+
+    chatTab.append("<p class='chat-line'>&lt;" + from + "&gt; " + message +"</p>");
+    var imgMatch = message.match(/[a-z0-9\-]+[\.:]\S+\.(gif|png|jpe?g|bmp)/);
+    var vidMatch = message.match(/[a-z0-9\-]+[\.:]\S+\.(webm|mp4)/);
+    var audioMatch = message.match(/[a-z0-9\-]+[\.:]\S+\.(mp3|wav|ogg)/);
+    var youtubeMatch = message.match(/(https?\:\/\/)?(www\.)?(youtube\.com|youtu\.be)\/(watch\?v=)?[a-z0-9A-Z_\-]+/);
+    if (imgMatch != null && imgMatch.length > 0) {
+      var image = imagify(imgMatch[0],channel);
+      chatTab.append("<p class=chat-line>"+image+"</p>");
+    }
+    if (vidMatch != null && vidMatch.length > 0) {
+      chatTab.append("<p class=chat-line><video controls><source src="+vidMatch[0]+"></video></p>");
+    }
+    if (audioMatch != null && audioMatch.length > 0) {
+      chatTab.append("<p class=chat-line><audio controls><source src="+audioMatch[0]+"></audio></p>");
+    }
+    if (youtubeMatch != null && youtubeMatch.length > 0) {
+      console.log(youtubeMatch)
+      youtubeParts = youtubeMatch[0].split("/");
+      youtubeId = youtubeParts[youtubeParts.length-1];
+      youtubeId = youtubeId.replace("watch?v=","");
+      chatTab.append("<p class=chat-line><iframe width='480' height='270' src='https://www.youtube.com/embed/"+youtubeId+"' frameborder='0' allowfullscreen></iframe></p>");
+    }
+
+    chatTab.scrollTop(chatTab.prop("scrollHeight"));
   });
+  numChans++;
 }
 
+function partChannel(channel) {
+  channel = channel.replace("#","");
+  chanId = $("[data-tab=chan-"+channel+"].chat").attr("data-id");
+  $("[data-tab=chan-"+channel+"]").remove();
+  client.part("#"+channel);
+  while ($("[data-id="+(chanId-1)+"]").length == 0 && chanId >=0) {
+    chanId--;
+  }
+  $("[data-id="+(chanId-1)+"]").addClass("active");
+}
 
 const irc = require('irc');
 
@@ -55,7 +168,74 @@ client.addListener('registered', function() {
   });
 });
 
+client.addListener('motd', function(motd) {
+  var statusTab = $("[data-tab=status].chat");
+  statusTab.append("<p class='chat-line'>"+motd+"</p>")
+});
+
+client.addListener('raw', function(message) {
+  var statusTab = $("[data-tab=status].chat");
+  statusTab.append("<p class='chat-line'>"+message.command+message.args+"</p>")
+  statusTab.scrollTop(statusTab.prop("scrollHeight"));
+});
+
+client.addListener('ctcp-version', function(from, to, text, message) {
+  client.ctcp(from, "VERSION", "VERSION blachat v0.1.0")
+});
+
+
+client.addListener('names', function(channel, nicks) {
+  for(nick in nicks) {
+    var mode = nicks[nick];
+    channel = channel.replace("#","")
+    if($(".ui.users[data-tab=chan-"+channel+"] [data-nick="+nick+"]").length == 0) {
+      $(".ui.users[data-tab=chan-"+channel+"]").append("<div class=item data-nick="+nick+">"+mode+nick+"</div>")
+    }
+  }
+});
+-
+client.addListener('join', function(channel, nick) {
+    channel = channel.replace("#","")
+    if($(".ui.users[data-tab=chan-"+channel+"] [data-nick="+nick+"]").length == 0) {
+      $(".ui.users[data-tab=chan-"+channel+"]").append("<div class=item data-nick="+nick+">"+nick+"</div>")
+    }
+    var chatTab = $("[data-tab=chan-"+ channel +"].chat");
+    chatTab.append("<p class='chat-line'>"+nick+" joined #"+channel+"</p>")
+});
+
+client.addListener('part', function(channel, nick) {
+    channel = channel.replace("#","")
+    if($(".ui.users[data-tab=chan-"+channel+"] [data-nick="+nick+"]").length > 0) {
+      $(".ui.users[data-tab=chan-"+channel+"] [data-nick="+nick+"]").remove();
+    }
+    var chatTab = $("[data-tab=chan-"+ channel +"].chat");
+    chatTab.append("<p class='chat-line'>"+nick+" left #"+channel+"</p>")
+});
+
+client.addListener('quit', function(nick, reason, channels, message) {
+  channels.forEach(function(channel) {
+    channel = channel.replace("#","")
+    if($(".ui.users[data-tab=chan-"+channel+"] [data-nick="+nick+"]").length > 0) {
+      $(".ui.users[data-tab=chan-"+channel+"] [data-nick="+nick+"]").remove();
+    }
+    var chatTab = $("[data-tab=chan-"+ channel +"].chat");
+    chatTab.append("<p class='chat-line'>"+nick+" quit ("+reason+")</p>")
+  });
+});
+
+client.addListener('pm', function(nick, text, message) {
 
+    if($(".ui.tab[data-tab=pm-"+nick+"]").length == 0) {
+      $(".ui.menu").append("<a class='item' data-id='"+numChans+"' data-tab='pm-"+nick+"'>"+nick+"</a>");
+      $("#chan-container").append("<div class='ui tab' data-id='"+numChans+"' data-tab='pm-"+nick+"'></div>");
+      var chanTab = $("[data-tab=pm-"+ nick +"].tab");
+      chanTab.append("<div class='ui segment chat' data-id='"+numChans+"' data-tab='pm-"+nick+"'></div>");
+      numChans++;
+      $('.menu .item').tab({history:false});
+    }
+    var chatTab = $("[data-tab=pm-"+ nick +"].chat");
+    chatTab.append("<p class='chat-line'>&lt"+nick+"&gt "+text+"</p>")
+});
 
 // client.addListener('message#wtest', function (from, message) {
 //     console.log(from + ' => #wtest: ' + message);
diff --git a/main.js b/main.js
index a1186a9..1dcf991 100644
--- a/main.js
+++ b/main.js
@@ -22,7 +22,7 @@ app.on('window-all-closed', function() {
 // initialization and is ready to create browser windows.
 app.on('ready', function() {
   // Create the browser window.
-  mainWindow = new BrowserWindow({width: 800, height: 600});
+  mainWindow = new BrowserWindow({width: 800, height: 600, title: "blachat"});
 
   // and load the index.html of the app.
   mainWindow.loadURL('file://' + __dirname + '/index.html');
diff --git a/package.json b/package.json
index d3b46e5..74c58bc 100644
--- a/package.json
+++ b/package.json
@@ -3,6 +3,6 @@
   "version": "0.1.0",
   "main": "main.js",
   "dependencies": {
-    "semantic-ui": "^2.1.8"
-  }
+    "semantic-ui": "^2.1.8",
+    "linkifyjs": "2.0.0-beta.9"  }
 }
diff --git a/style.css b/style.css
index 15b2c49..cd7e10a 100644
--- a/style.css
+++ b/style.css
@@ -22,9 +22,23 @@ body {
   top: 35;
   padding:10px;
   bottom:42px;
-  width: 100%;
+  width: 80%;
+  margin-top:5px;
   overflow-y: scroll;
 }
+
+.ui.users {
+  position: absolute;
+  top: 35;
+  right:0;
+  padding:10px;
+  margin:0px;
+  bottom:42px;
+  width: 20%;
+  overflow-y: scroll;
+
+}
+
 #message {
   position: absolute;
   right: 0;
author	Joe Robinson <joe@lc8n.com>	2016-03-26 06:41:09 +0100
committer	Joe Robinson <joe@lc8n.com>	2016-03-26 06:41:09 +0100
commit	fcaeaa8655bac6a33755de99d14ae979c07d3be7 (patch)
tree	1490a0d00355518f3df92e349eb8e40b68c9d9fd
parent	b41a6935b738dd01acb84bab8014b68786c4a608 (diff)