neale
/
spongy-client-chrome
mirror of https://github.com/nealey/spongy-client-chrome
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Moving to circ GUI

This commit is contained in:
Neale Pickett 2014-10-24 15:51:53 -06:00
parent 576f7b7bce
commit cd78265272
7 changed files with 1246 additions and 146 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

361
app/example.html Normal file
View File

@ -0,0 +1,361 @@
<html><head>
<meta charset="utf-8">
<!-- generic -->
<script src="util.js"></script>
<script src="keycodes.js"></script>
<script src="message_handler.js"></script>
<script src="event_emitter.js"></script>
<script src="chat/notification.js"></script>
<script src="chat/notification_group.js"></script>
<script src="net/abstract_tcp_socket.js"></script>
<script src="event.js"></script>
<script src="timer.js"></script>
<script src="context.js"></script>
<!-- net -->
<script src="net/chrome_socket.js"></script>
<script src="net/ssl_socket.js"></script>
<script src="net/remote_socket.js"></script>
<!-- irc protocol -->
<script src="irc/irc.js"></script>
<script src="irc/irc_util.js"></script>
<script src="irc/ctcp_handler.js"></script>
<script src="irc/server_response_handler.js"></script>
<!-- scripting -->
<script src="script/script.js"></script>
<script src="script/prepackaged/source_array.js"></script>
<script src="script/script_handler.js"></script>
<script src="script/script_loader.js"></script>
<!-- one identity -->
<script src="remote_connection.js"></script>
<script src="chat/remote_connection_handler.js"></script>
<script src="remote_device.js"></script>
<!-- user input -->
<script src="chat/custom_command_parser.js"></script>
<script src="input_stack.js"></script>
<script src="completion_finder.js"></script>
<script src="auto_complete.js"></script>
<script src="keyboard_shortcut_map.js"></script>
<script src="user_input_handler.js"></script>
<script src="chat/user_command_handler.js"></script>
<script src="chat/user_command.js"></script>
<script src="chat/developer_commands.js"></script>
<!-- client and UI -->
<script src="chat/chat.js"></script>
<script src="chat/walkthrough.js"></script>
<script src="chat/storage.js"></script>
<script src="chat/chat_log.js"></script>
<script src="chat/notice.js"></script>
<script src="chat/message_formatter.js"></script>
<script src="chat/html_list.js"></script>
<script src="chat/nick_mentioned_notification.js"></script>
<script src="chat/irc_message_handler.js"></script>
<script src="chat/window.js"></script>
<script src="chat/window_message_renderer.js"></script>
<script src="chat/scrollable.js"></script>
<script src="chat/help_message_renderer.js"></script>
<script src="chat/nick_list.js"></script>
<script src="chat/channel_list.js"></script>
<script src="chat/window_list.js"></script>
<!-- third party -->
<script src="third_party/jquery.js"></script>
<script src="third_party/md5.js"></script>
<!-- forge SSL library -->
<script type="text/javascript" src="third_party/forge/debug.js"></script>
<script type="text/javascript" src="third_party/forge/util.js"></script>
<script type="text/javascript" src="third_party/forge/log.js"></script>
<script type="text/javascript" src="third_party/forge/socket.js"></script>
<script type="text/javascript" src="third_party/forge/md5.js"></script>
<script type="text/javascript" src="third_party/forge/sha1.js"></script>
<script type="text/javascript" src="third_party/forge/sha256.js"></script>
<script type="text/javascript" src="third_party/forge/hmac.js"></script>
<script type="text/javascript" src="third_party/forge/aes.js"></script>
<script type="text/javascript" src="third_party/forge/pem.js"></script>
<script type="text/javascript" src="third_party/forge/asn1.js"></script>
<script type="text/javascript" src="third_party/forge/jsbn.js"></script>
<script type="text/javascript" src="third_party/forge/prng.js"></script>
<script type="text/javascript" src="third_party/forge/random.js"></script>
<script type="text/javascript" src="third_party/forge/oids.js"></script>
<script type="text/javascript" src="third_party/forge/rsa.js"></script>
<script type="text/javascript" src="third_party/forge/pbe.js"></script>
<script type="text/javascript" src="third_party/forge/x509.js"></script>
<script type="text/javascript" src="third_party/forge/pki.js"></script>
<script type="text/javascript" src="third_party/forge/tls.js"></script>
<script type="text/javascript" src="third_party/forge/aesCipherSuites.js"></script>
<script type="text/javascript" src="third_party/forge/tlssocket.js"></script>
<script type="text/javascript" src="third_party/forge/http.js"></script>
<link id="main-style" rel="stylesheet" href="style.css">
<link rel="stylesheet" href="message_style.css">
<link rel="stylesheet" href="topbar.css">
<title>CIRC undefined</title></head>
<body>
<!-- templates -->
<div id="templates">
<div class="server-channels">
<div class="server room">
<div class="content-item"></div>
<div class="remove-button">-</div>
</div>
<ul class="channels"></ul>
</div>
<li class="channel room">
<div class="content-item"></div>
<div class="remove-button">-</div>
</li>
<ul class="nicks"></ul>
<li class="nick">
<div class="content-item"></div>
</li>
<ul class="messages"></ul>
<li class="message">
<div class="timestamp"></div>
<div class="source-content-container">
<div class="source"></div>
<div class="content"></div>
</div>
</li>
</div>
<!-- main -->
<div id="main">
<div id="main-top-border"></div>
<div id="rooms-and-nicks" class="">
<div id="rooms-container">
<h1>rooms</h1>
<div class="rooms"><div class="server-channels">
<div class="server room current-server">
<div class="content-item">us.slashnet.org</div>
<div class="remove-button">-</div>
</div>
<ul class="channels"><li class="channel room selected">
<div class="content-item">#tron</div>
<div class="remove-button">-</div>
</li><li class="channel room footer">
<div class="content-item">+ add channel</div>
<div class="remove-button">-</div>
</li></ul>
</div><div class="server-channels">
<div class="server room footer">
<div class="content-item">+ add server</div>
<div class="remove-button">-</div>
</div>
<ul class="channels"></ul>
</div></div>
</div>
<div id="nicks-container">
<h1>members</h1>
<ul class="nicks"><li class="nick">
<div class="content-item">also</div>
</li><li class="nick">
<div class="content-item">atob</div>
</li><li class="nick">
<div class="content-item">Bermuda</div>
</li><li class="nick">
<div class="content-item">bit</div>
</li><li class="nick">
<div class="content-item">bk</div>
</li><li class="nick">
<div class="content-item">bz2</div>
</li><li class="nick">
<div class="content-item">caycos</div>
</li><li class="nick">
<div class="content-item">ckape</div>
</li><li class="nick">
<div class="content-item">clavicle</div>
</li><li class="nick">
<div class="content-item">CrackMonkey</div>
</li><li class="nick">
<div class="content-item">Dumont</div>
</li><li class="nick">
<div class="content-item">dzho</div>
</li><li class="nick">
<div class="content-item">emad</div>
</li><li class="nick">
<div class="content-item">eythian</div>
</li><li class="nick">
<div class="content-item">felixc</div>
</li><li class="nick">
<div class="content-item">fo0bar</div>
</li><li class="nick">
<div class="content-item">fuzzie</div>
</li><li class="nick">
<div class="content-item">GodEater</div>
</li><li class="nick">
<div class="content-item">hollow</div>
</li><li class="nick">
<div class="content-item">hoylemd</div>
</li><li class="nick">
<div class="content-item">jhewl</div>
</li><li class="nick">
<div class="content-item">jv</div>
</li><li class="nick">
<div class="content-item">kees</div>
</li><li class="nick">
<div class="content-item">khmer</div>
</li><li class="nick">
<div class="content-item">lamont</div>
</li><li class="nick">
<div class="content-item">lexicondal</div>
</li><li class="nick">
<div class="content-item">neale</div>
</li><li class="nick">
<div class="content-item">nemo</div>
</li><li class="nick">
<div class="content-item">nerdtron3000</div>
</li><li class="nick">
<div class="content-item">nornagon</div>
</li><li class="nick">
<div class="content-item">Octal</div>
</li><li class="nick">
<div class="content-item">pdx6</div>
</li><li class="nick">
<div class="content-item">pedro</div>
</li><li class="nick">
<div class="content-item">Randall</div>
</li><li class="nick">
<div class="content-item">sarah</div>
</li><li class="nick">
<div class="content-item">Sciri</div>
</li><li class="nick">
<div class="content-item">scorche</div>
</li><li class="nick">
<div class="content-item">scorche|sh</div>
</li><li class="nick">
<div class="content-item">Screwtape</div>
</li><li class="nick">
<div class="content-item">sneakums</div>
</li><li class="nick">
<div class="content-item">squinky</div>
</li><li class="nick">
<div class="content-item">stat</div>
</li><li class="nick">
<div class="content-item">teferi</div>
</li><li class="nick">
<div class="content-item">tiaz</div>
</li><li class="nick">
<div class="content-item">watson</div>
</li><li class="nick">
<div class="content-item">wcarss</div>
</li><li class="nick">
<div class="content-item">wombat</div>
</li><li class="nick">
<div class="content-item">X11R5</div>
</li><li class="nick">
<div class="content-item">Zen</div>
</li><li class="nick footer">
<div class="content-item">footer</div>
</li></ul></div>
</div>
<div class="dragbar"></div>
<div id="messages-and-input">
<div id="topic-container">
<button id="hide-channels" class="topbar-button">=</button>
<div id="status" class="content-item"><span title="Spel werkt, vertel het door! | hype mismatch error | ERG DRUK | <ginnie> everything is awesome! | Save The Date: 20150212 is Dumont's 15th Birthday | sparrows form Voltron | Deksels! | sysadmin establishment &quot;hanged&quot; by lunatic devop | Levis dehydrates unisexual cleavage. | A fanfare for locked traffic --" class="topic">Spel werkt, vertel het door! | hype mismatch error | ERG DRUK | &lt;ginnie&gt; everything is awesome! | Save The Date: 20150212 is Dumont's 15th Birthday | sparrows form Voltron | Deksels! | sysadmin establishment "hanged" by lunatic devop | Levis dehydrates unisexual cleavage. | A fanfare for locked traffic --</span></div>
</div>
<div id="notice" class="hide">
<div class="content"></div>
<button class="close">X</button>
<button class="option2 hidden"></button>
<button class="option1 hidden"></button>
</div>
<div id="messages-container"><ul class="messages"><li class="message system">
<div class="timestamp">3:46:12 PM</div>
<div class="source-content-container">
<div class="source empty"></div>
<div class="content"><span>Awesome, you've connected to #tron.</span></div>
</div>
</li><li class="message system">
<div class="timestamp">3:46:12 PM</div>
<div class="source-content-container">
<div class="source empty"></div>
<div class="content"><span>If you're ever stuck, type /help to see a list of all commands.</span></div>
</div>
</li><li class="message system">
<div class="timestamp">3:46:12 PM</div>
<div class="source-content-container">
<div class="source empty"></div>
<div class="content"><span>You can switch windows with alt+[0-9] or click in the channel list on the left.</span></div>
</div>
</li><li class="message update join self">
<div class="timestamp">3:46:12 PM</div>
<div class="source-content-container">
<div class="source empty"></div>
<div class="content"><span>(You joined the channel)</span></div>
</div>
</li><li class="message notice topic">
<div class="timestamp">3:46:12 PM</div>
<div class="source-content-container">
<div class="source empty"></div>
<div class="content"><span>The topic is: Spel werkt, vertel het door! | hype mismatch error | ERG DRUK | &lt;ginnie&gt; everything is awesome! | Save The Date: 20150212 is Dumont's 15th Birthday | sparrows form Voltron | Deksels! | sysadmin establishment "hanged" by lunatic devop | Levis dehydrates unisexual cleavage. | A fanfare for locked traffic --</span></div>
</div>
</li><li class="message notice topic_info">
<div class="timestamp">3:46:12 PM</div>
<div class="source-content-container">
<div class="source empty"></div>
<div class="content"><span>Topic set by sneakums on Fri Oct 17 2014 16:05:00 GMT-0600 (MDT).</span></div>
</div>
</li><li class="message notice-group notice">
<div class="timestamp">3:46:12 PM</div>
<div class="source-content-container">
<div class="source empty"></div>
<div class="content"><span>Received a CTCP VERSION from squinky.</span></div>
</div>
</li><li class="message update privmsg self">
<div class="timestamp">3:47:13 PM</div>
<div class="source-content-container">
<div class="source" colornumber="22"><span>nerdtron3000</span></div>
<div class="content"><span>merf</span></div>
</div>
</li><li class="message update privmsg self">
<div class="timestamp">3:47:53 PM</div>
<div class="source-content-container">
<div class="source" colornumber="22"><span>nerdtron3000</span></div>
<div class="content"><span>X11R5: say something to me</span></div>
</div>
</li><li class="message update mention privmsg">
<div class="timestamp">3:47:55 PM</div>
<div class="source-content-container">
<div class="source" colornumber="22"><span>X11R5</span></div>
<div class="content"><span>nerdtron3000: Get me some of those things where 99 times out on to something.</span></div>
</div>
</li><li class="message update privmsg self">
<div class="timestamp">3:48:01 PM</div>
<div class="source-content-container">
<div class="source" colornumber="22"><span>nerdtron3000</span></div>
<div class="content"><span>...</span></div>
</div>
</li><li class="message update privmsg">
<div class="timestamp">3:48:02 PM</div>
<div class="source-content-container">
<div class="source" colornumber="12"><span>Dumont</span></div>
<div class="content"><span>[You have a sad feeling for a moment, then it passes.]</span></div>
</div>
</li></ul></div>
<div id="nick-and-input">
<div id="nick"><span class="name">nerdtron3000</span></div><input id="input" class="" style="-webkit-transition: 300ms; transition: 300ms;">
</div>
</div>
</div>
<script src="main.js"></script>
<iframe src="script_frame.html" style="display: none;"></iframe></body></html>

