0
/
leftypol_lainchan
1
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

Merge pull request #321 from towards-a-new-leftypol/select_style3 

Put style chooser into the options menu
This commit is contained in:
towards-a-new-leftypol 2021-08-21 18:57:43 -04:00 committed by GitHub
parent 50fec6e0e5 739bbff4ed
commit 726decb27c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 298 additions and 331 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
inc/instance-config.php
View File

@ -394,7 +394,6 @@ $config['additional_javascript'][] = 'js/options.js';
$config['additional_javascript'][] = 'js/options/general.js'; $config['additional_javascript'][] = 'js/options/general.js';
$config['additional_javascript'][] = 'js/options/user-css.js'; $config['additional_javascript'][] = 'js/options/user-css.js';
$config['additional_javascript'][] = 'js/options/user-js.js'; $config['additional_javascript'][] = 'js/options/user-js.js';
$config['additional_javascript'][] = 'js/style-select.js';
$config['additional_javascript'][] = 'js/flag-preview.js'; $config['additional_javascript'][] = 'js/flag-preview.js';
$config['additional_javascript'][] = 'js/file-selector.js'; $config['additional_javascript'][] = 'js/file-selector.js';
$config['additional_javascript'][] = 'js/download-original.js'; $config['additional_javascript'][] = 'js/download-original.js';

88
js/options/general.js
View File

@ -12,40 +12,78 @@
+function(){ +function(){
function styleShitChoicer() {
var savedChoice = localStorage.stylesheet;
var e_select = document.createElement("select");
e_select.name = "opt-style-select";
for (var i=0; i < styles.length; i++) {
var styleName = styles[i][0];
var e_option = document.createElement("option");
e_option.innerHTML = styleName;
e_option.value = styleName;
if (styleName == savedChoice) {
e_option.selected = true;
}
e_select.appendChild(e_option);
}
e_select.addEventListener('change', function(e) {
changeStyle(e.target.value);
});
return e_select;
}
function appendStyleSelectorToTab(tab_content) {
var div = document.createElement('div');
div.className = "options_general_tab--select_opt";
var label = document.createElement('span');
label.innerHTML = "Theme: ";
div.appendChild(label);
div.appendChild(styleShitChoicer());
$(div).appendTo(tab_content);
}
var tab = Options.add_tab("general", "home", _("General")); var tab = Options.add_tab("general", "home", _("General"));
$(function(){ $(function(){
var stor = $("<div>"+_("Storage: ")+"</div>"); var stor = $("<div>"+_("Storage: ")+"</div>");
stor.appendTo(tab.content); stor.appendTo(tab.content);
$("<button>"+_("Export")+"</button>").appendTo(stor).on("click", function() { $("<button>"+_("Export")+"</button>").appendTo(stor).on("click", function() {
var str = JSON.stringify(localStorage); var str = JSON.stringify(localStorage);
$(".output").remove(); $(".output").remove();
$("<input type='text' class='output'>").appendTo(stor).val(str); $("<input type='text' class='output'>").appendTo(stor).val(str);
}); });
$("<button>"+_("Import")+"</button>").appendTo(stor).on("click", function() {
var str = prompt(_("Paste your storage data"));
if (!str) return false;
var obj = JSON.parse(str);
if (!obj) return false;
localStorage.clear(); $("<button>"+_("Import")+"</button>").appendTo(stor).on("click", function() {
for (var i in obj) { var str = prompt(_("Paste your storage data"));
localStorage[i] = obj[i]; if (!str) return false;
} var obj = JSON.parse(str);
if (!obj) return false;
document.location.reload(); localStorage.clear();
}); for (var i in obj) {
$("<button>"+_("Erase")+"</button>").appendTo(stor).on("click", function() { localStorage[i] = obj[i];
if (confirm(_("Are you sure you want to erase your storage? This involves your hidden threads, watched threads, post password and many more."))) { }
localStorage.clear();
document.location.reload();
}
});
document.location.reload();
});
$("#style-select").detach().css({float:"none","margin-bottom":0}).appendTo(tab.content); $("<button>"+_("Erase")+"</button>").appendTo(stor).on("click", function() {
if (confirm(_("Are you sure you want to erase your storage? This involves your hidden threads, watched threads, post password and many more."))) {
localStorage.clear();
document.location.reload();
}
});
appendStyleSelectorToTab(tab.content);
}); });
}(); }();

