Web Color Picker input

18 posts by 5 authors in: Forums > CMS Builder
Last Post: March 18, 2010   (RSS)

Re: [gleert] custom fields

By Dave - December 11, 2009

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.
Dave Edis - Senior Developer
interactivetools.com

By Djulia - December 11, 2009 - edited: December 11, 2009

Hi Dave,

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


Just a class and a file js !

Djulia


Re: [Dave] Web Color Picker input

By Djulia - March 16, 2010 - edited: March 16, 2010

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

colorpicker.jpg 17K

Re: [Djulia] Web Color Picker input

By Chris - March 17, 2010 - edited: March 17, 2010

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.
All the best,
Chris

Re: [chris] Web Color Picker input

By Djulia - March 18, 2010 - edited: March 18, 2010

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

jscolorheader.php 1K

Re: [Djulia] Web Color Picker input

By Chris - March 18, 2010

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?
All the best,
Chris

Re: [chris] Web Color Picker input

By Djulia - March 18, 2010 - edited: March 18, 2010

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