Moving to circ GUI
This commit is contained in:
Neale Pickett
parent
576f7b7bce
commit
cd78265272
|
|
@ -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 "hanged" by lunatic devop | Levis dehydrates unisexual cleavage. | A fanfare for locked traffic --" class="topic">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 "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 | <ginnie> 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>
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
@ -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
58
app/wirc.css
|
|
@ -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%;
|
|
||||||
}
|
|
||||||
|
|
@ -1,22 +1,79 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>#tron</title>
|
<meta charset="utf-8">
|
||||||
<link rel="icon" href="wirc.png">
|
<link rel="stylesheet" href="style.css">
|
||||||
<link rel="stylesheet" href="wirc.css">
|
<link rel="stylesheet" href="message_style.css">
|
||||||
|
<link rel="stylesheet" href="topbar.css">
|
||||||
<script src="wirc.js"></script>
|
<script src="wirc.js"></script>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div id="foraButtons"></div>
|
<!-- templates -->
|
||||||
<div id="foraText"></div>
|
<div id="templates">
|
||||||
<form id="command">
|
|
||||||
<input type="hidden" name="server" value="slashnet" id="server">
|
<div class="server-channels">
|
||||||
<input type="hidden" name="auth" value="" id="authtok">
|
<div class="server room">
|
||||||
<input type="hidden" name="type" value="command">
|
<div class="content-item"></div>
|
||||||
<input type="hidden" name="target" id="target">
|
<div class="remove-button">-</div>
|
||||||
<input name="text" id="text" autofocus>
|
</div>
|
||||||
<input type="Submit" value="Send">
|
<ul class="channels"></ul>
|
||||||
</form>
|
</div>
|
||||||
<div id="kiboze"></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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
107
app/wirc.js
107
app/wirc.js
|
|
@ -4,58 +4,61 @@ var urlRe = /[a-z]+:\/\/[^ ]*/;
|
||||||
|
|
||||||
var nick = "Mme. M";
|
var nick = "Mme. M";
|
||||||
|
|
||||||
|
var scrollbackLength = 500;
|
||||||
|
|
||||||
if (String.prototype.startsWith == null) {
|
if (String.prototype.startsWith == null) {
|
||||||
String.prototype.startsWith = function(needle) {
|
String.prototype.startsWith = function(needle) {
|
||||||
return this.lastIndexOf(needle, 0) == 0;
|
return this.lastIndexOf(needle, 0) == 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function getTemplate(className) {
|
||||||
|
return document.templates.getElementsByClassName(className)[0].cloneNode(true);
|
||||||
|
}
|
||||||
|
|
||||||
function isinView(oObject) {
|
function isinView(oObject) {
|
||||||
return (oObject.offsetParent.clientHeight <= oObject.offsetTop);
|
return (oObject.offsetParent.clientHeight <= oObject.offsetTop);
|
||||||
}
|
}
|
||||||
|
|
||||||
function selectForum(fe) {
|
function selectForum(room) {
|
||||||
var kids = document.getElementById("foraText").childNodes;
|
var kids = document.rooms_list.childNodes;
|
||||||
|
|
||||||
for (i = 0; i < kids.length; i += 1) {
|
for (i = 0; i < kids.length; i += 1) {
|
||||||
e = kids[i];
|
e = kids[i];
|
||||||
if (e == fe) {
|
if (e == room) {
|
||||||
e.style.display = "block";
|
e.className = "room selected";
|
||||||
|
e.messages.display = "block";
|
||||||
} else {
|
} else {
|
||||||
e.style.display = "none";
|
e.className = "room";
|
||||||
if (e.button.className == "current") {
|
e.messages.display = "none";
|
||||||
e.button.className = "";
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
fe.button.className = "current";
|
if (room.lastChild) {
|
||||||
if (fe.lastChild) {
|
room.lastChild.scrollIntoView(false);
|
||||||
fe.lastChild.scrollIntoView(false);
|
|
||||||
}
|
}
|
||||||
document.getElementById("target").value = fe.forum;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
fora = {}
|
||||||
function getForumElement(forum) {
|
function getForumElement(forum) {
|
||||||
var id = "a:" + forum;
|
var fe = fora[forum];
|
||||||
var fe = document.getElementById(id);
|
|
||||||
|
|
||||||
if (! fe) {
|
if (! fe) {
|
||||||
var button = document.createElement("button");
|
var room = getTemplate("channel room");
|
||||||
button.appendChild(document.createTextNode(forum));
|
room.textContent = forum;
|
||||||
button.onclick = function() { selectForum(fe); }
|
document.rooms_list.appendChild(room);
|
||||||
document.getElementById("foraButtons").appendChild(button);
|
|
||||||
|
|
||||||
fe = document.createElement("div");
|
fe = getTemplate("messages");
|
||||||
fe.id = id
|
fe.room = room;
|
||||||
fe.forum = forum
|
|
||||||
fe.button = button
|
room.messages = fe;
|
||||||
document.getElementById("foraText").appendChild(fe);
|
// XXX: split out into non-anon function
|
||||||
|
room.addEventListener("click", function() {selectForum(fe)});
|
||||||
|
|
||||||
|
fora[forum] = fe;
|
||||||
|
document.getElementById("messages-container").appendChild(fe);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (fe.button.className != "current") {
|
|
||||||
fe.button.className = "active";
|
|
||||||
}
|
|
||||||
return fe;
|
return fe;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -95,12 +98,15 @@ function addText(p, text, kiboze) {
|
||||||
if ((kiboze) || (-1 != text.search(kibozeRe))) {
|
if ((kiboze) || (-1 != text.search(kibozeRe))) {
|
||||||
var k = document.getElementById("kiboze");
|
var k = document.getElementById("kiboze");
|
||||||
var p2 = p.cloneNode(true);
|
var p2 = p.cloneNode(true);
|
||||||
|
|
||||||
|
if (k) {
|
||||||
k.insertBefore(p2, k.firstChild);
|
k.insertBefore(p2, k.firstChild);
|
||||||
p2.onclick = function() { focus(p); }
|
p2.onclick = function() { focus(p); }
|
||||||
|
|
||||||
// Setting title makes the tab flash sorta
|
// Setting title makes the tab flash sorta
|
||||||
document.title = document.title;
|
document.title = document.title;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function focus(e) {
|
function focus(e) {
|
||||||
|
|
@ -133,7 +139,7 @@ function addMessage(txt) {
|
||||||
var msg = txt.substr(lhs.length + 2)
|
var msg = txt.substr(lhs.length + 2)
|
||||||
|
|
||||||
var forumElement = getForumElement(forum);
|
var forumElement = getForumElement(forum);
|
||||||
var p = document.createElement("p");
|
var p = getTemplate("message");
|
||||||
|
|
||||||
addMessagePart(p, "timestamp", ts.toLocaleTimeString());
|
addMessagePart(p, "timestamp", ts.toLocaleTimeString());
|
||||||
|
|
||||||
|
|
@ -158,27 +164,29 @@ function addMessage(txt) {
|
||||||
addMessagePart(p, "raw", command + " " + args + " " + msg);
|
addMessagePart(p, "raw", command + " " + args + " " + msg);
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
while (forumElement.childNodes.length > 500) {
|
while (forumElement.childNodes.length > scrollbackLength) {
|
||||||
forumElement.removeChild(forumElement.firstChild)
|
forumElement.removeChild(forumElement.firstChild)
|
||||||
}
|
}
|
||||||
forumElement.appendChild(p);
|
forumElement.appendChild(p);
|
||||||
p.scrollIntoView(false);
|
p.scrollIntoView(false);
|
||||||
}
|
}
|
||||||
|
|
||||||
function newmsg(event) {
|
function newmsg(oEvent) {
|
||||||
msgs = event.data.split("\n");
|
msgs = oEvent.data.split("\n");
|
||||||
|
|
||||||
for (var i = 0; i < msgs.length; i += 1) {
|
var first = Math.max(0, msgs.length - scrollbackLength);
|
||||||
|
for (var i = first; i < msgs.length; i += 1) {
|
||||||
addMessage(msgs[i]);
|
addMessage(msgs[i]);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleCommand(event) {
|
function handleInput(oEvent) {
|
||||||
|
console.log(oEvent);
|
||||||
var oReq = new XMLHttpRequest();
|
var oReq = new XMLHttpRequest();
|
||||||
function reqListener() {
|
function reqListener() {
|
||||||
}
|
}
|
||||||
|
|
||||||
var txt = document.getElementById("text").value;
|
var txt = oEvent.target.value;
|
||||||
if (txt.startsWith("/connect ")) {
|
if (txt.startsWith("/connect ")) {
|
||||||
// XXX: should allow tokens with spaces
|
// XXX: should allow tokens with spaces
|
||||||
var parts = txt.split(" ");
|
var parts = txt.split(" ");
|
||||||
|
|
@ -190,33 +198,40 @@ function handleCommand(event) {
|
||||||
oReq.send(new FormData(event.target));
|
oReq.send(new FormData(event.target));
|
||||||
}
|
}
|
||||||
|
|
||||||
event.target.reset();
|
oEvent.target.value = "";
|
||||||
|
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
function connect(url, server, authtok) {
|
function connect(url, server, authtok) {
|
||||||
window.postURL = url;
|
document.postURL = url;
|
||||||
document.getElementById("server").value = server;
|
|
||||||
document.getElementById("authtok").value = authtok;
|
|
||||||
var pullURL = url + "?server=" + server + "&auth=" + authtok
|
var pullURL = url + "?server=" + server + "&auth=" + authtok
|
||||||
|
|
||||||
if (window.source != null) {
|
if (document.source != null) {
|
||||||
window.source.close();
|
document.source.close();
|
||||||
}
|
}
|
||||||
window.source = new EventSource(pullURL);
|
document.source = new EventSource(pullURL);
|
||||||
window.source.onmessage = newmsg;
|
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) {
|
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() {
|
function init() {
|
||||||
document.getElementById("command").onsubmit = handleCommand;
|
chrome.storage.sync.get("connections", restore);
|
||||||
chrome.storage.sync.get(["url", "server", "authtok"], 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);
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue