Simple Modules

fbs

It seems that advance modules are a bit easier to work with than the simple modules given my background of working with a similar setup of the advance modules type. Now, I know how to add javascript to the simple modules but what about adding css? What I want to do is add a colorpicker plugin that works with jquery however it does require the css. Is there a way to inject css like the js? Thanks in advance.

admin

There is an "xtra_css" configuration parameter you can set in you MY_fuel.php which will load in that css file as well. The downside is that it is loaded on all pages in the CMS. In 1.0 there is a css parameter you can associate with a field type which will get loaded only when that field type is used:
http://docs.getfuelcms.com/general/forms#association_parameters

fbs

Thanks for the info. I am using 1.0 and association parameters seems like something I want to use. I am trying to integrate the following jquery plugin: http://www.eyecon.ro/colorpicker/.

Here is what I have added to my custom_fields.php,
$fields['my_custom_field'] = array(
'colorpicker' => array(
'js_function' => 'ColorPicker',
'css' => array(
'colorpicker/colorpicker',
'colorpicker/layout'
),
'js' => array(
'colorpicker/colorpicker',
'colorpicker/eye',
'colorpicker/utils',
'colorpicker/layout.js?ver=1.0.2'
)
)
);

Now, what I was wanting to do, is apply type 'colorpicker' and then the field would automatically show the colorpicker as in the jquery plugin documentation. I can't seem to understand the custom fields docs on this. Thanks for the help admin.

admin

Try the following instead (note that 'my_custom_field' should be the type name):
$fields['colorpicker'] = array( 'js_function' => 'ColorPicker', 'css' => array('colorpicker/colorpicker', 'colorpicker/layout'), 'js' => array('colorpicker/colorpicker', 'colorpicker/eye', 'colorpicker/utils', 'colorpicker/layout.js?ver=1.0.2') );

fbs

How do I actually fire off the jquery plugin function to make the type work. For example, with the colorpicker, to make a field work, you would have the following: $('#colorpickerHolder').ColorPicker({flat: true});. Thanks again for the help.

fbs

So here is what I got so far.

In my simple module model file, I have a type of 'colorpicker'.

In the custom fields file, I have this:

$fields['colorpicker'] = array(
'class' => array(FUEL_FOLDER => 'Fuel_custom_fields'),
'function' => 'colorpicker',
'css' => array(
'colorpicker/css/colorpicker.css',
'colorpicker/css/layout.css'
),
'js' => array(
'colorpicker/js/colorpicker',
'colorpicker/js/eye',
'colorpicker/js/utils',
'colorpicker/js/layout.js?ver=1.0.2'
)
);

Then in the Fuel_custom_fields:

function colorpicker($params)
{
$form_builder =& $params['instance'];

$js = '
$(document).ready(function(){
$(".field_type_colorpicker").ColorPicker({flat: true});
});
';

$form_builder->add_js($js);

return $form_builder->create_text($params);
}

Still don't get the colorpicker to show.

fbs

Also, not sure if this helps but I am not seeing the css files being included.

admin

I got this working locally with the following.

1. There was a bug with loading multiple CSS files for custom fields. I've pushed an update for that to the 1.0 branch so grab the latest.

2. Place the colorpicker css files into an assets/css/colorpicker/ folder and change all image paths to go ../../images. You will need to alter the z-index of the .colorpicker class to be something like 10. Also, don't include the layout.css.

3. Simalarly with the javascript, add the colorpicker js to an assets/js/colorpicker folder. Don't include the layout.js.

4. I wouldn't recommend adding to the Fuel_custom_fields because it makes it difficult to update going forward. Instead, you can create your own class and put it in your fuel/application/libraries/ folder. I added a MY_custom_fields.php class with the following:
class MY_custom_fields { function colorpicker($params) { $form_builder =& $params['instance']; $js = '<script type="text/javascript"> $(function(){ $(".field_type_colorpicker").ColorPicker({ onSubmit: function(hsb, hex, rgb, el) { $(el).val(hex); $(el).ColorPickerHide(); }, onBeforeShow: function () { $(this).ColorPickerSetColor(this.value); } }) .bind("keyup", function(){ $(this).ColorPickerSetColor(this.value); }); }) </script> '; $form_builder->add_js($js); $params['class'] = (!empty($params['class'])) ? $params['class'].' field_type_colorpicker' : 'field_type_colorpicker'; $params['type'] = 'text'; return $form_builder->create_text($params); } }

3. In the fuel/application/config/custom_fields.php file, I had the following:
$fields['colorpicker'] = array( 'class' => 'MY_custom_fields', 'function' => 'colorpicker', 'css' => 'colorpicker/colorpicker', 'js' => array( 'colorpicker/colorpicker', 'colorpicker/eye', 'colorpicker/utils' ) );

Try that out and see if it works.