From eb81faadbd8b9590c35819dc1de6f8bd883fc4e7 Mon Sep 17 00:00:00 2001 From: towards-a-new-leftypol Date: Thu, 15 Jul 2021 12:11:22 +0000 Subject: [PATCH] Put style chooser into the options menu, remove any style related stuff that gets added to the footer --- inc/instance-config.php | 1 - js/options/general.js | 88 +++++++++++++++++++++++++++++------------ js/style-select.js | 55 -------------------------- stylesheets/style.css | 12 ++++++ templates/main.js | 63 +++++++++-------------------- 5 files changed, 93 insertions(+), 126 deletions(-) delete mode 100644 js/style-select.js diff --git a/inc/instance-config.php b/inc/instance-config.php index 2e181e54..6e9a4f64 100644 --- a/inc/instance-config.php +++ b/inc/instance-config.php @@ -394,7 +394,6 @@ $config['additional_javascript'][] = 'js/options.js'; $config['additional_javascript'][] = 'js/options/general.js'; $config['additional_javascript'][] = 'js/options/user-css.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/file-selector.js'; $config['additional_javascript'][] = 'js/download-original.js'; diff --git a/js/options/general.js b/js/options/general.js index c0652269..70351ecd 100644 --- a/js/options/general.js +++ b/js/options/general.js @@ -12,40 +12,78 @@ +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")); $(function(){ - var stor = $("
"+_("Storage: ")+"
"); - stor.appendTo(tab.content); + var stor = $("
"+_("Storage: ")+"
"); + stor.appendTo(tab.content); - $("").appendTo(stor).on("click", function() { - var str = JSON.stringify(localStorage); + $("").appendTo(stor).on("click", function() { + var str = JSON.stringify(localStorage); - $(".output").remove(); - $("").appendTo(stor).val(str); - }); - $("").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; + $(".output").remove(); + $("").appendTo(stor).val(str); + }); - localStorage.clear(); - for (var i in obj) { - localStorage[i] = obj[i]; - } + $("").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; - document.location.reload(); - }); - $("").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(); - } - }); + localStorage.clear(); + for (var i in obj) { + localStorage[i] = obj[i]; + } + document.location.reload(); + }); - $("#style-select").detach().css({float:"none","margin-bottom":0}).appendTo(tab.content); + $("").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); }); }(); diff --git a/js/style-select.js b/js/style-select.js deleted file mode 100644 index 485da735..00000000 --- a/js/style-select.js +++ /dev/null @@ -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 ').css({float:"none"}); - var options = []; - - var i = 1; - stylesDiv.children().each(function() { - var name = this.innerHTML.replace(/(^\[|\]$)/g, ''); - var opt = $('') - .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( - $('
') - .append(_('Select theme: '), stylesSelect) - ); -}); diff --git a/stylesheets/style.css b/stylesheets/style.css index 059416ab..f8d3d06c 100644 --- a/stylesheets/style.css +++ b/stylesheets/style.css @@ -1965,3 +1965,15 @@ span.strikethrough { span.orangeQuote { 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; +} diff --git a/templates/main.js b/templates/main.js index 024b748e..2f7ef509 100755 --- a/templates/main.js +++ b/templates/main.js @@ -110,11 +110,11 @@ var saved = {}; var selectedstyle = '{% endraw %}{{ config.default_stylesheet.0|addslashes }}{% raw %}'; -var styles = { +var styles = [ {% 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 %} -}; +]; var codestyles = { {% endraw %} {% for stylesheet in code_stylesheets %}{% raw %}'{% endraw %}{{ stylesheet.name|addslashes }}{% raw %}' : '{% endraw %}{{ stylesheet.uri|addslashes }}{% raw %}', @@ -125,7 +125,7 @@ if (typeof board_name === 'undefined') { var board_name = false; } -function changeStyle(styleName, link) { +function changeStyle(styleName) { {% endraw %} {% if config.stylesheets_board %}{% raw %} if (board_name) { @@ -136,6 +136,17 @@ function changeStyle(styleName, link) { localStorage.stylesheet = styleName; {% endif %} {% raw %} + + var styleUrl; + + // Don't store all styles in an object, it's harder to iterate over to build dom elements later + for (var i=0; i < styles.length; i++) { + var nameUrlPair = styles[i]; + + if (nameUrlPair[0] == styleName) { + styleUrl = nameUrlPair[1]; + } + } // Main stylesheet if (!document.getElementById('stylesheet')) { @@ -147,8 +158,8 @@ function changeStyle(styleName, link) { x.appendChild(s); } - document.getElementById('stylesheet').href = styles[styleName]; - selectedstyle = styleName; + document.getElementById('stylesheet').href = styleUrl; + selectedstyle = styleName; // Code stylesheet if (!document.getElementById('code_stylesheet')) { @@ -162,17 +173,6 @@ function changeStyle(styleName, link) { document.getElementById('code_stylesheet').href = codestyles[styleName]; - if (document.getElementsByClassName('styles').length != 0) { - var styleLinks = document.getElementsByClassName('styles')[0].childNodes; - for (var i = 0; i < styleLinks.length; i++) { - styleLinks[i].className = ''; - } - } - - if (link) { - link.className = 'selected'; - } - if (typeof $ != 'undefined') $(window).trigger('stylesheet', styleName); } @@ -199,37 +199,12 @@ function changeStyle(styleName, link) { {% else %} {% raw %} if (localStorage.stylesheet) { - for (var styleName in styles) { - if (styleName == localStorage.stylesheet) { - changeStyle(styleName); - break; - } - } + changeStyle(localStorage.stylesheet); } {% endraw %} {% endif %} {% 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) { var results = document.cookie.match ( '(^|;) ?' + cookie_name + '=([^;]*)(;|$)'); if (results) @@ -386,8 +361,6 @@ var script_settings = function(script_name) { }; function init() { - init_stylechooser(); - {% endraw %} {% if config.allow_delete %} if (document.forms.postcontrols) {