172
app/message_style.css Normal file
View File

@ -0,0 +1,172 @@
.message.system {
color: #505053;
}
.message.notice {
color: #97008B;
}
.message.error {
color: #B33B2D;
}
.message.update {
color: #00068F;
}
.message.update.self {
color: #005816;
}
.message.update.privmsg {
color: #505053;
}
.message.update.privmsg.self {
color: gray;
}
.message.update.privmsg.mention {
color: darkred;
}
.message.update.privmsg.mention .source {
font-weight: bold;
}
.message.update.privmsg.direct .source {
color: #488AA8;
}
.message.update.privmsg.notice .source {
color: #97008B;
}
/* Nickname Colors. Taken from Textual */
.message.update.privmsg.self .source-content-container .source {
color: #ea0d68;
}
.message.update.privmsg:not(.self) .source-content-container .source[colornumber='0'] {
color: #0080ff;
}
.message.update.privmsg:not(.self) .source-content-container .source[colornumber='1'] {
color: #059005;
}
.message.update.privmsg:not(.self) .source-content-container .source[colornumber='2'] {
color: #a80054;
}
.message.update.privmsg:not(.self) .source-content-container .source[colornumber='3'] {
color: #9b0db1;
}
.message.update.privmsg:not(.self) .source-content-container .source[colornumber='4'] {
color: #108860;
}
.message.update.privmsg:not(.self) .source-content-container .source[colornumber='5'] {
color: #7F4FFF;
}
.message.update.privmsg:not(.self) .source-content-container .source[colornumber='6'] {
color: #58701a;
}
.message.update.privmsg:not(.self) .source-content-container .source[colornumber='7'] {
color: #620a8e;
}
.message.update.privmsg:not(.self) .source-content-container .source[colornumber='8'] {
color: #BB0008;
}
.message.update.privmsg:not(.self) .source-content-container .source[colornumber='9'] {
color: #44345f;
}
.message.update.privmsg:not(.self) .source-content-container .source[colornumber='10'] {
color: #2f5353;
}
.message.update.privmsg:not(.self) .source-content-container .source[colornumber='11'] {
color: #904000;
}
.message.update.privmsg:not(.self) .source-content-container .source[colornumber='12'] {
color: #808000;
}
.message.update.privmsg:not(.self) .source-content-container .source[colornumber='13'] {
color: #57797e;
}
.message.update.privmsg:not(.self) .source-content-container .source[colornumber='14'] {
color: #3333dd;
}
.message.update.privmsg:not(.self) .source-content-container .source[colornumber='15'] {
color: #5f4d22;
}
.message.update.privmsg:not(.self) .source-content-container .source[colornumber='16'] {
color: #706616;
}
.message.update.privmsg:not(.self) .source-content-container .source[colornumber='17'] {
color: #46799c;
}
.message.update.privmsg:not(.self) .source-content-container .source[colornumber='18'] {
color: #80372e;
}
.message.update.privmsg:not(.self) .source-content-container .source[colornumber='19'] {
color: #8F478E;
}
.message.update.privmsg:not(.self) .source-content-container .source[colornumber='20'] {
color: #5b9e4c;
}
.message.update.privmsg:not(.self) .source-content-container .source[colornumber='21'] {
color: #13826c;
}
.message.update.privmsg:not(.self) .source-content-container .source[colornumber='22'] {
color: #b13637;
}
.message.update.privmsg:not(.self) .source-content-container .source[colornumber='23'] {
color: #e45d59;
}
.message.update.privmsg:not(.self) .source-content-container .source[colornumber='24'] {
color: #1b51ae;
}
.message.update.privmsg:not(.self) .source-content-container .source[colornumber='25'] {
color: #4855ac;
}
.message.update.privmsg:not(.self) .source-content-container .source[colornumber='26'] {
color: #7f1d86;
}
.message.update.privmsg:not(.self) .source-content-container .source[colornumber='27'] {
color: #73643f;
}
.message.update.privmsg:not(.self) .source-content-container .source[colornumber='28'] {
color: #0b9578;
}
.message.update.privmsg:not(.self) .source-content-container .source[colornumber='29'] {
color: #569c96;
}
.message.update.privmsg:not(.self) .source-content-container .source[colornumber='30'] {
color: #08465f;
}

