Originally imagemenu is not compatible with newest release of Mootools >1.1.
The modifications suggested here in forum are not complete
1/2 : « transition:Fx.Transitions.Quad.easeOut » modif is ok.
but 2/2 the way to detect the onOpen or onClose function is not running.
why ? – because the detection of the passed functions is not correct.
If the functions are not present, the default action of the DOM event must be fired (i.e. a link). And if the functions are present, the function declared in the calling class only can be fired.
The first part of the class is changed like that :
var ImageMenu = new Class({
Implements: [Options, Events],
options:
{
defaultVal: 'something',
onOpen: -1,
onClose: $empty,
onStart: $empty,
openWidth: 200,
transition: Fx.Transitions.Quad.easeOut,
duration: 500,
open: null,
border: 0
},
initialize: function(elements, options){
this.setOptions(options);
The part detecting and firing the action is modified as here to call new functions that fire the open or close events :
el.addEvent('click', function(e){
var openfunc = $type(obj.options.onOpen);
if (openfunc != 'number'){
new Event(e).stop();
if(obj.options.open == i){
obj.options.open = null;
obj.closing(this.href, i);
}else{
obj.options.open = i;
obj.opening(this.href, i);
}
}
})
and at the end of the class the two functions are added :
opening: function(e,i){
this.fireEvent('open', [e,i], 10);
},
closing: function(e,i){
this.fireEvent('close', [e,i], 10);
}
A structured calling script can be like
<script type="text/javascript">
function OpenDiv(e,i){
$('ac').set('text', 'You open enter '+e+' of '+i).highlight();};
function CloseDiv(e,i){
$('ac').set('text', 'You closed enter '+e+' of '+i).highlight();};
window.addEvent('domready', function(){
var myMenu = new ImageMenu($$('#imageMenu a'),{openWidth:110, border:2,
open:-1,
onOpen:function(e,i){OpenDiv(e,i)},
onClose: function(e,i){CloseDiv(e,i);}
});
});
</script>
[UPDATE]
When initializing menu, if selected li is 0, the initial js is faulty. Only the reset need to be activated if open value is not null.
//if(this.options.open){
if($type(this.options.open) == ‘number’){
this.reset(this.options.open);
} // else {
//this.elements.each(function(el,i){
//if(el.id == this.options.open){
// this.reset(i);
//}
//},this);
//}
//}
The running demoshop include here the modified code in a complexe integration.
Here the full script available as zip.
081129 M
