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
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
Re: [Djulia] Web Color Picker input
By aev - December 3, 2008
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
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.
interactivetools.com
Re: [Dave] Web Color Picker input
By Djulia - December 6, 2008 - edited: December 7, 2008
>> 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
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!
interactivetools.com
Re: [Dave] Web Color Picker input
By Djulia - December 9, 2008 - edited: December 9, 2008
[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: [Dave] Web Color Picker input
By Djulia - May 27, 2009
Excuse me for my insistence, but this is always on your list ?
I would like to personalize several fields (color, date etc.), but that is very difficult to realize.
A suggestion, it would be possible to create a special page of edition for a user
(for example: edit-user-my-section.php) ?
Thanks for your feedback. :)
Djulia
Re: [Djulia] Web Color Picker input
By Dave - May 27, 2009
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!
interactivetools.com
Re: [Dave] Web Color Picker input
By Djulia - May 28, 2009 - edited: May 28, 2009
> 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
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>
<?phpBut 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!
interactivetools.com