510
app/style.css Normal file
View File

@ -0,0 +1,510 @@
html, body {
margin: 0;
padding: 0
}
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
color: #505053;
font-family: sans-serif;
font-size: 14px;
}
.hidden {
display: none;
}
#templates {
display: none;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
.footer {
display: none;
font-style: italic;
color: #9493A2;
}
.help-command {
display: inline-block;
width: 7em;
}
.content-item {
white-space: nowrap;
overflow-x: hidden;
text-overflow: ellipsis;
}
#main {
display: -webkit-box;
-webkit-box-orient: horizontal;
width: 100%;
height: 100%;
position: absolute;
border-top: 1px solid rgba(0,0,0,0.15);
}
#main-top-border {
position: absolute;
top: 0;
z-index: 100;
width: 100%;
height: 1px;
background-color: rgba(0,0,0,0.05);
pointer-events: none;
}
#rooms-and-nicks {
background-color: #F7F5E4;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-flex: 0;
width: 150px;
height: inherit;
padding: 4px 0px;
border-right: 1px solid rgba(0, 0, 0, .15);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
#rooms-and-nicks h1 {
color: #406698;
text-transform: uppercase;
font-size: 12px;
padding: 8px 0px 2px 8px;
margin: 0px;
}
#rooms-and-nicks .nick,
#rooms-and-nicks .room {
padding: 0 8px;
line-height: 26px;
}
#rooms-and-nicks .room {
cursor: pointer;
}
#rooms-and-nicks .server.footer {
display: block;
}
.dragbar:hover {
width: 6px;
transition: width .1s;
}
.dragbar {
height: 100%;
width: 1px;
cursor: col-resize;
}
#ghostbar{
width:3px;
background-color:#000;
opacity:0.8;
position:absolute;
cursor: col-resize;
z-index:999
}
#rooms-container {
-webkit-box-flex: 0;
border-bottom: 1px solid #CCC;
padding-bottom: 10px;
}
.no-nicks #rooms-container {
border-bottom-style: none;
padding-bottom: 0px;
}
#rooms-and-nicks.hidden {
display: none;
}
#rooms-and-nicks .room.server {
background-color: #F2EFD3;
position: relative;
}
#rooms-and-nicks:hover .room.server .content-item {
width: 130px;
}
#rooms-and-nicks .add-channel {
position: absolute;
right: 2px;
top: -1px;
cursor: pointer;
font-size: 18px;
display: none;
}
#rooms-and-nicks:hover .add-channel {
display: block;
}
#rooms-and-nicks .add-channel:hover {
color: #888;
}
#rooms-and-nicks .room.channel:first-child {
padding-top: 3px;
}
#rooms-and-nicks .room.channel:first-child .content-item {
padding-bottom: 3px;
line-height: 20px;
}
#rooms-and-nicks not(.current-server) + .channels .room.channel:nth-last-child(2) {
padding-bottom: 3px;
}
#rooms-and-nicks .room.channel:last-child {
padding-bottom: 3px;
}
#rooms-and-nicks not(.current-server) + .channels .room.channel:nth-last-child(2) .content-item {
padding-top: 3px;
line-height: 20px;
}
#rooms-and-nicks .room.channel:last-child .content-item {
padding-top: 3px;
line-height: 20px;
}
#rooms-and-nicks not(.current-server) + .channels .room.channel:nth-last-child(2):first-child .content-item {
line-height: 14px;
}
#rooms-and-nicks .room.channel:last-child:first-child .content-item {
line-height: 14px;
}
#rooms-and-nicks .current-server:not(.always-empty) + .channels .footer {
display: block;
}
#rooms-and-nicks .room.channel .content-item {
border-left: 1px solid rgba(0, 0, 0, .5);
padding-left: 7px;
}
#rooms-and-nicks .room.activity {
font-weight: bold;
}
#rooms-and-nicks .room.mention {
color: darkred;
}
#rooms-and-nicks .room.disconnected .content-item {
color: #9493A2;
font-style: italic;
}
#rooms-and-nicks .room.channel.disconnected .content-item {
border-left: 1px solid #9493A2;
}
#rooms-and-nicks .room.selected {
background-color: #F0E798;
}
#rooms-and-nicks .room {
position: relative;
}
#rooms-and-nicks .room .remove-button {
position: absolute;
right: 6px;
top: -1px;
cursor: pointer;
font-size: 30px;
color: rgba(0, 0, 0, .25);
display: none;
}
#rooms-and-nicks .room .remove-button:hover {
color: rgba(0, 0, 0, .5);
}
#rooms-and-nicks .room.selected:not(.footer):not(.always-empty) .content-item {
width: 123px;
}
#rooms-and-nicks .room:hover:not(.footer):not(.always-empty) .content-item {
width: 123px;
}
#rooms-and-nicks .room.selected:not(.footer):not(.always-empty) .remove-button {
display: inline-block;
}
#rooms-and-nicks .room:hover:not(.footer):not(.always-empty) .remove-button {
display: inline-block;
}
#nicks-container {
border-top: 1px solid #FFF;
-webkit-box-flex: 1;
}
.no-nicks #nicks-container {
display: none;
}
.rooms,
.nicks {
padding-top: 5px;
}
.nicks li:nth-child(odd) {
background-color: #F2EFD3;
}
#notice {
background-color: #406698;
box-shadow: 0px 1px 4px #888;
color: #FFF;
position: absolute;
width: 100%;
-webkit-transition: 150ms;
top: 0;
padding: 2px 0;
}
#notice.hide {
top: -38px;
}
#notice .content {
display: inline;
padding-left: 14px;
text-overflow: ellipsis;
white-space: nowrap;
overflow-x: hidden;
position: absolute;
top: 50%;
margin-top: -.5em;
}
#notice button {
float: right;
height: 22px;
font-size: 14px;
padding: 0px 4px;
margin: 4px;
border: none;
background-color: #ECECEC;
color: #505053;
cursor: pointer;
outline: none;
}
#notice button.close {
margin-right: 8px;
font-size: 12px;
border-radius: 42px;
width: 21px;
height: 21px;
}
#messages-and-input {
-webkit-box-flex: 1;
display: -webkit-box;
-webkit-box-orient: vertical;
box-shadow: 0px 0px 8px #CCC;
position: relative;
}
#messages-container {
overflow-y: auto;
-webkit-overflow-scrolling: touch;
-webkit-box-flex: 1;
border-bottom: 1px solid #CCC;
}
.messages {
display: table;
}
.message {
display: table-row;
-webkit-user-select: initial;
}
.message.activity-marker .source-content-container {
border-top: 1px solid rgb(224, 179, 179);
}
.message .timestamp {
color: #6060C0;
font-style: italic;
font-size: smaller;
white-space: nowrap;
display: table-cell;
text-align: right;
padding: 0px 10px 0px 10px;
border-right: 1px solid rgba(0,0,0,0.15);
cursor: text;
}
.source-content-container {
display: table-cell;
padding: 4px 10px 4px 15px;
width: 100%;
}
.message .sender {
font-weight: bold;
padding-right: 5px;
margin-left: -5px;
white-space: nowrap;
display: inline;
text-align: right;
cursor: text;
}
.message .sender.empty {
padding-right: 0;
}
.message .text {
display: inline;
white-space: pre-wrap;
cursor: text;
}
#messages-container .messages .message:first-child .source-content-container {
padding-top: 10px;
}
#messages-container .messages .message:last-child .source-content-container {
padding-bottom: 8px;
}
.message:not(.privmsg) + .message.privmsg .source-content-container {
padding-top: 4px;
padding-bottom: 1px;
}
.message.privmsg + .message.privmsg .source-content-container {
padding-top: 1px;
padding-bottom: 1px;
}
.message:not(.group) + .message.group .source-content-container {
padding-top: 4px;
padding-bottom: 0px;
}
.message.group + .message.group .source-content-container {
padding-top: 0px;
padding-bottom: 0px;
}
.message:not(.notice-group) + .message.notice-group .source-content-container {
padding-top: 4px;
padding-bottom: 0px;
}
.message.notice-group + .message.notice-group .source-content-container {
padding-top: 0px;
padding-bottom: 0px;
}
.message.list {
/* empty style for now */
}
.longword { word-break: break-all; }
#nick-and-input {
border-top: 1px solid #F9F9F9;
-webkit-box-flex: 0;
display: -webkit-box;
background-color: #ECECEC;
padding: 5px 10px 5px 10px;
}
#nick {
padding-top: 5px;
}
#nick > span {
padding-right: 10px;
}
#nick > .name:before {
font-weight: bold;
content: "[ "
}
#nick > .name:after {
font-weight: bold;
content: " ]"
}
#nick .away:before {
content: "("
}
#nick .away:after {
content: ")"
}
#input-bar {
-webkit-box-flex: 1;
display: -webkit-box;
}
#input {
background-color: #F9F9F9;
display: block;
-webkit-box-flex: 1;
width: 100%;
height: 30px;
border: 1px;
border-radius: 5px;
-webkit-box-shadow: 0px 0px 3px #888;
color: #505053;
font-size: 14px;
padding: 0px 8px;
outline: 0;
}
#input.blink {
-webkit-box-shadow: 0px 0px 6px #406698;
}
::-webkit-scrollbar {
width: 9px;
height: 9px;
}
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
display: block;
height: 0;
}
::-webkit-scrollbar-track-piece {
background-color: rgba(0,0,0,0.1);
}
::-webkit-scrollbar-thumb:vertical {
height: 50px;
background-color: #999;
border-radius: 8px;
}
::-webkit-scrollbar-thumb:vertical:hover {
background-color: #888;
}
::-webkit-scrollbar-thumb:horizontal {
width: 50px;
background-color: #999;
border-radius: 8px;
}

