[TUT] How to make module positions collapsible Joomla 2.5

Everything to do with Joomla! 2.5 templates and templating.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Forum Post Assistant - If you are serious about wanting help, you will use this tool to help you post.
Locked
certico
Joomla! Explorer
Joomla! Explorer
Posts: 301
Joined: Tue Apr 10, 2012 5:00 pm
Location: London UK
Contact:

[TUT] How to make module positions collapsible Joomla 2.5

Post by certico » Tue Apr 10, 2012 5:07 pm

I have previously used this method ( http://forum.joomla.org/viewtopic.php?p=1341172 ) to make template module positions collapsible (aka accordion effect or slide) but unfortunately it doesn't work on Joomla 2.5 (more specifically Mootools 1.4 in J2.5 core).

Below is my modified code to make it work on J2.5, all credit to ah72 for the original code, I just updated some functions.
Add it to modules.php in your templates html folder.

Code: Select all

<?php

/*
 * Module chrome that adds slides for modules
 * based on xhtml chrome (if your module is styled with xhtml chrome selected,you won't lose css when you change to this chrome )
 *
 * Usage: <jdoc:include type="modules" name="module_position" style="slide" slideOptions="{put options here to override defaults for all modules in this position}" slideOptions_mod{module_id}="{put here options to be applied only to module with id 'module_id'}"/>
 *
 * Example: <jdoc:include type="modules" name="left" style="slide" slideOptions="{transition:Fx.Transitions.Bounce.easeOut, opacity:true}" slideOptions_mod1="{show:0, , opacity:false}"/>
 * The above example will add slides for modules in the left position, with transition set to 'Bounce.easeOut' and with opacity effect for modules other than module having id '1'
 *
 * Slide shown/hidden status will be kept after page refresh. To override this, use option 'show:-1' (to hide) or 'show:0' (to show) in  slideOptions or slideOptions_mod{module_id}
 *
 * If slideOptions or slideOptions_mod{module_id} are not specified as in this example:
 * <jdoc:include type="modules" name="right" style="slide"/>
 * default options will be applied, check code below to see default options. check mootools Accordion documentation to get a full list of available options
 * 
 * v1.0 - by ah72, July 2008
 * 
 * Edited for Joomla 2.5 MooTools 1.4 (possibly 1.2 also)
 */

// no direct access
defined('_JEXEC') or die('Restricted access');

function modChrome_slide($module, &$params, &$attribs){

    if (!empty ($module->content)) : ?>
        <div class="moduletable<?php echo $params->get('moduleclass_sfx'); ?>" id="module_<?php echo $module->id; ?>">
            <h3 class="slide_toggler" style="cursor:pointer;"><?php echo $module->title; ?></h3>
            <div class="slide_content">
                <?php echo $module->content; ?>
            </div>
        </div>
    <?php endif;

    $defaultSlideOptions = "{
        alwaysHide: true,
        show: (Cookie.read('slide_mod".$module->id."')=='hide')? -1 : 0,
        opacity: false,
        duration: 1*Math.min(1.5*( \$$('#module_".$module->id." div.slide_content').getFirst().offsetHeight ? \$$('#module_".$module->id." div.slide_content').getFirst().offsetHeight : 150 ), 300),
        transition: Fx.Transitions.Quad.easeOut,

        onComplete: function(element){
            if ( \$$('#module_".$module->id." div.slide_content').getStyle('height') != '0px' ) {
                \$$('#module_".$module->id." div.slide_content').setStyle('height', 'auto');
                Cookie.write('slide_mod".$module->id."', 'show', {duration: 365});
            } else {
                Cookie.write('slide_mod".$module->id."', 'hide', {duration: 365});
            }
        },
        
        onBackground: function(toggler, element){
            element.setStyle('height', element.offsetHeight+'px');
        }
        
    }";
    
    
    if (isset( $attribs['slideOptions'] )) {
        $slideOptions = $attribs['slideOptions'];
    } else {
        $slideOptions = "{}";
    }
    
    if (isset( $attribs['slideOptions_mod'.$module->id] )) {
        $slideOptions .= ', '.$attribs['slideOptions_mod'.$module->id];
    }
    
    JHtml::_('behavior.framework', true);
    $js = 'window.addEvent(\'domready\', function(){ new Accordion($$(\'#module_'.$module->id.' h3.slide_toggler\'), $$(\'#module_'.$module->id.' div.slide_content\'), Object.merge('.$defaultSlideOptions.', '.$slideOptions.')); });';
    $document =& JFactory::getDocument();
    $document->addScriptDeclaration( $js );

}
?>
Last edited by certico on Wed Apr 11, 2012 2:21 pm, edited 1 time in total.

 
ghazal
Joomla! Explorer
Joomla! Explorer
Posts: 274
Joined: Fri Aug 19, 2005 12:12 pm
Location: Out of my mind ...sometimes

