Web Color Picker input

Not sure, but it's something we're very excited about. It would be a big upgrade.

The plugin support we've added has opened up a lot of amazing possibilities and I know that custom fields would do the same. It would basically be like "field plugins". I was actually just doing some updates to how the date field works and was thinking about this.

So the short answer is that it's still very high on our list, but no deadline yet.

Hi Dave,

On this subject, I was impressed by jscolor : http://jscolor.com/

Just a class and a file js !

Djulia

Hi Dave,

I have just tested successfully the integration of jscolor with the option Field Prefix and Field Description, which facilitates the integration!

Here stages of integration.

I used the Ajax version:
http://jscolor.com/try.php#manual-binding

1. Download jscolor in folder 3rdParty/

2. In lib/menus/header.php (line 22) add :
<script type="text/javascript" src="3rdParty/jscolor/jscolor.js"></script>

3. In lib/menus/default/edit_fonctions.php (line 164) add:
id="$fieldname"

4. In 3rdParty/SimplaAdmin/css/style.css line 506


5. Add a field text for the desired section

Field Label == Color1
Field Name == Color1
Field Type == text field
Field Prefix == Click here:
Field Description ==
<script type="text/javascript">var myPicker = new jscolor.color(document.getElementById('color1'), {})</script>

Field Width == 80

--END--

You can add several fields.

For example:
document.getElementById('color1')
document.getElementById('color2')
...

Dave,

1) It would be possible to add ID (id="$fieldname") for the following updates ?

2) It would have been interesting to use custom.js, but script uses other files (images). Also, it is easier to use a specific folder (cf organization).


I tested a include in custom.js, but that did not function.
http://www.cryer.co.uk/resources/javascript/script17_include_js_from_js.htm

A file include in header.php would be very interesting (?).

Your opinion ?

Thanks, Djulia

Hi Djulia,

Nice work!

1) It would be possible to add ID (id="$fieldname") for the following updates ?

You should be able to get away without an ID at all. Try replacing document.getElementById('color1') with $('input[name="color1"]')

2) It would have been interesting to use custom.js, but script uses other files (images). Also, it is easier to use a specific folder (cf organization).

You can add whatever includes (CSS or JS) you want to the CMSB admin header without modifying header.php by using a plugin. Try saving this as cmsAdmin/plugins/colorpicker.php:

<?php


addAction('admin_head', 'myPlugin_header');

function myPlugin_header() {
echo '<script type="text/javascript" src="3rdParty/jscolor/jscolor.js"></script>';
}

?>

You could also throw your CSS modification in there.

I hope this helps. Please let me know if you have any questions.

Hi Chris,

[font "Verdana"]>>you want to the CMSB admin header
[/#000000]This approach is really very simple. It is perfect!

>> Try replacing document.getElementById('color1') with $('input[name="color1"]')
I did not succeed in obtaining a correct result.

I always have the js error message: Awaited identifier...

For : <script type="text/javascript">var myPicker = new jscolor.color($('input[name="color1"]'), {})</script>

You have an idea ?

Thank again.

Djulia

Hi Djulia,

Sorry, I forgot that jQuery's selectors return lists. Try:

<script type="text/javascript">var myPicker = new jscolor.color($('input[name="color1"]')[0], {})</script>

Does that work for you?

Hi Chris,

That functions perfectly. Thanks ! :)

Stages of integration.

Use the Ajax version:
http://jscolor.com/try.php#manual-binding

1. Download jscolor in folder "3rdParty/"

2. Download jscolorHeader.php in folder "plugins/"

3. Add a field text for the desired section :

Field Label == Color1
Field Name == Color1
Field Type == text field
Field Prefix == Click here:
Field Description == <script type="text/javascript">var myPicker = new jscolor.color($('input[name="color1"]')[0], {})</script>
Field Width == 80

--END--

You can add several fields.

For example:
$('input[name="color1"]')[0],
$('input[name="color2"]')[0],
...

Djulia