Skip to content

Commit

Permalink
Extracted js and css to separate files
Browse files Browse the repository at this point in the history
  • Loading branch information
@ThomasHabets
ThomasHabets committed Nov 2, 2009
1 parent 290da00 commit 4060f38
Show file tree
Hide file tree
Showing 4 changed files with 287 additions and 278 deletions.
303 changes: 31 additions & 272 deletions priv/www/index.html
View file
Expand Up @@ -4,55 +4,14 @@
<head> <head>
<title>LightWave</title> <title>LightWave</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8"> <meta http-equiv="content-type" content="text/html;charset=utf-8">
<style type="text/css"> <link rel="stylesheet" type="text/css" href="/static/lightwave.css" />
.js .nojs{display:none;} <script type="text/javascript">
document.documentElement.className = "js";
</script>
</head>


html, body {margin:0;padding:0;}
body {background:#fff;color:#222;font:62.5% "Helvetica Neue",Helvetica,Arial,sans-serif;text-align:center;}
#doc {text-align:left;margin:0 auto;font-size:1em;width:80%;}
#header {text-align:center;margin:2em 0;}
#header * {margin:0;}
#header h1 {color:#333;}
h1, h2, h3 {letter-spacing:-1px;}

.source {font-size:.8em;color:#000;}
pre {font-size:.9em;background-color:#ffc;overflow-x:auto;}
pre em {color:#009;}
pre b {color:#900;}
pre strong {color:#099;}
pre i,
pre i *{color:#090;}

#menu {
text-align: center;
width: 100%;
font-size: 2em;
}

/* Chat */
#chat .who {
width: 15em;
color: white;
background-color: black;
}
#chat {border:2px solid #000;width:100%;height:30em;overflow:auto;}
#chat ol {margin:0px;padding:5px;list-style:none;}
#chat tr {border-bottom:1px solid #eee;padding:5px 10px;}
#chat tr.typer {border-bottom:1px solid #eee;padding:5px 10px;background-color: #aaa; }
#chat .error {color:#f00;}

#chatter {padding:5px;}
#chatter label {color:#999;width:18%;text-align:right;display:block;float:left;line-height:1.5em;}
#chatter input {width:60%;font-size:1em;margin:0 2px;}
#chatter .submit {width:auto;width:18%;}
</style>
<script type="text/javascript">
document.documentElement.className = "js";
</script>
</head>
<body> <body>
<div id="doc"> <div id="doc">

<div id="header"> <div id="header">
<h1><a href=".">Lightwave - like Google Wave, only much less</a></h1> <h1><a href=".">Lightwave - like Google Wave, only much less</a></h1>
<p>powered by MochiWeb (Erlang).</p> <p>powered by MochiWeb (Erlang).</p>
Expand All @@ -62,241 +21,41 @@ <h1><a href=".">Lightwave - like Google Wave, only much less</a></h1>
Current wave: <input type="text" id="goto-wave"/> Current wave: <input type="text" id="goto-wave"/>
<input type='submit' id='goto-wave-submit' value='Go to wave'/> <input type='submit' id='goto-wave-submit' value='Go to wave'/>
</div> </div>
<div id="content">
<p class="nojs">JavaScript <strong>must</strong> be enabled to fully enjoy this game.</p>
<div id="chat">
<table>
</table>
</div>
<form id="chatter">
<label for="who">Who: </label>
<input type="text" name="who" id="who" value="testuser" /><br/>
<label for="message">Message: </label>
<input type="text" name="message" id="message">
<input type="submit" class="submit" value="say it!">
</form>
</div>

<div id="footer">
<!-- <p>footer</p> -->
</div>
</div>
<!-- <script type="text/javascript" src="jquery-1.2.3.min.js"></script> -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" id="script">
function dumpProps(obj, parent) {
// Go through all the properties of the passed-in object
for (var i in obj) {
// if a parent (2nd parameter) was passed in, then use that to
// build the message. Message includes i (the object's property name)
// then the object's property value on a new line
if (parent) { var msg = parent + "." + i + "\n" + obj[i]; } else { var msg = i + "\n" + obj[i]; }
// Display the message. If the user clicks "OK", then continue. If they
// click "CANCEL" then quit this level of recursion
if (!confirm(msg)) { return; }
// If this property (i) is an object, then recursively process the object
if (typeof obj[i] == "object") {
if (parent) { dumpProps(obj[i], parent + "." + i); } else { dumpProps(obj[i], i); }
}
}
}
var url = "./";
(function($) {
$(document).ready(function() {
var curChanTick = "1";


$("#chat").bind("message", function(event, message) {
$(this).triggerHandler("append", [message]);

}).bind("type", function(event, keys) {
$(this).triggerHandler("appendType", [keys]);
}).bind("error", function(event, message) {
$(this).triggerHandler("append",[
[
'<strong class="error">',
message,
'</strong>'
].join("")
]);
$(this).triggerHandler("poll");

}).bind("append", function(event, data) {
$(".typer", this).each(function(){
if ($(this).attr("data") == data.who) {
$(this).remove();
}
});
if (data.message == undefined) {
return;
}
$("table", this).append([
'<tr>',
'<td class="timestamp">',data.timestamp, '</td>',
'<td class="who">',data.who, '</td>',
'<td>', data.message,'</td>',
'</tr>'].join(""));
this.scrollTop = $("table", this).get(0).offsetHeight;
}).bind("appendType", function(event, data) {
$(".typer", this).each(function(){
if ($(this).attr("data") == data.who) {
$(this).remove();
}
});
if (data.message == "") {
return;
}
$("table", this).append([
'<tr class="typer" data="',data.who,'">',
'<td class="timestamp">',data.timestamp,'</td>',
'<td class="who">',data.who, '</td>',
'<td>', data.message,'</td>',
'</tr>'].join(""));
this.scrollTop = $("table", this).get(0).offsetHeight;


}).bind("poll", function(event) { <div id="content">
var self = this; <p class="nojs">
$.ajax({ JavaScript <strong>must</strong> be enabled to run LightWave.
url: url + "get/" + curChanTick, </p>
dataType: "json", <div id="chat">
method: "get", <table>
success: function(arr) { </table>
var ok = 0; </div>
for (i = 0; i < arr.length; i++) { <form id="chatter">
data = arr[i]; <label for="who">Who: </label>
if(data.status == "ok") { <input type="text" name="who" id="who" value="testuser" /><br/>
curChanTick = data.tick + 1; <label for="message">Message: </label>
if (data.type == "message") { <input type="text" name="message" id="message">
$(self).triggerHandler("message", [data]); <input type="submit" class="submit" value="say it!">
} else if (data.type == "type") { </form>
$(self).triggerHandler("type", [data]); </div>
}
ok = 1
} else if(data.status == "error") {
$(self).triggerHandler("error", [data.error]);
} else {
alert("epic fail!");
}
}
if (ok) {
$(self).triggerHandler("poll");
}
}
});
}).triggerHandler("poll");

$("#chatter").submit(function(event){
$.ajax({
url: url + "chat",
dataType: "json",
type: "POST",
data: "message="+$("#message").val()+"&who="+$("#who").val(),
success: function(data) {
$("#message").val("").focus();
var chat = $("#chat");
if(data.status == "ok") {
chat.triggerHandler("posted", [data.message]);
} else if(data.status == "error") {
chat.triggerHandler("error", [data.error]);
} else {
alert("epic fail!");
}
}
});
return false;
});

$("#message").keyup(function(event) {
if (!typeTimer) {
typeTimer = setTimeout('tellType()', 100);
}
return false;
});
wavename = window.location;
wavename = RegExp("http://[^/]*"+"/([^/]*)/.*").exec(wavename)[1];
$('#goto-wave').attr('value', wavename);

$('#goto-wave').keydown(function(e){
if(window.event)
key = window.event.keyCode; //IE
else
key = e.which; //firefox
if (key == 13) {
$('#goto-wave-submit').click();
}
});
$('#goto-wave-submit').click(function(){
window.location = "/" + $('#goto-wave').attr('value') + "/";
});


$("#message").attr("autocomplete", "off").focus();
});
})(jQuery);


typeTimer = 0; <div id="footer">
function tellTypeSuccess(data) <!-- <p>footer</p> -->
{ </div>
var chat = $("#chat"); </div>
if(data.status == "ok") {
chat.triggerHandler("posted", [data.message]);
} else if(data.status == "error") {
chat.triggerHandler("error", [data.error]);
} else {
alert("epic fail!");
}
}


function tellType() <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
{
clearTimeout(typeTimer);
typeTimer = 0;
$.ajax({
url: url + "type",
dataType: "json",
type: "POST",
data: "keys="+$("#message").val()+"&who="+$("#who").val(),
success: tellTypeSuccess
});
}


// Show me the source easter egg. <script type="text/javascript" id="script" src="/static/lightwave.js"></script>
$("#header").
/* append([
'<p class="source">',
'(show me the <a href="#footer">source</a>.)',
'</p>'
].join("")
). */
click(function(event) {
var target = event.target;
if(target.nodeName.toLowerCase() === "a" &&
$(target.parentNode).hasClass("source")) {

$("#doc").append([
'<pre id="source">',
$("#script").
html().
replace(/</g, "&lt;").
replace(/>/g, "&gt;").
replace(/([.\-+()<>=;]|\s)(typeof|in|if|else|for|var|this|new|function)([.\-+()<>=;]|\s)/g, "$1<b>$2</b>$3").
replace(/(\/\/.*)/g, "<i>$1</i>").
replace(/('.*?')/g, "<em>$1</em>").
replace(/(".*?")/g, "<em>$1</em>").
replace(/(\d+)/g, "<strong>$1</strong>"),
'</pre>'
].join(""));
$(".source", this).remove();
}
});
</script>
<!--<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>


<!--
<script src="http://www.google-analytics.com/urchin.js"
type="text/javascript"></script>
<script type="text/javascript"> <script type="text/javascript">
_uacct = "UA-655836-1"; _uacct = "UA-655836-1";
if(typeof urchinTracker !== "undefined") if(typeof urchinTracker !== "undefined")
urchinTracker(); urchinTracker();
</script>--> </script>-->

</body> </body>
</html> </html>

41 changes: 41 additions & 0 deletions priv/www/static/lightwave.css
View file
@@ -0,0 +1,41 @@
.js .nojs{display:none;}

html, body {margin:0;padding:0;}
body {background:#fff;color:#222;font:62.5% "Helvetica Neue",Helvetica,Arial,sans-serif;text-align:center;}
#doc {text-align:left;margin:0 auto;font-size:1em;width:80%;}
#header {text-align:center;margin:2em 0;}
#header * {margin:0;}
#header h1 {color:#333;}
h1, h2, h3 {letter-spacing:-1px;}

.source {font-size:.8em;color:#000;}
pre {font-size:.9em;background-color:#ffc;overflow-x:auto;}
pre em {color:#009;}
pre b {color:#900;}
pre strong {color:#099;}
pre i,
pre i *{color:#090;}

#menu {
text-align: center;
width: 100%;
font-size: 2em;
}

/* Chat */
#chat .who {
width: 15em;
color: white;
background-color: black;
}
#chat {border:2px solid #000;width:100%;height:30em;overflow:auto;}
#chat ol {margin:0px;padding:5px;list-style:none;}
#chat tr {border-bottom:1px solid #eee;padding:5px 10px;}
#chat tr.typer {border-bottom:1px solid #eee;padding:5px 10px;background-color: #aaa; }
#chat .error {color:#f00;}

#chatter {padding:5px;}
#chatter label {color:#999;width:18%;text-align:right;display:block;float:left;line-height:1.5em;}
#chatter input {width:60%;font-size:1em;margin:0 2px;}
#chatter .submit {width:auto;width:18%;}

0 comments on commit 4060f38

Please sign in to comment.