Re: [TUT] How to make module positions collapsible Joomla 2.

Post by ghazal » Wed Apr 11, 2012 8:11 am

Hi,
tks for this update.
To make it more joomla-2.5-ish, should be :

Code: Select all

JHtml::_('behavior.framework'); 
instead of

Code: Select all

JHTML::_('behavior.MooTools');
when only mootools core.js must be loaded.
AND :

Code: Select all

JHtml::_('behavior.framework', true);
when mootools-core.js AND mootools-more.js must be loaded.

To make it more mootools-1.4.x-ish :

Code: Select all

$merge
should be now

Code: Select all

Object.merge
Keep up the good work.

certico
Joomla! Explorer
Joomla! Explorer
Posts: 301
Joined: Tue Apr 10, 2012 5:00 pm
Location: London UK
Contact:

Re: [TUT] How to make module positions collapsible Joomla 2.

Post by certico » Wed Apr 11, 2012 2:23 pm

Thanks for your suggestions ghazel. I have updated the code in my initial post to reflect them :)

sh0rtchica
Joomla! Apprentice
Joomla! Apprentice
Posts: 40
Joined: Tue Jan 29, 2008 6:04 pm
Contact:

Re: [TUT] How to make module positions collapsible Joomla 2.

Post by sh0rtchica » Sat May 04, 2013 10:15 pm

So glad I found this! I've been searching for a long time for something like this, it's hard to believe there's no module or extension in the JED.

I'm not entirely sure how to include which modules I'd like to apply this to in my template file, because they are a set of responsive modules.

Here's my template code for that particular section:

Code: Select all

<?php echo $view->positions(array('position-9' => 33, 'position-10' => 33, 'position-11' => 34), 'art-block'); ?>
I want all three positions to be collapsible, either together or separately. This is the code from the description:

Code: Select all

<jdoc:include type="modules" name="position-9" style="slide" slideOptions="{transition:Fx.Transitions.Bounce.easeOut, opacity:true}" slideOptions_mod1="{show:0, , opacity:false}"/>
Could I get some pointers on making this work with my template? Thank you for your assistance!

User avatar
Per Yngve Berg
Joomla! Master
Joomla! Master
Posts: 27141
Joined: Mon Oct 27, 2008 9:27 pm
Location: Romerike, Norway

Re: [TUT] How to make module positions collapsible Joomla 2.

Post by Per Yngve Berg » Sun May 05, 2013 8:58 am

@sh0rtchica: You are using an Aristeer template. Module Chrome does not work normally in Artisteer templates. You have to consult Artisteer.

sh0rtchica
Joomla! Apprentice
Joomla! Apprentice
Posts: 40
Joined: Tue Jan 29, 2008 6:04 pm
Contact:

Re: [TUT] How to make module positions collapsible Joomla 2.

Post by sh0rtchica » Mon May 06, 2013 7:47 pm

Bummer! Thanks for letting me know before I mucked with the code too much. I stumbled on a component that looks promising, so I'm going to test that out.

Janek89
Joomla! Apprentice
Joomla! Apprentice
Posts: 22
Joined: Fri Oct 03, 2014 4:13 pm

Re: [TUT] How to make module positions collapsible Joomla 2.

Post by Janek89 » Fri Oct 03, 2014 4:45 pm

Hello,

I founded a new thread for Joomla 3.3. This great new code does not work in Joomla 3.3 If you can help, the thread is here: http://forum.joomla.org/viewtopic.php?f=706&t=860821

Thank you very much.

 

Locked

Return to “Templates for Joomla! 2.5”