diff options
| -rw-r--r-- | index.html | 18 | ||||
| -rw-r--r-- | index.js | 200 | ||||
| -rw-r--r-- | main.js | 2 | ||||
| -rw-r--r-- | package.json | 4 | ||||
| -rw-r--r-- | style.css | 16 |
5 files changed, 221 insertions, 19 deletions
@@ -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"> @@ -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'><" + "wclient" + "> " + 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'><" + from + "> " + message +"</p>"); - chanTab.scrollTop(chanTab.prop("scrollHeight")); + var chatTab = $("[data-tab=chan-"+ channel +"].chat"); + message = linkifyHtml(message); + + chatTab.append("<p class='chat-line'><" + from + "> " + 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'><"+nick+"> "+text+"</p>") +}); // client.addListener('message#wtest', function (from, message) { // console.log(from + ' => #wtest: ' + message); @@ -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" } } @@ -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; |