[Seaside] Re: Problem with Scriptaculous

[Lukas Renggli]

> I am trying to get a clickable map type effect
> using scriptaculous. I have a graph rendered
> by GraphViz, I need scriptaculous to tell me the
> click co-ordinates so that I can work out what in
> the graph was clicked upon.
>
> It wouldn't be the first time that I didnt know what
> I was doing, but I wondered if you could look at
> this code for me.
>
> The containing div id is 'workflow'.
> The problem is that callback "B" works, and callback
> "A" doesnt. If I swap them around only the second
> one works. Is this to be expected?

I tried to reproduce the problem, but it works for me (see my
file-out). My code evaluates all 4 callbacks correctly and I get the
two co-ordinates displayed. I had to refactor your code a bit as it
was missing some pieces, so maybe the problem is hidden there.

Two comments:

1. The offset co-ordinates you get are probably not those you expect.
offsetTop and offsetLeft answer the offset [1] up to the next absolute
or relative positioned div, generally not those relative to the upper
left corner of the document. In you case you probably need to use
something like cumulativeOffset [2]. It also depends on your styles of
course, so I don't know if that is a problem in your case.

[1] http://developer.mozilla.org/en/docs/DOM:element.offsetLeft
[2] http://prototypejs.org/api/position/cumulativeoffset

2. You can improve the performance of your example by combining the
two #updater together. The first of your #updater is not really an
#updater, it does not update anything. The #requestor would do here as
well. I suggest to combine them to something like:

    html updater
         id: 'co-ordinates';
         callback: [ :v | ... ] value: ...;
         callback: [ :v | ... ] value: ...;
         callback: [ :v | ... ] value: ...;
         callback: [ :v | ... ] value: ...;
         on: #renderCoordinatesOn: of: self

Cheers,
Lukas

>renderImageOn: html
>  | offsetX offsetY |
>
>   offsetX := ValueHolder new.
>   offsetY := ValueHolder new.
>   self generateGraphForm.
>   html image
>       id: 'workflow-image';
>       onClick: (html updater
>  "A"         callback: [ :v | offsetY contents: v asNumber ] value: (((SUElement on: html) id: 'workflow') property:'offsetTop');
>  "B"         callback: [ :v | offsetX contents: v asNumber ] value: (((SUElement on: html) id: 'workflow') property:'offsetLeft');
>           callback: [ :v | graphFormClickX := v asNumber - offsetX contents ] value: SUEvent new x;
>           callback: [ :v | graphFormClickY := v asNumber - offsetY contents ] value: SUEvent new y);
>       onClick: (html updater id: 'co-ordinates'; on: #renderCoordinatesOn: of: self );
>       form: graphForm "; height: (form height // self scaleDownFactor); width: (form width // self scaleDownFactor)"
>       "] "

-- 
Lukas Renggli
http://www.lukas-renggli.ch