Permalink
Browse files

Extracted js and css to separate files

  • Loading branch information...
1 parent 290da00 commit 4060f38b32bc2fb987aa0d4123b6a3a7485cedc8 @ThomasHabets committed Nov 2, 2009
Showing with 287 additions and 278 deletions.
  1. +31 −272 priv/www/index.html
  2. +41 −0 priv/www/static/lightwave.css
  3. +205 −0 priv/www/static/lightwave.js
  4. +10 −6 src/lightwave_web.erl
View
@@ -4,55 +4,14 @@
<head>
<title>LightWave</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
- <style type="text/css">
-.js .nojs{display:none;}
+ <link rel="stylesheet" type="text/css" href="/static/lightwave.css" />
+ <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>
<div id="doc">
-
<div id="header">
<h1><a href=".">Lightwave - like Google Wave, only much less</a></h1>
<p>powered by MochiWeb (Erlang).</p>
@@ -62,241 +21,41 @@
Current wave: <input type="text" id="goto-wave"/>
<input type='submit' id='goto-wave-submit' value='Go to wave'/>
</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) {
- var self = this;
- $.ajax({
- url: url + "get/" + curChanTick,
- dataType: "json",
- method: "get",
- success: function(arr) {
- var ok = 0;
- for (i = 0; i < arr.length; i++) {
- data = arr[i];
- if(data.status == "ok") {
- curChanTick = data.tick + 1;
- if (data.type == "message") {
- $(self).triggerHandler("message", [data]);
- } else if (data.type == "type") {
- $(self).triggerHandler("type", [data]);
- }
- 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);
+ <div id="content">
+ <p class="nojs">
+ JavaScript <strong>must</strong> be enabled to run LightWave.
+ </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>
-typeTimer = 0;
-function tellTypeSuccess(data)
-{
- 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!");
- }
-}
+ <div id="footer">
+ <!-- <p>footer</p> -->
+ </div>
+ </div>
-function tellType()
-{
- clearTimeout(typeTimer);
- typeTimer = 0;
- $.ajax({
- url: url + "type",
- dataType: "json",
- type: "POST",
- data: "keys="+$("#message").val()+"&who="+$("#who").val(),
- success: tellTypeSuccess
- });
-}
+<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
-// Show me the source easter egg.
-$("#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 type="text/javascript" id="script" src="/static/lightwave.js"></script>
+<!--
+<script src="http://www.google-analytics.com/urchin.js"
+type="text/javascript"></script>
<script type="text/javascript">
_uacct = "UA-655836-1";
if(typeof urchinTracker !== "undefined")
urchinTracker();
</script>-->
+
</body>
</html>
-
@@ -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%;}
+
Oops, something went wrong.

0 comments on commit 4060f38

Please sign in to comment.