Smalltalk › Frameworks & Tools › Seaside › Seaside General

A welcome; and chaining jQuery events

‹ Previous Topic Next Topic ›
 
classic Classic list List threaded Threaded
♦
♦
 8 messages Options
wojtekk
Reply | Threaded
Open this post in threaded view
♦
♦
|

A welcome; and chaining jQuery events

wojtekk
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
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Karsten Kusche
Reply | Threaded
Open this post in threaded view
♦
♦
|

Re: A welcome; and chaining jQuery events

Karsten Kusche
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) - [hidden email]
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 mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
wojtekk
Reply | Threaded
Open this post in threaded view
♦
♦
|

Re: A welcome; and chaining jQuery events

wojtekk
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 <[hidden email]> 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) - [hidden email]
> 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
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
sebastianconcept@gmail.co
Reply | Threaded
Open this post in threaded view
♦
♦
|

Re: A welcome; and chaining jQuery events

sebastianconcept@gmail.co
In reply to this post by wojtekk
Hi W,

scriptacuous has #onAfterFinish: aFunction

jquery #onComplete:

have fun

PD: this is real code from somewhere in the airflowing's guts :D

(html scriptaculous effect
                                id: self custom id;
                                duration: 0.35;
                                onAfterFinish: (JSFunction new
                                                                add: (html scriptaculous effect
                                                                                id: self standard id;
                                                                                duration: 0.35;
                                                                                appear);
                                                                add: (html scriptaculous effect
                                                                                id: self standard id;
                                                                                duration: 0.5;
                                                                                blindDown);
                                                                yourself)





On Oct 15, 2013, at 11:04 AM, Wojciech Kaczmarek <[hidden email]> wrote:

> 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
> [hidden email]
> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Robert Sirois
Reply | Threaded
Open this post in threaded view
♦
♦
|

RE: A welcome; and chaining jQuery events

Robert Sirois
In reply to this post by wojtekk
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: [hidden email]

> Date: Tue, 15 Oct 2013 16:46:00 +0200
> Subject: Re: [Seaside] A welcome; and chaining jQuery events
> To: [hidden email]
>
> 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 <[hidden email]> 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) - [hidden email]
> > 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
> [hidden email]
> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Robert Sirois
Reply | Threaded
Open this post in threaded view
♦
♦
|

RE: A welcome; and chaining jQuery events

Robert Sirois
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'.

RS
From: [hidden email]
To: [hidden email]
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: [hidden email]

> Date: Tue, 15 Oct 2013 16:46:00 +0200
> Subject: Re: [Seaside] A welcome; and chaining jQuery events
> To: [hidden email]
>
> 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 <[hidden email]> 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) - [hidden email]
> > 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
> [hidden email]
> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

_______________________________________________ seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
wojtekk
Reply | Threaded
Open this post in threaded view
♦
♦
|

Re: A welcome; and chaining jQuery events

wojtekk
Robert, Sebastian: thanks for the examples! :))

They certainly helped - the jQuery code works for me now as a
combination of  Robert's second example and dom mutation via
replaceWith:.

Scriptaculous is also very clean, I'd be glad to put my hands on it
more one day.

Speaking of JQuery version, I noticed before in the browser there is
onComplete: message which expects JSFunction or something which can be
turned into one - and that was a little stopper for me at that time.
Good that by code examples one can have another deeper insight on how
the whole library works. This is wonderful!


Sebastian: cool to see you here. It reminds me that I blindly
suspended talks with you on the tech & business stuff - I still plan
to get to you back privately :)

cheers,
Wojtek
_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Johan Brichau-2
Reply | Threaded
Open this post in threaded view
♦
♦
|

Re: A welcome; and chaining jQuery events

Johan Brichau-2

On 17 Oct 2013, at 11:34, Wojciech Kaczmarek <[hidden email]> wrote:

> Scriptaculous is also very clean, I'd be glad to put my hands on it
> more one day.

I would not use it anymore. It has not been maintained since 2010 and you can do everything with JQuery instead.


Johan_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Free forum by Nabble Edit this page