Rails spinoffs - Sep 2006 - Effect.Highlight interferes with Effect.toggle

I''m using something like an accordion, but the div containers have some
elements in them that use Effect.Highlight (i.e. InPlaceEditor and 
Ajax.Checkbox, one of my SAU classes). If I click the element that 
starts the Effect.SlideUp or some other similar effect, and then mouse 
over an element starting an Effect.Highlight, the highlight cancels the 
SlideUp. Or, if the Effect.Highlight is in the middle of its fade out 
then clicking the button to trigger the SlideUp/Down has no effect.

Any idea how to fix this problem so that a click of the toggle button 
will always trigger a non-interruptable SlideUp/Down?

Thanks,
Colin

Code:
   
$A($(''container'').getElementsByTagName(''fieldset'')).each(function(el){
        new ToggleButton(el.getElementsByTagName(''div'')[0],{
            handle:el.firstChild,
            effect:''blind'',
            effectOptions: {duration: 0.25}
        });
    });

/* Usage:
new ToggleButton(element,{
    showHTML/hideHTML: when using default, parent, or sibling, the 
button created will use this as innerHTML
    visible: start the element visible?
    toggle: the event handler called when toggle button clicked
    onShow: hook called after all default actions have taken place. 
args: event, this: ToggleButton instance
    onHide: hook called after all default actions have taken place. 
args: event, this: ToggleButton instance
    parent: button element will be appended to this element
    sibling: button element will be inserted before this element 
(default: sibling is element)
    handle: this element will be the button (showHTML/hideHTML not used)
    effect:
''blind'',''slide'',''appear''
if desired
    effectOptions: options to be passed to Effect.toggle
});
*/
ToggleButton = Class.create();
ToggleButton.prototype = {
    initialize: function(element, options){
        this.element = $(element);
        this.options = Object.extend({
            showHTML: ''<b>(show)</b>'',
            hideHTML: ''<b>(hide)</b>'',
            visible: false,
            toggle: this.toggle,
            onShow: null,
            onHide: null
        }, options || {});
        if(this.options.parent){ this.options.parent = 
$(this.options.parent); }
        if(this.options.handle){ this.options.handle = 
$(this.options.handle); }
        if(this.options.sibling){ this.options.sibling = 
$(this.options.sibling); }
        if(!this.options.parent && !this.options.handle){ 
this.options.sibling = element; }
        this.createButton();
        if(this.options.visible ||
this.element.hasClassName(''active'')){
            Element.show(this.element);
            if(!this.options.handle){ this.span.innerHTML = 
this.options.hideHTML; }
        }else{
            Element.hide(this.element);
            if(!this.options.handle){ this.span.innerHTML = 
this.options.showHTML; }
        }
        this.onclickListener = 
this.options.toggle.bindAsEventListener(this);
        Event.observe(this.button, ''click'',
this.onclickListener);
    },
    createButton: function(){
        if(this.options.handle){
            this.button = this.options.handle;
            return;
        }
        this.span = Builder.node(''span'');
        this.button = Builder.node(''a'',[this.span]);
        if(this.options.parent){ 
this.options.parent.appendChild(this.button); }
        else if(this.options.sibling){ 
this.options.sibling.parentNode.insertBefore(this.button,this.options.sibling); 
}
    },
    toggle: function(event){
        if(Element.visible(this.element)){ this.hide(event); }
        else{ this.show(event); }
    },
    show: function(event){
        if(this.options.effect && !Element.visible(this.element)){
            new 
Effect.toggle(this.element,this.options.effect,this.options.effectOptions 
|| {});
        }else{ Element.show(this.element); }
        if(!this.options.handle){ this.span.innerHTML = 
this.options.hideHTML; }
        if(this.options.onShow){ this.options.onShow(event).bind(this); }
    },
    hide: function(event){
        if(this.options.effect && Element.visible(this.element)){
            new 
Effect.toggle(this.element,this.options.effect,this.options.effectOptions 
|| {});
        }else{ Element.hide(this.element); }
        if(!this.options.handle){ this.span.innerHTML = 
this.options.showHTML; }
        if(this.options.onHide){ this.options.onHide(event).bind(this); }
    },
  dispose: function() {
    Event.stopObserving(this.button, ''click'',
this.onclickListener);
    if(!this.options.handle) 
this.element.parentNode.removeChild(this.button);
  }
}


--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs
-~----------~----~----~----~------~----~------~--~---