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/bootstrap.css">
<link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/style.css">
<link id="theme" rel="stylesheet" href="<%= theme %>"> <link id="theme" rel="stylesheet" href="<%= theme %>">
<style id="user-specified-css"></style>
<link rel="shortcut icon" href="img/favicon.png"> <link rel="shortcut icon" href="img/favicon.png">
<link rel="icon" sizes="192x192" href="img/touch-icon-192x192.png"> <link rel="icon" sizes="192x192" href="img/touch-icon-192x192.png">
@ -290,6 +291,12 @@
</form> </form>
</div> </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"> <div class="col-sm-12">
<h2>About The Lounge</h2> <h2>About The Lounge</h2>
</div> </div>

23
client/js/lounge.js
View File

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