55
js/style-select.js
View File

@ -1,55 +0,0 @@
/*
* style-select.js
* https://github.com/savetheinternet/Tinyboard/blob/master/js/style-select.js
*
* Changes the stylesheet chooser links to a <select>
*
* Released under the MIT license
* Copyright (c) 2013 Michael Save <savetheinternet@tinyboard.org>
* Copyright (c) 2013-2014 Marcin Łabanowski <marcin@6irc.net>
*
* Usage:
* $config['additional_javascript'][] = 'js/jquery.min.js';
* $config['additional_javascript'][] = 'js/style-select.js';
*
*/
$(document).ready(function() {
var stylesDiv = $('div.styles');
var pages = $('div.pages');
var stylesSelect = $('<select></select>').css({float:"none"});
var options = [];
var i = 1;
stylesDiv.children().each(function() {
var name = this.innerHTML.replace(/(^\[|\]$)/g, '');
var opt = $('<option></option>')
.html(name)
.val(i);
if ($(this).hasClass('selected'))
opt.attr('selected', true);
options.push ([name.toUpperCase (), opt]);
$(this).attr('id', 'style-select-' + i);
i++;
});
options.sort ((a, b) => {
const keya = a [0];
const keyb = b [0];
if (keya < keyb) { return -1; }
if (keya > keyb) { return 1; }
return 0;
}).forEach (([key, opt]) => {
stylesSelect.append(opt);
});
stylesSelect.change(function() {
$('#style-select-' + $(this).val()).click();
});
stylesDiv.hide()
pages.after(
$('<div id="style-select"></div>')
.append(_('Select theme: '), stylesSelect)
);
});

12
stylesheets/style.css
View File