43
app/topbar.css Normal file
View File

@ -0,0 +1,43 @@
#hide-channels {
display: inline-block;
font-size: 12px;
}
#topic-container {
border-bottom: 1px solid #CCC;
-webkit-box-flex: 0;
display: -webkit-box;
background-color: #ECECEC;
padding: 4px 6px;
}
#status {
-webkit-box-flex: 1;
padding: 4px 5px;
}
#status .topic {
font-style: italic;
}
.topbar-button {
background: rgba(0, 0, 0, .08);
border: 0 transparent;
text-decoration: none;
cursor: pointer;
border-radius: 2px;
-webkit-transition: .1s linear -webkit-box-shadow;
margin-right: 4px;
}
.topbar-button:active {
box-shadow: 0 0 0 1px rgba(0 ,0 ,0 ,.15) inset, 0 0 6px rgba(0, 0, 0, .2) inset;
}
.topbar-button:hover {
background: rgba(0, 0, 0, .13);
}
.topbar-button:focus {
outline: none;
}

58
app/wirc.css
View File

@ -1,58 +0,0 @@
#foraText, #kiboze {
max-height: 20em;
overflow: scroll;
}
#foraText p, #kiboze p {
margin: 0em 0em 0em 4em;
text-indent: -4em;
}
#kiboze {
max-height: 7em;
background-color: #eee;
}
.timestamp {
color: silver;
}
.forum {
color: darkblue;
display: none;
}
.sender {
color: green;
}
.sender:before {
content: "<";
}
.sender:after {
content: ">";
}
.sender.notice {
color: olive;
}
.sender.notice:before {
content: "-";
}
.sender.notice:after {
content: "-";
}
.raw {
color: purple;
}
.active {
background-color: yellow;
}
.current {
background-color: cornsilk;
}
input[name~=target] {
width: 7em;
}
input[name~=text] {
width: 75%;
}
body {
height: 100%;
}

