As far as i understood the docs bindAsEventListener only gives the
event object as first argument to the function. Event.observe already
does that by itself.
observe( el, event, function(event){ ... } );
I didnt state "event" in the anonymous function because we don't use
it. We just call an object function, so what we do need is the current
class object and all variables (and our randomID). Thats why i used
"bind" which does exactly that: "Provides a guaranteed-binding
equivalent of the original function"
observe( el, event, function(){ ... }.bind(this) );
If we would need the event + the class object we could do it like this:
observe( el, event, function(event){ }.bind(this) );
How i get it, bindAsEventListener only doubles it, because with
Event.observe we already have (if we want) the event object as first
argument. I just did here an indirect call, which gives me more
flexibility:
observe( el, event, function(event){
this.hide_overlay()
this.close_dialog()
this.status = 'closed';
this.lastEvent = event;
...
}.bind(this) );
If we would call the close_dialog function directly and we don't know
what arguments to come but we need the event object,
bindAsEventListener could come handy since it guarantees that the
event object will be the first argument of the function to call.
close_dialog: function(e) { //do something with e
Event.element(e).up(1).remove()
// do more with "arguments"
}
Either way .. it both does the trick. But you should note, since we
created our own dynamic reference by creating a random ID we already
know the event source (it is stored in the Class). That's why i went
the other way.
Happy coding.
On 3/24/07, David Dashifen Kees <[EMAIL PROTECTED]> wrote:
>
> That's pretty much exactly where I'm moving to. I'm starting from someone
> else's code who replaced the content of div#dialog repeatedly with different
> content, hiding and showing it multiple times. But, I wanted to try and
> encapsulate the dialog into the class itself, I just haven't quite gotten
> all the way there. I think your help below will get me on my way.
>
> Now here's a question for you: why did you bind the anonymous function
> which calls close_dialog() rather than bind close_dialog() as an event
> listener on deactivating objects?
>
> -- Dash --
>
>
> Kjell Bublitz wrote:
> Yes, thats true. It is more straight forward, but you could also use
> bind() for it.
>
> Assuming you want to create a new dialog like so: new Dialog(..), it
> makes sense to create a random ID for each dialog. I think a class is
> ment to handle multiple instances of something. Since you are
> currently using a static ID "dialog" you can never handle more then
> one dialog. If you want to achive this, a internal close method is the
> way to do it. But then you would have to create all elements with the
> Template class on demand, rather then having them sitting empty in the
> DOM all the time.
>
> initialize: function() {
> this.randomID = 'dialog'+ Math.floor(Math.random()*6000)
> }
> showDialog: function(xhr) {
> var dialogObj = {randomID: this.randomID, content: xhr.responseText};
>
> new Insertion.after('overlay', new Template('<div
> id="#{randomID}"
> class="dialog">#{content}</div>').evaluate(dialogObj)
> );
>
> // After this its available and you can use $(randomID) to bind
> your events along.
> $(this.randomID).getElementsBySelector("[action=deactivate]").each(function(e){
> e.observe('click', function(){ this.closeDialog() }.bind(this) )
> });
> }
>
> And closeDialog could look like this:
>
> closeDialog: function() {
> if($('overlay').visible()) { // overlay is always present.
> $('overlay').hide() // we just hide and show on demand next time.
> }
> $(this.randomID).remove(); // generic, so we remove it
> }
>
> I hope this helps.. Of course this would need you to rewrite the whole
> class (use Ajax.Request over Update), but thats the way i would do it,
> and your internal close function would serve some purpose since it
> uses the value of the instance that you create for each Dialog.
>
>
> On 3/24/07, David Dashifen Kees <[EMAIL PROTECTED]> wrote:
>
>
> Interesting. I like it. I was more focused on trying to get the the
> deactivating elements to call a method of the dialog object, but then the
> dialog method would probably only end up performing the same actions as you
> described. Thanks!
> -- Dash --
>
>
> Kjell Bublitz wrote:
> On 3/24/07, David Dashifen Kees <[EMAIL PROTECTED]> wrote:
>
>
> So, one of the things I've always wanted to do was expand upon the
> simplicity of the Lightbox Gone Wild! object that the coders at
> www.particletree.com put together months ago. I used it on an
> application I wrote to organize my own picture albums on my localhost
> web server, but I had to hack it apart to get it to do the things I
> wanted it to do. I looked at the Prototype Window class, thick box,
> grey box, etc. and all of them didn't seem to be quite what I was
> looking for. So, this afternoon I decided to try and write one myself.
> I've gotten about 95% of the way completed (at least for the first go)
> but I can't get the dialog, after it is shown, to disappear.
>
> Here's a pastie: http://pastie.caboo.se/49182
> Here's a demo: http://www.dashifen.com/.temp/
>
> You can see at line #19 within the pastie that I'm trying to get
> anything within the newly loaded div#dialog element which an action
> attribute equal to "deactivate" and then capture click events to close
> the dialog. If I change line #20 to include an anonymous function
> (element.observe("click", function() { alert("hello world"); }); for
> example), the anonymous function works fine. I suspect I'm still hazy
> on the exact usage (and purpose) of the bindAsEventListener() method of
> the Function object.
>
> Anyone got any ideas about how to get the darned things to close when
> they're opened?
>
> $("dialog").getElementsBySelector("[action=deactivate]").each(function(e){
> e.observe('click', function(){
> $("dialog").remove(); $('overlay').remove()
> })
> });
>
>
>
>
> Also, for what it's worth, I'm not even worrying about anything other
> than Firefox at this point. The first step is to get it working. I'll
> worry about getting working in other browsers as phase 2!! Also, FYI,
> I'm using prototype.js version 1.5.1 release candidate 2.
>
> Thanks All,
> -- Dash --
>
>
>
>
>
> >
>
>
>
>
>
> >
>
--
Regards, Kjell
www.m3nt0r.de
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "Ruby
on Rails: Spinoffs" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