@ -1965,3 +1965,15 @@ span.strikethrough {
span.orangeQuote { span.orangeQuote {
color: #FF8C00; color: #FF8C00;
} }
.options_general_tab--select_opt {
height: 2.5em;
}
.options_general_tab--select_opt span {
line-height: 2.5em;
}
.options_general_tab--select_opt select {
float: none;
}

439
templates/main.js
View File

@ -7,7 +7,7 @@
* Witaj! * Witaj!
*/ */
function _(s) { function _(s) {
return (typeof l10n != 'undefined' && typeof l10n[s] != 'undefined') ? l10n[s] : s; return (typeof l10n != 'undefined' && typeof l10n[s] != 'undefined') ? l10n[s] : s;
} }
/* printf-like formatting function, example of usage: /* printf-like formatting function, example of usage:
@ -19,7 +19,7 @@ function _(s) {
* 3 uzytkownikow * 3 uzytkownikow
*/ */
function fmt(s,a) { function fmt(s,a) {
return s.replace(/\{([0-9]+)\}/g, function(x) { return a[x[1]]; }); return s.replace(/\{([0-9]+)\}/g, function(x) { return a[x[1]]; });
} }
function until($timestamp) { function until($timestamp) {
@ -110,309 +110,282 @@ var saved = {};
var selectedstyle = '{% endraw %}{{ config.default_stylesheet.0|addslashes }}{% raw %}'; var selectedstyle = '{% endraw %}{{ config.default_stylesheet.0|addslashes }}{% raw %}';
var styles = { var styles = [
{% endraw %} {% endraw %}
{% for stylesheet in stylesheets %}{% raw %}'{% endraw %}{{ stylesheet.name|addslashes }}{% raw %}' : '{% endraw %}{{ stylesheet.uri|addslashes }}{% raw %}', {% for stylesheet in stylesheets %}{% raw %}['{% endraw %}{{ stylesheet.name|addslashes }}{% raw %}', '{% endraw %}{{ stylesheet.uri|addslashes }}{% raw %}'],
{% endraw %}{% endfor %}{% raw %} {% endraw %}{% endfor %}{% raw %}
}; ];
var codestyles = { var codestyles = {
{% endraw %} {% endraw %}
{% for stylesheet in code_stylesheets %}{% raw %}'{% endraw %}{{ stylesheet.name|addslashes }}{% raw %}' : '{% endraw %}{{ stylesheet.uri|addslashes }}{% raw %}', {% for stylesheet in code_stylesheets %}{% raw %}'{% endraw %}{{ stylesheet.name|addslashes }}{% raw %}' : '{% endraw %}{{ stylesheet.uri|addslashes }}{% raw %}',
{% endraw %}{% endfor %}{% raw %} {% endraw %}{% endfor %}{% raw %}
}; };
if (typeof board_name === 'undefined') { if (typeof board_name === 'undefined') {
var board_name = false; var board_name = false;
} }
function changeStyle(styleName, link) { function changeStyle(styleName) {
{% endraw %} {% endraw %}
{% if config.stylesheets_board %}{% raw %} {% if config.stylesheets_board %}{% raw %}
if (board_name) { if (board_name) {
stylesheet_choices[board_name] = styleName; stylesheet_choices[board_name] = styleName;
localStorage.board_stylesheets = JSON.stringify(stylesheet_choices); localStorage.board_stylesheets = JSON.stringify(stylesheet_choices);
} }
{% endraw %}{% else %} {% endraw %}{% else %}
localStorage.stylesheet = styleName; localStorage.stylesheet = styleName;
{% endif %} {% endif %}
{% raw %} {% raw %}
// Main stylesheet var styleUrl;
if (!document.getElementById('stylesheet')) {
var s = document.createElement('link');
s.rel = 'stylesheet';
s.type = 'text/css';
s.id = 'stylesheet';
var x = document.getElementsByTagName('head')[0];
x.appendChild(s);
}
document.getElementById('stylesheet').href = styles[styleName]; // Don't store all styles in an object, it's harder to iterate over to build dom elements later
selectedstyle = styleName; for (var i=0; i < styles.length; i++) {
var nameUrlPair = styles[i];
// Code stylesheet if (nameUrlPair[0] == styleName) {
if (!document.getElementById('code_stylesheet')) { styleUrl = nameUrlPair[1];
var s = document.createElement('link'); }
s.rel = 'stylesheet'; }
s.type = 'text/css';
s.id = 'code_stylesheet';
var x = document.getElementsByTagName('head')[0];
x.appendChild(s);
}
document.getElementById('code_stylesheet').href = codestyles[styleName]; // Main stylesheet
if (!document.getElementById('stylesheet')) {
var s = document.createElement('link');
s.rel = 'stylesheet';
s.type = 'text/css';
s.id = 'stylesheet';
var x = document.getElementsByTagName('head')[0];
x.appendChild(s);
}
if (document.getElementsByClassName('styles').length != 0) { document.getElementById('stylesheet').href = styleUrl;
var styleLinks = document.getElementsByClassName('styles')[0].childNodes; selectedstyle = styleName;
for (var i = 0; i < styleLinks.length; i++) {
styleLinks[i].className = '';
}
}
if (link) { // Code stylesheet
link.className = 'selected'; if (!document.getElementById('code_stylesheet')) {
} var s = document.createElement('link');
s.rel = 'stylesheet';
s.type = 'text/css';
s.id = 'code_stylesheet';
var x = document.getElementsByTagName('head')[0];
x.appendChild(s);
}
if (typeof $ != 'undefined') document.getElementById('code_stylesheet').href = codestyles[styleName];
$(window).trigger('stylesheet', styleName);
if (typeof $ != 'undefined')
$(window).trigger('stylesheet', styleName);
} }
{% endraw %} {% endraw %}
{% if config.stylesheets_board %} {% if config.stylesheets_board %}
{% raw %} {% raw %}
if (!localStorage.board_stylesheets) { if (!localStorage.board_stylesheets) {
localStorage.board_stylesheets = '{}'; localStorage.board_stylesheets = '{}';
} }
var stylesheet_choices = JSON.parse(localStorage.board_stylesheets); var stylesheet_choices = JSON.parse(localStorage.board_stylesheets);
if (board_name && stylesheet_choices[board_name]) { if (board_name && stylesheet_choices[board_name]) {
for (var styleName in styles) { for (var styleName in styles) {
if (styleName == stylesheet_choices[board_name]) { if (styleName == stylesheet_choices[board_name]) {
changeStyle(styleName); changeStyle(styleName);
break; break;
} }
} }
} }
{% endraw%} {% endraw%}
{% else %} {% else %}
{% raw %} {% raw %}
if (localStorage.stylesheet) { if (localStorage.stylesheet) {
for (var styleName in styles) { changeStyle(localStorage.stylesheet);
if (styleName == localStorage.stylesheet) { }
changeStyle(styleName); {% endraw %}
break;
}
}
}
{% endraw %}
{% endif %} {% endif %}
{% raw %} {% raw %}
function init_stylechooser() {
var newElement = document.createElement('div');
newElement.className = 'styles';
for (styleName in styles) {
var style = document.createElement('a');
style.innerHTML = '[' + styleName + ']';
style.onclick = function() {
changeStyle(this.innerHTML.substring(1, this.innerHTML.length - 1), this);
};
if (styleName == selectedstyle) {
style.className = 'selected';
}
style.href = 'javascript:void(0);';
newElement.appendChild(style);
}
document.getElementsByTagName('body')[0].insertBefore(newElement, document.getElementsByTagName('body')[0].lastChild.nextSibling);
}
function get_cookie(cookie_name) { function get_cookie(cookie_name) {
var results = document.cookie.match ( '(^|;) ?' + cookie_name + '=([^;]*)(;|$)'); var results = document.cookie.match ( '(^|;) ?' + cookie_name + '=([^;]*)(;|$)');
if (results) if (results)
return (unescape(results[2])); return (unescape(results[2]));
else else
return null; return null;
} }
function highlightReply(id) { function highlightReply(id) {
if (typeof window.event != "undefined" && event.which == 2) { if (typeof window.event != "undefined" && event.which == 2) {
// don't highlight on middle click // don't highlight on middle click
return true; return true;
} }
var divs = document.getElementsByTagName('div'); var divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) for (var i = 0; i < divs.length; i++)
{ {
if (divs[i].className.indexOf('post') != -1) if (divs[i].className.indexOf('post') != -1)
divs[i].className = divs[i].className.replace(/highlighted/, ''); divs[i].className = divs[i].className.replace(/highlighted/, '');
} }
if (id) { if (id) {
var post = document.getElementById('reply_'+id); var post = document.getElementById('reply_'+id);
if (post) if (post)
post.className += ' highlighted'; post.className += ' highlighted';
window.location.hash = id; window.location.hash = id;
} }
return true; return true;
} }
function generatePassword() { function generatePassword() {
var pass = ''; var pass = '';
var chars = '{% endraw %}{{ config.genpassword_chars }}{% raw %}'; var chars = '{% endraw %}{{ config.genpassword_chars }}{% raw %}';
for (var i = 0; i < 8; i++) { for (var i = 0; i < 8; i++) {
var rnd = Math.floor(Math.random() * chars.length); var rnd = Math.floor(Math.random() * chars.length);
pass += chars.substring(rnd, rnd + 1); pass += chars.substring(rnd, rnd + 1);
} }
return pass; return pass;
} }
function dopost(form) { function dopost(form) {
if (form.elements['name']) { if (form.elements['name']) {
localStorage.name = form.elements['name'].value.replace(/( |^)## .+$/, ''); localStorage.name = form.elements['name'].value.replace(/( |^)## .+$/, '');
} }
if (form.elements['password']) { if (form.elements['password']) {
localStorage.password = form.elements['password'].value; localStorage.password = form.elements['password'].value;
} }
if (form.elements['email'] && form.elements['email'].value != 'sage') { if (form.elements['email'] && form.elements['email'].value != 'sage') {
localStorage.email = form.elements['email'].value; localStorage.email = form.elements['email'].value;
} }
saved[document.location] = form.elements['body'].value; saved[document.location] = form.elements['body'].value;
sessionStorage.body = JSON.stringify(saved); sessionStorage.body = JSON.stringify(saved);
return form.elements['body'].value != "" || (form.elements['file'] && form.elements['file'].value != "") || (form.elements.file_url && form.elements['file_url'].value != ""); return form.elements['body'].value != "" || (form.elements['file'] && form.elements['file'].value != "") || (form.elements.file_url && form.elements['file_url'].value != "");
} }
function reloadCaptcha() { function reloadCaptcha() {
// Reload captcha images (date reduces chance of caching) // Reload captcha images (date reduces chance of caching)
// If no securimage captcha is enabled, no elements will be found // If no securimage captcha is enabled, no elements will be found
captchaImgs = document.querySelectorAll('[id=captcha-img]'); captchaImgs = document.querySelectorAll('[id=captcha-img]');
for (var i = 0; i < captchaImgs.length; ++i) for (var i = 0; i < captchaImgs.length; ++i)
captchaImgs[i].src = "/captcha.php?"+Date.now(); captchaImgs[i].src = "/captcha.php?"+Date.now();
captchas = document.querySelectorAll('[id=captcha]'); captchas = document.querySelectorAll('[id=captcha]');
for (var i = 0; i < captchas.length; ++i) for (var i = 0; i < captchas.length; ++i)
captchas[i].value = ""; captchas[i].value = "";
} }
function citeReply(id, with_link) { function citeReply(id, with_link) {
var textarea = document.getElementById('body'); var textarea = document.getElementById('body');
if (!textarea) return false; if (!textarea) return false;
if (document.selection) { if (document.selection) {
// IE // IE
textarea.focus(); textarea.focus();
var sel = document.selection.createRange(); var sel = document.selection.createRange();
sel.text = '>>' + id + '\n'; sel.text = '>>' + id + '\n';
} else if (textarea.selectionStart || textarea.selectionStart == '0') { } else if (textarea.selectionStart || textarea.selectionStart == '0') {
var start = textarea.selectionStart; var start = textarea.selectionStart;
var end = textarea.selectionEnd; var end = textarea.selectionEnd;
textarea.value = textarea.value.substring(0, start) + '>>' + id + '\n' + textarea.value.substring(end, textarea.value.length); textarea.value = textarea.value.substring(0, start) + '>>' + id + '\n' + textarea.value.substring(end, textarea.value.length);
textarea.selectionStart += ('>>' + id).length + 1; textarea.selectionStart += ('>>' + id).length + 1;
textarea.selectionEnd = textarea.selectionStart; textarea.selectionEnd = textarea.selectionStart;
} else { } else {
// ??? // ???
textarea.value += '>>' + id + '\n'; textarea.value += '>>' + id + '\n';
} }
if (typeof $ != 'undefined') { if (typeof $ != 'undefined') {
var select = document.getSelection().toString(); var select = document.getSelection().toString();
if (select) { if (select) {
var body = $('#reply_' + id + ', #op_' + id).find('div.body'); // TODO: support for OPs var body = $('#reply_' + id + ', #op_' + id).find('div.body'); // TODO: support for OPs
var index = body.text().indexOf(select.replace('\n', '')); // for some reason this only works like this var index = body.text().indexOf(select.replace('\n', '')); // for some reason this only works like this
if (index > -1) { if (index > -1) {
textarea.value += '>' + select + '\n'; textarea.value += '>' + select + '\n';
} }
} }
$(window).trigger('cite', [id, with_link]); $(window).trigger('cite', [id, with_link]);
$(textarea).change(); $(textarea).change();
} }
return false; return false;
} }
function rememberStuff() { function rememberStuff() {
if (document.forms.post) { if (document.forms.post) {
if (document.forms.post.password) { if (document.forms.post.password) {
if (!localStorage.password) if (!localStorage.password)
localStorage.password = generatePassword(); localStorage.password = generatePassword();
document.forms.post.password.value = localStorage.password; document.forms.post.password.value = localStorage.password;
} }
if (localStorage.name && document.forms.post.elements['name']) if (localStorage.name && document.forms.post.elements['name'])
document.forms.post.elements['name'].value = localStorage.name; document.forms.post.elements['name'].value = localStorage.name;
if (localStorage.email && document.forms.post.elements['email']) if (localStorage.email && document.forms.post.elements['email'])
document.forms.post.elements['email'].value = localStorage.email; document.forms.post.elements['email'].value = localStorage.email;
if (window.location.hash.indexOf('q') == 1) if (window.location.hash.indexOf('q') == 1)
citeReply(window.location.hash.substring(2), true); citeReply(window.location.hash.substring(2), true);
if (sessionStorage.body) { if (sessionStorage.body) {
var saved = JSON.parse(sessionStorage.body); var saved = JSON.parse(sessionStorage.body);
if (get_cookie('{% endraw %}{{ config.cookies.js }}{% raw %}')) { if (get_cookie('{% endraw %}{{ config.cookies.js }}{% raw %}')) {
// Remove successful posts // Remove successful posts
var successful = JSON.parse(get_cookie('{% endraw %}{{ config.cookies.js }}{% raw %}')); var successful = JSON.parse(get_cookie('{% endraw %}{{ config.cookies.js }}{% raw %}'));
for (var url in successful) { for (var url in successful) {
saved[url] = null; saved[url] = null;
} }
sessionStorage.body = JSON.stringify(saved); sessionStorage.body = JSON.stringify(saved);
document.cookie = '{% endraw %}{{ config.cookies.js }}{% raw %}={};expires=0;path=/;'; document.cookie = '{% endraw %}{{ config.cookies.js }}{% raw %}={};expires=0;path=/;';
} }
if (saved[document.location]) { if (saved[document.location]) {
document.forms.post.body.value = saved[document.location]; document.forms.post.body.value = saved[document.location];
} }
} }
if (localStorage.body) { if (localStorage.body) {
document.forms.post.body.value = localStorage.body; document.forms.post.body.value = localStorage.body;
localStorage.body = ''; localStorage.body = '';
} }
} }
} }
var script_settings = function(script_name) { var script_settings = function(script_name) {
this.script_name = script_name; this.script_name = script_name;
this.get = function(var_name, default_val) { this.get = function(var_name, default_val) {
if (typeof tb_settings == 'undefined' || if (typeof tb_settings == 'undefined' ||
typeof tb_settings[this.script_name] == 'undefined' || typeof tb_settings[this.script_name] == 'undefined' ||
typeof tb_settings[this.script_name][var_name] == 'undefined') typeof tb_settings[this.script_name][var_name] == 'undefined')
return default_val; return default_val;
return tb_settings[this.script_name][var_name]; return tb_settings[this.script_name][var_name];
} }
}; };
function init() { function init() {
init_stylechooser(); {% endraw %}
{% if config.allow_delete %}
if (document.forms.postcontrols) {
document.forms.postcontrols.password.value = localStorage.password;
}
{% endif %}
{% raw %}
{% endraw %} if (window.location.hash.indexOf('q') != 1 && window.location.hash.substring(1))
{% if config.allow_delete %} highlightReply(window.location.hash.substring(1));
if (document.forms.postcontrols) {
document.forms.postcontrols.password.value = localStorage.password;
}
{% endif %}
{% raw %}
if (window.location.hash.indexOf('q') != 1 && window.location.hash.substring(1))
highlightReply(window.location.hash.substring(1));
} }
var RecaptchaOptions = { var RecaptchaOptions = {
theme : 'clean' theme : 'clean'
}; };
onready_callbacks = []; onready_callbacks = [];
function onready(fnc) { function onready(fnc) {
onready_callbacks.push(fnc); onready_callbacks.push(fnc);
} }
function ready() { function ready() {
for (var i = 0; i < onready_callbacks.length; i++) { for (var i = 0; i < onready_callbacks.length; i++) {
onready_callbacks[i](); onready_callbacks[i]();
} }
} }
{% endraw %} {% endraw %}