Add style switcher

Resolves #112.
This commit is contained in:
Trevor Slocum 2020-08-20 15:44:02 -07:00
parent 7f05618811
commit ef298d7cb0
3 changed files with 97 additions and 58 deletions

View File

@ -139,3 +139,7 @@ hr {
.adminbar a:link, .adminbar a:visited, .adminbar a:active, .adminbar a:hover { .adminbar a:link, .adminbar a:visited, .adminbar a:active, .adminbar a:hover {
text-decoration: none; text-decoration: none;
} }
#switchStylesheet {
margin-left: 5px;
}

View File

@ -23,7 +23,7 @@ EOF;
</title> </title>
<link rel="shortcut icon" href="favicon.ico"> <link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" type="text/css" href="css/global.css"> <link rel="stylesheet" type="text/css" href="css/global.css">
<link rel="stylesheet" type="text/css" href="css/futaba.css" title="Futaba"> <link rel="stylesheet" type="text/css" href="css/futaba.css" title="Futaba" id="mainStylesheet">
<link rel="alternate stylesheet" type="text/css" href="css/burichan.css" title="Burichan"> <link rel="alternate stylesheet" type="text/css" href="css/burichan.css" title="Burichan">
<script src="js/jquery.js"></script> <script src="js/jquery.js"></script>
<script src="js/tinyib.js"></script> <script src="js/tinyib.js"></script>
@ -539,6 +539,7 @@ EOF;
<div class="adminbar"> <div class="adminbar">
$cataloglink $cataloglink
[<a href="$managelink" style="text-decoration: underline;">Manage</a>] [<a href="$managelink" style="text-decoration: underline;">Manage</a>]
<select id="switchStylesheet"><option value="">Style</option><option value="futaba">Futaba</option><option value="burichan">Burichan</option></select>
</div> </div>
<div class="logo"> <div class="logo">
EOF; EOF;

View File

@ -1,77 +1,111 @@
function getCookie(name) { function getCookie(cname) {
var value = "; " + document.cookie; var name = cname + "=";
var parts = value.split("; " + name + "="); var decodedCookie = decodeURIComponent(document.cookie);
if (parts.length == 2) return parts.pop().split(";").shift(); var ca = decodedCookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
} }
function quotePost(postID) { function quotePost(postID) {
$("#message").val($("#message").val() + '>>' + postID + "\n").focus(); $("#message").val($("#message").val() + '>>' + postID + "\n").focus();
return false; return false;
} }
function reloadCAPTCHA() { function reloadCAPTCHA() {
$("#captcha").val("").focus(); $("#captcha").val("").focus();
$("#captchaimage").attr("src", $("#captchaimage").attr("src") + "#new") $("#captchaimage").attr("src", $("#captchaimage").attr("src") + "#new")
return false; return false;
} }
function expandFile(e, id){ function expandFile(e, id) {
if (e == undefined || e.which == undefined || e.which == 1) { if (e == undefined || e.which == undefined || e.which == 1) {
if ($("#thumbfile" + id).attr('expanded') != 'true') { if ($("#thumbfile" + id).attr('expanded') != 'true') {
$("#thumbfile" + id).attr('expanded', 'true'); $("#thumbfile" + id).attr('expanded', 'true');
$("#file" + id).html(decodeURIComponent($("#expand" + id).text())).css("visibility", "hidden"); $("#file" + id).html(decodeURIComponent($("#expand" + id).text())).css("visibility", "hidden");
setTimeout(function (id) { setTimeout(function (id) {
return function () { return function () {
$("#thumbfile" + id).hide(); $("#thumbfile" + id).hide();
$("#file" + id).css("visibility", "visible").show(); $("#file" + id).css("visibility", "visible").show();
} }
}(id), 100); }(id), 100);
} else { } else {
$("#file" + id).hide().html(''); $("#file" + id).hide().html('');
$("#thumbfile" + id).show().attr('expanded', 'false').scrollintoview(); $("#thumbfile" + id).show().attr('expanded', 'false').scrollintoview();
} }
return false; return false;
} }
return true; return true;
} }
$(function() { function setStylesheet(style) {
var newpostpassword = $("#newpostpassword"); document.cookie = 'tinyib_style=' + style + '; expires=Tue, 19 Jan 2038 03:14:07 UTC; path=/; SameSite=Strict';
if (newpostpassword) {
newpostpassword.change(function () {
var newpostpassword = $("#newpostpassword");
if (newpostpassword) {
var expiration_date = new Date();
expiration_date.setFullYear(expiration_date.getFullYear() + 7);
document.cookie = "tinyib_password=" + encodeURIComponent(newpostpassword.val()) + "; path=/; expires=" + expiration_date.toGMTString();
}
});
}
var password = getCookie("tinyib_password"); if ($("#mainStylesheet").attr('href').substring(0, 3) == '../') {
if (password && password != "") { $("#mainStylesheet").attr('href', '../css/' + style + '.css');
if (newpostpassword) { } else {
newpostpassword.val(password); $("#mainStylesheet").attr('href', 'css/' + style + '.css');
} }
}
var deletepostpassword = $("#deletepostpassword"); window.addEventListener('DOMContentLoaded', (event) => {
if (deletepostpassword) { var style = getCookie("tinyib_style");
deletepostpassword.val(password); if (style && style != "") {
} setStylesheet(style);
} }
if (window.location.hash) { $('#switchStylesheet').on('change', function () {
if (window.location.hash.match(/^#q[0-9]+$/i) !== null) { if (this.value == "") {
var quotePostID = window.location.hash.match(/^#q[0-9]+$/i)[0].substr(2); return;
if (quotePostID != '') { }
quotePost(quotePostID);
} setStylesheet(this.value);
} this.value = "";
} });
var newpostpassword = $("#newpostpassword");
if (newpostpassword) {
newpostpassword.change(function () {
var newpostpassword = $("#newpostpassword");
if (newpostpassword) {
var expiration_date = new Date();
expiration_date.setFullYear(expiration_date.getFullYear() + 7);
document.cookie = "tinyib_password=" + encodeURIComponent(newpostpassword.val()) + "; path=/; expires=" + expiration_date.toGMTString();
}
});
}
var password = getCookie("tinyib_password");
if (password && password != "") {
if (newpostpassword) {
newpostpassword.val(password);
}
var deletepostpassword = $("#deletepostpassword");
if (deletepostpassword) {
deletepostpassword.val(password);
}
}
if (window.location.hash) {
if (window.location.hash.match(/^#q[0-9]+$/i) !== null) {
var quotePostID = window.location.hash.match(/^#q[0-9]+$/i)[0].substr(2);
if (quotePostID != '') {
quotePost(quotePostID);
}
}
}
}); });
/* /*