Merge branch '44-extract-the-default-theme-selection-buttons-to-js' into 'config'

Resolve "Extract the default theme selection buttons to JS"

Closes #44

See merge request leftypol/leftypol!26
This commit is contained in:
Zankaria Auxa 2025-02-05 23:54:29 +00:00
commit fd0e3113b3
3 changed files with 68 additions and 50 deletions

36
js/style-select-simple.js Normal file
View file

@ -0,0 +1,36 @@
/*
* style-select-simple.js
*
* Changes the stylesheet chooser links to a <select>
*
* Released under the MIT license
* Copyright (c) 2025 Zankaria Auxa <zankaria.auxa@mailu.io>
*
* Usage:
* $config['additional_javascript'][] = 'js/jquery.min.js';
* // $config['additional_javascript'][] = 'js/style-select.js'; // Conflicts with this file.
* $config['additional_javascript'][] = 'js/style-select-simple.js';
*/
$(document).ready(function() {
let newElement = document.createElement('div');
newElement.className = 'styles';
// styles is defined in main.js.
for (styleName in styles) {
if (styleName) {
let 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.getElementById('bottom-hud').before(newElement);
});

View file

@ -11,43 +11,48 @@
* 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 = [];
let pages = $('div.pages');
let stylesSelect = $('<select></select>').css({float:"none"});
let options = [];
var i = 1;
stylesDiv.children().each(function() {
var name = this.innerHTML.replace(/(^\[|\]$)/g, '');
var opt = $('<option></option>')
.html(name)
let i = 1;
for (styleName in styles) {
if (styleName) {
let opt = $('<option></option>')
.html(styleName)
.val(i);
if ($(this).hasClass('selected'))
if (selectedstyle == styleName) {
opt.attr('selected', true);
options.push ([name.toUpperCase (), opt]);
$(this).attr('id', 'style-select-' + i);
}
opt.attr('id', 'style-select-' + i);
options.push([styleName.toUpperCase (), opt]);
i++;
});
}
}
options.sort ((a, b) => {
options.sort((a, b) => {
const keya = a [0];
const keyb = b [0];
if (keya < keyb) { return -1; }
if (keya > keyb) { return 1; }
if (keya < keyb) {
return -1;
}
if (keya > keyb) {
return 1;
}
return 0;
}).forEach (([key, opt]) => {
}).forEach(([key, opt]) => {
stylesSelect.append(opt);
});
stylesSelect.change(function() {
$('#style-select-' + $(this).val()).click();
let sel = $(this).find(":selected")[0];
let styleName = sel.innerHTML;
changeStyle(styleName, sel);
});
stylesDiv.hide()
pages.after(
$('<div id="style-select"></div>')
.append(_('Select theme: '), stylesSelect)

View file

@ -231,28 +231,6 @@ var resourceVersion = document.currentScript.getAttribute('data-resource-version
{% endif %}
{% raw %}
function initStyleChooser() {
var newElement = document.createElement('div');
newElement.className = 'styles';
for (styleName in styles) {
if (styleName) {
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.getElementById('bottom-hud').before(newElement);
}
function getCookie(cookie_name) {
let results = document.cookie.match('(^|;) ?' + cookie_name + '=([^;]*)(;|$)');
if (results) {
@ -528,7 +506,6 @@ var script_settings = function(script_name) {
};
function init() {
initStyleChooser();
initCaptcha();
{% endraw %}