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
GitHub
commit
726decb27c
|
|
@ -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';
|
||||
|
|
|
|||
|
|
@ -12,6 +12,43 @@
|
|||
|
||||
+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(){
|
||||
|
|
@ -24,6 +61,7 @@ $(function(){
|
|||
$(".output").remove();
|
||||
$("<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;
|
||||
|
|
@ -37,6 +75,7 @@ $(function(){
|
|||
|
||||
document.location.reload();
|
||||
});
|
||||
|
||||
$("<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();
|
||||
|
|
@ -44,8 +83,7 @@ $(function(){
|
|||
}
|
||||
});
|
||||
|
||||
|
||||
$("#style-select").detach().css({float:"none","margin-bottom":0}).appendTo(tab.content);
|
||||
appendStyleSelectorToTab(tab.content);
|
||||
});
|
||||
|
||||
}();
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
);
|
||||
});
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
@ -137,6 +137,17 @@ function changeStyle(styleName, link) {
|
|||
{% 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')) {
|
||||
var s = document.createElement('link');
|
||||
|
|
@ -147,7 +158,7 @@ function changeStyle(styleName, link) {
|
|||
x.appendChild(s);
|
||||
}
|
||||
|
||||
document.getElementById('stylesheet').href = styles[styleName];
|
||||
document.getElementById('stylesheet').href = styleUrl;
|
||||
selectedstyle = styleName;
|
||||
|
||||
// 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) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue