diff options
| -rw-r--r-- | static/chat.css | 194 | ||||
| -rw-r--r-- | static/chat.js | 101 | ||||
| -rw-r--r-- | tpls/chat.html | 14 |
3 files changed, 233 insertions, 76 deletions
diff --git a/static/chat.css b/static/chat.css index ed56fca..3a834b9 100644 --- a/static/chat.css +++ b/static/chat.css @@ -2,11 +2,137 @@ font-family: sans-serif; } +body { + background: hsl(200, 90%, 85%); +} + +#mainwrap { + position: fixed; + left: 2mm; + top: 2mm; + right: 2mm; + bottom: 2mm; +} + +h1, #chatlogwrap, #buddiescontainer { + background: white; +} + +#dialogoverlay { + position: fixed; + background: rgba(0,0,0,0.4); + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 1000; +} + +#dialoginner { + background: white; + margin: 10% auto 0; + width: 90%; + max-width: 120mm; + padding: 4mm 0 4mm; + border-radius: 4mm; +} + +#dialoginner > div { + padding: 0 4mm 0; +} + +#dialoginner .buttons { + margin: 1ex 0 0; + text-align: center; +} + +#dialoginner button { + padding: 1ex 2ex 1ex; + background: #ddd; + border: none; + border-radius: 2mm; +} + +#dialoginner button:hover { + cursor: pointer; + background: #eee; +} +#dialoginner input { + width: calc(100% - 2px); + border: 1px solid #aaa; +} + +#dialoginner h2 { + text-align: center; + padding: 0; + margin: 0; + border-bottom: 1px dotted hsl(200, 90%, 85%); + font-size: 16pt; + font-weight: normal; +} + +#chatinput { + padding: 0; + position: absolute; + bottom: 0; + left: 0; + right: 0; +} + +#chatinput input { + position: relative; + background: white; + border: none; + border-top-left-radius: 4mm; + border-bottom-left-radius: 4mm; + padding: 0 0 0 4mm; + height: 3em; + width: calc(100% - 4mm - 10ex); +} +#chatinput button { + position: relative; + background: white; + border-top-right-radius: 4mm; + border-bottom-right-radius: 4mm; + border: none; + border-left: 1px dotted hsl(200, 90%, 85%); + height: 3em; + text-align: center; + width: 10ex; +} +#chatinput button:hover { + background: #eee; + cursor: pointer; +} + +::-webkit-input-placeholder { font-style: italic; } +::-moz-placeholder { font-style: italic; } +:-ms-input-placeholder { font-style: italic; } +input:-moz-placeholder { font-style: italic; } + +#chatlogwrap { + position: absolute; + top: 13mm; + left: 0; + bottom: calc(3em + 1mm); + right: 40mm; + margin: 0; + border-radius: 4mm; +} + #chatlog { + position: absolute; + margin: 0; + padding: 0; display: table; list-style: none; - margin: 0; - padding: 0 + display: block; + top: 4mm; + left: 4mm; + right: 4mm; + bottom: 4mm; + overflow-y: auto; + overflow-x: hidden; } #chatlog li { @@ -17,13 +143,13 @@ #chatlog li .nick { display: table-cell; - padding-right: 1ex; + padding-right: 0.5ex; font-weight: bold; - text-align: right; } #chatlog li .msg { display: table-cell; + padding-left: 1ex; } #chatlog li.leave, #chatlog li.join, #chatlog li.leave .nick, #chatlog li.join .nick { @@ -32,66 +158,40 @@ } h1 { + border-radius: 4mm; text-align: center; - font-weight: bold; + margin: 0 0 1mm; + padding: 2mm 4mm 2mm; + font-weight: normal; font-size: 18pt; - margin: 0; - position: fixed; - top: 0; - left: 0; - right: 0; - border-bottom: 1px solid #28f; height: 8mm; - background: white; } #buddiescontainer { - position: fixed; - top: 0; + position: absolute; + top: 13mm; + bottom: calc(3em + 1mm); right: 0; - width: 35mm; - margin: 10mm 0 12mm 0; + width: 39mm; + border-radius: 4mm; + padding: 4mm 0 4mm; } #buddiescontainer h2 { - font-weight: bold; + font-weight: normal; font-size: 12pt; + padding: 0 4mm 0; + margin: 0 0 2mm; + text-align: center; + border-bottom: 1px dotted hsl(200, 90%, 85%); } #buddies { + list-style: none; margin: 0; - padding: 0; + padding: 0 4mm 0; } #buddies li { margin: 0; padding: 0; } - -#chatlog { - margin: 10mm 40mm 12mm 0; -} - -#chatinput { - position: fixed; - bottom: 0; - left: 0; - right: 0; - height: 10mm; - border-top: 1px solid #28f; -} - -#chatinput input { - position: absolute; - top: 0px; - left: 0px; - height: 8mm; - width: calc(100% - 25mm); -} - -#chatinput button { - position: absolute; - top: 0; - right: 0; - width: 20mm; - bottom: 0; -}
\ No newline at end of file diff --git a/static/chat.js b/static/chat.js index 47cf6d3..65266bf 100644 --- a/static/chat.js +++ b/static/chat.js @@ -1,3 +1,55 @@ +function initGui(roomname) { + $("#nojs").remove(); + + var dialogoverlay = $("<div/>").prop("id", "dialogoverlay") + .append($("<div/>").prop("id", "dialoginner") + .append($("<h2/>")) + .append($("<div/>") + .append($("<p/>")) + .append($("<input/>")) + .append($("<div/>").addClass("buttons")))).hide(); + var h1 = $("<h1/>").text("Chatroom ").append($("<span/>").css("font-style", "italic").text(roomname)); + var chatlog = $("<div/>").prop("id", "chatlogwrap").append($("<ul/>").prop("id", "chatlog")); + var buddiescontainer = $("<section/>").prop("id", "buddiescontainer") + .append($("<h2/>").text("Buddies online")) + .append($("<ul/>").prop("id", "buddies")); + var chatinput = $("<section/>").prop("id", "chatinput") + .append($("<input/>").prop("name", "chattext").prop("id", "chattext").prop("type", "text").prop("placeholder", "Type to chat...")) + .append($("<button/>").prop("id", "sendbtn").text("Send")); + $("body").append(dialogoverlay); + $("#mainwrap") + .append(h1) + .append(chatlog) + .append(buddiescontainer) + .append(chatinput); +} + +function mydialog(title, text, input, buttons) { + $("#dialoginner h2").text(title); + $("#dialoginner p").text(text); + var callcallback; + if(input === null) { + $("#dialoginner input").hide(); + callcallback = function(cb) {cb();}; + } else { + $("#dialoginner input").prop("placeholder", input).show(); + callcallback = function(cb) {cb($("#dialoginner input").val());}; + } + + $("#dialoginner .buttons > *").remove(); + var btncontainer = $("#dialoginner .buttons"); + + for(var i in buttons) { + var button = buttons[i]; + btncontainer.append($("<button/>").text(button.text).click(function() { + $("#dialogoverlay").hide(); + callcallback(button.callback); + })); + } + + $("#dialogoverlay").show(); +} + function randomColor() { var h = Math.floor(Math.random() * 360); var s = Math.floor((Math.random() * 0.5 + 0.5)*100); @@ -6,9 +58,17 @@ function randomColor() { } function askTryAgain(reason, ws_url) { - if(confirm("Could not join chat (Reason: "+ reason +"). Try again?")) { - window.setTimeout(RunChat, 1, ws_url); // We use a timeout, so we don't accidentally fill up the call stack. - } + mydialog( + "Could not join", + "Could not Join chat (Reason: "+reason+")", + null, + [{ + "text": "Try again", + "callback": (function() { + pickUsername(ws_url); + }) + }] + ); } var buddyColors = {}; @@ -57,14 +117,14 @@ function chatlogWriter(event) { var elemText = $("<span/>").addClass("msg").text(msgtext); var logentry = $("<li/>").addClass(data.type).append(elemNick).append(elemText); $("#chatlog").append(logentry); - window.scrollTo(0, logentry.offset().top); + logentry.get()[0].scrollIntoView(); } function initChatSender(ws) { var send = function() { var ct = $("#chattext") - ws.send(ct.prop("value")); - ct.prop("value",""); + ws.send(ct.val()); + ct.val(""); ct.focus(); }; @@ -83,13 +143,14 @@ function Join(ws_url, nick) { ws.onmessage = function(event) { var data = JSON.parse(event.data); if(data.ok) { + $("#chatinput").show(); ws.onmessage = chatlogWriter; - for(i in data.buddies) { + for(var i in data.buddies) { addBuddy(data.buddies[i]); } initChatSender(ws); ws.onclose = function(_) { - alert("Connection lost. Try refreshing the page."); + mydialog("Connection lost", "Connection to server lost. Try refreshing the page", null, []); }; } else { ws.close(); @@ -99,13 +160,19 @@ function Join(ws_url, nick) { }; } -function RunChat(ws_url) { - var nick = ""; - while(nick == "") { - nick = prompt("Choose a nickname"); - if(nick === null) { - return; - } - } - Join(ws_url, nick); +function RunChat(ws_url, roomname) { + initGui(roomname); + pickUsername(ws_url); +} + +function pickUsername(ws_url) { + mydialog( + "Pick a username", + "Pick a username to join the chat", + "username", + [{ + "text": "OK", + "callback": (function(nick) {Join(ws_url, nick);}) + }] + ); } diff --git a/tpls/chat.html b/tpls/chat.html index db34aaa..b4217f1 100644 --- a/tpls/chat.html +++ b/tpls/chat.html @@ -4,20 +4,10 @@ <title>{{.Roomname}}</title> <script type="text/javascript" src="/static/jquery.min.js"></script> <script type="text/javascript" src="/static/chat.js"></script> - <script type="text/javascript">$("document").ready(function(){RunChat("{{.Websock}}");});</script> + <script type="text/javascript">$("document").ready(function(){RunChat("{{.Websock}}", "{{.Roomname}}");});</script> <link rel="stylesheet" type="text/css" href="/static/chat.css" /> </head> <body> - - <h1>{{.Roomname}}</h1> - <div id="buddiescontainer"> - <h2>Users online</h2> - <ul id="buddies"></ul> - </div> - <ul id="chatlog"></ul> - <div id="chatinput"> - <input type="text" name="chattext" id="chattext"/> - <button id="sendbtn">Chat</button> - </div> + <div id="mainwrap"><section id="nojs">simplechat needs javascript to work. If you can see this message, you probably have javascript disabled. Please activate it for this site.</section></div> </body> </html> |