JQDroppable convience method

Hi,

While working with JQuery's draggable/droppable plugins in Seaside, I  
was missing the convenient "passenger callbacks" that Scriptaculous  
had. Therefore I added the following convenience method to  
JQDroppable. You can pass it a block that will be invoked with the  
passenger of the draggable that was dropped onto it.

Would it make sense to add it to the plugin's distributed version?
And if I am making things overly complicated, that would be glad to  
know as well ;-)

cheers,

onDropCallback: aBlock
        self onDrop:
                (((JQueryClass context: self renderContext) ajax
                                callback: [:value | aBlock value: (self renderContext callbacks  
passengerAt: value)]
                                value: (JSStream on: '$(ui.draggable).get(0).id'))
                        asFunction: #(event ui))

----------------------------
Johan Brichau
[hidden email]




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

I typically do something along the lines of:

    ... onDrop: (html jQuery ajax
       tigger: [ :object | ... ] passengers: html jQuery this)

The method #trigger:passengers: takes a block that is evaluated with a
collection of passengers from the query passed in as the second
argument.

Lukas

2009/10/27 Johan Brichau <[hidden email]>:


--
Lukas Renggli
http://www.lukas-renggli.ch
_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

Hi Lukas,

That's right but $(this) is bound to the droppable, while it's often  
convenient to get the object that was dragged onto it (the draggable).
Using the trigger:passengers: approach, it seems impossible to me to  
get to the draggable.

Or am I missing something?

On 27 Oct 2009, at 23:31, Lukas Renggli wrote:

----------------------------
Johan Brichau
[hidden email]




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

> That's right but $(this) is bound to the droppable, while it's often
> convenient to get the object that was dragged onto it (the draggable).
> Using the trigger:passengers: approach, it seems impossible to me to get to
> the draggable.
>
> Or am I missing something?

No, this is jQuery that is missing something ;-)

Currently there is almost no support to get the parameters from events
back into the image. I will add some helper methods to JQAjax to make
this simpler. I am not particularly fond of adding something like
#onDropCallback: because this hardcodes an AJAX request and does not
give the user the possibility to define additional AJAX actions,
render something, change something, etc.

Lukas

--
Lukas Renggli
http://www.lukas-renggli.ch
_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

I've quickly added some convenience methods to JQAjax that serialize
the information of the jQueryUI events:

     #callbackAccordion:
     #callbackDraggable:
     #callbackDroppable:
     #callbackResizable:
     #callbackSlider:
     #callbackSortable:
     #callbackTabs:

All these callbacks expect a block with one argument that gets
evaluated with a dictionary of the event elements as documented in the
jQueryUI documentation.

