Web Color Picker input

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