supernets/hardlounge
supernets/hardlounge
4
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add an ability to customise CSS on the client

Browse Source
This commit is contained in:
Pavel Djundik 2016-02-28 09:54:10 +02:00
parent f8eb50260f
commit 56c2530f2c
2 changed files with 28 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
client/index.html
View File

@ -15,6 +15,7 @@
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">
<link id="theme" rel="stylesheet" href="<%= theme %>">
<style id="user-specified-css"></style>
<link rel="shortcut icon" href="img/favicon.png">
<link rel="icon" sizes="192x192" href="img/touch-icon-192x192.png">
@ -290,6 +291,12 @@
</form>
</div>
<% } %>
<div class="col-sm-12">
<h2>Custom Stylesheet</h2>
</div>
<div class="col-sm-12">
<textarea class="input" name="userStyles" id="user-specified-css-input" placeholder="You can override any style with CSS here"></textarea>
</div>
<div class="col-sm-12">
<h2>About The Lounge</h2>
</div>

21
client/js/lounge.js
View File

@ -426,6 +426,7 @@ $(function() {
users.data("nicks", nicks);
});
var userStyles = $("#user-specified-css");
var settings = $("#settings");
var options = $.extend({
badge: false,
@ -440,19 +441,34 @@ $(function() {
thumbnails: true,
quit: true,
notifyAllMessages: false,
userStyles: userStyles.text(),
}, JSON.parse(window.localStorage.getItem("settings")));
for (var i in options) {
if (i === "userStyles") {
if (!/[\?&]nocss/.test(window.location.search)) {
$(document.head).find("#user-specified-css").html(options[i]);
}
settings.find("#user-specified-css-input").val(options[i]);
continue;
}
if (options[i]) {
settings.find("input[name=" + i + "]").prop("checked", true);
}
}
settings.on("change", "input", function() {
settings.on("change", "input, textarea", function() {
var self = $(this);
var name = self.attr("name");
if (self.attr("type") === "checkbox") {
options[name] = self.prop("checked");
} else {
options[name] = self.val();
}
window.localStorage.setItem("settings", JSON.stringify(options));
if ([
"join",
"mode",
@ -467,6 +483,9 @@ $(function() {
if (name === "colors") {
chat.toggleClass("no-colors", !self.prop("checked"));
}
if (name === "userStyles") {
$(document.head).find("#user-specified-css").html(options[name]);
}
}).find("input")
.trigger("change");