Johan, your code would now look like this:

    ... onDrop: (html ajax
        callbackDroppable: [ :event |
            (event at: #draggable) doSomething ])

Note that I also renamed #trigger:passengers: to
#callback:passengers:, that fits better the jQuery protocol.

Let me know if this is useful or if there is something else missing.
This is mostly untested functionality so expect to encounter bugs.

Cheers,
Lukas






2009/10/28 Lukas Renggli <[hidden email]>:


--
Lukas Renggli
http://www.lukas-renggli.ch
_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

On 28 Oct 2009, at 13:03, Lukas Renggli wrote:

> Johan, your code would now look like this:
>
>    ... onDrop: (html ajax
>        callbackDroppable: [ :event |
>            (event at: #draggable) doSomething ])

That is indeed very nice. Thanks Lukas!

> Note that I also renamed #trigger:passengers: to
> #callback:passengers:, that fits better the jQuery protocol.

yes, indeed.

> Let me know if this is useful or if there is something else missing.
> This is mostly untested functionality so expect to encounter bugs.

will do ;-)

----------------------------
Johan Brichau
[hidden email]




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

Hi, when I try this out in the functional tests
http://localhost:8090/tests/jquery-ui/droppableinteraction

I get the draggable is nil:-

renderContentOn: html
        #(#blue #red #green) do:
                        [ :each |
                        (html div)
                                class: 'box';
                                class: each;
                                script: (html jQuery new draggable revert: true) ].
        html div class: 'clear'.
        (html div)
                class: 'drop';
                class: 'brown';
                script:
                                ((html jQuery new droppable)
                                                accept: 'div';
                                                hoverClass: 'drop-hover';
                                                activeClass: 'drop-active';
                                                onDrop:
                                                                (html jQuery ajax callbackDroppable:
                                                                                        [ :event |
                                                                                Transcript cr;
                                                                                                show: (event at: #draggable) asString ]))

(nb if i put ...onDrop: (html ajax callbackDroppable: ... as in your example I get MessageNotUnderstood: WARenderCanvas>>ajax)

Any pointers as to where I'm going wrong please? Johan do you have the snippet that works in your context?

Thanks,   ...Stan

Johan Brichau wrote

On 28 Oct 2009, at 13:03, Lukas Renggli wrote:

> Johan, your code would now look like this:
>
>    ... onDrop: (html ajax
>        callbackDroppable: [ :event |
>            (event at: #draggable) doSomething ])

That is indeed very nice. Thanks Lukas!

> Note that I also renamed #trigger:passengers: to
> #callback:passengers:, that fits better the jQuery protocol.

yes, indeed.

> Let me know if this is useful or if there is something else missing.
> This is mostly untested functionality so expect to encounter bugs.

will do ;-)

----------------------------
Johan Brichau
johan.brichau@uclouvain.be




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

On 07 Dec 2009, at 18:54, Stan Shepherd wrote:

> Hi, when I try this out in the functional tests
> http://localhost:8090/tests/jquery-ui/droppableinteraction
>
> I get the draggable is nil:-

Hi Stan,

That sounds as if the the draggable does not have a passenger declared.
Off the top of my head, I think you need to add the following line (inserted below).

> renderContentOn: html
> #(#blue #red #green) do:
> [ :each |
> (html div)
                                   passenger: each;
> (nb if i put ...onDrop: (html ajax callbackDroppable: ... as in your example
> I get MessageNotUnderstood: WARenderCanvas>>ajax)

I think that's a typo and it should be: html jQuery ajax

----------------------------
Johan Brichau
[hidden email]




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

That's got it; thanks Johan.

Does anyone else experience the coloured boxes in the demo jumping on starting drag?
I'm on Swiftfox 3.5.2 , Ubuntu 9.04.

Same for Firefox 3.5.5 on Xubuntu 9.10

...Stan

Johan Brichau wrote

On 07 Dec 2009, at 18:54, Stan Shepherd wrote:

> Hi, when I try this out in the functional tests
> http://localhost:8090/tests/jquery-ui/droppableinteraction
>
> I get the draggable is nil:-

Hi Stan,

That sounds as if the the draggable does not have a passenger declared.
Off the top of my head, I think you need to add the following line (inserted below).

> renderContentOn: html
> #(#blue #red #green) do:
> [ :each |
> (html div)
                                   passenger: each;
> class: 'box';
> class: each;
> script: (html jQuery new draggable revert: true) ].
> html div class: 'clear'.
> (html div)
> class: 'drop';
> class: 'brown';
> script:
> ((html jQuery new droppable)
> accept: 'div';
> hoverClass: 'drop-hover';
> activeClass: 'drop-active';
> onDrop:
> (html jQuery ajax callbackDroppable:
> [ :event |
>                                                                                
> Transcript cr;
> show: (event at: #draggable) asString ]))
>

> (nb if i put ...onDrop: (html ajax callbackDroppable: ... as in your example
> I get MessageNotUnderstood: WARenderCanvas>>ajax)

I think that's a typo and it should be: html jQuery ajax

----------------------------
Johan Brichau
johan.brichau@uclouvain.be




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