85
app/wirc.html
View File

@ -1,22 +1,79 @@
<!DOCTYPE html>
<html>
<head>
<title>#tron</title>
<link rel="icon" href="wirc.png">
<link rel="stylesheet" href="wirc.css">
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="message_style.css">
<link rel="stylesheet" href="topbar.css">
<script src="wirc.js"></script>
</head>
<body>
<div id="foraButtons"></div>
<div id="foraText"></div>
<form id="command">
<input type="hidden" name="server" value="slashnet" id="server">
<input type="hidden" name="auth" value="" id="authtok">
<input type="hidden" name="type" value="command">
<input type="hidden" name="target" id="target">
<input name="text" id="text" autofocus>
<input type="Submit" value="Send">
</form>
<div id="kiboze"></div>
<!-- templates -->
<div id="templates">
<div class="server-channels">
<div class="server room">
<div class="content-item"></div>
<div class="remove-button">-</div>
</div>
<ul class="channels"></ul>
</div>
<li class="channel room">
<div class="content-item"></div>
<div class="remove-button">-</div>
</li>
<ul class="nicks"></ul>
<li class="nick">
<div class="content-item"></div>
</li>
<ul class="messages"></ul>
<li class="message">
<div class="timestamp"></div>
<div class="source-content-container">
<div class="source"></div>
<div class="content"></div>
</div>
</li>
</div>
<!-- main -->
<div id="main">
<div id="main-top-border"></div>
<div id="rooms-and-nicks" class="no-nicks">
<div id="rooms-container">
<h1>rooms</h1>
<div class="rooms"></div>
</div>
<div id="nicks-container">
<h1>members</h1>
</div>
</div>
<div class="dragbar"></div>
<div id="messages-and-input">
<div id="topic-container">
<button id="hide-channels" class="topbar-button">=</button>
<div id="status" class="content-item"></div>
</div>
<div id="notice" class="hide">
<div class="content"></div>
<button class="close">X</button>
<button class="option2 hidden"></button>
<button class="option1 hidden"></button>
</div>
<div id="messages-container"></div>
<div id="nick-and-input">
<div id="nick"></div><input id="input">
</div>
</div>
</div>
</body>
</html>

