Put style chooser into the options menu, remove any style related stuff that gets added to the footer

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';

js/options/general.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(){
         }
     });
 
-
+    appendStyleSelectorToTab(tab.content);
-  $("#style-select").detach().css({float:"none","margin-bottom":0}).appendTo(tab.content);
 });
 
 }();

js/style-select.js

@@ -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)
-    );
-});

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;
+}

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) {
@@ -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) {
+        changeStyle(localStorage.stylesheet);
-			if (styleName == localStorage.stylesheet) {
-				changeStyle(styleName);
-				break;
-			}
-		}
 	}
 	{% 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) {