Well, i'm not sure i fully understood all of your scenario, but if what you
are looking for is a way with which you can see when all your animating
classes are done, you can do something like:
//the open thumb function, and also there will be a global thumbsildes, and
a global ongoing flag - _ongoing
function openThumb(el){
if (_ongoing) return;
var myAnim1 = new AnimStart1()
, myAnim2 = new AnimStart2()
, group = new Group(myAnim1,myAnim2,thumbslides);
group.addEvent('complete',function(){_ongoing=false;});
_ongoing = true;
myAnim1.start();
myAnim2.start();
}
this way, only when all classes fired their complete events will the
_ongoing flag will be turned off.
On Sat, Aug 21, 2010 at 4:37 PM, Rolf -nl <plentyofr...@gmail.com> wrote:
> 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
>
--
Arieh Glazer
אריה גלזר
052-5348-561
5561
