PDA

View Full Version : Using the 'Color Picker' inside the vBulletin Options/Settings Area


Shane
30 May 2008, 20:10
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:


<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:


<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.)


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")


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!

Preech
07 Jun 2008, 11:54
Very good Shane. This looks much better than the way I tried to implement this into vbulletin.

Shane
19 Jun 2008, 03:52
You should be able to transfer the same technique over to a publicly accessible page. :)

Mythotical
11 Jan 2010, 07:14
EDIT: Figured it out but can't figure out how to have more than one on a settings page.

Gladhatter
14 Mar 2010, 13:15
Was this matter worked on any more? Can some one update me on this. I am hoping to get a color picker issue resolved as well and this may be the key. Do any of you guys hire out in the work for pay section?

Thanks


Charlie

BirdOPrey5
17 Sep 2011, 22:20
Just want to confirm for everyone this still works on VB 4.x with one little change, not sure if it ever worked right n 3.x but you lose the preview color in the box in 4.x after saving. The value saves simply the preview color resets to black.

To fix this I edited the line in the option code:

<td><div id=\"preview_0\" class=\"colorpreview\" onclick=\"open_color_picker(0, event)\"></div></td>

I added the code in red:
<td><div id=\"preview_0\" class=\"colorpreview\" onclick=\"open_color_picker(0, event)\" style=\"background-color:$MYVARNAME[color0];\"></div></td>

Working great. :up: