Web Color Picker input

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

By Djulia - December 3, 2008 - edited: December 3, 2008

Hi Dave,

I found a possibility to add a function Color Picker.

Here my solution.

I use Tigra Color Picker (it gives the possibility of using the function with a link and the name of the field).
http://www.softcomplex.com/products/tigra_color_picker/demo1.html

1) in /lib/menus/header.php

<head>
<script type="text/javascript" src="lib/picker.js"></script>
</head>

2) in /lib/menus/default/edit.php

change
<form method="post" action="<?php echo $_SERVER['SCRIPT_NAME'] ?>" autocomplete="off" onsubmit="tinyMCE.triggerSave();">

with
<form method="post" action="<?php echo $_SERVER['SCRIPT_NAME'] ?>" autocomplete="off" onsubmit="tinyMCE.triggerSave();" name="tcp_test">

3) in picker.js line 17, add : /lib/picker.html

4) To download the two files in the Lib folder : picker.js and picker.html.

5) To create a section MyStylesPage :

a. Edit Section
b. Add Field
Field Label == background
Field Type == text field
c. Save
d. Add Field
Field Label == Picker
Field Type == separator
Separator Type == separator

<a href="javascript:TCP.popup(document.forms['tcp_test'].elements['background'])">Background-color</a>

( Capture1.gif )

6) Now in pageList.php add :

<style type="text/css">
body {background-color : <?php echo $mytable['background'] ?>}
</style>

END

It is then possible to modify the styles of the page in cmsBuilder (...)

But, I encountered two problems :

1) the form does not have a name (in edit.php) ;
2) and input does not have a ID.

Also, it is possible to add a name for the form and a ID for the fields in the next versions ?
And it would be possible to improve this with your own function ?

For example for to obtain :

[img]http://www.codeproject.com/KB/custom-controls/WS_ColorPicker/ColorPickerDemo.png[/img]


That would give much possibility.

Your opinion ?

Thanks,

Djulia
Attachments:

capture1_006.gif 3K

Re: [Djulia] Web Color Picker input

By aev - December 3, 2008

Hi!

I also think a color picker would be a great addition to CMSB.

Here's a few more candidates:
http://acko.net/dev/farbtastic
http://www.intelliance.fr/jquery/color_picker/
http://www.eyecon.ro/colorpicker/


-aev-

Re: [Djulia] Web Color Picker input

By Dave - December 5, 2008

Hi Djulia,

That's really interesting. Eventually what I would like to do is separate the fields out and have a fiel for each in /lib/fields/ so it's easy to add new fields. That will take a while though.

I can add an id to the form and text fields. Would that make it work for you for now?

Is this the only line you need the id's for:
>document.forms['tcp_test'].elements['background']

That may be possible with getElementsByName()

Let me know.
Dave Edis - Senior Developer
interactivetools.com

Re: [Dave] Web Color Picker input

By Djulia - December 6, 2008 - edited: December 7, 2008

Hi Dave,

