vBulletin LTS

Using the 'Color Picker' inside the vBulletin Options/Settings Area

by Shane 30 May 2008

Intro

This article is about how you use the color picker inside the vBulletin Option page. I been working on getting this working for the past 2 days and after some serious sit down, I was able to get it to work, and it works very well let me tell you! This is for 3.7.x series only. I haven't tested this on older versions.

Step 1

First thing is create your "Option". Data Validation Type MUST be free. Anything else would not work. Reason? (Assuming you everything else filled out) We will be added custom code, more importantly HTML mixed with eval code.

So. The example "Option Code" is this:

HTML Code:

<script type=\"text/javascript\" src=\"../clientscript/vbulletin_cpcolorpicker.js\"></script>
" . eval('include_once("adminfunctions_template.php"); $colorhtml = construct_color_picker();') . $colorhtml . "
<div>
    <fieldset>
        <table width=\"100%\">
            <tr class=\"alt1\">
                <td>Your Color</td>
                <td>
                    <table cellpadding=\"0\" cellspacing=\"0\" border=\"0\">
                        <tr>
                            <td><input type=\"text\" class=\"bginput\" name=\"setting[MYVARNAME][color0]\" id=\"color_0\" value=\"$MYVARNAME[color0]\" tabindex=\"1\" size=\"22\" onchange=\"preview_color(0)\" />&nbsp;</td>
                            <td><div id=\"preview_0\" class=\"colorpreview\" onclick=\"open_color_picker(0, event)\"></div></td>
                        </tr>
                    </table>
                </td>
            </tr>
            </tr>
        </table>
    </fieldset>
</div>
<script type=\"text/javascript\">
<!--
var numColors = 0;
var colorPickerWidth = 253;
var colorPickerType = 0;
init_color_preview();
// -->
</script>

This is the basic of what you need. You can format the HTML anyway you want, but this is basic.

What's going on?

First we are adding the javascript file from clientscripts so we can use the color picker that the CSS editor users. The bottom part is needed to start the color picker. numColors is needed so the previewing colors works correctly when loading the values. In this case it's 0. 0 does equal 1.

Next we run some eval code. We need to generate the hidden color picker code that will be on the background. So we have to include the adminfunctions_template.php file to be able to do it. Put the code inside and variable and then output that variable so it "shows". Once you do these steps, you can now create your HTML.

HTML is anything you want...

But you need a input field (doesn't matter the type) and a div that has the colorpreview CSS tag. Without typing everything out notice how everything lines up with the 0:

HTML Code:

<td><input type=\"text\" class=\"bginput\" name=\"setting[MYVARNAME][color0]\" id=\"color_0\" value=\"$MYVARNAME[color0]\" tabindex=\"1\" size=\"22\" onchange=\"preview_color(0)\" />&nbsp;</td>
<td><div id=\"preview_0\" class=\"colorpreview\" onclick=\"open_color_picker(0, event)\"></div></td>

Once you have all the number of field you want, and it works properly (minus saving data as we will get to that next) go ahead and save it. Notice that the variable that I give in the name field doesn't have to be the same as the variable you are using as you might have more than one custom eval code inside this option box. This is just for simplcy sake here.

Plugins Needed

Because we need to save this eval code, we need plugins to process the data because the options.php file can not process it. So we need custom code to help.

Hook: admin_options_processing (used when saving data.)

PHP Code:


if ($oldsetting['varname'] == 'MYVARNAME')
{
    $setvar =& $vbulletin->GPC['setting'];
    foreach($setvar['MYVARNAME'] AS $color => $value) {
        $larke[$color] = $value;
    }
    $settings["$oldsetting[varname]"] = serialize($larke);
}

Because the nature of how "values" work we need to serialize the data inside the database. It takes each "item" from the array that we generated, and extracts the information and puts them into a serial value. This looks different depending on many values you have so there is no example. NOTE: It took me 2 hours to figure out that $settings has to be $settings. Do not change it to $setting! (Yeah.. I hate small mistakes.)

Hook: admin_options_print (Used when "reading")

PHP Code:


if ($setting['varname'] == 'MYVARNAME')
{
    $value = @unserialize($setting['value']);
    $MYVARNAME = array();
    foreach ($value AS $colornum => $value) {
        $MYVARNAME[$colornum] = $value;
    }
}

This will take the unserialize information that we process from the value field, and put it in our variable that we have specified earlier.

That's it!

That's how you add the color picker to your plugin options. Granted there are limitations of more than one plugin will use the color picker because you have to keep the javascript variable "sane", but I am looking into making some changes in the "hard" code to send to vB dev team to implement the change to allow the color picker for two different forms if you were in the overall view. Having your plugin show up by itself in the options will work just fine as it will only load your plugin options and the form only once. So there are currently limitations, but this is how it's done for now!

Enjoy!

Attached Thumbnails

vblts.ru supports vBulletin®, 2022-2024