163
app/wirc.js
View File

@ -4,60 +4,63 @@ var urlRe = /[a-z]+:\/\/[^ ]*/;
var nick = "Mme. M";
var scrollbackLength = 500;
if (String.prototype.startsWith == null) {
String.prototype.startsWith = function(needle) {
return this.lastIndexOf(needle, 0) == 0;
}
}
function getTemplate(className) {
return document.templates.getElementsByClassName(className)[0].cloneNode(true);
}
function isinView(oObject) {
return (oObject.offsetParent.clientHeight <= oObject.offsetTop);
}
function selectForum(fe) {
var kids = document.getElementById("foraText").childNodes;
function selectForum(room) {
var kids = document.rooms_list.childNodes;
for (i = 0; i < kids.length; i += 1) {
e = kids[i];
if (e == fe) {
e.style.display = "block";
if (e == room) {
e.className = "room selected";
e.messages.display = "block";
} else {
e.style.display = "none";
if (e.button.className == "current") {
e.button.className = "";
}
e.className = "room";
e.messages.display = "none";
}
}
fe.button.className = "current";
if (fe.lastChild) {
fe.lastChild.scrollIntoView(false);
}
document.getElementById("target").value = fe.forum;
}
if (room.lastChild) {
room.lastChild.scrollIntoView(false);
}
}
fora = {}
function getForumElement(forum) {
var id = "a:" + forum;
var fe = document.getElementById(id);
var fe = fora[forum];
if (! fe) {
var button = document.createElement("button");
button.appendChild(document.createTextNode(forum));
button.onclick = function() { selectForum(fe); }
document.getElementById("foraButtons").appendChild(button);
fe = document.createElement("div");
fe.id = id
fe.forum = forum
fe.button = button
document.getElementById("foraText").appendChild(fe);
}
if (fe.button.className != "current") {
fe.button.className = "active";
var room = getTemplate("channel room");
room.textContent = forum;
document.rooms_list.appendChild(room);
fe = getTemplate("messages");
fe.room = room;
room.messages = fe;
// XXX: split out into non-anon function
room.addEventListener("click", function() {selectForum(fe)});
fora[forum] = fe;
document.getElementById("messages-container").appendChild(fe);
}
return fe;
}
}
function addMessagePart(p, className, text) {
var e = document.createElement("span");
@ -73,12 +76,12 @@ function addText(p, text, kiboze) {
txtElement.className = "text";
var rhs = text;
var match;
while ((match = urlRe.exec(rhs)) != null) {
var before = rhs.substr(0, match.index);
var a = document.createElement("a");
var href = match[0];
if (href.indexOf("hxx") == 0) {
href = "htt" + href.substr(3);
}
@ -91,31 +94,34 @@ function addText(p, text, kiboze) {
}
txtElement.appendChild(document.createTextNode(rhs));
p.appendChild(txtElement);
if ((kiboze) || (-1 != text.search(kibozeRe))) {
var k = document.getElementById("kiboze");
var p2 = p.cloneNode(true);
k.insertBefore(p2, k.firstChild);
p2.onclick = function() { focus(p); }
// Setting title makes the tab flash sorta
document.title = document.title;
if (k) {
k.insertBefore(p2, k.firstChild);
p2.onclick = function() { focus(p); }
// Setting title makes the tab flash sorta
document.title = document.title;
}
}
}
function focus(e) {
var pct = 1;
var timeout;
selectForum(e.parentNode);
selectForum(e.parentNode);
e.scrollIntoView(false);
e.style.backgroundColor = "yellow";
timeout = setInterval(function() {
pct = pct - 0.1;
e.style.backgroundColor = "rgba(255, 255, 0, " + pct + ")";
if (pct <= 0) {
e.style.backgroundColor = "inherit";
e.style.backgroundColor = "inherit";
clearInterval(timeout);
}
}, 50)
@ -131,12 +137,12 @@ function addMessage(txt) {
var forum = parts[4];
var args = parts.slice(5);
var msg = txt.substr(lhs.length + 2)
var forumElement = getForumElement(forum);
var p = document.createElement("p");
var p = getTemplate("message");
addMessagePart(p, "timestamp", ts.toLocaleTimeString());
switch (command) {
case "PING":
case "PONG":
@ -158,27 +164,29 @@ function addMessage(txt) {
addMessagePart(p, "raw", command + " " + args + " " + msg);
break;
}
while (forumElement.childNodes.length > 500) {
while (forumElement.childNodes.length > scrollbackLength) {
forumElement.removeChild(forumElement.firstChild)
}
forumElement.appendChild(p);
p.scrollIntoView(false);
}
function newmsg(event) {
msgs = event.data.split("\n");
for (var i = 0; i < msgs.length; i += 1) {
function newmsg(oEvent) {
msgs = oEvent.data.split("\n");
var first = Math.max(0, msgs.length - scrollbackLength);
for (var i = first; i < msgs.length; i += 1) {
addMessage(msgs[i]);
}
}
function handleCommand(event) {
function handleInput(oEvent) {
console.log(oEvent);
var oReq = new XMLHttpRequest();
function reqListener() {
}
var txt = document.getElementById("text").value;
var txt = oEvent.target.value;
if (txt.startsWith("/connect ")) {
// XXX: should allow tokens with spaces
var parts = txt.split(" ");
@ -189,34 +197,41 @@ function handleCommand(event) {
oReq.open("POST", window.postURL, true);
oReq.send(new FormData(event.target));
}
event.target.reset();
oEvent.target.value = "";
return false;
}
function connect(url, server, authtok) {
window.postURL = url;
document.getElementById("server").value = server;
document.getElementById("authtok").value = authtok;
document.postURL = url;
var pullURL = url + "?server=" + server + "&auth=" + authtok
if (window.source != null) {
window.source.close();
if (document.source != null) {
document.source.close();
}
window.source = new EventSource(pullURL);
window.source.onmessage = newmsg;
document.source = new EventSource(pullURL);
document.source.onmessage = newmsg;
chrome.storage.sync.set({"url": url, "server": server, "authtok": authtok});
chrome.storage.sync.set({"connections": [[url, server, authtok]]});
}
function restore(items) {
connect(items["url"], items["server"], items["authtok"]);
var connections = items["connections"];
for (var k = 0; k < connections.length; k += 1) {
var conn = connections[k];
connect(conn[0], conn[1], conn[2]);
}
}
function init() {
document.getElementById("command").onsubmit = handleCommand;
chrome.storage.sync.get(["url", "server", "authtok"], restore);
chrome.storage.sync.get("connections", restore);
document.getElementById("input").addEventListener("change", handleInput);
document.templates = document.getElementById("templates");
document.rooms_list = document.getElementById("rooms-container").getElementsByClassName("rooms")[0];
}
window.onload = init;
window.addEventListener("load", init);