>> Eventually what I would like to do is separate the fields out and have a fiel for each in /lib/fields/[/#800000]
It would be a good addition. Will your approach give the possibility of obtaining a modal calendar (or Date Picker) ?

>> I can add an id to the form and text fields.
[/#800000]It would be very useful while waiting for your function. [:)]
But, you can also add the name to the form ?

In fact, I think that this addition will give the possibility of using a section to easily control the styles of the other sections.
It is only one example of possible use. I think that would be also very useful for a catalog of products.

Thanks Dave,

Djulia

Re: [Djulia] Web Color Picker input

By Dave - December 8, 2008

Does the form need to have the same name on the add and edit pages?

Instead of this:
document.forms['tcp_test'].elements['background']

Does this work:
document.getElementsByName['background'][0]

The javascript code lets you get an element by name (and returns the first one, since there might be many).

Hope that helps!
Dave Edis - Senior Developer
interactivetools.com

Re: [Dave] Web Color Picker input

By Djulia - December 9, 2008 - edited: December 9, 2008

Hi Dave,

[font "Verdana"]>>document.getElementsByName['background'][0]
[/#800000]Yes, that can work thus. Thanks :)

Here syntax (if somebody seeks the same solution) :
"javascript:TCP.popup(document.getElementsByName('background')[0]);"[/#0000a0]

But, I hope that you will integrate your solution.

Djulia

P.s: Thanks Tigra !

Re: [Djulia] Web Color Picker input

By Dave - May 27, 2009

Hi Djulia,

I'm not sure what you mean. Do you mean the ability to add custom fields? If so, then yes, it's still something I'm very eager to do. It's just a big job.

If you let me know one example of what you are trying to do I can point you to a place in the code where you can add it. Some things are easier than others.

Hope that helps!
Dave Edis - Senior Developer
interactivetools.com

Re: [Dave] Web Color Picker input

By Djulia - May 28, 2009 - edited: May 28, 2009

Hi Dave,

> Do you mean the ability to add custom fields?
Yes, it is precisely what I seek.
[font "Times New Roman"]
> It's just a big job.
I understand and I thank you for the interest which you grant to this suggestion ! :)

Currently, I would like to build a simple section to give the possibility to an author of modifying the CSS of the site.

The site must also use fields dates, and the author would like to use a pop-up calendar (or Date Picker) in the section.

But, I also recently worked on a project which would have required an addition of two input type="text" in an section with JavaScript for example :
<script type="text/javascript">function add(val1,val2){...}</script>
value1: <input type="text" onchange="add(this.value,document.form1.ch2.value);" name="value1" />
value2: <input type="text" onchange="add(this.value,document.form1.ch1.value);" name="value2" />
result : <input type="text" name="result" />

The possibilities would be numerous if it were possible to modify, according to the need and the project, the edit.php page, or if it were possible to add custom fields.

But, in the immediate, I must find a solution for to use a field with a color picker.
Also, you think that there would be a solution more elegant than the solution described above ?

Thank you very much for your suggestions.

Djulia

Re: [Djulia] Web Color Picker input

By Dave - May 28, 2009

Hi Djulia,

I could probably add some more hooks and you could have all the custom code in a plugin.

What I've been doing up till now for custom projects that just "need it done, now" is add special cases in edit_functions.php. For example to have a text field work differently for a specific section I'd add some code to _showTextfield() like this:

if ($tableName == 'products' && $fieldSchema['name'] == 'color') {
$extraHTML = "...";
}

Then I'd either add code there (and display it below) or display something completely different. It's not ideal and it makes it so you can't upgrade without manually moving all those code changes but it does work.

For example I added this to the bottom of _showDateTime() to add a jquery calendar date selector.

?>
<input type="hidden" name="<?php echo $fieldSchema['name'] ?>:string" id="<?php echo $fieldSchema['name'] ?>:string" value="<?php echo $date ?>" />
<script type="text/javascript">
$(function() {
$("#<?php echo $fieldSchema['name'] ?>\\:string").datepicker({
showOn: 'button',
buttonImage: 'lib/jquery/theme/images/calendar.gif',
buttonImageOnly: true,
dateFormat: 'yy-mm-dd',
onClose: function(date) {
var dateElements = date.split('-', 3);
var year = dateElements[0];
var month = dateElements[1].replace(/^[0]+/g, '');
var day = dateElements[2].replace(/^[0]+/g, '');

$('[name=<?php echo $fieldSchema['name'] ?>\\:year]').val( year );
$('[name=<?php echo $fieldSchema['name'] ?>\\:mon]').val( month );
$('[name=<?php echo $fieldSchema['name'] ?>\\:day]').val( day );
},
});
});
</script>
<?php

But you also need to download the latest jquery and add this to edit.php:
<script type="text/javascript" src="lib/jquery/jquery-1.3.1.js"></script>
<script type="text/javascript" src="lib/jquery/jquery-ui-personalized-1.6rc6.min.js"></script>

And this to header.php
<link rel="stylesheet" href="lib/jquery/theme/ui.all.css" type="text/css" media="screen" />

Usually how it works is we do these type of jobs custom (and we do a lot of them) until we figure out a simple and elegant enough way to make it automatic and then we do.

Hope that helps!
Dave Edis - Senior Developer
interactivetools.com