ZetaBoards skin-changer-changer

GPL3

This is a script I wrote quite a while back (so it's not great), learning the little JavaScript I needed as I went along. It'll work at any ZetaBoards forum with an unmodified skin changer, and is useful for forums with wide and thin versions of the same skin. It replaces the normal chooser with two, one for the skin and the other for the width, simplifying choosing a skin.

Download here, or look below (version 1.0.0).

Installation

First, thin and wide versions of a skin must have identical names apart from some string at the end of all wide versions; this must be the same for all skins with two widths. Take the code below, and change the Ex. in the fourth line (widestr = "Ex.";) to that appended string. It must not be found in full in any other part of any skin title. Skins without a wide (or thin) version will appear just fine; don't put the string in them.

For example, say the default Ex. is used, then a skin Generic skin will have thin and wide versions called Generic skin and Generic skin Ex. respectively.

Now, just place the modified code in the 'Above the copyright' section at Board Template in the ACP, so that it will appear below the skin changer on the board.

<script type="text/javascript">
//<![CDATA[
if ("".indexOf && "".substr && [].push) {
    widestr = "Ex.";
    options = document.getElementById("setskin").getElementsByTagName("option");
    skins = [];
    for (x = 0; x < options.length; x++) {
        skins.push(options[x].innerHTML);
        skins.push(options[x].getAttribute("value"));
    }
    list = [];
    for (x = 0; x < options.length; x++) {
        if (options[x].innerHTML.indexOf(widestr) == -1) {
            list.push(options[x].innerHTML);
            if (skins.indexOf(options[x].innerHTML+" "+widestr) == -1) {
                list.push(options[x].getAttribute("value"));
                list.push(0);
            }
            else {
                list.push([options[x].getAttribute("value"), skins[skins.indexOf(options[x].innerHTML+" "+widestr) + 1]]);
                list.push(1);
            }
        }
    }
    skins = list;
    selected = document.getElementById("setskin");
    selected = selected.options[selected.selectedIndex].text;
    if (selected.indexOf(widestr) == -1) seltype = 1;
    else {
        selected = selected.substr(0, selected.indexOf(" "+widestr));
        seltype = 0;
    }
    n = skins.indexOf(selected);
    full = document.getElementById("foot_themechooser").getElementsByTagName("form")[0];
    form = full.innerHTML;
    formstart = form.substr(0, form.indexOf("<select"));
    formmid = '<select id="skinfamily" onchange="recalc()">';
    for (x = 0; x < skins.length; x += 3) {
        formmid += "<option";
        if (skins[x] == selected) formmid += ' selected="selected"';
        formmid += ">" + skins[x] + "</option>";
    }
    formmid += "</select>";
    formend = '<input type="submit" value="Go" /\>';
    if (skins[n+2] == 1) {
        setskin = '<select id="setskin" name="setskin"><option ';
        if (seltype) setskin += 'selected="selected" ';
        setskin += 'value="' + skins[n+1][0] + '">Thin</option><option ';
        if (!seltype) setskin += 'selected="selected" ';
        setskin += 'value="' + skins[n+1][1] + '">Wide</option></select>';
    } else setskin = '<select id="setskin" name="setskin"><option selected="selected" value="' + skins[n+1] +'">Standard</option></select>';
    full.innerHTML = formstart + formmid + setskin + formend;
}

function recalc () {
    sel = document.getElementById("skinfamily");
    selected = sel.options[sel.selectedIndex].text;
    n = skins.indexOf(selected);
    if (skins[n+2] == 1) setskin = '<option selected="selected" value="' + skins[n+1][0] + '">Thin</option><option value="' + skins[n+1][1] + '">Wide</option>';
    else setskin = '<option selected="selected" value="' + skins[n+1] +'">Standard</option>';
    document.getElementById("setskin").innerHTML = setskin;
}
//]]>
</script>