forked from GithubBackups/vichan
Merge pull request #910 from Zankaria/simple-style-select
Simple style select
This commit is contained in:
commit
568c177982
35
js/style-select-simple.js
Normal file
35
js/style-select-simple.js
Normal file
@ -0,0 +1,35 @@
|
||||
/*
|
||||
* 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/style-select-simple.js';
|
||||
* // $config['additional_javascript'][] = 'js/style-select.js'; // Conflicts with this file.
|
||||
*/
|
||||
|
||||
onReady(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.getElementsByTagName('body')[0].insertBefore(newElement, document.getElementsByTagName('body')[0].lastChild.nextSibling);
|
||||
});
|
@ -7,39 +7,47 @@
|
||||
* Released under the MIT license
|
||||
* Copyright (c) 2013 Michael Save <savetheinternet@tinyboard.org>
|
||||
* Copyright (c) 2013-2014 Marcin Łabanowski <marcin@6irc.net>
|
||||
* Copyright (c) 2025 Zankaria Auxa <zankaria.auxa@mailu.io>
|
||||
*
|
||||
* Usage:
|
||||
* $config['additional_javascript'][] = 'js/jquery.min.js';
|
||||
* $config['additional_javascript'][] = 'js/style-select.js';
|
||||
*
|
||||
* // $config['additional_javascript'][] = 'js/style-select-simple.js'; // Conflicts with this file.
|
||||
*/
|
||||
|
||||
onReady(function() {
|
||||
let stylesDiv = $('div.styles');
|
||||
let stylesSelect = $('<select></select>');
|
||||
let stylesSelect = document.createElement('select');
|
||||
stylesSelect.style.setProperty('float', 'none');
|
||||
|
||||
let i = 1;
|
||||
stylesDiv.children().each(function() {
|
||||
let opt = $('<option></option>')
|
||||
.html(this.innerHTML.replace(/(^\[|\]$)/g, ''))
|
||||
.val(i);
|
||||
if ($(this).hasClass('selected')) {
|
||||
opt.attr('selected', true);
|
||||
for (styleName in styles) {
|
||||
if (styleName) {
|
||||
let opt = document.createElement('option');
|
||||
opt.innerText = styleName;
|
||||
opt.value = i;
|
||||
if (selectedstyle == styleName) {
|
||||
opt.setAttribute('selected', true);
|
||||
}
|
||||
opt.setAttribute('id', 'style-select-' + i);
|
||||
stylesSelect.appendChild(opt);
|
||||
i++;
|
||||
}
|
||||
stylesSelect.append(opt);
|
||||
$(this).attr('id', 'style-select-' + i);
|
||||
i++;
|
||||
}
|
||||
|
||||
stylesSelect.addEventListener('change', function() {
|
||||
let sel = document.getElementById(`style-select-${this.value}`);
|
||||
sel.click();
|
||||
});
|
||||
|
||||
stylesSelect.change(function() {
|
||||
$('#style-select-' + $(this).val()).click();
|
||||
stylesSelect.addEventListener('change', function() {
|
||||
let sel = document.getElementById(`style-select-${this.value}`);
|
||||
let styleName = sel.innerHTML;
|
||||
changeStyle(styleName, sel);
|
||||
});
|
||||
|
||||
stylesDiv.hide();
|
||||
let newElement = document.createElement('div');
|
||||
newElement.className = 'styles';
|
||||
newElement.innerHTML = _('Select theme: ');
|
||||
newElement.appendChild(stylesSelect);
|
||||
|
||||
stylesDiv.after(
|
||||
$('<div id="style-select" style="float:right;margin-bottom:10px"></div>')
|
||||
.text(_('Style: '))
|
||||
.append(stylesSelect)
|
||||
);
|
||||
document.getElementsByTagName('body')[0].insertBefore(newElement, document.getElementsByTagName('body')[0].lastChild.nextSibling);
|
||||
});
|
||||
|
@ -220,26 +220,6 @@ var resourceVersion = document.currentScript.getAttribute('data-resource-version
|
||||
{% endif %}
|
||||
{% verbatim %}
|
||||
|
||||
function initStyleChooser() {
|
||||
let newElement = document.createElement('div');
|
||||
newElement.className = 'styles';
|
||||
|
||||
for (styleName in styles) {
|
||||
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.getElementsByTagName('body')[0].insertBefore(newElement, document.getElementsByTagName('body')[0].lastChild.nextSibling);
|
||||
}
|
||||
|
||||
function getCookie(cookie_name) {
|
||||
let results = document.cookie.match('(^|;) ?' + cookie_name + '=([^;]*)(;|$)');
|
||||
if (results) {
|
||||
@ -418,8 +398,6 @@ var script_settings = function(script_name) {
|
||||
};
|
||||
|
||||
function init() {
|
||||
initStyleChooser();
|
||||
|
||||
{% endverbatim %}
|
||||
{% if config.allow_delete %}
|
||||
if (document.forms.postcontrols) {
|
||||
|
Loading…
x
Reference in New Issue
Block a user