Skip to content

Commit

Permalink
Add theming, persist options on test page, separate out test page js.
Browse files Browse the repository at this point in the history
  • Loading branch information
@Shinmera
Shinmera committed Nov 23, 2017
1 parent 91ab260 commit 6a80474
Show file tree
Hide file tree
Showing 4 changed files with 345 additions and 213 deletions.
110 changes: 23 additions & 87 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,18 +5,31 @@
<title>Lichat-JS Client Library</title>
<link rel="stylesheet" type="text/css" href="lichat.css" />
</head>
<body>
<body class="light">
<noscript>
JavaScript is required for this to work. Sorry!
</noscript>
<div class="status" style="display:none"></div>
<form class="login" action="#">
<h1>Log In to Lichat</h1>
<div><label>Username</label><input type="text" name="username" maxlength="32" placeholder="My Name" required autofocus /></div>
<div><label>Password (optional)</label><input type="password" name="password" placeholder="" /></div>
<div><label>Server Hostname</label><input type="text" name="hostname" value="localhost" required /></div>
<div><label>Server Port</label><input type="number" name="port" min="1" max="65535" value="1113" placeholder="1113" required /></div>
<div><label>Channel</label><input type="text" name="channel" value="stevenchan" maxlength="32" /></div>
<div><label>Username</label>
<input type="text" name="username" maxlength="32" placeholder="My Name" required autofocus />
</div>
<div><label>Password (optional)</label>
<input type="password" name="password" placeholder="" />
</div>
<div><label>Server Hostname</label>
<input type="text" name="hostname" value="localhost" required />
</div>
<div><label>Server Port</label>
<input type="number" name="port" min="1" max="65535" value="1113" placeholder="1113" required />
</div>
<div><label>Channel</label>
<input type="text" name="channel" value="" maxlength="32" />
</div>
<div><label>Theme</label>
<select name="theme"><option value="light">Light</option><option value="dark">Dark</option></select>
</div>
<input type="submit" value="Connect" />
</form>
<main class="chat" style="display:none">
Expand All @@ -27,9 +40,9 @@ <h2>Channels</h2>
</div>
<div class="chat-area">
<nav class="menu">
<a data-action="create">Create</a>
<a data-action="join">Join</a>
<a data-action="leave">Leave</a>
<a data-action="create" title="Create a new channel.">Create</a>
<a data-action="join" title="Join a channel.">Join</a>
<a data-action="leave" title="Leave this channel.">Leave</a>
</nav>
<div class="lichat-output">
</div>
Expand All @@ -49,83 +62,6 @@ <h2>Users</h2>
</div>
</main>
<script type="text/javascript" src="lichat.js"></script>
<script type="text/javascript">
var login = document.querySelector(".login");
var stat = document.querySelector(".status");
var chat = document.querySelector(".chat");
var menu = document.querySelector(".menu");
var client = new LichatClient();
var ui = new LichatUI(chat, client);

var fail = function(reason){
chat.style.display = "none";
stat.style.display = "block";
login.style.display = "block";
stat.innerHTML = reason;
window.onbeforeunload = ()=>{
return true;
};
ui.reset();
};

client.handleFailure = (e)=>{
console.log("Failure:",e);
fail(e+"");
};

client.addHandler("DISCONNECT", (client,update)=>{
fail("Disconnected");
});

client.addHandler("CONNECT", (client,update)=>{
stat.style.display = "none";
chat.style.display = "";

var channel = login.querySelector("input[name=channel]").value;
if(channel){
setTimeout(()=> ui.invokeCommand("join", channel), 500);
}

window.onbeforeunload = ()=>{
return "Are you sure you want to leave?";
};
});

login.addEventListener("submit", (ev)=>{
ev.preventDefault()
login.style.display = "none";
client.username = login.querySelector("input[name=username]").value;
client.password = login.querySelector("input[name=password]").value;
client.hostname = login.querySelector("input[name=hostname]").value;
client.port = parseInt(login.querySelector("input[name=port]").value);
stat.style.display = "block";
stat.innerHTML = "Connecting...";
client.openConnection();
return false;
}, false);

chat.querySelector("[type=submit]").addEventListener("click", (ev)=>{
ui.processInput();
}, false);

