Combining Delegator with a Behavior

[Rolf-nl]

First off, congrats to Aaron with the newborn..! Can I have 3 hoorays
from everyone? He didn't get proper congrats yet.

And now back to business as usual ;)

I have a slideshow behavior and if the user is 'focussing' on some
other elements/areas I want to control to pause the slideshow. For
example there's a container with a form and when a user want to fill
out the form I want to pause the slideshow because it's distracting.

I thought this would be a nice job for Delegator. First I wanted to
use mouseenter/mouseleave on the container, but you must not do that
as stated in the docs for mouseover/mouseout which I can understand.
Quickly I thought about using focus and blur on the container, because
then the user actually clicked on the form (and probably an input
element to start typing).

I thought about firing an event depending on the event.type (e.g. if
event.type is focus it would fireEvent PauseSlideShow).. - err.. how
would my slideshow behavior instance pick up this event or something?

Delegator.register(['focus', 'blur'], 'PausePlaySlideShow',
function(event, element, api){
if (event.type == 'focus') -yes-shout-to-the-world-to-pause-to-all-
possible-slideshows-that-pick-up-this-signal;
else -yes-shout-to-all-possible-slideshows-they-can-go-mad-
again;
});

I'm not sure if I'm using Delegator correct in this example I guess.

Cheerio,
Rolf

[Aaron Newton]

Generally speaking, I don't shy from having additional selectors for attaching click behaviors (or mouseover or whatever) for Behaviors. That is to say, here I think I would just have additional options for the behavior to find the elements that should pause the slideshow. Then your behavior filter would run that selector (element.getElements(api.get('pauseOnClickSelector')) or whatever). As a rule of thumb all my filters use element.getElement (or getElements) and rely on the selector to be from the behavior enhanced element. This often requires you to do something like `!body div#foo` to go up from the element to some parent and then down again to the target. I digress.

You CAN create delegator as controls though. The trick is that the element that is the delegate has a selector to the elements that are enhanced by behavior (i.e. your form input has a delegator for focus or whatever and one of its arguments is a selector that points to the slideshow container that has the behavior=Slideshow or what-have-you). It then uses Element.getBehaviorResult(filtername) to get the instance of the slideshow and calls a method on it. Something like:

Delegator.register(['click', 'focus'], 'PauseSlideshow', {

  require: ['slideShowContainer']

  handler: function(event, element, api){

    event.preventDefault();

    var target = element.getElement(api.get('slideShowContainer'));

    if (!target) return; //only continue if the slideshow is available. Fail quietly.

    var slideshow = element.getBehaviorResult('Slideshow');

    if (!slideshow) return; //ditto

    slideshow.pause();

  }

});

The key with using delegators this way is to fail quietly, I think. This allows your DOM to change and not break. Up to you though; you could use api.fail or api.warn if you want to note these in the console. One of the cardinal rules of behaviors is that they don't depend on each other (behavior plugins do though) and they aren't order dependent. When using Delegator to control instances created by Behavior, I try to follow the same rule. It's glue code though, so sometimes you need to be smart about how you handle that failure; it depends on how critical the glue is...

-a

--
You received this message because you are subscribed to the Google Groups "Clientcide" group.
To post to this group, send email to clien...@googlegroups.com.
To unsubscribe from this group, send email to clientside+...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/clientside?hl=en.

[Rolf-nl]

Right, thanks.

What I was trying to do is avoiding mixing the slideshow behavior with
the delegator on the form element. Like you say; they don't depend on
each other, they don't even know about each other and that is good. On
the other hand , (in my case) visually you can tell the two have a
relation with each other by how the layout is, so I can justify to
myself that the delegate has a selector to one more slideshow elements
that have the behavior.

..or maybe the other way (extending the slideshow behavior) is
better.. - as usual: multiple ways, time to pick one and go.