Arieh, not sure if I follow you with the use of Group here.

Consider the following scenario with your ThumbsSlides class:
1. I have a page with a list of images, they represent book covers.
2. If you click the cover it will load an excerpt of the book via ajax
and places the result in some div container (e.g. via some tabs class
that uses the thumbs as tabs and loads content)
3. Also, when clicked, some graphical elements on the page start to
move to do some fx chain (what kind depends on the image), in total
the animation is 6 seconds

The tabsClass fires an onComplete when it's done and the method called
in the onComplete sets "_tabIsLoading" to false in myApp.
The animation chain running in myApp sets "_isAnimating" to false when
it's done.
The click event attached to thumb checks of both are set to false, if
that's the case it'll start again with the procedure if someone clicks
a thumb. If not you can click all you want while the tabsClass is
loading content, or the animation is not finished yet.

Now this list turns out to be quite long and you see the ThumbsSlides
class which will turn the list into a scrollable one, with
controllers... quite useful!
So you implement it and now the list of 50 images has turned into a
scrollable list with only 10 images in the viewport.
Outside of ThumbsSlides (in myApp singleton) you also implement a zoom
class. If you now click a thumb next to the animation and content
loading it also shows a big image of the cover. Not in a modal, it'll
just shows up big in some container.

Rund down: if you click a thumb, the routine starts (loading content,
loading/showing big image, chain of fx for background eye candy) if
you click again there are some flags in myApp that prevent errors, but
in ThumbsSlides it'll call setCurrent on each click, the myApp busy-
flags don't apply in ThumbsSlides. So if you click a thumb every 2
seconds it'll set the current each time. In return the site is done
with the routine, but some other thumbnail in ThumbSlides is
this.current and this thumb will have the class "current" added to the
element.

How would you prevent this?

Extending your ThumbsClass to ThumbsClassSpecial and remove the click
event? for this special occasion..?







On Aug 20, 10:16 pm, אריה גלזר <arieh.gla...@gmail.com> wrote:
> there are a few good ways of doing this. My favorite- if you have a lot of
> classes working together, you can create a class
> group<http://mootools.net/docs/more/Utilities/Group>for all of them,
> and attach a complete event that will toggle a ongoing
> flag.
> Yet another good reason for using standard eventing for all your classes ;-)
>
>
>
>
>
> On Fri, Aug 20, 2010 at 10:37 PM, Rolf -nl <plentyofr...@gmail.com> wrote:
> > Right, well, it's not just the slideshow. It's a bunch of animations
> > running in a sequence (container divs with text or extra images).. the
> > slideshow.show is executed somewhere in the middle of the chain.
>
> > However, the problem is more the thumbnail class. It attaches a click
> > event to each thumbnail, which checks:
> > a) if clicked thumbnail == this.current, then do nothing, return,
> > don't fire anything.
> > b) else, set the new current to the clicked one (maybe add a class to
> > the element) and fire an event (so the outside world knows it can do
> > stuff, e.g. it triggers the SlideShow instance).
>
> > So when clicking the thumbnails I can prevent the slideshow from doing
> > something and the main app too (both have a transitioning true/false
> > flag), but it will still change the "current" var (this.current =
> > index), because the class just checks if the clicked one is the same
> > or different than the current one. Even though some animations are
> > still running... you know, I started with thumbnail 3 and by the time
> > the fx chain in the main app reaches the part where it does
> > slideshowShow I already changed the current thumbnail in the thumbnail
> > class 4 times and current is now 7 for example.
>
> > When dealing only with SlideShow I could call the setCurrent method
> > only after showComplete, not directly when clicking a thumbnail. But
> > in this case SlideShow is only a part in the sequence of animations,
> > that are created outside of the thumbnail class and are site specific
> > (so shouldn't be put in a class that re-writes the methods in the
> > thumbnail class or something).
>
> > Pfff... confusing
>
> > On Aug 20, 5:55 pm, Ryan Florence <rpflore...@gmail.com> wrote:
> > > slideshowInstance.transitioning // true | false
>
> > > If it's true, it's animating, you can call show() all you want but
> > nothing will happen.  So if you want to wait for it to finish before doing
> > any of your other things after an event is fired (like a click), just do
>
> > >     if (!slideshow.transitioning) doStuff();
>
> > > On Aug 20, 2010, at 7:59 AM, Rolf -nl wrote:
>
> > > > I wonder how you approach the following issue:
>
> > > > I have a bunch of thumbnails that are turned into an "thumbnail grid"
> > > > by a small class. It grabs the container, stores all thumbs in a list,
> > > > attaches events like a click that checks if the clicked on thumb is
> > > > another one than the one set as current. If yes, it fires an event...
> > > > can't get any easier.
> > > > (Similar like Arieh's earlier post here:
> > > >http://groups.google.com/group/mootools-users/browse_thread/thread/99..
> > .)
>
> > > > I've extended that class to add functionality so it works with Ryan
> > > > Florence's SlideShow. The extended class also creates the basic stuff
> > > > needed for SlideShow (a slide for each thumb) and does a little more.
> > > > Now when you click a thumb, it tells me the slide is ready or not &
> > > > waiting to be moved. Basically you have a gallery now. Can't get any
> > > > easier.
>
> > > > The app picks up the fired event and starts with a queue of actions,
> > > > basically a chain of fx, including a call to the SlideShow to slide in
> > > > the clicked image.
>
> > > > The goal is to prevent thumb clicks (actions starting after the click)
> > > > when the chain of fx is still running. When the slide is moving and
> > > > other animation is still running I can keep clicking the thumbs which
> > > > register as fresh clicks, since the thumbnail class attached a click
> > > > event and the chain of fx run independant of this.
>
> > > > My current "solution" is also a cheap one: I place a div above the
> > > > thumbnail grid with a transparent background so you can't click the
> > > > thumbs below. When the chain is done I remove it and you can click the
> > > > thumbs again. So even though this works, it doesn't feel like a proper
> > > > solution.
>
> > > > OK- before I broke it up in parts, I butchered this together
> > > > (deadlines!) in a big singleton class and I used a this._busy variable
> > > > (set to true or false) and I could easily see in the thumbnail click
> > > > event if my app was busy and return/do nothing if this was the
> > > > case...
>
> > > > Your toughts are appreciated!
>
> > > > Rolf
>
> --
> Arieh Glazer
> אריה גלזר
> 052-5348-561
> 5561

Reply via email to