From fcaeaa8655bac6a33755de99d14ae979c07d3be7 Mon Sep 17 00:00:00 2001 From: Joe Robinson Date: Sat, 26 Mar 2016 06:41:09 +0100 Subject: Joins, parts, PMs, inline image/video/audio/youtube, server status messages, I should commit more often --- index.html | 18 ++++-- index.js | 200 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++--- main.js | 2 +- package.json | 4 +- style.css | 16 ++++- 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 @@

- -

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("

"); + $("[data-img='"+url+"']").removeClass("loading"); + + } + + } + }); + + return "

"; + +} + +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("

<" + "wclient" + "> " + message +"

"); + 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("#"+channel+""); + $(".ui.menu").append("#"+channel+""); + $("#chan-container").append("

"); + var chanTab = $("[data-tab=chan-"+ channel +"].tab"); - $("#chan-container").append("

") + chanTab.append("

"); + chanTab.append("

"); $('.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) ? '

' : null; + // }, + // target: "_blank" + // }); + // console.log(message.autoLink()); console.log(from + ' => #'+ channel +': ' + message); - console.log(chanTab); - chanTab.append("

<" + from + "> " + message +"

"); - chanTab.scrollTop(chanTab.prop("scrollHeight")); + var chatTab = $("[data-tab=chan-"+ channel +"].chat"); + message = linkifyHtml(message); + + chatTab.append("

<" + from + "> " + message +"

"); + 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("

"+image+"

"); + } + if (vidMatch != null && vidMatch.length > 0) { + chatTab.append("

"); + } + if (audioMatch != null && audioMatch.length > 0) { + chatTab.append("

"); + } + 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("

"); + } + + 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("

"+motd+"

") +}); + +client.addListener('raw', function(message) { + var statusTab = $("[data-tab=status].chat"); + statusTab.append("

"+message.command+message.args+"

") + 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("

"+mode+nick+"

") + } + } +}); +- +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("

"+nick+"

") + } + var chatTab = $("[data-tab=chan-"+ channel +"].chat"); + chatTab.append("

"+nick+" joined #"+channel+"

") +}); + +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("

"+nick+" left #"+channel+"

") +}); + +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("

"+nick+" quit ("+reason+")

") + }); +}); + +client.addListener('pm', function(nick, text, message) { + if($(".ui.tab[data-tab=pm-"+nick+"]").length == 0) { + $(".ui.menu").append(""+nick+""); + $("#chan-container").append("

"); + var chanTab = $("[data-tab=pm-"+ nick +"].tab"); + chanTab.append("

"); + numChans++; + $('.menu .item').tab({history:false}); + } + var chatTab = $("[data-tab=pm-"+ nick +"].chat"); + chatTab.append("

<"+nick+"> "+text+"

") +}); // 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; -- cgit v1.2.3