Here's a module chrome that adds sliding containers for your modules:
save this code in "/templates/your_template/html/modules.php"
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
*
*/
// 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.get('slide_mod".$module->id."')=='hide')? -1 : 0,
opacity: false,
duration: 1*Math.min(1.5*( \$E('#module_".$module->id." div.slide_content').offsetHeight ? \$E('#module_".$module->id." div.slide_content').offsetHeight : 150 ), 300),
transition: Fx.Transitions.Quad.easeOut,
onComplete: function(element){
if ( \$E('#module_".$module->id." div.slide_content').getStyle('height') != '0px' ) {
\$E('#module_".$module->id." div.slide_content').setStyle('height', 'auto');
Cookie.set('slide_mod".$module->id."', 'show', {duration: 365});
} else {
Cookie.set('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.mootools');
$js = 'window.addEvent(\'domready\', function(){ new Accordion($ES(\'#module_'.$module->id.' h3.slide_toggler\'), $ES(\'#module_'.$module->id.' div.slide_content\'), $merge('.$defaultSlideOptions.', '.$slideOptions.')); });';
$document =& JFactory::getDocument();
$document->addScriptDeclaration( $js );
}
?>
This slide effect is based on mootools Accordion
Features:
- Slide options configurable globally for all modules in a position and individually for each module
- Slide shown/hidden status will be kept after page refreshes
