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

js/style-select-simple.js

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

js/style-select.js

@@ -6,48 +6,53 @@
  *
  * Released under the MIT license
  * Copyright (c) 2013 Michael Save <savetheinternet@tinyboard.org>
- * Copyright (c) 2013-2014 Marcin Łabanowski <marcin@6irc.net> 
+ * 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');
+    let pages = $('div.pages');
-    var pages = $('div.pages');
+    let stylesSelect = $('<select></select>').css({float:"none"});
-    var stylesSelect = $('<select></select>').css({float:"none"});
+    let options = [];
-    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) => {
+    let i = 1;
+    for (styleName in styles) {
+        if (styleName) {
+            let opt = $('<option></option>')
+                .html(styleName)
+                .val(i);
+            if (selectedstyle == styleName) {
+                opt.attr('selected', true);
+            }
+            opt.attr('id', 'style-select-' + i);
+            options.push([styleName.toUpperCase (), opt]);
+            i++;
+        }
+    }
+
+    options.sort((a, b) => {
         const keya = a [0];
         const keyb = b [0];
-        if (keya < keyb) { return -1; }
+        if (keya < keyb) {
-        if (keya > keyb) { return  1; }
+            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)

templates/main.js

@@ -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 %}