[Seaside] A welcome; and chaining jQuery events

Wed Oct 16 00:00:22 UTC 2013

Here's a little demo that should illustrate what you're attempting to do:
==============WAComponent  > IndexComponent==============Class > canBeRoot	^true.Instance > renderContentOn: html	html div		id: 'parent';		with: ChildA new.			html paragraph  		id: 'hiddenComponent';		style: 'display: none;';		with: 'I was hidden! But no longer!'.		html button		bePush;		" using a script returned from the server (in this case, it's inline, but it could be a method call) via AJAX "		" the #fadeOut: method is exactly the same as the jQuery docs. it's signature is fadeOut( [ duration Number ][, callback Function ] )"		onClick: ( (html jQuery: '#parent') children first fadeOut: 1 second callback: ( html jQuery ajax script: [ :s | s add: ( (s jQuery: '#parent') html: ChildB new ) ] ) );		value: 'Replace component via AJAX'.			html break.			html button		bePush;		" notice this is using JQAnimate to do the same thing "		" also notice that if you use this twice in the demo, the other two buttons won't load anything because there is no longer a child in #parent "		onClick: ( (html jQuery: '#parent') children first animate opacity: 0; duration: 1 second; onComplete: ( (html jQuery: '#parent') empty, (html jQuery: '#hiddenComponent') appendTo: (html jQuery: '#parent'); fadeIn: 1 second ) );		value: 'Move hidden component and show it'.			html break.		html button		bePush;		" this one just inserts some pre-rendered content "		onClick: ( (html jQuery: '#parent') children first fadeOut: 1 second callback: ( (html jQuery: '#parent') html: [ :r | r paragraph: 'blah blah' ] ) );		value: 'Replace component with static content'.
Instance  > updateRoot: html	super updateRoot: html.	html title: 'Fade out child component in parent with a different child.'.	html javascript url: 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'.
=======WAComponent  > ChildA=======Instance  > renderContentOn: html	html paragraph: 'Child A'.
======WAComponent > ChildB======Instance  > renderContentOn: html	html paragraph: 'Child B'.
RSFrom: watchlala at hotmail.com
To: seaside at lists.squeakfoundation.org
Subject: RE: [Seaside] A welcome; and chaining jQuery events
Date: Tue, 15 Oct 2013 13:34:19 -0600

You should be able to cascade an #onComplete block to the JQAnimate object. I have a bunch of code at home I can send you later, but it should look something like this:

(html jQuery: id) fadeOut: 0.5; onComplete: (html jQuery: id) ....

Check out the examples as well: http://demo.seaside.st/javascript/jquery/animations

RS

> From: wojtekk at kofeina.net
> Date: Tue, 15 Oct 2013 16:46:00 +0200
> Subject: Re: [Seaside] A welcome; and chaining jQuery events
> To: seaside at lists.squeakfoundation.org
> 
> Hi,
> this is obvious, isn't it? Now how to do this not leaving Smalltalk
> and not introducing literal javascript?
> 
> W.
> 
> On Tue, Oct 15, 2013 at 4:38 PM, Karsten Kusche <karsten at heeg.de> wrote:
> > try the documentation:
> >
> > http://api.jquery.com/fadeout/ there's an options parameter that you can
> > pass to fadeout. In that dictionary you can specify a done-function.
> >
> > Kind Regards
> > Karsten
> >
> > --
> > Karsten Kusche - Dipl. Inf. (FH) - karsten at heeg.de
> > Georg Heeg eK - Köthen
> > Handelsregister: Amtsgericht Dortmund A 12812
> >
> > Am Dienstag, 15. Oktober 2013 um 16:04 schrieb Wojciech Kaczmarek:
> >
> > Hello,
> >
> > I'd like to welcome everyone on this list. I was playing with Seaside
> > many years ago and I'm very glad to see it not only survived but being
> > still active and evolving :)
> >
> > Now I'm trying to get my head around the idea of interactive web
> > components I always wanted to have in a library. Looks like with some
> > creativity and discipline Seaside may be the platform it's possible to
> > have such thing on.
> >
> > I am experimenting now with giving the components visual behavior via
> > jquery effects. Say I want to: fade out some dom element, then replace
> > it with another and fade in this new one. My tries now boil down to a
> > very specific question:
> >
> > How to properly chain jQuery effects?
> >
> > If I do something like:
> >
> > html fooElement
> > id: id;
> > onClick: (html jQuery ajax script: [ :s |
> > s << (s jQuery: id) fadeOut: 2 seconds.
> > s << (s jQuery: id) parent html: OtherFoo new.
> > ]
> >
> > then the fade-out action will be fired -- meaning: started, but then
> > the dom replacement will be also fired right-away, effectively
> > replacing the element being faded out.
> > I need a method for chaining actions - not only pre-existing effects
> > but also dom manipulation, and, ideally, any javascript, so that one
> > is starting upon completion of another.
> > I realize it'd require to have some Seaside API over what goes into js
> > complete() callback handlers - is there anything like this, possibly
> > undocumented?
> >
> >
> > cheers,
> >
> > Wojtek
> _______________________________________________
> seaside mailing list
> seaside at lists.squeakfoundation.org
> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

_______________________________________________
seaside mailing list
seaside at lists.squeakfoundation.org
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.squeakfoundation.org/pipermail/seaside/attachments/20131015/d694726c/attachment.htm