chat.querySelector("[type=file]").addEventListener("change", (ev)=>{
ui.sendFile(chat.querySelector("[type=file]").files[0]);
chat.querySelector("[type=file]").value = null;
}, false);

menu.querySelector("[data-action=create]").addEventListener("click", (ev)=>{
var name = prompt("Please enter a channel name:");
if(name) ui.invokeCommand("create", name);
}, false);

menu.querySelector("[data-action=join]").addEventListener("click", (ev)=>{
var name = prompt("Please enter a channel name:");
if(name) ui.invokeCommand("join", name);
}, false);

menu.querySelector("[data-action=leave]").addEventListener("click", (ev)=>{
if(name) ui.invokeCommand("leave");
}, false);
</script>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
114 changes: 114 additions & 0 deletions index.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,114 @@
var login = document.querySelector(".login");
var stat = document.querySelector(".status");
var chat = document.querySelector(".chat");
var menu = document.querySelector(".menu");
var client = new LichatClient();
var ui = new LichatUI(chat, client);

var fail = function(reason){
chat.style.display = "none";
stat.style.display = "block";
login.style.display = "block";
stat.innerHTML = reason;
window.onbeforeunload = ()=>{
return true;
};
ui.reset();
};

var save = (name, value)=>{
if(window.localStorage){
window.localStorage.setItem(name, JSON.stringify(value));
}
return value;
};

var load = (name, def)=>{
if(window.localStorage){
var value = window.localStorage.getItem(name);
return (value)? JSON.parse(value) : def;
}else{
return def;
}
};

var setup = ()=>{
login.querySelector("input[name=username]").value = load("username", "Lion");
login.querySelector("input[name=password]").value = load("password", "");
login.querySelector("input[name=hostname]").value = load("hostname", "localhost");
login.querySelector("input[name=port]").value = load("port", "1113");
login.querySelector("input[name=channel]").value = load("channel", "");
login.querySelector("select[name=theme]").value = load("theme", "light");
document.querySelector("body").setAttribute("class", load("theme", "light"));
};

login.querySelector("[name=theme]").addEventListener("change", (ev)=>{
document.querySelector("body").setAttribute("class", ev.target.value);
save("theme", ev.target.value);
});

client.handleFailure = (e)=>{
console.log("Failure:",e);
fail(e+"");
};

client.addHandler("DISCONNECT", (client,update)=>{
fail("Disconnected");
});

client.addHandler("CONNECT", (client,update)=>{
stat.style.display = "none";
chat.style.display = "";

var channel = login.querySelector("input[name=channel]").value;
if(channel){
setTimeout(()=> ui.invokeCommand("join", channel), 500);
}

window.onbeforeunload = ()=>{
return "Are you sure you want to leave?";
};
});

login.addEventListener("submit", (ev)=>{
ev.preventDefault()
login.style.display = "none";
client.username = login.querySelector("input[name=username]").value;
client.password = login.querySelector("input[name=password]").value;
client.hostname = login.querySelector("input[name=hostname]").value;
client.port = parseInt(login.querySelector("input[name=port]").value);
save("username", client.username);
save("password", client.password);
save("hostname", client.hostname);
save("port", client.port);
save("channel", login.querySelector("input[name=channel]").value);
stat.style.display = "block";
stat.innerHTML = "Connecting...";
client.openConnection();
return false;
}, false);

chat.querySelector("[type=submit]").addEventListener("click", (ev)=>{
ui.processInput();
}, false);

chat.querySelector("[type=file]").addEventListener("change", (ev)=>{
ui.sendFile(chat.querySelector("[type=file]").files[0]);
chat.querySelector("[type=file]").value = null;
}, false);

menu.querySelector("[data-action=create]").addEventListener("click", (ev)=>{
var name = prompt("Please enter a channel name:");
if(name) ui.invokeCommand("create", name);
}, false);

menu.querySelector("[data-action=join]").addEventListener("click", (ev)=>{
var name = prompt("Please enter a channel name:");
if(name) ui.invokeCommand("join", name);
}, false);

menu.querySelector("[data-action=leave]").addEventListener("click", (ev)=>{
if(name) ui.invokeCommand("leave");
}, false);

setup();
Loading

0 comments on commit 6a80474

Please sign in to comment.