Joomla 1.5 templates: Multiple select lists in params.ini

I was excited to see that Joomla 1.5 added template language strings and parameters support.

This lasted about 30 minutes until i had to implement a multiple select list in template config.

Here's a common scenario, which happens to be mine ;) : you have a template with several color variations(blue and green) or layout variations, and you'd like to assign a different color or layout to each menuitem in Joomla menus. This will require a multipleselect list so you can quickly choose which menus will render a blue page, and which ones will render a green page.

Template parameters are defined in templateDetails.xml and saved in/restored from  params.ini. these files reside in the template root folder(e.g templates/tmj_template)

The problem with ini files is that they don't save arrays (i.e. multiple select list selections). I thought, mootools is loaded when going to extensions->template manager, so why not serialize selections with mootools on save, and unserialize when template config is fired up.

I wrote my own javascript routines in the description tags of templateDetails.xml. I'm using 2 paramaters,a multiple select list, and a hidden paramater that holds the "serialized" selection. The serialized selection consists of all muliple select values contcatenated by "_". The serialized values are saved in the hidden field when the user presses save or apply in the template configuration screen.

When an user loads the template configuration by clicking the template, mootools unserializes the hidden field by splitting the string by "_", then populating the visible multiple select list.

Here are my params in templateDetails.xml

 <params addpath="/templates/tmj_template/elements">
        <param name="layout1w_serialized" type="hidden"/>
        <param name="layout_1w" type="menuitems" label="Layout B menu items assignment(default is layout A)" />       
</param>

You may have noticed there's an "addpath" attribute attached to the params tag. this tells Joomla to load my custom paramaters renderer from a template subfolder. I'm creating my own parameter type, called "menuitems", which displays a multiple select list. I copied menuitem.php from libraries\joomla\html\parameter\element,  into templates/tmj_template/elements/, then renamed it to menuitems.php. then I had to edit menuitems.php and rename the class from JElementMenuItem to JElementMenuItems. To finish up with this file, I modified the function so it returns a multiple select list

return JHTML::_('select.genericlist',  $options, ''.$control_name.'['.$name.'][]', 'size="15" multiple="multiple" class="inputbox"', 'value', 'text', $value, $control_name.$name);

Here's the mootools magic in templateDetails.xml description tag:

<description>Text for humans
     <![CDATA[
     <script type="text/javascript">      
       Element.extend ( { getSelectMultipleValues: function() { var values = []; for( var i = this.options.length - 1; i >= 0; i-- ) { 
       if ( this.options[i].selected ) { 
       // alert(this.options[i].value); 
       // values.push( '\'' + this.options[i].value + '\'' ); 
       values.push( this.options[i].value); 
       } } 
       values = values.join('_'); return values; } } );
       
       
       function join_params(list_id,target_id){
       $(target_id).value=$(list_id).getSelectMultipleValues();
       }
       
       function split_params(list_id,source_id){
       var params = $(source_id).value.split('_');
       // console.dir(params);
       var the_list=$(list_id);
       for( var i = the_list.options.length - 1; i >= 0; i-- ) { 
         if( params.indexOf( the_list.options[i].value ) !== -1 ){
         the_list.options[i].selected='selected';
         // alert(i);
         }
       }
       }
       
       function tmj_init_workaround(){
       
       split_params('paramslayout_1w' , 'paramslayout1w_serialized' );
       // split_params('paramslayout_2w' , 'paramslayout2w_serialized' );
       
       
       var saveb=$$('.icon-32-save, .icon-32-apply');
       if( $type(saveb[0])=='element'){
       // alert(saveb[0].title);
       // saveb=saveb[0];
       saveb.each(function(e){
       e.addEvent('click',function(ev){
           // alert('Saving params');
           // new Event(ev).stop();
           join_params('paramslayout_1w' , 'paramslayout1w_serialized' );
           // join_params('paramslayout_2w' , 'paramslayout2w_serialized' );
           // e.getParent().fireEvent('click');
           
         });
       });
       }
       
       
       }
       window.addEvent('load',function(){
       // alert('loaded!');
       tmj_init_workaround();
       });
     </script>
     ]]>
   </description>

When you save some multiple selections and look at params.ini, you see something like this:

layout1w_serialized=88_44_35
layout_1w=Array

 We finally got to template's index.php, which should make use of the saved multiple selection paramater

Here's the php code to do that:

$layout1w_serialized = $this->params->get('layout1w_serialized','');
$layout1w_serialized = explode('_' , $layout1w_serialized );

Voila!

Thank you for reading.

---

Give us some social love (it really works now)!

Comments (1)

Write Comment

Please keep the topic of messages relevant to the subject of the article. Please don't use comments to plug your web site. Links are rel='nofollow'-ed Please refresh the page if you're having trouble with the security image code
Name:
E-mail
Homepage
Title:
Comment:
Code:*